/**
 * BureauNav — top navigation bar present on every bureau sub-page.
 *
 * Solves "I'm stuck on this page, there's no way back" UX. Shows:
 *   - "← Home" (always → /)
 *   - "Bureau" (always → /bureau)
 *   - Breadcrumb trail of current page (passed via props)
 *   - Locale toggle + auth pill on the right
 *
 * Visually harmonised with SiteHeader (single gold palette, no cyan); labels
 * localised.
 */
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { AuthBar } from "./auth-bar";
import { LocaleToggle, type Locale } from "./locale-toggle";
import { MobileNav } from "./mobile-nav";

export interface Crumb {
  /** Display label. */
  label: string;
  /** When omitted the crumb is rendered as the current page (no link). */
  href?: string;
}

const COPY = {
  "pt-br": { home: "home", bureau: "casos", aria_home: "Voltar para a home", aria_bureau: "Listagem de casos" },
  en:      { home: "home", bureau: "case files", aria_home: "Back to home",  aria_bureau: "Case file library" },
} as const;

export function BureauNav({ crumbs, locale = "pt-br" }: { crumbs: Crumb[]; locale?: Locale }) {
  const t = COPY[locale];
  // Same item list as the SiteHeader on the home — the mobile drawer carries
  // it so a reader on a case file can still jump to /sightings or /witnesses.
  const navItems = [
    { href: "/sightings",  label: locale === "en" ? "Sightings"  : "Avistamentos" },
    { href: "/witnesses",  label: locale === "en" ? "Witnesses"  : "Testemunhas" },
    { href: "/objects",    label: locale === "en" ? "Craft"      : "Objetos" },
    { href: "/locations",  label: locale === "en" ? "Locations"  : "Locais" },
    { href: "/operations", label: locale === "en" ? "Programs"   : "Programas" },
    { href: "/bureau",     label: locale === "en" ? "Case files" : "Casos" },
    { href: "/search",     label: locale === "en" ? "Search"     : "Busca" },
  ];

  return (
    <nav
      aria-label={locale === "en" ? "Breadcrumb" : "Trilha"}
      className="sticky top-0 z-30 bg-[#0a0e1a]/95 backdrop-blur border-b border-[rgba(224,192,128,0.18)]"
    >
      <div className="mx-auto max-w-6xl px-4 py-2.5 flex items-center gap-3 flex-wrap text-[12px] font-mono">
        <Link
          href="/"
          className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border border-[rgba(224,192,128,0.30)] text-[#cbd2dd] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.08)] transition-colors"
          aria-label={t.aria_home}
        >
          <ArrowLeft size={12} aria-hidden="true" />
          <span>{t.home}</span>
        </Link>

        <Link
          href="/bureau"
          className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border border-[rgba(224,192,128,0.50)] text-[#e0c080] hover:bg-[rgba(224,192,128,0.08)] transition-colors"
          aria-label={t.aria_bureau}
        >
          <span>{t.bureau}</span>
        </Link>

        {crumbs.length > 0 && (
          <div className="text-[11px] text-[#5a6678] flex items-center gap-1.5 flex-wrap">
            <span className="mx-1" aria-hidden="true">/</span>
            {crumbs.map((c, i) => (
              <span key={`${c.label}-${i}`} className="inline-flex items-center gap-1.5">
                {c.href ? (
                  <Link href={c.href} className="hover:text-[#e0c080] transition-colors">{c.label}</Link>
                ) : (
                  <span className="text-[#e7ecf3]" aria-current="page">{c.label}</span>
                )}
                {i < crumbs.length - 1 && <span aria-hidden="true">/</span>}
              </span>
            ))}
          </div>
        )}

        {/* Desktop right cluster — toggle + auth. Hidden on mobile; the
            hamburger drawer carries the same controls there. */}
        <span className="ml-auto hidden md:inline-flex items-center gap-2">
          <LocaleToggle current={locale} variant="navbar" />
          <AuthBar locale={locale} />
        </span>
        {/* Mobile menu — hamburger that opens the full primary nav drawer. */}
        <span className="ml-auto md:hidden">
          <MobileNav locale={locale} items={navItems} />
        </span>
      </div>
    </nav>
  );
}