'use client';
import { ChevronDown, Search } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useEffect, useRef, useState } from 'react';
import { Wordmark } from '@/components/brand/logo';
import { cn } from '@/lib/cn';
import { moreGroups, primaryNav, routes } from '@/lib/site';
import { DensityToggle } from './density';
import { useOpenSearch } from './search-context';
import { ThemeToggle } from './theme';

const MORE_HREFS = moreGroups.flatMap((g) => g.items.map((i) => i.href));

/**
 * Header: `AI Atlas | Models · Frontier · Benchmarks · Prices · Research · Graph · Changes · More ▾ | Search ⌘K | theme | density`.
 * "More" is a keyboard-accessible menu panel (Enter/Space/↓ opens, ↑↓ move, Home/End, Esc closes, click outside closes).
 * Below lg the primary nav lives in the bottom tab bar (`MobileTabBar`); the header keeps search, theme and density.
 */
export function SiteHeader() {
  const pathname = usePathname();
  const openSearch = useOpenSearch();
  const [more, setMore] = useState(false);
  const moreRef = useRef<HTMLDivElement>(null);
  const moreBtn = useRef<HTMLButtonElement>(null);

  useEffect(() => setMore(false), [pathname]);
  useEffect(() => {
    if (!more) return;
    const onDoc = (e: MouseEvent) => {
      if (!moreRef.current?.contains(e.target as Node)) setMore(false);
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        setMore(false);
        moreBtn.current?.focus();
      }
    };
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    const first = moreRef.current?.querySelector<HTMLElement>('[role="menuitem"]');
    first?.focus();
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('keydown', onKey);
    };
  }, [more]);

  const onMenuKey = (e: React.KeyboardEvent) => {
    const items = [...(moreRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [])];
    const i = items.indexOf(document.activeElement as HTMLElement);
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      items[(i + 1) % items.length]?.focus();
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      items[(i - 1 + items.length) % items.length]?.focus();
    } else if (e.key === 'Home') {
      e.preventDefault();
      items[0]?.focus();
    } else if (e.key === 'End') {
      e.preventDefault();
      items[items.length - 1]?.focus();
    } else if (e.key === 'Tab') setMore(false);
  };

  const isActive = (href: string) => pathname === href || pathname.startsWith(href + '/');
  const moreActive = MORE_HREFS.some(isActive) && !primaryNav.some((n) => isActive(n.href));
  const navCls = (active: boolean) => cn('flex h-9 items-center gap-1 rounded-sm px-2.5 text-[13.5px] transition-colors', active ? 'text-ink font-medium' : 'text-ink-2 hover:text-ink');

  return (
    <header className="sticky top-0 z-40 border-b border-rule bg-canvas/85 backdrop-blur-md">
      <div className="container-x mx-auto flex h-[var(--header-h)] max-w-[1600px] items-center gap-3">
        <Link href={routes.home()} className="flex h-11 items-center" aria-label="AI Atlas home">
          <Wordmark />
        </Link>
        <nav aria-label="Primary" className="relative ml-3 hidden items-center gap-0.5 lg:flex">
          {primaryNav.map((n) => (
            <Link key={n.href} href={n.href} aria-current={isActive(n.href) ? 'page' : undefined} className={navCls(isActive(n.href))}>
              {n.label}
            </Link>
          ))}
          <div ref={moreRef} onKeyDown={onMenuKey}>
            <button
              ref={moreBtn}
              type="button"
              onClick={() => setMore((v) => !v)}
              onKeyDown={(e) => {
                if (e.key === 'ArrowDown' && !more) {
                  e.preventDefault();
                  setMore(true);
                }
              }}
              aria-expanded={more}
              aria-haspopup="menu"
              aria-controls="more-menu"
              className={navCls(moreActive)}
              data-more-button
            >
              More <ChevronDown className={cn('size-3.5 transition-transform', more && 'rotate-180')} aria-hidden />
            </button>
            {more && (
              <div id="more-menu" role="menu" aria-label="More" className="panel absolute left-0 top-full mt-1 w-[min(880px,calc(100vw-2rem))] p-3 shadow-lg" data-more-menu>
                <div className="grid grid-cols-4 gap-x-6">
                  {moreGroups.map((g) => (
                    <div key={g.label}>
                      <p className="eyebrow px-2 pb-1">{g.label}</p>
                      <ul>
                        {g.items.map((n) => (
                          <li key={n.href + n.label}>
                            <Link role="menuitem" href={n.href} tabIndex={-1} className={cn('block rounded-sm px-2 py-1.5 text-sm leading-tight hover:bg-surface-2 focus:bg-surface-2 focus:outline-none', isActive(n.href) ? 'text-ink font-medium' : 'text-ink-2 hover:text-ink')}>
                              {n.label}
                              {n.hint && <span className="mt-0.5 block text-[11px] text-ink-3">{n.hint}</span>}
                            </Link>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
                <div className="mt-2 flex items-center justify-between border-t border-rule px-2 pt-2 text-xs text-ink-3">
                  <span>
                    <kbd className="mono border border-rule px-1">⌘K</kbd> search anything · <kbd className="mono border border-rule px-1">&gt;</kbd> commands
                  </span>
                  <Link role="menuitem" href={routes.explore()} tabIndex={-1} className="link">
                    All entity types with live counts →
                  </Link>
                </div>
              </div>
            )}
          </div>
        </nav>
        <div className="ml-auto flex items-center gap-1">
          <button type="button" onClick={openSearch} className="hidden h-9 min-w-[260px] items-center gap-2 rounded-sm border border-rule bg-surface px-3 text-sm text-ink-3 hover:border-rule-strong hover:text-ink-2 md:flex" aria-label="Open search and commands" data-open-palette>
            <Search className="size-4" aria-hidden />
            <span className="flex-1 text-left">Search or run a command…</span>
            <kbd className="mono rounded-[3px] border border-rule px-1.5 py-0.5 text-[10px]">⌘K</kbd>
          </button>
          <button type="button" onClick={openSearch} className="flex size-11 items-center justify-center rounded-sm text-ink-2 hover:bg-surface-2 hover:text-ink md:hidden" aria-label="Open search">
            <Search className="size-5" aria-hidden />
          </button>
          <ThemeToggle />
          <DensityToggle />
        </div>
      </div>
    </header>
  );
}