"use client";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import {
  Camera,
  Clapperboard,
  LayoutDashboard,
  Radio,
  Settings,
  User,
  CalendarDays,
  LogOut,
  Menu,
} from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/basic";
import { logout } from "@/lib/auth";
import { ThemeSwitcher } from "@/components/common/ThemeSwitcher";
const nav = [
  ["/dashboard", "Dashboard", LayoutDashboard],
  ["/live", "Live View", Radio],
  ["/events", "Events", CalendarDays],
  ["/clips", "Clips", Clapperboard],
  ["/cameras", "Cameras", Camera],
  ["/settings", "Settings", Settings],
  ["/profile", "Profile", User],
] as const;
export function AppShell({ children }: { children: React.ReactNode }) {
  const path = usePathname();
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const links = (
    <nav className="space-y-1">
      {nav.map(([href, label, Icon]) => (
        <Link
          key={href}
          href={href}
          className={`flex items-center gap-3 rounded-xl px-3 py-2 text-sm ${path.startsWith(href) ? "bg-white text-zinc-950" : "text-zinc-400 hover:bg-white/10 hover:text-white"}`}
        >
          <Icon className="h-4 w-4" />
          {label}
        </Link>
      ))}
    </nav>
  );
  return (
    <div className="min-h-screen md:grid md:grid-cols-[260px_1fr]">
      <aside className="hidden border-r border-white/10 bg-black/30 p-4 md:block">
        <div className="mb-8 text-xl font-bold">AI-NVR</div>
        {links}
      </aside>
      <div>
        <header className="sticky top-0 z-10 flex items-center justify-between border-b border-white/10 bg-zinc-950/80 p-4 backdrop-blur">
          <Button className="md:hidden" onClick={() => setOpen(!open)}>
            <Menu />
          </Button>
          <span className="text-sm text-zinc-400">
            Production Security Console
          </span>
          <div className="flex gap-2">
            <ThemeSwitcher />
            <Button
              className="bg-zinc-800 text-white"
              onClick={() => {
                logout();
                router.push("/login");
              }}
            >
              <LogOut className="h-4 w-4" />
            </Button>
          </div>
        </header>
        {open && (
          <div className="border-b border-white/10 p-4 md:hidden">{links}</div>
        )}
        <main className="p-4 md:p-8">{children}</main>
      </div>
    </div>
  );
}