"use client";

import { useEffect } from "react";
import { motion } from "framer-motion";
import Sidebar from "./Sidebar";
import MobileNav from "./MobileNav";
import MobileTabBar from "./MobileTabBar";
import TopBar from "./TopBar";
import CommandPalette from "./CommandPalette";
import PreferencesModal from "../theme/PreferencesModal";
import AiPanel from "../ai/AiPanel";
import TopLoader from "../ui/TopLoader";
import { ShellProvider, useShell } from "./ShellContext";

interface AppShellProps {
  children: React.ReactNode;
  /** Masquer la barre supérieure (pages qui gèrent leur propre en-tête plein écran) */
  hideTopBar?: boolean;
}

function ShellFrame({ children, hideTopBar }: AppShellProps) {
  const { sidebarCollapsed, toggleSidebar, mobileNavOpen, setMobileNavOpen } = useShell();

  // ⌘B / Ctrl+B : replier la barre latérale
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "b") {
        const t = e.target as HTMLElement | null;
        if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
        e.preventDefault();
        toggleSidebar();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [toggleSidebar]);

  return (
    <div className="h-[100dvh] overflow-hidden bg-canvas flex transition-colors">
      <TopLoader />

      {/* Barre latérale desktop (repliable) */}
      <motion.div
        initial={false}
        animate={{ width: sidebarCollapsed ? 72 : 264 }}
        transition={{ type: "spring", stiffness: 380, damping: 36 }}
        className="hidden lg:flex flex-col shrink-0 h-full overflow-hidden"
      >
        <Sidebar collapsed={sidebarCollapsed} showCollapse />
      </motion.div>

      {/* Tiroir mobile */}
      <MobileNav isOpen={mobileNavOpen} onClose={() => setMobileNavOpen(false)} />

      {/* Colonne principale */}
      <div className="flex-1 flex flex-col min-w-0 h-full overflow-hidden">
        {!hideTopBar && <TopBar />}
        <main className="flex-1 overflow-auto min-h-0 pb-tabbar" id="main">
          {children}
        </main>
      </div>

      <MobileTabBar />
      <CommandPalette />
      <PreferencesModal />
      <AiPanel />
    </div>
  );
}

export default function AppShell(props: AppShellProps) {
  return (
    <ShellProvider>
      <ShellFrame {...props} />
    </ShellProvider>
  );
}