'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 { Wordmark } from '@/components/brand/logo';
import { cn } from '@/lib/cn';
import { exploreNav, moreNav, primaryNav, routes } from '@/lib/site';
import { useOpenSearch } from './search-context';
import { ThemeToggle } from './theme';

const EXPLORE_PREFIXES = exploreNav.map((n) => n.href);

export function SiteHeader() {
  const pathname = usePathname();
  const openSearch = useOpenSearch();
  const [menu, setMenu] = useState(false);
  const [explore, setExplore] = useState(false);
  const exploreRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    setMenu(false);
    setExplore(false);
  }, [pathname]);
  useEffect(() => {
    if (!explore) return;
    const onDoc = (e: MouseEvent) => {
      if (!exploreRef.current?.contains(e.target as Node)) setExplore(false);
    };
    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && setExplore(false);
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('keydown', onKey);
    };
  }, [explore]);

  const exploreActive = pathname === '/explore' || EXPLORE_PREFIXES.some((p) => pathname === p || pathname.startsWith(p + '/'));
  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="ml-3 hidden items-center gap-0.5 lg:flex">
          <div className="relative" ref={exploreRef}>
            <button type="button" onClick={() => setExplore((v) => !v)} aria-expanded={explore} aria-haspopup="menu" className={navCls(exploreActive)}>
              Explore <ChevronDown className={cn('size-3.5 transition-transform', explore && 'rotate-180')} aria-hidden />
            </button>
            {explore && (
              <div role="menu" className="panel absolute left-0 top-full mt-1 w-[520px] p-2 shadow-lg">
                <ul className="grid grid-cols-2 gap-0.5">
                  {exploreNav.map((n) => (
                    <li key={n.href}>
                      <Link role="menuitem" href={n.href} className={cn('block rounded-sm px-3 py-2 text-sm hover:bg-surface-2', pathname.startsWith(n.href) ? 'text-ink font-medium' : 'text-ink-2 hover:text-ink')}>
                        {n.label}
                      </Link>
                    </li>
                  ))}
                  <li className="col-span-2 mt-1 border-t border-rule pt-1">
                    <Link role="menuitem" href={routes.explore()} className="block rounded-sm px-3 py-2 text-sm text-accent hover:bg-surface-2">
                      All entity types with live counts →
                    </Link>
                  </li>
                </ul>
              </div>
            )}
          </div>
          {primaryNav.map((n) => {
            const active = pathname === n.href || pathname.startsWith(n.href + '/');
            return (
              <Link key={n.href} href={n.href} aria-current={active ? 'page' : undefined} className={navCls(active)}>
                {n.label}
              </Link>
            );
          })}
        </nav>
        <div className="ml-auto flex items-center gap-1">
          <button type="button" onClick={openSearch} className="hidden h-9 min-w-[280px] 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">
            <Search className="size-4" aria-hidden />
            <span className="flex-1 text-left">Search the AI ecosystem…</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 />
          <button type="button" onClick={() => setMenu((m) => !m)} className="flex size-11 items-center justify-center rounded-sm text-ink-2 hover:bg-surface-2 hover:text-ink lg:hidden" aria-label={menu ? 'Close menu' : 'Open menu'} aria-expanded={menu}>
            {menu ? <X className="size-5" aria-hidden /> : <Menu className="size-5" aria-hidden />}
          </button>
        </div>
      </div>
      {menu && (
        <div className="border-t border-rule bg-canvas lg:hidden">
          <div className="container-x mx-auto grid max-w-[1600px] gap-6 py-5 sm:grid-cols-3">
            <div>
              <p className="eyebrow mb-2">Explore</p>
              <ul className="grid grid-cols-2 gap-0.5 sm:grid-cols-1">
                {exploreNav.map((n) => (
                  <li key={n.href}>
                    <Link href={n.href} className="block py-2.5 text-[15px] text-ink-2 hover:text-ink">
                      {n.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <p className="eyebrow mb-2">Track</p>
              <ul className="grid grid-cols-2 gap-0.5 sm:grid-cols-1">
                {primaryNav.map((n) => (
                  <li key={n.href}>
                    <Link href={n.href} className="block py-2.5 text-[15px] text-ink-2 hover:text-ink">
                      {n.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <p className="eyebrow mb-2">About</p>
              <ul className="grid grid-cols-2 gap-0.5 sm:grid-cols-1">
                {moreNav.map((n) => (
                  <li key={n.href}>
                    <Link href={n.href} className="block py-2.5 text-[15px] text-ink-2 hover:text-ink">
                      {n.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}