"use client";

import { useEffect, useState } from "react";
import { Sidebar, MobileSidebar } from "@/components/layout/sidebar";
import { Header } from "@/components/layout/header";
import { CommandPalette } from "@/components/layout/command-palette";
import { useSession } from "@/features/auth/session";
import { RequireAuth } from "@/features/auth/require-auth";
import { cn } from "@/lib/cn";

const SIDEBAR_COLLAPSED_KEY = "kapitano.sidebar.collapsed";

export function DashboardShell({ children }: { children: React.ReactNode }) {
  const { authenticated, loading } = useSession();
  const [menuOpen, setMenuOpen] = useState(false);
  const [collapsed, setCollapsed] = useState<boolean>(() => {
    if (typeof window === "undefined") return false;
    return localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === "1";
  });

  useEffect(() => {
    try {
      localStorage.setItem(SIDEBAR_COLLAPSED_KEY, collapsed ? "1" : "0");
    } catch {
      // ignore
    }
  }, [collapsed]);

  return (
    <RequireAuth tokenPresent={authenticated} loading={loading}>
      <div className="flex min-h-screen">
        <div className="hidden lg:block">
          <div className="fixed inset-y-0 start-0 z-20">
            <Sidebar collapsed={collapsed} onToggleCollapsed={() => setCollapsed((v) => !v)} />
          </div>
        </div>
        <MobileSidebar open={menuOpen} onClose={() => setMenuOpen(false)} />
        <div className={cn("flex min-w-0 flex-1 flex-col transition-[margin-inline-start] duration-200", collapsed ? "lg:ms-[68px]" : "lg:ms-[260px]")}>
          <Header onMenuClick={() => setMenuOpen(true)} />
          <main className="flex-1 px-4 py-6 sm:px-6 lg:px-8">{children}</main>
        </div>
        <CommandPalette />
      </div>
    </RequireAuth>
  );
}