import React, { useState } from 'react';
import { Search, X, Check, ChevronDown } from 'lucide-react';

export interface SelectOption { value: string; label: string; hint?: string }

// Dropdown genérico que abre um modal com busca — substitui <select> em listas longas.
export const SearchSelect: React.FC<{
  value: string;
  onChange: (value: string) => void;
  options: SelectOption[];
  placeholder?: string;
  title?: string;
  className?: string;
  disabled?: boolean;
}> = ({ value, onChange, options, placeholder = 'Selecione...', title, className, disabled }) => {
  const [open, setOpen] = useState(false);
  const [busca, setBusca] = useState('');
  const sel = options.find(o => o.value === value);
  const q = busca.trim().toLowerCase();
  const filtrados = q ? options.filter(o => o.label.toLowerCase().includes(q) || (o.hint || '').toLowerCase().includes(q)) : options;
  const pick = (v: string) => { onChange(v); setOpen(false); setBusca(''); };

  return (
    <>
      <button type="button" disabled={disabled} onClick={() => setOpen(true)}
        className={className || 'w-full p-4 bg-gray-50 border-2 border-gray-100 rounded-2xl font-black text-gray-700 text-sm focus:border-teal-400 outline-none transition-all uppercase disabled:opacity-50'}>
        <span className="flex items-center justify-between gap-2">
          <span className={`truncate ${sel ? '' : 'text-gray-400'}`}>{sel ? sel.label : placeholder}</span>
          <ChevronDown size={16} className="text-gray-400 shrink-0" />
        </span>
      </button>

      {open && (
        <div className="fixed inset-0 bg-black/40 z-[60] flex items-center justify-center p-4" onClick={() => setOpen(false)}>
          <div className="bg-white rounded-2xl w-full max-w-md max-h-[85vh] flex flex-col" onClick={e => e.stopPropagation()}>
            <div className="flex items-center justify-between p-4 border-b border-gray-100">
              <h3 className="font-black text-gray-800 uppercase text-sm">{title || placeholder}</h3>
              <button onClick={() => setOpen(false)}><X size={20} className="text-gray-400" /></button>
            </div>
            <div className="p-3 border-b border-gray-50">
              <div className="relative">
                <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-300" />
                <input autoFocus value={busca} onChange={e => setBusca(e.target.value)} placeholder="Buscar…"
                  className="w-full pl-9 pr-3 py-2.5 rounded-xl border border-gray-200 text-sm outline-none focus:border-teal-400" />
              </div>
            </div>
            <div className="flex-1 overflow-y-auto p-2">
              {filtrados.length === 0 ? (
                <p className="text-center text-gray-400 text-sm font-bold uppercase py-10">Nada encontrado.</p>
              ) : filtrados.map(o => (
                <button key={o.value} onClick={() => pick(o.value)}
                  className={`w-full text-left flex items-center gap-2 px-3 py-2.5 rounded-xl ${o.value === value ? 'bg-teal-50 border border-teal-200' : 'hover:bg-gray-50'}`}>
                  <div className="min-w-0 flex-1">
                    <p className="font-bold text-gray-800 text-sm truncate uppercase">{o.label}</p>
                    {o.hint && <p className="text-[11px] text-gray-400 truncate">{o.hint}</p>}
                  </div>
                  {o.value === value && <Check size={16} className="text-teal-600 shrink-0" />}
                </button>
              ))}
            </div>
          </div>
        </div>
      )}
    </>
  );
};