import Link from 'next/link';
import { localePath, type Locale } from '@ai-radar/shared';
import type { Dictionary } from '@/lib/dictionary';
import { SITE } from '@/lib/site';
import { ThemeToggle } from './ThemeToggle';
import { LanguageSwitch } from './LanguageSwitch';

/**
 * Simple navigation: six links, search, language, theme. No mega menu,
 * no dropdowns — the homepage stays the primary experience.
 */
export function SiteHeader({ locale, dict }: { locale: Locale; dict: Dictionary }) {
  const nav = [
    { path: '/', label: dict.nav.today },
    { path: '/news', label: dict.nav.news },
    { path: '/tools', label: dict.nav.tools },
    { path: '/models', label: dict.nav.models },
    { path: '/updates', label: dict.nav.updates },
    { path: '/pricing', label: dict.nav.pricing },
  ];

  return (
    <header className="site-header">
      <div className="page site-header-inner">
        <Link href={localePath('/', locale)} className="brand">
          <RadarMark />
          {SITE[locale].name}
        </Link>

        <nav className="nav" aria-label={dict.nav.today}>
          {nav.map((item) => (
            <Link key={item.path} href={localePath(item.path, locale)}>
              {item.label}
            </Link>
          ))}
        </nav>

        <div className="header-actions">
          <Link
            href={localePath('/search', locale)}
            className="icon-btn"
            aria-label={dict.nav.search}
          >
            <SearchIcon />
          </Link>
          <LanguageSwitch locale={locale} label={dict.meta.switchLanguage} />
          <ThemeToggle label={dict.meta.theme} />
          {/* One quiet link. An account is an upgrade, never a gate, so
              this must not look like a wall the reader has to get past. */}
          <Link
            href={localePath('/account', locale)}
            className="icon-btn"
            aria-label={dict.auth.account}
            title={dict.auth.account}
          >
            <AccountIcon />
          </Link>
        </div>
      </div>
    </header>
  );
}

/**
 * The radar concept, used once and quietly: concentric arcs with a single
 * filled point. Symmetrical, so it needs no RTL flip.
 */
function RadarMark() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
      <circle cx="9" cy="9" r="7.25" stroke="currentColor" strokeWidth="1.2" opacity="0.3" />
      <circle cx="9" cy="9" r="3.75" stroke="currentColor" strokeWidth="1.2" opacity="0.55" />
      <circle cx="9" cy="9" r="1.4" fill="var(--accent)" />
    </svg>
  );
}

function SearchIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <circle cx="6.75" cy="6.75" r="4.75" stroke="currentColor" strokeWidth="1.4" />
      <path d="M10.5 10.5 14 14" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
    </svg>
  );
}

/** A person outline. Symmetrical, so it needs no RTL flip. */
function AccountIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="12" cy="8" r="3.2" stroke="currentColor" strokeWidth="1.6" />
      <path
        d="M5 19.5c0-3.3 3.1-5.5 7-5.5s7 2.2 7 5.5"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
      />
    </svg>
  );
}
