// Floating language picker (bottom-right) — 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 LangPicker() {
  const [current, setCurrent] = React.useState(readGoogtrans);
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

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

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

  return (
    <div className="pp-lang-picker notranslate" translate="no" ref={ref}>
      {open && (
        <div className="pp-lang-menu" role="menu">
          {PP_LANGS.map(l => (
            <button key={l.code}
                    className={"pp-lang-item" + (l.code === current ? " is-active" : "")}
                    onClick={() => choose(l.code)}
                    role="menuitem">
              <span className="pp-lang-flag" aria-hidden="true">{l.flag}</span>
              <span className="pp-lang-name">{l.name}</span>
            </button>
          ))}
        </div>
      )}
      <button className="pp-lang-trigger"
              onClick={() => setOpen(o => !o)}
              aria-haspopup="menu"
              aria-expanded={open}
              aria-label={`Language: ${cur.name}`}
              title={cur.name}>
        <span className="pp-lang-flag" aria-hidden="true">{cur.flag}</span>
        <span className="pp-lang-code">{cur.code.toUpperCase()}</span>
        <span className={"pp-lang-chev" + (open ? " is-open" : "")} aria-hidden="true">
          <IconChevron size={12}/>
        </span>
      </button>
    </div>
  );
}

Object.assign(window, { LangPicker });