// Combobox con autocompletado: se comporta como un buscador moderno.
// options: [{ value, label, searchText }]
function Combobox({ options, value, onChange, placeholder, disabled }) {
  const [texto, setTexto] = React.useState('');
  const [abierto, setAbierto] = React.useState(false);
  const [resaltado, setResaltado] = React.useState(0);
  const wrapRef = React.useRef(null);
  const inputRef = React.useRef(null);

  const seleccionado = options.find((o) => o.value === value);

  React.useEffect(() => {
    if (!abierto) setTexto(seleccionado ? seleccionado.label : '');
  }, [value, abierto]); // eslint-disable-line

  React.useEffect(() => {
    function onClickFuera(e) {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
        setAbierto(false);
        setTexto(seleccionado ? seleccionado.label : '');
      }
    }
    document.addEventListener('mousedown', onClickFuera);
    return () => document.removeEventListener('mousedown', onClickFuera);
  }); // eslint-disable-line

  const filtradas = React.useMemo(() => {
    const q = texto.trim().toLowerCase();
    if (!q || (seleccionado && texto === seleccionado.label)) return options.slice(0, 50);
    return options.filter((o) => (o.searchText || o.label).toLowerCase().includes(q)).slice(0, 50);
  }, [texto, options]); // eslint-disable-line

  const elegir = (opt) => {
    onChange(opt.value);
    setTexto(opt.label);
    setAbierto(false);
  };

  return (
    <div ref={wrapRef} style={{ position: 'relative' }}>
      <input
        ref={inputRef}
        value={texto}
        placeholder={placeholder}
        disabled={disabled}
        onFocus={() => { setAbierto(true); setTexto(''); }}
        onChange={(e) => { setTexto(e.target.value); setAbierto(true); setResaltado(0); }}
        onKeyDown={(e) => {
          if (!abierto) return;
          if (e.key === 'ArrowDown') { e.preventDefault(); setResaltado((r) => Math.min(r + 1, filtradas.length - 1)); }
          if (e.key === 'ArrowUp') { e.preventDefault(); setResaltado((r) => Math.max(r - 1, 0)); }
          if (e.key === 'Enter' && filtradas[resaltado]) { e.preventDefault(); elegir(filtradas[resaltado]); }
          if (e.key === 'Escape') { setAbierto(false); setTexto(seleccionado ? seleccionado.label : ''); }
        }}
      />
      {abierto && filtradas.length > 0 && (
        <div className="combobox-menu">
          {filtradas.map((o, i) => (
            <div
              key={o.value}
              className={`combobox-option ${i === resaltado ? 'is-active' : ''}`}
              onMouseDown={(e) => { e.preventDefault(); elegir(o); }}
              onMouseEnter={() => setResaltado(i)}
            >
              {o.label}
            </div>
          ))}
        </div>
      )}
      {abierto && filtradas.length === 0 && (
        <div className="combobox-menu"><div className="combobox-option combobox-option--empty">Sin coincidencias</div></div>
      )}
    </div>
  );
}