"use client";

import { useState, type ReactNode } from "react";
import { Menu, X } from "lucide-react";
import { AdminSidebar } from "@/components/features/admin/AdminSidebar";
import { Button } from "@/components/ui/Button";
import { cn } from "@/lib/utils/cn";

interface AdminShellProps {
  userName: string;
  children: ReactNode;
}

export function AdminShell({ userName, children }: AdminShellProps) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div className="flex min-h-screen">
      {sidebarOpen && (
        <button
          type="button"
          aria-label="Close menu"
          className="fixed inset-0 z-40 bg-navy/60 lg:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      <div
        className={cn(
          "fixed inset-y-0 left-0 z-50 transition-transform duration-200 lg:static lg:z-auto lg:translate-x-0",
          sidebarOpen ? "translate-x-0" : "-translate-x-full"
        )}
      >
        <div className="relative h-full">
          <Button
            variant="icon"
            size="icon"
            type="button"
            className="absolute right-2 top-2 z-10 lg:hidden"
            onClick={() => setSidebarOpen(false)}
            aria-label="Close sidebar"
          >
            <X className="h-4 w-4" />
          </Button>
          <AdminSidebar
            userName={userName}
            onNavigate={() => setSidebarOpen(false)}
          />
        </div>
      </div>

      <div className="flex min-w-0 flex-1 flex-col">
        <div className="flex items-center border-b border-border bg-white px-4 py-2 lg:hidden">
          <Button
            variant="icon"
            size="icon"
            type="button"
            onClick={() => setSidebarOpen(true)}
            aria-label="Open menu"
          >
            <Menu className="h-[15px] w-[15px]" />
          </Button>
        </div>
        {children}
      </div>
    </div>
  );
}