// Faith & Joy — language state + the cycling Language Pill
const { useState: useStateI18n, useEffect: useEffectI18n, useRef: useRefI18n } = React;

const FJ_LANG_KEY = "fj-lang-v2";

function fjDetectLang() {
  try {
    const stored = localStorage.getItem(FJ_LANG_KEY);
    if (stored && window.FJ_I18N[stored]) return { lang: stored, chosen: true };
  } catch (e) {}
  const nav = (navigator.language || "en").toLowerCase();
  const prefix = nav.split("-")[0];
  const match = window.FJ_LANGS.includes(prefix) ? prefix : "en";
  return { lang: match, chosen: false };
}

function useLang() {
  const [state, setState] = useStateI18n(fjDetectLang);
  const setLang = (code) => {
    setState({ lang: code, chosen: true });
    try { localStorage.setItem(FJ_LANG_KEY, code); } catch (e) {}
  };
  useEffectI18n(() => {
    document.documentElement.lang = window.FJ_I18N[state.lang].locale;
    document.documentElement.setAttribute("data-lang", state.lang);
  }, [state.lang]);
  return { lang: state.lang, chosen: state.chosen, t: window.FJ_I18N[state.lang], setLang };
}

const FJGlobe = () => (
  <svg className="fj-lang-globe" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
    <circle cx="12" cy="12" r="9"></circle>
    <path d="M3 12h18"></path>
    <path d="M12 3c2.6 2.5 4 5.6 4 9s-1.4 6.5-4 9c-2.6-2.5-4-5.6-4-9s1.4-6.5 4-9z"></path>
  </svg>
);

const FJCaret = () => (
  <svg className="fj-lang-caret" viewBox="0 0 10 6" fill="none" stroke="currentColor" strokeWidth="1.6">
    <path d="M1 1l4 4 4-4"></path>
  </svg>
);

// LanguagePill — top-left control.
// When the visitor hasn't chosen a language yet, the label gently cycles through
// every language's native name so people discover they can switch.
function LanguagePill({ lang, chosen, onChange, t, cycleMs = 2200, variant = "pill" }) {
  const [open, setOpen] = useStateI18n(false);
  const [cycleIdx, setCycleIdx] = useStateI18n(window.FJ_LANGS.indexOf(lang));
  const [animKey, setAnimKey] = useStateI18n(0);
  const rootRef = useRefI18n(null);

  const cycling = !chosen && !open;

  useEffectI18n(() => {
    if (!cycling) return;
    const id = setInterval(() => {
      setCycleIdx((i) => (i + 1) % window.FJ_LANGS.length);
      setAnimKey((k) => k + 1);
    }, cycleMs);
    return () => clearInterval(id);
  }, [cycling, cycleMs]);

  // close on outside click / escape
  useEffectI18n(() => {
    if (!open) return;
    const onDown = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false); };
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("mousedown", onDown);
    document.addEventListener("keydown", onKey);
    return () => { document.removeEventListener("mousedown", onDown); document.removeEventListener("keydown", onKey); };
  }, [open]);

  const shownCode = cycling ? window.FJ_LANGS[cycleIdx] : lang;
  const shownName = window.FJ_I18N[shownCode].name;
  const shownShort = window.FJ_I18N[shownCode].shortName || shownName;
  const shownFlag = window.FJ_I18N[shownCode].flag || "";

  return (
    <div className={"fj-lang" + (open ? " open" : "")} ref={rootRef}>
      <button
        type="button"
        className={"fj-lang-pill" + (variant === "text" ? " text-style" : "")}
        aria-label={t.ui.languageLabel + ": " + window.FJ_I18N[lang].name}
        aria-haspopup="listbox"
        aria-expanded={open}
        onClick={() => setOpen((o) => !o)}
      >
        <span className="fj-lang-flag" aria-hidden="true">{shownFlag}</span>
        <span className="fj-lang-word-box">
          <span key={animKey} className={"fj-lang-word" + (cycling ? " entering" : "")}>
            <span className="fj-lang-name-full">{shownName}</span>
            <span className="fj-lang-name-short">{shownShort}</span>
          </span>
        </span>
        <FJCaret></FJCaret>
      </button>
      {open && (
        <div className="fj-lang-menu" role="listbox">
          <div className="fj-lang-menu-label">{t.ui.changeHint}</div>
          {window.FJ_LANGS.map((code) => (
            <button
              type="button"
              key={code}
              role="option"
              aria-selected={code === lang}
              className={"fj-lang-item" + (code === lang ? " active" : "")}
              onClick={() => { onChange(code); setOpen(false); }}
            >
              <span>{window.FJ_I18N[code].name}</span>
              {code === lang && <span className="check">✦</span>}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { useLang, LanguagePill, FJGlobe });