import Link from "next/link";
import { t } from "@/lib/i18n";
import { HeaderChrome } from "./HeaderChrome";
import { IconSearch } from "./Icons";
import { ThemeToggle } from "./ThemeToggle";

export const NAV = [
  ["/research", "nav.research"],
  ["/topics", "nav.topics"],
  ["/series", "nav.series"],
  ["/methodology", "nav.methodology"],
  ["/infrastructure", "nav.infrastructure"],
  ["/transparency", "nav.transparency"],
  ["/about", "nav.about"],
] as const;

export function Wordmark({ className = "" }: { className?: string }) {
  return (
    <Link
      href="/"
      className={`flex items-center gap-2 no-underline ${className}`}
      aria-label="AutoScholar.ai home"
    >
      <span
        aria-hidden="true"
        className="grid h-7 w-7 place-items-center rounded-md text-[11px] font-semibold tracking-tight"
        style={{ background: "var(--fg)", color: "var(--bg)", fontFamily: "var(--font-serif)" }}
      >
        As
      </span>
      <span className="serif text-[1.15rem] font-medium tracking-tight">
        AutoScholar<span className="subtle text-xs font-normal">.ai</span>
      </span>
    </Link>
  );
}

/** Compact sticky header: one row on every width; drawer + search on mobile, inline nav on desktop. */
export function SiteHeader() {
  const links = NAV.map(([href, key]) => ({ href, label: t(key) }));
  return (
    <HeaderChrome links={links}>
      <div
        className="container-x flex items-center justify-between gap-3"
        style={{ height: "var(--header-h)" }}
      >
        <Wordmark />
        <nav aria-label="Primary" className="hidden items-center gap-0.5 lg:flex">
          {links.map((l) => (
            <Link key={l.href} href={l.href} className="nav-link">
              {l.label}
            </Link>
          ))}
        </nav>
        <div className="flex items-center gap-1">
          <form action="/research" method="get" role="search" className="relative hidden md:block">
            <label htmlFor="header-q" className="sr-only">
              Search the library
            </label>
            <IconSearch
              size={16}
              className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 subtle"
            />
            <input
              id="header-q"
              name="q"
              type="search"
              placeholder="Search papers"
              className="input h-9 w-44 pl-8 text-xs xl:w-56"
              style={{ minHeight: "2.25rem" }}
            />
          </form>
          <Link href="/research" className="btn-icon md:hidden" aria-label="Search the library">
            <IconSearch />
          </Link>
          <ThemeToggle label={t("theme.toggle")} />
        </div>
      </div>
    </HeaderChrome>
  );
}