"use client";

import { Globe } from "lucide-react";
import type { Locale } from "./locale-toggle";

export function LocaleToggleClient({
  current,
  variant = "retro",
}: { current: Locale; variant?: "retro" | "navbar" }) {
  function setLocale(next: Locale) {
    if (next === current) return;
    document.cookie = `locale=${next}; path=/; max-age=${60 * 60 * 24 * 365}; SameSite=Lax`;
    // Hard reload, not router.refresh(): the latter re-fetches the route's
    // server tree but Next.js can keep a stale <title>/<meta> because metadata
    // is rendered up in the layout tree which isn't always re-invalidated.
    // A full navigation re-runs generateMetadata against the new cookie, so
    // the tab title, OG tags, and html lang attribute all switch together.
    window.location.reload();
  }

  if (variant === "navbar") {
    // Gold-amber magazine theme to match SiteHeader / BureauNav.
    // The active locale fills with gold; the inactive one stays muted text.
    // Sized to be unmistakably readable in the navbar — the previous 11px pill
    // disappeared visually next to the other links.
    return (
      <div
        role="group"
        aria-label="Language"
        className="inline-flex items-center font-mono text-[12px] uppercase tracking-wider border border-[rgba(224,192,128,0.35)] rounded-full overflow-hidden"
      >
        <span className="pl-2.5 pr-1.5 py-1 text-[#9aa6b8]" aria-hidden="true">
          <Globe size={12} />
        </span>
        <button
          type="button"
          onClick={() => setLocale("pt-br")}
          aria-pressed={current === "pt-br"}
          aria-label="Português (Brasil)"
          className={`px-2.5 py-1 transition-colors ${
            current === "pt-br"
              ? "bg-[#e0c080] text-[#0a0e1a] font-semibold"
              : "text-[#cbd2dd] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.08)]"
          }`}
        >
          PT
        </button>
        <button
          type="button"
          onClick={() => setLocale("en")}
          aria-pressed={current === "en"}
          aria-label="English"
          className={`px-2.5 py-1 transition-colors ${
            current === "en"
              ? "bg-[#e0c080] text-[#0a0e1a] font-semibold"
              : "text-[#cbd2dd] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.08)]"
          }`}
        >
          EN
        </button>
      </div>
    );
  }

  return (
    <div className="inline-flex items-center gap-1 font-mono text-[10px] uppercase tracking-widest border border-[rgba(0,255,156,0.32)] rounded">
      <span className="px-2 py-1 text-[#5a6678]"><Globe size={11} /></span>
      <button
        type="button"
        onClick={() => setLocale("en")}
        className={`px-2 py-1 ${current === "en" ? "bg-[rgba(0,255,156,0.12)] text-[#00ff9c]" : "text-[#8896aa] hover:text-[#7fdbff]"}`}
      >
        EN
      </button>
      <button
        type="button"
        onClick={() => setLocale("pt-br")}
        className={`px-2 py-1 ${current === "pt-br" ? "bg-[rgba(0,255,156,0.12)] text-[#00ff9c]" : "text-[#8896aa] hover:text-[#7fdbff]"}`}
      >
        PT-BR
      </button>
    </div>
  );
}