/* i18n.jsx — language context, t() lookup with English fallback,
   rich-text helper, and the nav language switcher. */

const I18nContext = React.createContext(null);

function I18nProvider({ children }) {
  const [lang, setLangState] = React.useState(() => {
    const saved = localStorage.getItem('stl-lang');
    return (window.I18N_LANGS || []).some(l => l.code === saved) ? saved : 'en';
  });

  React.useEffect(() => {
    document.documentElement.lang = lang;
  }, [lang]);

  const setLang = React.useCallback((l) => {
    localStorage.setItem('stl-lang', l);
    setLangState(l);
  }, []);

  /* t('about.heading') → STRINGS[lang].about.heading, falling back to
     English when the active language is missing the key. */
  const t = React.useCallback((path) => {
    const get = (o) => path.split('.').reduce((a, k) => (a == null ? undefined : a[k]), o);
    const v = get(window.STRINGS[lang]);
    return (v === undefined || v === null || v === '') ? get(window.STRINGS.en) : v;
  }, [lang]);

  const value = React.useMemo(() => ({ lang, setLang, t }), [lang, setLang, t]);
  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
}

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

/* rich('read *this* now') → ['read ', <em>this</em>, ' now'] */
function rich(text) {
  if (typeof text !== 'string') return text;
  const parts = text.split(/\*([^*]+)\*/g);
  if (parts.length === 1) return text;
  return parts.map((p, i) => (i % 2 ? <em key={i}>{p}</em> : p));
}

function LangSwitch() {
  const { lang, setLang } = useI18n();
  return (
    <div className="lang-switch" role="group" aria-label="Language">
      {(window.I18N_LANGS || []).map((l) => (
        l.soon ? (
          <span
            key={l.code}
            className="lang-soon"
            lang={l.code}
            title="Coming soon"
            data-tip="Coming soon"
            aria-disabled="true"
          >
            {l.label}
          </span>
        ) : (
          <button
            key={l.code}
            type="button"
            lang={l.code}
            className={lang === l.code ? 'on' : ''}
            aria-pressed={lang === l.code}
            onClick={() => setLang(l.code)}
          >
            {l.label}
          </button>
        )
      ))}
    </div>
  );
}

Object.assign(window, { I18nProvider, useI18n, rich, LangSwitch });