// i18n — language state, browser detection, persistence, dictionary + LangToggle
// Dynamic translation: ONE page, strings swap on toggle. No duplicate pages.

const I18nContext = React.createContext(null);

// Dictionary lives in translations.js (window.TRANSLATIONS), loaded first.
const TRANSLATIONS = window.TRANSLATIONS || { pt: {}, en: {} };

const LANG_KEY = 'mdai-lang';

function detectInitialLang() {
  // PT is the default for everyone. Only an explicit prior choice overrides it.
  try {
    const saved = localStorage.getItem(LANG_KEY);
    if (saved === 'pt' || saved === 'en') return saved;
  } catch (e) {}
  return 'pt';
}

const I18nProvider = ({ children }) => {
  const [lang, setLangState] = React.useState(detectInitialLang);

  const setLang = React.useCallback((l) => {
    if (l !== 'pt' && l !== 'en') return;
    setLangState(l);
    try { localStorage.setItem(LANG_KEY, l); } catch (e) {}
  }, []);

  React.useEffect(() => {
    document.documentElement.setAttribute('lang', lang === 'pt' ? 'pt-PT' : 'en');
    const dict = TRANSLATIONS[lang] || TRANSLATIONS.pt || {};
    const desc = dict['meta.description'];
    if (desc) {
      const sels = ['meta[name="description"]', 'meta[property="og:description"]', 'meta[name="twitter:description"]'];
      sels.forEach((s) => { const el = document.querySelector(s); if (el) el.setAttribute('content', desc); });
    }
    const ogLocale = document.querySelector('meta[property="og:locale"]');
    if (ogLocale) ogLocale.setAttribute('content', lang === 'pt' ? 'pt_PT' : 'en_US');
  }, [lang]);

  const t = React.useCallback((key) => {
    const dict = TRANSLATIONS[lang] || TRANSLATIONS.pt || {};
    if (dict[key] != null) return dict[key];
    if (TRANSLATIONS.pt && TRANSLATIONS.pt[key] != null) return TRANSLATIONS.pt[key];
    return key;
  }, [lang]);

  const dict = TRANSLATIONS[lang] || TRANSLATIONS.pt || {};

  return <I18nContext.Provider value={{ lang, setLang, t, dict }}>{children}</I18nContext.Provider>;
};

const useI18n = () => {
  const ctx = React.useContext(I18nContext);
  return ctx || { lang: 'pt', setLang: () => {}, t: (k) => k, dict: (window.TRANSLATIONS && window.TRANSLATIONS.pt) || {} };
};

// ---- Segmented PT · EN toggle (Proposta A) — minimal, no gradient ----
const LangToggle = ({ style }) => {
  const { lang, setLang } = useI18n();
  const opts = ['pt', 'en'];
  return (
    <div
      role="group"
      aria-label="Idioma / Language"
      style={{
        display: 'inline-flex', alignItems: 'center',
        border: '1px solid var(--border)', borderRadius: 8,
        padding: 2, gap: 0, background: 'transparent',
        flexShrink: 0, ...style
      }}>
      {opts.map((o) => {
        const active = lang === o;
        return (
          <button
            key={o}
            type="button"
            onClick={() => setLang(o)}
            aria-pressed={active}
            lang={o}
            style={{
              appearance: 'none', border: 'none', cursor: 'pointer', font: 'inherit',
              fontSize: 11, fontWeight: 600, letterSpacing: '0.04em',
              lineHeight: 1, padding: '5px 8px', borderRadius: 6,
              color: active ? 'var(--text)' : 'var(--text-muted)',
              background: active ? 'rgba(255,255,255,0.08)' : 'transparent',
              transition: 'color 0.2s ease, background 0.2s ease'
            }}>
            {o.toUpperCase()}
          </button>);

      })}
    </div>);

};

Object.assign(window, { I18nContext, I18nProvider, useI18n, LangToggle, TRANSLATIONS });