'use client';
import { Menu, Search, X } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
import { Wordmark } from '@/components/brand/logo';
import { cn } from '@/lib/cn';
import { moreNav, primaryNav, routes } from '@/lib/site';
import { useOpenSearch } from './search-context';

export function SiteHeader() {
  const pathname = usePathname();
  const openSearch = useOpenSearch();
  const [menu, setMenu] = useState(false);
  useEffect(() => setMenu(false), [pathname]);
  const isHome = pathname === '/';
  const isExplore = pathname === '/explore';

  return (
    <header className={cn('sticky top-0 z-40 border-b border-rule backdrop-blur-md', isHome || isExplore ? 'bg-space/70' : 'bg-space/85')}>
      <div className="container-x mx-auto flex h-[60px] max-w-[1600px] items-center gap-4">
        <Link href={routes.home()} className="flex h-11 items-center" aria-label="SatelliteIndex home">
          <Wordmark />
        </Link>
        <nav aria-label="Primary" className="ml-2 hidden items-center gap-0.5 lg:flex">
          {primaryNav.map((n) => {
            const active = pathname === n.href || (n.href !== '/' && pathname.startsWith(n.href + '/')) || (n.href === '/satellites' && pathname.startsWith('/satellite/')) || (n.href === '/constellations' && pathname.startsWith('/constellation/')) || (n.href === '/operators' && pathname.startsWith('/operator/')) || (n.href === '/countries' && pathname.startsWith('/country/')) || (n.href === '/launches' && pathname.startsWith('/launch/'));
            return (
              <Link key={n.href} href={n.href} aria-current={active ? 'page' : undefined} className={cn('rounded-md px-3 py-2 text-[13.5px] transition-colors', active ? 'bg-plane-2 text-ink' : 'text-ink-2 hover:bg-plane-2 hover:text-ink')}>
                {n.label}
              </Link>
            );
          })}
        </nav>
        <div className="ml-auto flex items-center gap-2">
          <button
            type="button"
            onClick={openSearch}
            className="hidden h-10 min-w-[260px] items-center gap-2 rounded-md border border-rule bg-plane-2/70 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 satellites, operators, IDs…</span>
            <kbd className="mono rounded 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-md text-ink-2 hover:bg-plane-2 hover:text-ink md:hidden" aria-label="Open search">
            <Search className="size-5" aria-hidden />
          </button>
          <button type="button" onClick={() => setMenu((m) => !m)} className="flex size-11 items-center justify-center rounded-md text-ink-2 hover:bg-plane-2 hover:text-ink lg:size-10" 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-plane/95 backdrop-blur-md">
          <div className="container-x mx-auto grid max-w-[1600px] gap-6 py-5 md:grid-cols-3">
            <div>
              <p className="eyebrow mb-2">Explore</p>
              <ul className="grid grid-cols-2 gap-1 md:grid-cols-1">
                {primaryNav.map((n) => (
                  <li key={n.href}>
                    <Link href={n.href} className="block rounded-md px-2 py-2.5 text-[15px] text-ink-2 hover:bg-plane-2 hover:text-ink">{n.label}</Link>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <p className="eyebrow mb-2">More</p>
              <ul className="grid grid-cols-2 gap-1 md:grid-cols-1">
                {moreNav.map((n) => (
                  <li key={n.href}>
                    <Link href={n.href} className="block rounded-md px-2 py-2.5 text-[15px] text-ink-2 hover:bg-plane-2 hover:text-ink">{n.label}</Link>
                  </li>
                ))}
              </ul>
            </div>
            <div className="hidden md:block">
              <p className="eyebrow mb-2">About the index</p>
              <p className="text-sm leading-relaxed text-ink-2">
                SatelliteIndex aggregates public orbital, catalog and operator data into one canonical, source-attributed database. Positions are propagated with SGP4 from public element sets.
              </p>
              <Link href={routes.methodology()} className="mt-3 inline-block text-sm text-accent hover:underline">Read the methodology →</Link>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}