"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Network, NotebookTabs, PanelsTopLeft, ScrollText, Send, Settings2, ShieldEllipsis, UsersRound } from "lucide-react";

import { cn } from "@/lib/utils";

const navItems = [
  { href: "/tasks", label: "Tasks", icon: PanelsTopLeft },
  { href: "/agents", label: "Agents", icon: UsersRound },
  { href: "/openclaw", label: "OpenClaw", icon: ShieldEllipsis },
  { href: "/zeroclaw", label: "ZeroClaw", icon: Send },
  { href: "/dispatch", label: "Dispatch", icon: Send },
  { href: "/architecture", label: "Architecture", icon: Network },
  { href: "/wiki", label: "Wiki", icon: NotebookTabs },
  { href: "/usage", label: "Usage", icon: ScrollText },
  { href: "/gitea", label: "Gitea", icon: Settings2 },
];

export function AppShell({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();

  return (
    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(34,211,238,0.18),_transparent_30%),radial-gradient(circle_at_top_right,_rgba(245,158,11,0.14),_transparent_28%),linear-gradient(180deg,#07111f_0%,#091321_44%,#0f172a_100%)] text-foreground">
      <header className="border-b border-white/10 bg-slate-950/60 backdrop-blur-xl">
        <div className="mx-auto flex w-full max-w-[1760px] items-center justify-between px-6 py-6">
          <div>
            <p className="font-mono text-xs uppercase tracking-[0.3em] text-cyan-300/80">
              OpenClaw Taskboard
            </p>
            <h1 className="mt-1 text-2xl font-semibold tracking-tight text-white">
              Claw Fleet Console
            </h1>
            <p className="mt-1 max-w-2xl text-sm text-slate-300">
              Unified operations view for OpenClaw orchestration, ZeroClaw host runtimes, and deployed architecture.
            </p>
          </div>
        </div>
      </header>

      <div className="mx-auto grid w-full max-w-[1760px] gap-6 px-6 py-8 lg:grid-cols-[240px_minmax(0,1fr)] xl:grid-cols-[252px_minmax(0,1fr)]">
        <nav className="space-y-2 lg:sticky lg:top-8 lg:self-start">
          {navItems.map((item) => {
            const Icon = item.icon;
            const isActive =
              pathname === item.href || (item.href !== "/tasks" && pathname.startsWith(`${item.href}/`));
            return (
              <Link
                className={cn(
                  "flex items-center gap-3 rounded-xl border px-4 py-3 text-sm transition",
                  isActive
                    ? "border-cyan-300/30 bg-cyan-300/10 text-cyan-100 shadow-panel"
                    : "border-white/10 bg-slate-950/35 text-slate-300 hover:border-white/20 hover:bg-white/5 hover:text-white",
                )}
                href={item.href}
                key={item.href}
              >
                <Icon className="h-4 w-4" />
                <span>{item.label}</span>
              </Link>
            );
          })}
        </nav>

        <main className="min-w-0">{children}</main>
      </div>
    </div>
  );
}