"use client";

import { useState, type ReactNode } from "react";
import type { UserRole } from "@/server/models/user.model";
import { Sidebar } from "@/components/layout/sidebar";
import { Topbar } from "@/components/layout/topbar";
import { MobileNav } from "@/components/layout/mobile-nav";
import { useLocale } from "@/components/providers/locale-provider";
import { cn } from "@/lib/utils";

interface AppShellProps {
  children: ReactNode;
  userName?: string | null;
  userEmail?: string | null;
  userRole?: UserRole;
}

export function AppShell({
  children,
  userName,
  userEmail,
  userRole,
}: AppShellProps) {
  const [mobileOpen, setMobileOpen] = useState(false);
  const { dir } = useLocale();

  return (
    <div className="min-h-screen bg-background" dir={dir}>
      <div className="flex min-h-screen">
        <Sidebar
          userRole={userRole}
          mobileOpen={mobileOpen}
          onMobileClose={() => setMobileOpen(false)}
        />
        <div
          className={cn(
            "flex min-w-0 flex-1 flex-col transition-[margin] duration-300",
            "lg:ms-0"
          )}
        >
          <Topbar
            userName={userName}
            userEmail={userEmail}
            userRole={userRole}
            onMenuClick={() => setMobileOpen(true)}
          />
          <main className="flex-1 px-4 py-5 pb-24 md:px-6 md:py-6 lg:pb-6">
            {children}
          </main>
        </div>
      </div>
      <MobileNav onMoreClick={() => setMobileOpen(true)} />
    </div>
  );
}