// Dropdown unificado con la estética de la web.
// Uso:
//   <Select value={v} onChange={setV} options={[{value:'I',label:'IFR'},...]} mono/>

const Select = ({ value, onChange, options = [], mono = false, placeholder = '—', disabled = false, style, className = '' }) => {
  const [open, setOpen] = useState(false);
  const [highlight, setHighlight] = useState(0);
  const wrapRef = useRef(null);
  const listRef = useRef(null);
  const btnRef = useRef(null);
  const [menuPos, setMenuPos] = useState({ top: 0, left: 0, width: 0, placement: 'bottom' });

  const current = options.find(o => String(o.value) === String(value));
  const label = current ? current.label : placeholder;

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

  useEffect(() => {
    if (!open || !btnRef.current) return;
    const r = btnRef.current.getBoundingClientRect();
    const maxH = 280;
    const below = window.innerHeight - r.bottom;
    const above = r.top;
    const placement = below < maxH + 20 && above > below ? 'top' : 'bottom';
    setMenuPos({
      top: placement === 'bottom' ? r.bottom + 6 : r.top - 6,
      left: r.left,
      width: r.width,
      placement
    });
    // scroll current into view
    setTimeout(() => {
      if (listRef.current) {
        const active = listRef.current.querySelector('.select-option.active');
        if (active) active.scrollIntoView({ block: 'nearest' });
      }
    }, 0);
  }, [open]);

  useEffect(() => {
    if (open) {
      const idx = options.findIndex(o => String(o.value) === String(value));
      setHighlight(idx >= 0 ? idx : 0);
    }
  }, [open]);

  const onKey = (e) => {
    if (disabled) return;
    if (!open && (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); setOpen(true); return; }
    if (!open) return;
    if (e.key === 'ArrowDown') { e.preventDefault(); setHighlight(h => Math.min(h + 1, options.length - 1)); }
    else if (e.key === 'ArrowUp') { e.preventDefault(); setHighlight(h => Math.max(h - 1, 0)); }
    else if (e.key === 'Enter') { e.preventDefault(); const o = options[highlight]; if (o) { onChange(o.value); setOpen(false); } }
    else if (e.key === 'Home') { setHighlight(0); }
    else if (e.key === 'End') { setHighlight(options.length - 1); }
  };

  return <div ref={wrapRef} className={`select-wrap ${open ? 'open' : ''} ${className}`} style={style}>
    <button
      ref={btnRef}
      type="button"
      className={`field select-btn ${mono ? 'mono' : ''} ${disabled ? 'disabled' : ''}`}
      onClick={() => !disabled && setOpen(o => !o)}
      onKeyDown={onKey}
      disabled={disabled}
      aria-haspopup="listbox"
      aria-expanded={open}
    >
      <span className={`select-label ${!current ? 'placeholder' : ''}`}>{label}</span>
      <svg className="select-chev" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
    </button>
    {open && ReactDOM.createPortal(
      <div
        ref={listRef}
        className={`select-menu ${menuPos.placement === 'top' ? 'up' : 'down'}`}
        role="listbox"
        style={{
          position: 'fixed',
          top: menuPos.placement === 'bottom' ? menuPos.top : 'auto',
          bottom: menuPos.placement === 'top' ? (window.innerHeight - menuPos.top) : 'auto',
          left: menuPos.left,
          width: menuPos.width,
          zIndex: 500,
        }}
      >
        {options.map((o, i) => (
          <button
            key={String(o.value)}
            type="button"
            role="option"
            aria-selected={String(o.value) === String(value)}
            className={`select-option ${mono ? 'mono' : ''} ${String(o.value) === String(value) ? 'active' : ''} ${i === highlight ? 'highlight' : ''}`}
            onMouseEnter={() => setHighlight(i)}
            onClick={() => { onChange(o.value); setOpen(false); }}
          >
            {o.icon && <span className="select-opt-icon">{o.icon}</span>}
            <span className="select-opt-label">{o.label}</span>
            {String(o.value) === String(value) && <svg className="select-opt-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>}
          </button>
        ))}
      </div>,
      document.body
    )}
  </div>;
};

window.Select = Select;