/* global React, useLang, LANG_LIST_DATA */
/* Language switcher — globe button + dropdown panel */
const { useState, useEffect, useRef } = React;

function LangSwitcher() {
  const { lang, setLang, LANG_LIST } = useLang();
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState('');
  const ref = useRef(null);
  const inputRef = useRef(null);

  const current = LANG_LIST.find(l => l.code === lang) || LANG_LIST[0];
  const filtered = LANG_LIST.filter(l =>
    l.name.toLowerCase().includes(query.toLowerCase()) ||
    l.native.toLowerCase().includes(query.toLowerCase()) ||
    l.code.toLowerCase().includes(query.toLowerCase())
  );

  /* Close on outside click */
  useEffect(() => {
    const handler = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  /* Focus search on open */
  useEffect(() => {
    if (open && inputRef.current) {
      setTimeout(() => inputRef.current?.focus(), 50);
    } else {
      setQuery('');
    }
  }, [open]);

  /* Close on ESC */
  useEffect(() => {
    const handler = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('keydown', handler);
    return () => document.removeEventListener('keydown', handler);
  }, []);

  return React.createElement('div', { className: 'lang-switcher', ref },
    /* Trigger button */
    React.createElement('button', {
      className: `lang-btn ${open ? 'open' : ''}`,
      onClick: () => setOpen(o => !o),
      title: 'Change language',
    },
      React.createElement('span', { className: 'lang-globe' }, '🌐'),
      React.createElement('span', { className: 'lang-current' }, current.flag + ' ' + current.code.toUpperCase()),
      React.createElement('span', { className: 'lang-chevron' }, open ? '▲' : '▼'),
    ),

    /* Dropdown */
    open && React.createElement('div', { className: 'lang-dropdown' },
      React.createElement('div', { className: 'lang-search-wrap' },
        React.createElement('input', {
          ref: inputRef,
          className: 'lang-search',
          placeholder: '🔍 Search...',
          value: query,
          onChange: e => setQuery(e.target.value),
        })
      ),
      React.createElement('div', { className: 'lang-list' },
        filtered.map(l =>
          React.createElement('button', {
            key: l.code,
            className: `lang-item ${l.code === lang ? 'active' : ''}`,
            onClick: () => { setLang(l.code); setOpen(false); },
          },
            React.createElement('span', { className: 'lang-flag' }, l.flag),
            React.createElement('span', { className: 'lang-name' },
              React.createElement('span', { className: 'lang-native' }, l.native),
              React.createElement('span', { className: 'lang-en' }, l.name),
            ),
            l.code === lang && React.createElement('span', { className: 'lang-check' }, '✓'),
          )
        )
      )
    )
  );
}

window.LangSwitcher = LangSwitcher;