"use client";

import * as React from "react";
import { Sidebar } from "@/components/sidebar/sidebar";
import { useUIStore } from "@/lib/stores/ui-store";
import { useRouter } from "next/navigation";
import { useShortcut } from "@/hooks/use-keyboard";
import { cn } from "@/lib/utils";

export function AppShell({ children }: { children: React.ReactNode }) {
  const sidebarOpen = useUIStore((s) => s.sidebarOpen);
  const toggleSidebar = useUIStore((s) => s.toggleSidebar);
  const router = useRouter();

  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => {
    useUIStore.persist.rehydrate();
    setMounted(true);
  }, []);

  // During SSR + first client paint, use deterministic state so React can
  // hydrate without mismatches. Real persisted state kicks in after mount.
  const isOpen = mounted ? sidebarOpen : true;

  useShortcut("mod+b", (e) => {
    e.preventDefault();
    toggleSidebar();
  });
  useShortcut("mod+k", (e) => {
    e.preventDefault();
    router.push("/chat");
  });
  useShortcut("mod+shift+k", (e) => {
    e.preventDefault();
    router.push("/chat/temp");
  });

  return (
    <div className="flex h-screen w-screen overflow-hidden bg-background">
      <aside
        className={cn(
          "h-full shrink-0 border-r border-border bg-sidebar transition-[width] duration-200 ease-out",
          isOpen ? "w-72" : "w-0",
        )}
      >
        <div className={cn("h-full w-72", !isOpen && "hidden")}>
          {mounted ? <Sidebar /> : null}
        </div>
      </aside>
      <main className="flex h-full min-w-0 flex-1 flex-col">{children}</main>
    </div>
  );
}