"use client";

import { Activity, ArrowUpRight, Database, FileText, Gauge, GitMerge, Hammer, LogOut, Plug, ShieldCheck, Wrench, Zap } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import type { ReactNode } from "react";
import { LogoMark } from "@/components/brand/logo";
import { ThemeToggle } from "@/components/theme";
import { cn } from "@/components/ui/cn";
import { ToastProvider } from "./toast";

export const ADMIN_NAV = [
  { label: "Overview", href: "/admin", icon: Activity, match: (p: string) => p === "/admin" },
  { label: "Connectors", href: "/admin/connectors", icon: Plug, match: (p: string) => p.startsWith("/admin/connectors") },
  { label: "Documents", href: "/admin/documents", icon: FileText, match: (p: string) => p.startsWith("/admin/documents") },
  { label: "Matches", href: "/admin/matches", icon: GitMerge, match: (p: string) => p.startsWith("/admin/matches") },
  { label: "Quality", href: "/admin/quality", icon: ShieldCheck, match: (p: string) => p.startsWith("/admin/quality") },
  { label: "Projects", href: "/admin/projects", icon: Hammer, match: (p: string) => p.startsWith("/admin/projects") },
  { label: "Data gaps", href: "/admin/data-gaps", icon: Gauge, match: (p: string) => p.startsWith("/admin/data-gaps") },
  { label: "Events", href: "/admin/events", icon: Zap, match: (p: string) => p.startsWith("/admin/events") },
  { label: "Dev tool", href: "/admin/devtool", icon: Wrench, match: (p: string) => p.startsWith("/admin/devtool") },
  { label: "Sources", href: "/admin/sources", icon: Database, match: (p: string) => p.startsWith("/admin/sources") },
] as const;

/** Compact operational shell: left rail ≥ md, horizontal tabs below (sticky) on phones. */
export function AdminShell({ children }: { children: ReactNode }) {
  const path = usePathname();
  return (
    <ToastProvider>
      <div className="flex min-h-dvh">
        <aside className="sticky top-0 hidden h-dvh w-[200px] shrink-0 flex-col border-r border-hair bg-surface md:flex">
          <div className="flex h-12 items-center gap-2 border-b border-hair px-3">
            <Link href="/admin" className="flex items-center gap-2 text-ink">
              <LogoMark size={20} />
              <span className="text-[13px] font-semibold tracking-tight">DCI Admin</span>
            </Link>
          </div>
          <nav aria-label="Admin" className="flex-1 overflow-y-auto py-2">
            <ul className="space-y-px px-2">
              {ADMIN_NAV.map((n) => {
                const active = n.match(path);
                const Icon = n.icon;
                return (
                  <li key={n.href}>
                    <Link href={n.href} aria-current={active ? "page" : undefined} className={cn("flex h-9 items-center gap-2.5 rounded-sm px-2 text-[13px]", active ? "bg-surface-2 font-medium text-ink" : "text-ink-2 hover:bg-surface-2 hover:text-ink")}>
                      <Icon className={cn("size-4", active ? "text-accent" : "text-ink-3")} strokeWidth={1.75} />
                      {n.label}
                    </Link>
                  </li>
                );
              })}
            </ul>
          </nav>
          <div className="space-y-1 border-t border-hair p-2">
            <a href="/" className="flex h-9 items-center gap-2 rounded-sm px-2 text-[12.5px] text-ink-2 hover:bg-surface-2 hover:text-ink" target="_blank" rel="noopener">
              <ArrowUpRight className="size-4 text-ink-3" strokeWidth={1.75} /> View site
            </a>
            <div className="flex items-center justify-between px-1">
              <ThemeToggle />
              <form action="/admin/logout" method="post">
                <button type="submit" className="inline-flex h-9 items-center gap-1.5 rounded-sm px-2 text-[12.5px] text-ink-2 hover:bg-surface-2 hover:text-ink">
                  <LogOut className="size-4 text-ink-3" strokeWidth={1.75} /> Log out
                </button>
              </form>
            </div>
          </div>
        </aside>

        <div className="flex min-w-0 flex-1 flex-col">
          <header className="sticky top-0 z-[60] border-b border-hair bg-paper/95 backdrop-blur md:hidden">
            <div className="flex h-12 items-center gap-2 px-3">
              <Link href="/admin" className="flex items-center gap-2 text-ink">
                <LogoMark size={20} />
                <span className="text-[13px] font-semibold tracking-tight">DCI Admin</span>
              </Link>
              <div className="ml-auto flex items-center gap-0.5">
                <ThemeToggle />
                <form action="/admin/logout" method="post">
                  <button type="submit" aria-label="Log out" className="inline-flex size-9 items-center justify-center rounded-sm text-ink-2 hover:bg-surface-2">
                    <LogOut className="size-4" strokeWidth={1.75} />
                  </button>
                </form>
              </div>
            </div>
            <nav aria-label="Admin" className="flex overflow-x-auto border-t border-hair px-2 no-scrollbar">
              {ADMIN_NAV.map((n) => {
                const active = n.match(path);
                return (
                  <Link key={n.href} href={n.href} aria-current={active ? "page" : undefined} className={cn("relative inline-flex h-10 shrink-0 items-center whitespace-nowrap px-2.5 text-[12.5px] font-medium", active ? "text-ink after:absolute after:inset-x-2 after:bottom-0 after:h-[2px] after:bg-ink" : "text-ink-3")}>
                    {n.label}
                  </Link>
                );
              })}
            </nav>
          </header>
          <main id="main" className="min-w-0 flex-1 px-3 pb-10 pt-3 sm:px-5 sm:pt-4 lg:px-6">
            {children}
          </main>
        </div>
      </div>
    </ToastProvider>
  );
}

/** Page title row for admin pages (denser than the public PageHeader). */
export function AdminPageHeader({ title, eyebrow, description, aside, className }: { title: ReactNode; eyebrow?: ReactNode; description?: ReactNode; aside?: ReactNode; className?: string }) {
  return (
    <header className={cn("mb-3 flex flex-col gap-2 sm:mb-4 sm:flex-row sm:items-end sm:justify-between", className)}>
      <div className="min-w-0">
        {eyebrow && <div className="label-caps mb-1">{eyebrow}</div>}
        <h1 className="truncate text-[18px] font-semibold leading-tight tracking-[-0.01em] text-ink sm:text-[20px]">{title}</h1>
        {description && <p className="mt-0.5 text-[12.5px] text-ink-3">{description}</p>}
      </div>
      {aside && <div className="flex shrink-0 flex-wrap items-center gap-2">{aside}</div>}
    </header>
  );
}