"use client";

import { ChevronDown, Menu, Search, X } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { Logo } from "@/components/brand/logo";
import { openPalette } from "@/components/command-palette";
import { ThemeToggle } from "@/components/theme";
import { IconButton } from "@/components/ui/button";
import { cn } from "@/components/ui/cn";
import { Kbd } from "@/components/ui/kbd";
import { NAV_MORE, NAV_PRIMARY, routes } from "@/lib/routes";

/** "More" menu groups (§102) built from NAV_MORE so new routes only need lib/routes.ts. */
const MORE_GROUPS: Array<{ title: string; hrefs: string[] }> = [
  { title: "Index", hrefs: [routes.countries(), routes.cloudRegions(), routes.ixps(), routes.power(), routes.connectivity(), routes.rankings()] },
  { title: "Intelligence", hrefs: [routes.pulse(), routes.explore(), routes.compareOperators(), routes.coverage(), routes.watchlist()] },
  { title: "Reference", hrefs: [routes.sources(), routes.methodology(), routes.download(), routes.apiDocsPage(), routes.about()] },
];

function isActive(path: string, href: string): boolean {
  if (href === "/") return path === "/";
  if (href === "/datacenters") return path.startsWith("/datacenters") && !path.startsWith("/datacenters/markets");
  return path === href || path.startsWith(`${href}/`) || path.startsWith(`${href}?`);
}

export function Header() {
  const path = usePathname();
  const [menu, setMenu] = useState(false);
  const [more, setMore] = useState(false);
  const [menuPath, setMenuPath] = useState(path);
  const moreRef = useRef<HTMLDivElement>(null);
  if (menuPath !== path) {
    setMenuPath(path);
    setMenu(false);
    setMore(false);
  }
  useEffect(() => {
    if (!menu) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setMenu(false);
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [menu]);
  useEffect(() => {
    if (!more) return;
    const onDoc = (e: MouseEvent) => {
      if (!moreRef.current?.contains(e.target as Node)) setMore(false);
    };
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setMore(false);
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      document.removeEventListener("keydown", onKey);
    };
  }, [more]);
  const isMap = path === "/map";
  const moreActive = NAV_MORE.some((n) => isActive(path, n.href));
  const byHref = new Map(NAV_MORE.map((n) => [n.href, n] as const));

  return (
    <header className={cn("sticky top-0 z-[60] border-b border-hair bg-paper/95 backdrop-blur supports-[backdrop-filter]:bg-paper/80", isMap && "relative")}>
      <div className="mx-auto flex h-12 w-full max-w-[1600px] items-center gap-2 px-3 sm:h-14 sm:px-5 lg:px-8">
        <Logo size={22} />
        <nav aria-label="Primary" className="ml-3 hidden items-center gap-0 lg:flex xl:ml-4 xl:gap-0.5">
          {NAV_PRIMARY.map((n) => {
            const active = isActive(path, n.href);
            return (
              <Link
                key={n.href}
                href={n.href}
                aria-current={active ? "page" : undefined}
                className={cn("relative inline-flex h-9 items-center whitespace-nowrap rounded-sm px-2 text-[13px] font-medium text-ink-2 transition-colors hover:text-ink xl:px-3", active && "text-ink after:absolute after:inset-x-2 after:-bottom-[9px] after:h-[2px] after:bg-ink sm:after:-bottom-[13px]")}
              >
                {n.label}
                {n.label === "Live" && <span aria-hidden className="ml-1.5 inline-block size-1.5 rounded-full bg-accent animate-pulse-soft" />}
              </Link>
            );
          })}
          <div ref={moreRef} className="relative">
            <button
              type="button"
              onClick={() => setMore((m) => !m)}
              aria-expanded={more}
              aria-haspopup="menu"
              aria-controls="more-menu"
              className={cn("relative inline-flex h-9 items-center gap-1 whitespace-nowrap rounded-sm px-2 text-[13px] font-medium text-ink-2 transition-colors hover:text-ink xl:px-3", (more || moreActive) && "text-ink", moreActive && "after:absolute after:inset-x-2 after:-bottom-[9px] after:h-[2px] after:bg-ink sm:after:-bottom-[13px]")}
            >
              More <ChevronDown className={cn("size-3.5 transition-transform", more && "rotate-180")} strokeWidth={1.75} aria-hidden />
            </button>
            {more && (
              <div id="more-menu" role="menu" className="absolute left-0 top-full z-[70] mt-2 grid w-[560px] grid-cols-3 gap-4 rounded-sm border border-hair-2 bg-surface p-4 animate-fade-in">
                {MORE_GROUPS.map((g) => (
                  <div key={g.title}>
                    <div className="label-caps mb-1.5">{g.title}</div>
                    <ul className="flex flex-col">
                      {g.hrefs.map((h) => {
                        const n = byHref.get(h);
                        if (!n) return null;
                        return (
                          <li key={h}>
                            <Link href={h} role="menuitem" aria-current={isActive(path, h) ? "page" : undefined} className={cn("flex h-8 items-center rounded-xs px-1.5 text-[13px] text-ink-2 hover:bg-surface-2 hover:text-ink", isActive(path, h) && "font-medium text-ink")}>
                              {n.label}
                            </Link>
                          </li>
                        );
                      })}
                    </ul>
                  </div>
                ))}
              </div>
            )}
          </div>
        </nav>
        <div className="ml-auto flex items-center gap-1">
          <button
            type="button"
            onClick={() => openPalette()}
            className="hidden h-9 items-center gap-2 rounded-sm border border-hair-2 bg-surface px-2.5 text-[13px] text-ink-3 hover:border-ink-4 hover:text-ink md:inline-flex md:w-[240px] lg:w-[190px] xl:w-[240px]"
            aria-label="Search (Command K)"
          >
            <Search className="size-4" strokeWidth={1.75} />
            <span className="flex-1 text-left">Search the index…</span>
            <span className="inline-flex gap-0.5">
              <Kbd>⌘</Kbd>
              <Kbd>K</Kbd>
            </span>
          </button>
          <IconButton label="Search" className="md:hidden" onClick={() => openPalette()}>
            <Search className="size-[18px]" strokeWidth={1.75} />
          </IconButton>
          <ThemeToggle />
          <IconButton label={menu ? "Close menu" : "Menu"} onClick={() => setMenu((m) => !m)} aria-expanded={menu} aria-controls="site-menu" className="lg:hidden">
            {menu ? <X className="size-[18px]" strokeWidth={1.75} /> : <Menu className="size-[18px]" strokeWidth={1.75} />}
          </IconButton>
        </div>
      </div>

      {menu && (
        <div id="site-menu" className="absolute inset-x-0 top-full z-[60] max-h-[calc(100dvh-3rem)] overflow-y-auto border-b border-hair bg-paper animate-fade-in lg:hidden">
          <div className="mx-auto grid max-w-[1600px] gap-6 px-3 py-4 sm:grid-cols-2 sm:px-5">
            <div>
              <div className="label-caps mb-2">Explore</div>
              <ul className="grid grid-cols-2 gap-x-3">
                {NAV_PRIMARY.map((n) => (
                  <li key={n.href}>
                    <Link href={n.href} aria-current={isActive(path, n.href) ? "page" : undefined} className="flex h-11 items-center border-b border-hair text-[14px] font-medium text-ink">
                      {n.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
            {MORE_GROUPS.map((g) => (
              <div key={g.title}>
                <div className="label-caps mb-2">{g.title}</div>
                <ul className="grid grid-cols-2 gap-x-3">
                  {g.hrefs.map((h) => {
                    const n = byHref.get(h);
                    if (!n) return null;
                    return (
                      <li key={h}>
                        <Link href={h} aria-current={isActive(path, h) ? "page" : undefined} className="flex h-11 items-center border-b border-hair text-[14px] text-ink-2">
                          {n.label}
                        </Link>
                      </li>
                    );
                  })}
                </ul>
              </div>
            ))}
          </div>
        </div>
      )}
    </header>
  );
}