scoreodonto.com/frontend/components/ProteticoPicker.tsx

import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Search, X, Star, Check, ShieldCheck, UserPlus, Building2 } from 'lucide-react';
import { HybridBackend } from '../services/backend.ts';
import { useToast } from '../contexts/ToastContext.tsx';

// Seletor de protético em modal: busca por nome/e-mail, favorito (★), padrão (pré-selecionado)
// e "adicionar por e-mail" (vincula como interno — resolve o protético que não está no diretório).
export const ProteticoPicker: React.FC<{ value: string; onChange: (id: string, lab?: any) => void; className?: string }> = ({ value, onChange, className }) => {
  const toast = useToast();
  const [open, setOpen] = useState(false);
  const [labs, setLabs] = useState<any[]>([]);
  const [busca, setBusca] = useState('');
  const [addEmail, setAddEmail] = useState('');
  const [showAdd, setShowAdd] = useState(false);
  const [busy, setBusy] = useState(false);
  const preselected = useRef(false);

  const carregar = useCallback(async (): Promise<any[]> => {
    try { const r = await HybridBackend.getProteseLaboratorios(); const arr = Array.isArray(r) ? r : []; setLabs(arr); return arr; }
    catch { setLabs([]); return []; }
  }, []);
  useEffect(() => { carregar(); }, [carregar]);

  // Pré-seleciona o protético PADRÃO uma única vez, quando nada foi escolhido ainda.
  useEffect(() => {
    if (preselected.current || value) return;
    const pad = labs.find(l => l.padrao);
    if (pad) { preselected.current = true; onChange(pad.id, pad); }
  }, [labs, value]); // eslint-disable-line react-hooks/exhaustive-deps

  const sel = labs.find(l => l.id === value);
  const q = busca.toLowerCase();
  const filtrados = labs.filter(l => !q || (l.nome || '').toLowerCase().includes(q) || (l.email || '').toLowerCase().includes(q));

  const toggleFav = async (l: any, e: React.MouseEvent) => {
    e.stopPropagation();
    try { await HybridBackend.setProteticoPref(l.id, { favorito: !l.favorito }); await carregar(); }
    catch { toast.error('ERRO'); }
  };
  const tornarPadrao = async (l: any, e: React.MouseEvent) => {
    e.stopPropagation();
    try { await HybridBackend.setProteticoPref(l.id, { padrao: !l.padrao }); await carregar(); toast.success(l.padrao ? 'PADRÃO REMOVIDO.' : 'DEFINIDO COMO PADRÃO.'); }
    catch { toast.error('ERRO'); }
  };
  const selecionar = (l: any) => { onChange(l.id, l); setOpen(false); setBusca(''); };
  const adicionar = async () => {
    if (!addEmail.trim()) return;
    setBusy(true);
    try {
      const r = await HybridBackend.vincularProteticoEmail(addEmail.trim());
      if (r?.error) throw new Error(r.error);
      toast.success('PROTÉTICO VINCULADO.');
      setAddEmail(''); setShowAdd(false);
      const novos = await carregar();
      const novo = novos.find((x: any) => x.id === r.protetico?.id);
      if (novo) selecionar(novo);
    } catch (e: any) { toast.error((e.message || 'ERRO').toUpperCase()); } finally { setBusy(false); }
  };

  return (
    <>
      <button type="button" 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 text-left flex items-center justify-between gap-2 uppercase focus:border-teal-400 outline-none transition-all'}>
        <span className="truncate flex items-center gap-2">
          {sel ? (<><Building2 size={16} className="text-teal-600 shrink-0" /> {sel.nome}{sel.padrao ? ' · PADRÃO' : ''}</>) : 'Escolha o laboratório / protético...'}
        </span>
        <Search size={16} className="text-gray-400 shrink-0" />
      </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-[88vh] 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">Escolher protético</h3>
              <button onClick={() => setOpen(false)}><X size={20} className="text-gray-400" /></button>
            </div>
            <div className="p-4 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 por nome ou e-mail…"
                  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">Nenhum protético encontrado.</p>
              ) : filtrados.map(l => (
                <div key={l.id} onClick={() => selecionar(l)}
                  className={`flex items-center gap-2 px-3 py-2.5 rounded-xl cursor-pointer ${l.id === value ? 'bg-teal-50 border border-teal-200' : 'hover:bg-gray-50'}`}>
                  <button onClick={e => toggleFav(l, e)} title="Favorito" className="shrink-0">
                    <Star size={16} className={l.favorito ? 'text-amber-400 fill-amber-400' : 'text-gray-300'} />
                  </button>
                  <div className="min-w-0 flex-1">
                    <p className="font-black text-gray-800 text-sm truncate uppercase flex items-center gap-1.5">
                      {l.nome}{l.verificado && <ShieldCheck size={13} className="text-blue-500 shrink-0" />}
                    </p>
                    <p className="text-[10px] font-bold text-gray-400 uppercase truncate flex items-center gap-1.5">
                      <span className={l.interno ? 'text-teal-600' : ''}>{l.interno ? 'Interno' : 'Diretório'}</span>
                      {l.nota != null && <span>· ★ {l.nota}</span>}
                      {l.padrao && <span className="text-violet-600">· Padrão</span>}
                    </p>
                  </div>
                  <button onClick={e => tornarPadrao(l, e)} title="Definir como padrão"
                    className={`shrink-0 text-[9px] font-black uppercase px-2 py-1 rounded-lg border ${l.padrao ? 'border-violet-300 bg-violet-50 text-violet-700' : 'border-gray-200 text-gray-400'}`}>Padrão</button>
                  {l.id === value && <Check size={16} className="text-teal-600 shrink-0" />}
                </div>
              ))}
            </div>
            <div className="p-4 border-t border-gray-100">
              {showAdd ? (
                <div className="flex gap-2">
                  <input value={addEmail} onChange={e => setAddEmail(e.target.value)} type="email" placeholder="e-mail do protético"
                    className="flex-1 px-3 py-2 rounded-lg border border-gray-200 text-sm outline-none focus:border-teal-400" />
                  <button disabled={busy} onClick={adicionar} className="px-3 rounded-lg bg-teal-600 text-white text-xs font-black uppercase disabled:opacity-50">Vincular</button>
                </div>
              ) : (
                <button onClick={() => setShowAdd(true)} className="w-full py-2.5 rounded-xl border border-dashed border-gray-300 text-gray-500 text-xs font-black uppercase flex items-center justify-center gap-2">
                  <UserPlus size={14} /> Não encontrou? Adicionar por e-mail
                </button>
              )}
            </div>
          </div>
        </div>
      )}
    </>
  );
};