/* global React, useLocale */
// Jullia — the language switch. A compact trigger (the current code, a hairline
// chevron) that opens a small dropdown of the other two. No flags — just the
// codes, set mono, wide tracking. Closes on selection or on an outside click.

function LanguageSwitch({ size = 'sm', align = 'right', style = {} }) {
  const { locale, setLocale } = useLocale();
  const locales = window.JULLIA_LOCALES || ['ua', 'pl', 'en'];
  const labels = window.JULLIA_LOCALE_LABELS || {};
  const [open, setOpen] = React.useState(false);
  const rootRef = React.useRef(null);
  const fontSize = size === 'lg' ? 'var(--text-sm)' : 'var(--text-2xs)';

  React.useEffect(() => {
    if (!open) return undefined;
    const onDocDown = (e) => {
      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener('mousedown', onDocDown);
    return () => document.removeEventListener('mousedown', onDocDown);
  }, [open]);

  const choose = (l) => { setLocale(l); setOpen(false); };

  return (
    <div ref={rootRef} style={{ position: 'relative', ...style }}>
      <button
        onClick={() => setOpen((v) => !v)}
        aria-haspopup="listbox"
        aria-expanded={open}
        style={{
          display: 'inline-flex', alignItems: 'center', gap: '0.6em',
          background: 'none', border: 'none', cursor: 'pointer', padding: 0,
          fontFamily: 'var(--font-mono)', fontSize,
          letterSpacing: 'var(--tracking-label)',
          color: 'var(--text-primary)',
        }}
      >
        {labels[locale] || locale.toUpperCase()}
        <span aria-hidden="true" style={{ display: 'inline-block', color: 'var(--text-tertiary)', transition: 'transform var(--dur-fast) var(--ease-quiet)', transform: open ? 'rotate(180deg)' : 'none', fontSize: '0.85em' }}>▾</span>
      </button>

      {open && (
        <div
          role="listbox"
          style={{
            position: 'absolute', top: 'calc(100% + 14px)',
            [align]: 0,
            background: 'var(--black)', border: '1px solid var(--hairline-strong)',
            minWidth: 84, padding: '6px 0', zIndex: 20,
            animation: 'jxLangIn 220ms var(--ease-out-soft) both',
          }}
        >
          {locales.filter((l) => l !== locale).map((l) => (
            <button
              key={l}
              role="option"
              onClick={() => choose(l)}
              style={{
                display: 'block', width: '100%', textAlign: 'left',
                background: 'none', border: 'none', cursor: 'pointer',
                padding: '9px 16px',
                fontFamily: 'var(--font-mono)', fontSize,
                letterSpacing: 'var(--tracking-label)',
                color: 'var(--text-secondary)',
                transition: 'var(--t-hover)',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--text-emphasis)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--text-secondary)'; }}
            >
              {labels[l] || l.toUpperCase()}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

window.LanguageSwitch = LanguageSwitch;