"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cx } from "@/lib/format";
import { Wordmark } from "./logo";
import { MarketClock } from "./market-clock";
import { SearchButton } from "./search-dialog";
import { ThemeToggle } from "./theme-toggle";
import { StreamIndicator } from "./stream-indicator";

const NAV: Array<{ href: string; label: string; match?: RegExp }> = [
  { href: "/markets", label: "Markets", match: /^\/(markets|stocks|etfs|indices|crypto|forex|rates|commodities|instruments)/ },
  { href: "/live", label: "Live" },
  { href: "/events", label: "Events", match: /^\/(events|halts|filings)/ },
  { href: "/exchanges", label: "World", match: /^\/(exchanges|countries)/ },
  { href: "/sources", label: "Sources", match: /^\/(sources|connectors|data-health|status|coverage)/ },
  { href: "/compare", label: "Compare" },
];

export function SiteHeader() {
  const path = usePathname();
  return (
    <header className="sticky top-0 z-[100] border-b border-rule bg-canvas/85 backdrop-blur supports-[backdrop-filter]:bg-canvas/70">
      <div className="mx-auto flex h-[var(--header-h)] max-w-[1440px] items-center gap-3 px-3 sm:px-5">
        <Link href="/" className="flex h-11 items-center pr-1" aria-label="Market Atlas home">
          <Wordmark className="text-[15px]" />
        </Link>
        <nav className="hidden items-center gap-0.5 lg:flex" aria-label="Primary">
          {NAV.map((n) => {
            const active = (n.match ?? new RegExp(`^${n.href}`)).test(path);
            return (
              <Link key={n.href} href={n.href} className={cx("flex h-11 items-center rounded-md px-3 text-[13.5px]", active ? "text-ink font-medium" : "text-ink-2 hover:bg-surface-2 hover:text-ink")}>
                {n.label}
              </Link>
            );
          })}
        </nav>
        <div className="ml-auto flex items-center gap-1.5">
          <StreamIndicator className="hidden md:flex" />
          <SearchButton />
          <ThemeToggle />
        </div>
      </div>
      <div className="hidden border-t border-rule/60 md:block">
        <div className="mx-auto max-w-[1440px] px-5 py-1">
          <MarketClock />
        </div>
      </div>
    </header>
  );
}