// Language switcher: globe button → opens a popover with a grid of 18 languages.
// Caller passes { lang, setLang, accent }.

window.LangSwitcher = function LangSwitcher({ lang, setLang, accent = '#E63028', t }) {
  const tx = (k, fallback) => (t ? t(k) : fallback);
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

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

  const current = window.OXIDE_LANGS.find(l => l.code === lang) || window.OXIDE_LANGS[0];

  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button onClick={() => setOpen(v => !v)}
        aria-label={tx('lang_aria', 'Change language')}
        aria-expanded={open}
        style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '7px 12px',
          background: open ? `${accent}22` : 'rgba(237,230,221,0.06)',
          border: `1px solid ${open ? accent : 'rgba(237,230,221,0.15)'}`,
          color: '#EDE6DD',
          fontFamily: 'ui-monospace, "JetBrains Mono", monospace',
          fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em',
          cursor: 'pointer',
          transition: 'background .2s, border-color .2s',
        }}>
        {/* globe icon */}
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="10"/>
          <line x1="2" y1="12" x2="22" y2="12"/>
          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
        </svg>
        <span style={{ fontWeight: 700 }}>{current.code.toUpperCase()}</span>
        <span style={{ fontSize: 9, opacity: 0.6 }}>▾</span>
      </button>

      {open && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 10px)', right: 0,
          background: 'rgba(10,8,7,0.96)',
          border: '1px solid rgba(237,230,221,0.15)',
          backdropFilter: 'blur(20px)',
          padding: 14,
          minWidth: 320,
          zIndex: 100,
          boxShadow: '0 20px 60px rgba(0,0,0,0.6)',
          animation: 'oxide-fade-down .2s ease',
        }}>
          <div style={{
            fontFamily: 'ui-monospace, monospace', fontSize: 10, color: '#8a7e72',
            textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: 10,
            display: 'flex', justifyContent: 'space-between',
          }}>
            <span>{tx('lang_label', 'Language · 18')}</span>
            <span style={{ color: accent }}>{current.native}</span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 2 }}>
            {window.OXIDE_LANGS.map(l => {
              const active = l.code === lang;
              return (
                <button key={l.code}
                  onClick={() => { setLang(l.code); setOpen(false); }}
                  style={{
                    display: 'flex', alignItems: 'center', gap: 10,
                    padding: '8px 10px',
                    background: active ? `${accent}` : 'transparent',
                    border: `1px solid ${active ? accent : 'transparent'}`,
                    color: active ? '#fff' : '#EDE6DD',
                    cursor: 'pointer', textAlign: 'left',
                    fontFamily: 'inherit',
                    transition: 'background .15s, border-color .15s',
                  }}
                  onMouseEnter={e => { if (!active) e.currentTarget.style.background = 'rgba(237,230,221,0.06)'; }}
                  onMouseLeave={e => { if (!active) e.currentTarget.style.background = 'transparent'; }}
                >
                  <span style={{
                    fontFamily: 'ui-monospace, monospace', fontSize: 10,
                    letterSpacing: '0.1em', minWidth: 22,
                    color: active ? '#fff' : '#8a7e72',
                  }}>{l.code.toUpperCase()}</span>
                  <span style={{ fontSize: 13, fontWeight: 500, flex: 1 }}>{l.native}</span>
                  {active && <span style={{ fontSize: 11 }}>●</span>}
                </button>
              );
            })}
          </div>
        </div>
      )}
      <style>{`
        @keyframes oxide-fade-down {
          from { opacity: 0; transform: translateY(-6px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
};