/**
 * 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";

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];
  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>
        )}

        <span className="ml-auto inline-flex items-center gap-2">
          <LocaleToggle current={locale} variant="navbar" />
          <AuthBar locale={locale} />
        </span>
      </div>
    </nav>
  );
}