"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Activity, Bell, Bookmark, Compass, Eye, Globe2, LayoutGrid, Radar, Search, Siren, X, Zap } from "lucide-react";
import { useState } from "react";
import { Mark } from "./brand";
import { DensityToggle } from "./prefs";
import { ThemeToggle } from "./theme";
import { Kbd } from "./ui";

const NAV = [
  ["/live", "Live"],
  ["/breaking", "Breaking"],
  ["/pulse", "Pulse"],
  ["/radar", "Radar"],
  ["/silent", "Silent"],
  ["/explore", "Explore"],
  ["/entities", "Entities"],
  ["/sources", "Sources"],
  ["/coverage", "Coverage"],
  ["/watchlists", "Watchlists"],
  ["/alerts", "Alerts"],
] as const;

export function Wordmark() {
  return (
    <Link href="/" className="flex items-center gap-2 font-semibold tracking-tight" aria-label="WebSensor home">
      <Mark size={22} className="shrink-0 rounded-[5px]" />
      <span className="text-[15px]">
        Web<span className="text-signal">Sensor</span>
      </span>
    </Link>
  );
}

export function TopNav() {
  const path = usePathname();
  const openPalette = (): void => {
    window.dispatchEvent(new Event("ws:palette"));
  };
  return (
    <header className="sticky top-0 z-40 border-b border-line bg-bg/90 backdrop-blur">
      <div className="mx-auto flex h-12 max-w-[1600px] items-center gap-3 px-3 sm:px-4">
        <Wordmark />
        <nav className="hidden items-center gap-0.5 lg:flex" aria-label="Primary">
          {NAV.map(([href, label]) => {
            const active = href === "/live" ? path === "/" || path.startsWith("/live") : path.startsWith(href);
            return (
              <Link key={href} href={href} aria-current={active ? "page" : undefined} className={`rounded-md px-1.5 py-1 text-[12px] xl:px-2 xl:text-[12.5px] ${active ? "bg-panel-2 text-fg" : "text-fg-muted hover:text-fg"} ${href === "/breaking" && active ? "!text-hot" : href === "/silent" && active ? "!text-silent" : ""}`}>
                {label}
              </Link>
            );
          })}
        </nav>
        <button type="button" onClick={openPalette} className="ml-auto inline-flex h-8 w-40 min-w-0 items-center gap-2 rounded-md border border-line bg-panel px-2 text-[12.5px] text-fg-subtle hover:border-line-strong sm:w-56 lg:w-48 xl:w-72" aria-label="Open search and commands (⌘K)">
          <Search className="size-3.5 shrink-0" />
          <span className="flex-1 truncate text-left">Search entities, events, URLs…</span>
          <span className="hidden sm:inline-flex"><Kbd>⌘K</Kbd></span>
        </button>
        <div className="hidden xl:block"><DensityToggle compact /></div>
        <ThemeToggle />
      </div>
    </header>
  );
}

/** Mobile bottom navigation (spec §95): Live · Breaking · Explore · Watchlists · More (bottom sheet). */
export function MobileNav() {
  const path = usePathname();
  const [moreFor, setMoreFor] = useState<string | null>(null);
  const more = moreFor === path;
  const setMore = (v: boolean): void => setMoreFor(v ? path : null);
  const items = [
    ["/live", "Live", Activity, path === "/" || path.startsWith("/live")],
    ["/breaking", "Breaking", Siren, path.startsWith("/breaking")],
    ["/explore", "Explore", Compass, path.startsWith("/explore")],
    ["/watchlists", "Watch", Eye, path.startsWith("/watchlists")],
  ] as const;
  const moreItems: [string, string, typeof Activity][] = [
    ["/pulse", "Pulse", Zap],
    ["/radar", "Radar", Radar],
    ["/silent", "Silent changes", LayoutGrid],
    ["/entities", "Entities", Globe2],
    ["/sources", "Sources", Globe2],
    ["/coverage", "Coverage", Globe2],
    ["/country", "Countries", Globe2],
    ["/alerts", "Alerts", Bell],
    ["/bookmarks", "Bookmarks", Bookmark],
    ["/health", "Health", Activity],
    ["/api", "API", Zap],
  ];
  return (
    <>
      <nav className="fixed inset-x-0 bottom-0 z-40 grid grid-cols-5 border-t border-line bg-bg/95 backdrop-blur lg:hidden" style={{ paddingBottom: "env(safe-area-inset-bottom)" }} aria-label="Mobile">
        {items.map(([href, label, Icon, active]) => (
          <Link key={href} href={href} aria-current={active ? "page" : undefined} className={`flex flex-col items-center gap-0.5 py-2 text-[10.5px] ${active ? (href === "/breaking" ? "text-hot" : "text-signal") : "text-fg-muted"}`}>
            <Icon className="size-4" />
            {label}
          </Link>
        ))}
        <button type="button" onClick={() => setMore(true)} aria-expanded={more} className={`flex flex-col items-center gap-0.5 py-2 text-[10.5px] ${more ? "text-signal" : "text-fg-muted"}`}>
          <LayoutGrid className="size-4" />
          More
        </button>
      </nav>
      {more && (
        <div className="fixed inset-0 z-50 flex items-end lg:hidden" role="dialog" aria-modal="true" aria-label="More">
          <button type="button" aria-label="Close" onClick={() => setMore(false)} className="scrim absolute inset-0 cursor-default" />
          <div className="relative w-full rounded-t-xl border-t border-line bg-panel pb-6 animate-sheet-up" style={{ paddingBottom: "calc(1.5rem + env(safe-area-inset-bottom))" }}>
            <div className="flex items-center justify-between px-4 py-3">
              <span className="label">More</span>
              <span className="flex items-center gap-2">
                <DensityToggle />
                <button type="button" onClick={() => setMore(false)} aria-label="Close" className="inline-flex size-7 items-center justify-center rounded-md border border-line"><X className="size-4" /></button>
              </span>
            </div>
            <ul className="grid grid-cols-2 gap-1 px-3">
              {moreItems.map(([href, label, Icon]) => (
                <li key={href}>
                  <Link href={href} className="flex items-center gap-2 rounded-md border border-line px-3 py-2.5 text-[13px] hover:bg-panel-2">
                    <Icon className="size-4 text-fg-muted" /> {label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      )}
    </>
  );
}