/* global React */
// =============================================================
// Tiny i18n provider. Two languages (it / en), persisted to
// localStorage, default detected from navigator.language.
// Pages consume via useT(dict) → returns the active-language value.
// =============================================================
const { createContext, useContext, useEffect, useState } = React;

const I18nContext = createContext({ lang: "en", setLang: () => {} });

function detectInitialLang() {
  try {
    const stored = localStorage.getItem("dimmy-lang");
    if (stored === "it" || stored === "en") return stored;
  } catch (_) {}
  const navLang = (typeof navigator !== "undefined" && navigator.language) || "";
  return navLang.toLowerCase().startsWith("it") ? "it" : "en";
}

function I18nProvider({ children }) {
  const [lang, setLang] = useState(detectInitialLang);
  useEffect(() => {
    document.documentElement.lang = lang;
    try { localStorage.setItem("dimmy-lang", lang); } catch (_) {}
  }, [lang]);
  return <I18nContext.Provider value={{ lang, setLang }}>{children}</I18nContext.Provider>;
}

function useI18n() {
  return useContext(I18nContext);
}

// useT: pick the active-language string from a { en, it } dict.
// Falls back to en if a key is missing in the active language.
function useT(dict) {
  const { lang } = useI18n();
  if (!dict) return "";
  if (typeof dict === "string") return dict;
  return dict[lang] != null ? dict[lang] : dict.en;
}

// LanguageToggle: pill-style switch, fits next to the theme toggle.
function LanguageToggle({ compact = false }) {
  const { lang, setLang } = useI18n();
  const langs = [
    { code: "en", label: "EN" },
    { code: "it", label: "IT" },
  ];
  return (
    <div
      role="group"
      aria-label="Language"
      style={{
        display: "inline-flex",
        padding: 2,
        borderRadius: 8,
        border: "1px solid var(--line)",
        background: "transparent",
        fontFamily: "var(--font-mono)",
        fontSize: 11,
        letterSpacing: "0.04em",
      }}
    >
      {langs.map((l) => {
        const active = l.code === lang;
        return (
          <button
            key={l.code}
            onClick={() => setLang(l.code)}
            aria-pressed={active}
            style={{
              padding: compact ? "3px 7px" : "4px 9px",
              borderRadius: 6,
              border: 0,
              background: active ? "var(--bg-elev)" : "transparent",
              color: active ? "var(--fg)" : "var(--fg-faint)",
              cursor: "pointer",
              transition: "background 180ms, color 180ms",
              fontFamily: "inherit",
              fontSize: "inherit",
              fontWeight: active ? 600 : 500,
              letterSpacing: "inherit",
            }}
          >
            {l.label}
          </button>
        );
      })}
    </div>
  );
}

window.I18n = { I18nProvider, useI18n, useT, LanguageToggle };