"use client";

import { useState, type ReactNode } from "react";
import { Menu, X } from "lucide-react";
import { AppSidebar } from "@/components/shared/AppSidebar";
import { Button } from "@/components/ui/Button";
import { cn } from "@/lib/utils/cn";
import type { PlanTier } from "@/types";

interface AppShellProps {
  userName: string;
  planTier: PlanTier;
  responseQuotaUsed: number;
  responseQuotaLimit: number;
  children: ReactNode;
}

/** Responsive app layout with collapsible sidebar on mobile. */
export function AppShell({
  userName,
  planTier,
  responseQuotaUsed,
  responseQuotaLimit,
  children,
}: AppShellProps) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

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

      {/* Sidebar — drawer on mobile, sticky fixed column on desktop */}
      <div
        className={cn(
          "fixed inset-y-0 left-0 z-50 flex h-screen shrink-0 flex-col transition-transform duration-200",
          "lg:relative lg:z-auto lg:translate-x-0",
          sidebarOpen ? "translate-x-0" : "-translate-x-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>
        <AppSidebar
          userName={userName}
          planTier={planTier}
          responseQuotaUsed={responseQuotaUsed}
          responseQuotaLimit={responseQuotaLimit}
          onNavigate={() => setSidebarOpen(false)}
        />
      </div>

      {/* Main content — scrolls independently */}
      <div className="flex min-w-0 flex-1 flex-col overflow-y-auto">
        {/* Mobile menu bar */}
        <div className="flex shrink-0 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>
  );
}