import Link from "next/link";
import type { Locale } from "@/i18n/routes";
import { publicPath, defaultLocale } from "@/i18n/routes";
import { getDict } from "@/i18n/dictionaries";
import { LanguageSwitcher } from "./language-switcher";
import { MobileNav } from "./mobile-nav";
import { site } from "@/content/site";
import { CommandPalette } from "./command-palette";
import { CommandBarButton } from "./command-bar-button";

export function SiteHeader({
  locale,
  projects,
}: {
  locale: Locale;
  projects: Array<{ slug: string; summary: string; category: string; status: string }>;
}) {
  const dict = getDict(locale);
  const nav = [
    { href: publicPath(locale, "about"), label: dict.nav.about },
    { href: publicPath(locale, "projects"), label: dict.nav.projects },
    { href: publicPath(locale, "contact"), label: dict.nav.contact },
  ];

  return (
    <>
      <header className="sticky top-0 z-40 border-b border-hairline bg-[color-mix(in_oklab,var(--bg-deep)_85%,transparent)] backdrop-blur-md">
        <div className="mx-auto flex max-w-[var(--max-w)] items-center justify-between gap-3 px-4 py-3 md:px-6">
          <Link href={publicPath(locale, "home")} className="group flex items-center gap-2.5 font-mono text-sm" data-cursor="hover">
            <span className="inline-flex h-6 w-6 items-center justify-center rounded-sm border border-accent text-[11px] font-bold text-accent transition-colors group-hover:bg-accent group-hover:text-[var(--bg-deep)]">e</span>
            <span className="text-[var(--fg)]">{site.handle}</span>
            <span className="hidden text-muted md:inline">@eldov.win</span>
          </Link>
          <div className="flex items-center gap-1 md:gap-4">
            <nav className="hidden gap-1 md:flex" aria-label="primary">
              {nav.map((n) => (
                <Link
                  key={n.href}
                  href={n.href}
                  className="rounded px-3 py-1.5 font-mono text-sm text-[var(--fg-dim)] transition-colors hover:bg-[color-mix(in_oklab,var(--accent)_8%,transparent)] hover:text-accent"
                  data-cursor="hover"
                >
                  {n.label}
                </Link>
              ))}
            </nav>
            <div className="hidden md:block">
              <LanguageSwitcher currentLocale={locale} />
            </div>
            <CommandBarButton />
            <MobileNav locale={locale} items={nav} menuLabel={dict.nav.menu} switchLabel={dict.actions.languageSwitch} />
          </div>
        </div>
        {locale === defaultLocale ? (
          <div className="border-t border-hairline-2 bg-[var(--bg-deep)]">
            <div className="mx-auto max-w-[var(--max-w)] px-4 py-1 font-mono text-[11px] text-muted md:px-6">
              <span className="text-accent">note:</span>{" "}
              geschäftliche Anfragen bitte an{" "}
              <a
                href="https://w-make.com"
                rel="noopener noreferrer"
                className="text-[var(--fg-dim)] underline decoration-dotted underline-offset-2 hover:text-accent"
              >
                w-make.com
              </a>
              .
            </div>
          </div>
        ) : null}
      </header>
      <CommandPalette locale={locale} projects={projects} />
    </>
  );
}