// Language settings (Settings screen) — drives the Google Translate widget.
// Translation happens via google.translate.TranslateElement initialised in index.html;
// this component is just the flag UI that sets googtrans cookies and pokes the hidden combo.

const PP_LANGS = [
  { code: 'en',    name: 'English',    flag: '🇬🇧' },
  { code: 'es',    name: 'Español',    flag: '🇪🇸' },
  { code: 'fr',    name: 'Français',   flag: '🇫🇷' },
  { code: 'de',    name: 'Deutsch',    flag: '🇩🇪' },
  { code: 'it',    name: 'Italiano',   flag: '🇮🇹' },
  { code: 'pt',    name: 'Português',  flag: '🇵🇹' },
  { code: 'nl',    name: 'Nederlands', flag: '🇳🇱' },
  { code: 'pl',    name: 'Polski',     flag: '🇵🇱' },
  { code: 'sv',    name: 'Svenska',    flag: '🇸🇪' },
  { code: 'da',    name: 'Dansk',      flag: '🇩🇰' },
  { code: 'no',    name: 'Norsk',      flag: '🇳🇴' },
  { code: 'fi',    name: 'Suomi',      flag: '🇫🇮' },
  { code: 'ru',    name: 'Русский',    flag: '🇷🇺' },
  { code: 'tr',    name: 'Türkçe',     flag: '🇹🇷' },
  { code: 'ar',    name: 'العربية',    flag: '🇸🇦' },
  { code: 'he',    name: 'עברית',      flag: '🇮🇱' },
  { code: 'hi',    name: 'हिन्दी',      flag: '🇮🇳' },
  { code: 'ja',    name: '日本語',      flag: '🇯🇵' },
  { code: 'ko',    name: '한국어',      flag: '🇰🇷' },
  { code: 'zh-CN', name: '简体中文',    flag: '🇨🇳' },
  { code: 'zh-TW', name: '繁體中文',    flag: '🇹🇼' },
];

function readGoogtrans() {
  try {
    const m = document.cookie.match(/(?:^|;\s*)googtrans=\/[a-zA-Z-]+\/([a-zA-Z-]+)/);
    return m ? m[1] : 'en';
  } catch (e) { return 'en'; }
}

function setGoogtransCookies(target) {
  const value = `/en/${target}`;
  const host = window.location.hostname;
  document.cookie = `googtrans=${value};path=/;`;
  document.cookie = `googtrans=${value};path=/;domain=${host};`;
  const parts = host.split('.');
  if (parts.length > 1) {
    const root = '.' + parts.slice(-2).join('.');
    document.cookie = `googtrans=${value};path=/;domain=${root};`;
  }
}

function applyLanguage(code) {
  // Always set cookies — needed for state to survive reload.
  setGoogtransCookies(code);

  // Try to drive the hidden combo without a reload.
  const combo = document.querySelector('.goog-te-combo');
  if (combo) {
    combo.value = code === 'en' ? '' : code;
    combo.dispatchEvent(new Event('change'));
    if (code === 'en') {
      // Google sometimes leaves stale DOM — a reload is the reliable revert.
      setTimeout(() => window.location.reload(), 50);
    }
    return;
  }
  // Combo not ready yet — fall back to reload (cookies take over after).
  window.location.reload();
}

function LangSettings() {
  const [current, setCurrent] = React.useState(readGoogtrans);

  const choose = (code) => {
    setCurrent(code);
    applyLanguage(code);
  };

  const cur = PP_LANGS.find(l => l.code === current) || PP_LANGS[0];

  return (
    <section className="pp-keys-section notranslate" translate="no">
      <div className="pp-keys-section-head">
        <div className="pp-keys-section-title">
          <span className="pp-env-pill">Language</span>
        </div>
        <p className="pp-keys-section-sub">Translate the portal. Applies straight away and is remembered on this device.</p>
      </div>
      <div className="pp-lang-row">
        <span className="pp-lang-flag" aria-hidden="true">{cur.flag}</span>
        <div className="pp-select-wrap">
          <select className="pp-select"
                  value={current}
                  onChange={(e) => choose(e.target.value)}
                  aria-label="Portal language">
            {PP_LANGS.map(l => (
              <option key={l.code} value={l.code}>{l.name}</option>
            ))}
          </select>
          <span className="pp-select-caret"><IconChevronDn size={14}/></span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LangSettings });