"use client";
import * as React from "react";
import { usePathname, useRouter } from "next/navigation";
import { PanelLeft } from "lucide-react";
import { useApp } from "./store";
import { Sidebar } from "./sidebar";
import { CommandPalette } from "./command-palette";
import { BottomNav } from "./bottom-nav";
import { Button } from "@/components/ui/button";
import { useIsMobile, useKeyboardInset, useLocalStorage, usePrefersReducedMotion, useSwipe } from "@/lib/client/hooks";
import { cn } from "@/lib/utils";

const LS_COLLAPSED = "polyllm:sidebar-collapsed";

/**
 * Application shell.
 *
 * Desktop (≥ md): persistent left sidebar (collapsible, ⌘B) + content.
 * Phone: full-viewport content (`.h-app` tracks the keyboard), a slide-over conversation drawer
 *        (edge-swipe to open, swipe left / tap scrim to close) and a persistent bottom navigation.
 */
export function AppShell({ children }: { children: React.ReactNode }) {
  const { sidebarOpen, setSidebarOpen, setPaletteOpen, paletteOpen } = useApp();
  const [collapsed, setCollapsed] = useLocalStorage<boolean>(LS_COLLAPSED, false);
  const router = useRouter();
  const pathname = usePathname();
  const isMobile = useIsMobile();
  useKeyboardInset();

  // Close the drawer on navigation.
  React.useEffect(() => {
    setSidebarOpen(false);
  }, [pathname, setSidebarOpen]);

  const toggleCollapsed = React.useCallback(() => setCollapsed((c) => !c), [setCollapsed]);

  // Global shortcuts
  React.useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      const mod = e.metaKey || e.ctrlKey;
      const target = e.target as HTMLElement | null;
      const typing = target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable);
      if (mod && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setPaletteOpen(!paletteOpen);
      } else if (mod && e.key.toLowerCase() === "n" && !e.shiftKey) {
        e.preventDefault();
        router.push("/app/chat");
      } else if (mod && e.key === "b") {
        e.preventDefault();
        toggleCollapsed();
      } else if (!mod && !typing && e.key === "?" ) {
        e.preventDefault();
        setPaletteOpen(true);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [paletteOpen, router, setPaletteOpen, toggleCollapsed]);

  // Edge swipe (from the left 24px) opens the drawer on phones.
  const contentRef = React.useRef<HTMLDivElement>(null);
  const openDrawer = React.useCallback(() => setSidebarOpen(true), [setSidebarOpen]);
  useSwipe(contentRef, { onSwipeRight: openDrawer, edge: 28, disabled: !isMobile || sidebarOpen, ignoreSelector: ".snap-row, [data-no-edge-swipe]" });

  // Hide the bottom nav on full-screen surfaces (e.g. share preview) via a data attribute set by pages.
  const showBottomNav = isMobile && !pathname.startsWith("/app/onboarding");

  return (
    <div className="flex h-app 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-subtle transition-[width] duration-200 ease-out", collapsed ? "w-0 overflow-hidden border-r-0" : "w-[276px]")}>
        <Sidebar onCollapse={toggleCollapsed} />
      </aside>

      {/* Mobile drawer */}
      <MobileDrawer open={sidebarOpen && isMobile} onClose={() => setSidebarOpen(false)} />

      <div ref={contentRef} className={cn("relative flex min-w-0 flex-1 flex-col", showBottomNav && "pb-[calc(var(--bottom-nav-h)+var(--sab))] [html[data-keyboard]_&]:pb-0")}>
        {collapsed ? (
          <Button variant="ghost" size="icon-sm" className="absolute left-2 top-2 z-20 hidden md:inline-flex" onClick={toggleCollapsed} aria-label="Show sidebar">
            <PanelLeft />
          </Button>
        ) : null}
        {children}
      </div>

      {showBottomNav ? <BottomNav /> : null}
      <CommandPalette />
    </div>
  );
}

function MobileDrawer({ open, onClose }: { open: boolean; onClose: () => void }) {
  const reduced = usePrefersReducedMotion();
  const [render, setRender] = React.useState(open);
  const [closing, setClosing] = React.useState(false);
  const panelRef = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    if (open) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setRender(true);
      setClosing(false);
    } else if (render) {
      setClosing(true);
      const t = setTimeout(() => {
        setRender(false);
        setClosing(false);
      }, reduced ? 0 : 200);
      return () => clearTimeout(t);
    }
  }, [open, render, reduced]);

  useSwipe(panelRef, { onSwipeLeft: onClose, disabled: !open });

  // Lock body scroll and close on Escape while open.
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!render) return null;
  return (
    <div className="fixed inset-0 z-40 md:hidden" role="dialog" aria-modal="true" aria-label="Conversations">
      <div className={cn("absolute inset-0 bg-black/45 backdrop-blur-[2px]", closing ? "animate-fade-out" : "animate-fade-in")} onClick={onClose} />
      <div ref={panelRef} className={cn("absolute inset-y-0 left-0 flex w-[min(86vw,340px)] flex-col bg-bg-subtle shadow-lg pt-[var(--sat)] pb-[var(--sab)]", closing ? "animate-drawer-out" : "animate-drawer-in")}>
        <Sidebar onCollapse={onClose} mobile />
      </div>
    </div>
  );
}