"use client";
import { useEffect, useState, createContext, useContext, type ReactNode } from "react";
import { useRouter, usePathname } from "next/navigation";
import { Menu, PanelLeft } from "lucide-react";
import { Sidebar } from "./sidebar";
import { CommandPalette } from "./command-palette";
import { usePrefs, setPrefs, applyTheme } from "@/lib/client/prefs";
import { resetDraft } from "@/lib/client/use-chat";
import { cn } from "./ui";
import { Logo } from "./logo";

const ShellCtx = createContext<{ openPalette: () => void; openDrawer: () => void }>({ openPalette: () => {}, openDrawer: () => {} });
export const useShell = () => useContext(ShellCtx);

export function AppShell({ children }: { children: ReactNode }) {
  const prefs = usePrefs(); const router = useRouter(); const pathname = usePathname();
  const [drawer, setDrawer] = useState(false); const [palette, setPalette] = useState(false);
  useEffect(() => { applyTheme(prefs.theme); }, [prefs.theme]);
  useEffect(() => { document.documentElement.dataset.fontsize = prefs.fontSize; }, [prefs.fontSize]);
  useEffect(() => { setDrawer(false); }, [pathname]);
  useEffect(() => { if ("serviceWorker" in navigator && process.env.NODE_ENV === "production") navigator.serviceWorker.register("/sw.js").catch(() => {}); }, []);
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      const mod = e.metaKey || e.ctrlKey;
      if (mod && e.key.toLowerCase() === "k") { e.preventDefault(); setPalette(p => !p); }
      else if (mod && e.shiftKey && e.key.toLowerCase() === "o") { e.preventDefault(); resetDraft(); router.push("/"); }
      else if (mod && e.key === "\\") { e.preventDefault(); setPrefs({ sidebarCollapsed: !prefs.sidebarCollapsed }); }
    };
    window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey);
  }, [prefs.sidebarCollapsed, router]);
  const collapsed = prefs.sidebarCollapsed;
  return (
    <ShellCtx.Provider value={{ openPalette: () => setPalette(true), openDrawer: () => setDrawer(true) }}>
      <div className="flex h-dvh w-full overflow-hidden bg-bg">
        {/* desktop sidebar */}
        <aside className={cn("hidden md:flex h-full shrink-0 flex-col border-r border-border bg-bg-elev transition-[width] duration-200", collapsed ? "w-0 overflow-hidden border-r-0" : "w-[var(--sidebar-w)]")}>
          <Sidebar onOpenPalette={() => setPalette(true)} />
        </aside>
        {/* mobile drawer */}
        {drawer && <div className="fixed inset-0 z-40 md:hidden" onClick={() => setDrawer(false)}><div className="absolute inset-0 bg-black/60" /><aside onClick={e => e.stopPropagation()} className="absolute inset-y-0 left-0 w-[86vw] max-w-[320px] anim-fade-up bg-bg-elev shadow-soft safe-t"><Sidebar onOpenPalette={() => { setDrawer(false); setPalette(true); }} onNavigate={() => setDrawer(false)} /></aside></div>}
        <div className="relative flex min-w-0 flex-1 flex-col">
          {/* top bar (mobile + collapsed) */}
          <header className={cn("flex items-center gap-2 px-2 py-2 md:px-3 safe-t", !collapsed && "md:hidden")}>
            <button className="md:hidden inline-flex h-9 w-9 items-center justify-center rounded-lg hover:bg-surface-2" aria-label="Menu" onClick={() => setDrawer(true)}><Menu className="h-5 w-5" /></button>
            <button className="hidden md:inline-flex h-9 w-9 items-center justify-center rounded-lg text-fg-2 hover:bg-surface-2" aria-label="Afficher le panneau" onClick={() => setPrefs({ sidebarCollapsed: false })}><PanelLeft className="h-4.5 w-4.5" /></button>
            <div className="flex items-center gap-2 md:hidden"><Logo className="h-6 w-6" /><span className="text-sm font-semibold tracking-tight">Chat SPBoucher AI</span></div>
          </header>
          <main className="flex min-h-0 flex-1 flex-col">{children}</main>
        </div>
      </div>
      <CommandPalette open={palette} onClose={() => setPalette(false)} />
    </ShellCtx.Provider>
  );
}