import Link from 'next/link';
import { t } from '@/i18n';
import { routes } from '@/lib/site';
import { Logo } from '@/components/brand/Logo';
import { MoreMenu } from './more-menu';
import { NavLinks } from './nav-links';
import { SearchTrigger } from './search-trigger';
import { ThemeToggle } from './theme-toggle';

/** Primary desktop navigation (order from the product spec); everything else lives under "More". */
export const PRIMARY_NAV = [
  { key: 'nav.explore', href: routes.explore() },
  { key: 'nav.countries', href: routes.countries() },
  { key: 'nav.compare', href: routes.compare() },
  { key: 'nav.rankings', href: routes.rankings() },
  { key: 'nav.indicators', href: routes.indicators() },
  { key: 'nav.changes', href: routes.changes() },
] as const;

export const MORE_NAV: ReadonlyArray<{ key: string; href: string; group: 'explore' | 'reference' }> = [
  { key: 'nav.regions', href: routes.regions(), group: 'explore' },
  { key: 'nav.trajectories', href: routes.trajectories(), group: 'explore' },
  { key: 'nav.scatter', href: routes.scatter(), group: 'explore' },
  { key: 'nav.finder', href: routes.finder(), group: 'explore' },
  { key: 'nav.extremes', href: routes.extremes(), group: 'explore' },
  { key: 'nav.peers', href: routes.peers(), group: 'explore' },
  { key: 'nav.stories', href: routes.stories(), group: 'explore' },
  { key: 'nav.sources', href: routes.sources(), group: 'reference' },
  { key: 'nav.api', href: routes.api(), group: 'reference' },
  { key: 'nav.downloads', href: routes.download(), group: 'reference' },
  { key: 'nav.updates', href: routes.updates(), group: 'reference' },
  { key: 'nav.methodology', href: routes.methodology(), group: 'reference' },
];

/** Sticky top bar: wordmark, primary nav (md+), "More" menu, search trigger, theme toggle. 52 px tall on mobile, 56 on md. */
export function SiteHeader() {
  return (
    <header className="sticky top-0 z-30 border-b border-rule bg-paper/95 backdrop-blur supports-[backdrop-filter]:bg-paper/85">
      <div className="container-x mx-auto flex h-[52px] max-w-[1400px] items-center gap-3 md:h-14">
        <Link href={routes.home()} className="flex h-11 items-center rounded-sm pr-1" aria-label={t('brand.home')}>
          <span className="md:hidden lg:inline-flex">
            <Logo variant="full" />
          </span>
          <span className="hidden md:inline-flex lg:hidden">
            <Logo variant="mark" />
          </span>
        </Link>
        <NavLinks items={PRIMARY_NAV.map((n) => ({ href: n.href, label: t(n.key) }))} />
        <div className="hidden md:block">
          <MoreMenu items={MORE_NAV.map((n) => ({ href: n.href, label: t(n.key as 'nav.regions'), group: n.group }))} />
        </div>
        <div className="ml-auto flex items-center gap-1">
          <div className="hidden lg:block">
            <SearchTrigger variant="field" />
          </div>
          <div className="lg:hidden">
            <SearchTrigger variant="icon" />
          </div>
          <ThemeToggle />
        </div>
      </div>
    </header>
  );
}