"use client";
import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  Activity,
  ArrowLeft,
  Building2,
  ChevronDown,
  CreditCard,
  Flag,
  FolderKanban,
  Globe,
  KeyRound,
  LayoutDashboard,
  ListTree,
  Menu,
  Server,
  ShieldAlert,
  Users,
  Waypoints,
  Wrench,
  X,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { LogoMark } from "@/components/ui/logo";
import { ThemeToggle } from "@/components/ui/theme";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

export const ADMIN_NAV = [
  { href: "/admin", label: "Overview", icon: LayoutDashboard, exact: true },
  { href: "/admin/users", label: "Users", icon: Users },
  { href: "/admin/access", label: "Access", icon: KeyRound },
  { href: "/admin/organizations", label: "Organizations", icon: Building2 },
  { href: "/admin/projects", label: "Projects", icon: FolderKanban },
  { href: "/admin/requests", label: "Requests", icon: ListTree },
  { href: "/admin/usage", label: "Usage", icon: Activity },
  { href: "/admin/providers", label: "Providers", icon: Server },
  { href: "/admin/routing", label: "Routing", icon: Waypoints },
  { href: "/admin/domains", label: "Domains", icon: Globe },
  { href: "/admin/billing", label: "Billing", icon: CreditCard },
  { href: "/admin/abuse", label: "Abuse", icon: ShieldAlert },
  { href: "/admin/system", label: "System", icon: Wrench },
  { href: "/admin/flags", label: "Flags", icon: Flag },
] as const;

function AdminNav({ onNavigate, className }: { onNavigate?: () => void; className?: string }) {
  const pathname = usePathname();
  return (
    <nav className={cn("flex flex-col gap-0.5", className)} aria-label="Admin">
      {ADMIN_NAV.map((item) => {
        const active = "exact" in item && item.exact ? pathname === item.href : pathname === item.href || pathname.startsWith(item.href + "/");
        const Icon = item.icon;
        return (
          <Link
            key={item.href}
            href={item.href}
            onClick={onNavigate}
            aria-current={active ? "page" : undefined}
            className={cn(
              "group flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13.5px] font-medium transition-colors",
              active ? "bg-bg-muted text-fg" : "text-fg-muted hover:bg-bg-subtle hover:text-fg",
            )}
          >
            <Icon className={cn("size-4 shrink-0", active ? "text-fg" : "text-fg-subtle group-hover:text-fg-muted")} aria-hidden />
            {item.label}
          </Link>
        );
      })}
    </nav>
  );
}

export function AdminShell({ children, user }: { children: React.ReactNode; user: { email: string; name: string } }) {
  const pathname = usePathname();
  // The menu is "open for" a given pathname, so it closes itself on navigation without an effect.
  const [openPath, setOpenPath] = React.useState<string | null>(null);
  const open = openPath === pathname;
  const setOpen = (v: boolean | ((prev: boolean) => boolean)) => setOpenPath((prev) => ((typeof v === "function" ? v(prev === pathname) : v) ? pathname : null));
  const current = ADMIN_NAV.find((i) => ("exact" in i && i.exact ? pathname === i.href : pathname === i.href || pathname.startsWith(i.href + "/")));

  return (
    <div className="flex min-h-dvh flex-col bg-bg">
      <header className="sticky top-0 z-30 border-b border-white/10 bg-[#0a0d14] text-[#eef1f6]">
        <div className="flex h-12 items-center gap-3 px-4 sm:px-6">
          <Link href="/admin" className="flex items-center gap-2 rounded-md font-semibold tracking-[-0.03em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40">
            <LogoMark size={20} className="[&_rect]:fill-white [&_path]:stroke-[#0a0d14]" />
            <span className="text-[15px]">Fetcha Admin</span>
          </Link>
          <Badge className="border-transparent bg-[#c93b3b]/25 text-[#ffb4b4] uppercase tracking-wide" dot>
            Internal
          </Badge>
          <span className="hidden text-[12px] text-white/50 md:inline">Upstream provider names and costs are visible here. Never share screenshots externally.</span>
          <div className="ml-auto flex items-center gap-1">
            <Button asChild variant="ghost" size="sm" className="text-white/70 hover:bg-white/10 hover:text-white">
              <Link href="/dashboard">
                <ArrowLeft className="size-3.5" /> Dashboard
              </Link>
            </Button>
            <ThemeToggle className="text-white/70 hover:bg-white/10 hover:text-white" />
            <span className="ml-2 hidden max-w-[220px] truncate text-[12.5px] text-white/60 sm:inline" title={user.email}>
              {user.email}
            </span>
          </div>
        </div>
      </header>

      <div className="flex flex-1">
        <aside className="hidden w-[220px] shrink-0 flex-col border-r border-border bg-bg-subtle/60 lg:flex">
          <div className="sticky top-12 max-h-[calc(100dvh-3rem)] overflow-y-auto px-3 py-4 scrollbar-thin">
            <AdminNav />
          </div>
        </aside>

        <div className="flex min-w-0 flex-1 flex-col">
          <div className="border-b border-border bg-bg-subtle/60 px-4 py-2 lg:hidden">
            <Button variant="outline" size="sm" className="w-full justify-between" onClick={() => setOpen((v) => !v)} aria-expanded={open} aria-controls="admin-mobile-nav">
              <span className="flex items-center gap-2">
                {open ? <X className="size-4" /> : <Menu className="size-4" />}
                {current?.label ?? "Admin"}
              </span>
              <ChevronDown className={cn("size-4 text-fg-subtle transition-transform", open && "rotate-180")} />
            </Button>
            {open ? (
              <div id="admin-mobile-nav" className="mt-2 rounded-md border border-border bg-bg p-2 shadow-sm">
                <AdminNav onNavigate={() => setOpen(false)} />
              </div>
            ) : null}
          </div>
          <main className="flex-1 px-4 py-6 sm:px-6 lg:px-8">
            <div className="mx-auto w-full max-w-[1320px] animate-fade-in">{children}</div>
          </main>
        </div>
      </div>
    </div>
  );
}