// ─── Leads · Kanban ─────────────────────────────────────────────────────────

// Fallback seguro para leads sin broker asignado
if (!window.BROKERS['SIN']) {
  window.BROKERS['SIN'] = { nombre: 'Sin asignar', color: '#677A88', team: '' };
}

// Adapta el formato crudo del backend al contrato que espera el JSX
function adaptarLead(l) {
  const FUENTE_MAP = {
    INSTAGRAM: 'Instagram', WHATSAPP: 'WhatsApp',
    TOKKO: 'Tokko', ZONAPROP: 'ZonaProp', MANUAL: 'Manual',
  };
  const CANAL_ICON_MAP = {
    INSTAGRAM: '📸', WHATSAPP: '💬', TOKKO: '🏠', ZONAPROP: '🔍', MANUAL: '✏️',
  };
  const ESTADO_MAP = {
    NUEVO: 'Nuevo', CONTACTADO: 'Contactado',
    CALIFICADO: 'Calificado', CERRADO: 'Cerrado',
  };
  // Derivar iniciales y registrar en BROKERS si es nuevo
  let brokerCode = 'SIN';
  if (l.broker) {
    const ini = `${l.broker.nombre?.[0] ?? ''}${l.broker.apellido?.[0] ?? ''}`.toUpperCase();
    brokerCode = ini || 'SIN';
    if (!window.BROKERS[brokerCode]) {
      window.BROKERS[brokerCode] = {
        nombre: `${l.broker.nombre}${l.broker.apellido ? ' ' + l.broker.apellido : ''}`.trim(),
        color: '#677A88', team: '', id: l.broker.id,
      };
    }
  }
  // Tiempo relativo desde actualizadoEn / creadoEn
  const relTime = (iso) => {
    if (!iso) return '';
    const m = Math.floor((Date.now() - new Date(iso)) / 60000);
    if (m < 1)  return 'ahora';
    if (m < 60) return `hace ${m} min`;
    const h = Math.floor(m / 60);
    if (h < 24) return `hace ${h} h`;
    const d = Math.floor(h / 24);
    return d === 1 ? 'ayer' : `hace ${d} días`;
  };
  return {
    id:       l.id,
    brokerId: l.brokerId ?? null,
    nombre:   l.nombre,
    canal:     FUENTE_MAP[l.fuente]    ?? l.fuente,
    canalIcon: CANAL_ICON_MAP[l.fuente] ?? '',
    etapa:     ESTADO_MAP[l.estado]    ?? l.estado,
    score:    null,              // ⚠ no existe en el modelo Prisma aún
    broker:   brokerCode,
    interes:  l.notas ?? '',
    last:     relTime(l.actualizadoEn ?? l.creadoEn),
  };
}

const ETAPA_TO_ESTADO = {
  'Nuevo': 'NUEVO', 'Contactado': 'CONTACTADO',
  'Calificado': 'CALIFICADO', 'Cerrado': 'CERRADO',
};
const ETAPA_ORDER = ['Nuevo', 'Contactado', 'Calificado', 'Cerrado'];

function Leads() {
  const user = window.CURRENT_USER;
  const rol  = user ? ROLES[user.rol] : null;
  const [leads, setLeads]     = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState(null);

  useEffect(() => {
    fetch(`${API_BASE}/api/leads`, { credentials: 'include' })
      .then(r => r.json())
      .then(json => {
        setLeads((Array.isArray(json) ? json : (json.data ?? [])).map(adaptarLead));
        setLoading(false);
      })
      .catch(err => {
        console.error('[leads fetch]', err);
        setError('Error al cargar leads.');
        setLoading(false);
      });
  }, []);

  const [active, setActive]         = useState(null);
  const [dragId, setDragId]         = useState(null);
  const [showForm, setShowForm]     = useState(false);
  const [brokersList, setBrokersList] = useState([]);

  useEffect(() => {
    fetch(`${API_BASE}/api/usuarios?rol=BROKER`, { credentials: 'include' })
      .then(r => r.json())
      .then(data => setBrokersList(Array.isArray(data) ? data : []))
      .catch(err => console.error('[leads.brokers fetch]', err));
  }, []);

  const byEtapa = useMemo(() => {
    const m = Object.fromEntries(ETAPAS.map(e => [e, []]));
    leads.forEach(l => m[l.etapa]?.push(l));
    return m;
  }, [leads]);

  const move = (id, etapa) => {
    setLeads(prev => prev.map(l => l.id === id ? { ...l, etapa } : l));
    fetch(`${API_BASE}/api/leads/${id}`, {
      method: 'PUT',
      credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ estado: ETAPA_TO_ESTADO[etapa] }),
    }).catch(err => {
      console.error('[leads.move]', err);
      alert('Error al actualizar etapa.');
    });
  };

  const handleUpdate = (updatedLead) => {
    setLeads(prev => prev.map(l => l.id === updatedLead.id ? updatedLead : l));
    setActive(updatedLead);
  };

  const handleDelete = (id) => {
    setLeads(prev => prev.filter(l => l.id !== id));
    setActive(null);
  };

  if (loading) return <div className="p-8 text-slate-500">Cargando leads…</div>;
  if (error)   return <div className="p-8 text-red-500">{error}</div>;

  return (
    <div className="fade-in">
      <PageHeader
        crumbs={['Inicio', 'Leads']}
        title="Leads"
        sub={`${leads.length} leads${rol && rol.leadsScope === 'own' ? ' · alcance propios' : rol && rol.leadsScope === 'all' && rol.rol !== 'admin' ? ' · visualización completa' : ' · prioridad demo 29/05'}`}
        actions={
          <>
            <Button variant="outline" size="md" icon={<I.Filter size={14} />}>Filtros</Button>
            <Button variant="primary" size="md" icon={<I.Plus size={14} sw={2} />} onClick={() => setShowForm(true)}>Nuevo lead</Button>
          </>
        }
      />

      {rol && rol.leadsScope !== 'all' && (
        <ScopeBanner kind="leads" rol={rol} user={user} total={leads.length} visible={leads.length} />
      )}
      {rol && user?.rol === 'marketing' && (
        <div className="mb-5 flex items-center gap-3 px-4 py-2.5 rounded border border-slate-100 bg-white shadow-card">
          <span className="inline-flex items-center justify-center w-7 h-7 rounded-full flex-shrink-0"
            style={{ background: rol.badge + '18', color: rol.badge }}>
            <I.Spark size={13} sw={2} />
          </span>
          <div className="flex-1 min-w-0">
            <div className="text-[12.5px] text-ink">
              Visualización completa de leads <span className="text-slate-400">·</span>{' '}
              <span className="text-slate-500">excepción del rol Marketing</span>
            </div>
            <div className="text-[10.5px] text-slate-500 mt-0.5">
              Podés ver los {leads.length} leads del sistema, pero las operaciones siguen acotadas a las propias.
            </div>
          </div>
        </div>
      )}

      {window.CURRENT_USER?.rol === 'ADMIN' && (
        <SimuladorWebhook onLeadCreado={setLeads} />
      )}

      {/* Kanban */}
      <div className="grid grid-cols-5 gap-3">
        {ETAPAS.map((etapa, idx) => {
          const items = byEtapa[etapa];
          const total = items.length;
          return (
            <div key={etapa}
              onDragOver={e => e.preventDefault()}
              onDrop={() => { if (dragId) move(dragId, etapa); setDragId(null); }}
              className="kanban-col bg-white/60 rounded-md border border-slate-100 flex flex-col">
              <div className="px-3.5 py-3 flex items-center justify-between border-b border-slate-100">
                <div className="flex items-center gap-2">
                  <span className="w-1.5 h-5 rounded-full" style={{ background: ['#677A88', '#3D4F5C', '#C9A961', '#A88A47', '#3F8A6B'][idx] }} />
                  <span className="text-[11.5px] font-semibold text-ink tracking-tight uppercase">{etapa}</span>
                  <span className="text-[10px] font-mono text-slate-400">{total}</span>
                </div>
                <button className="text-slate-400 hover:text-slate-700"><I.Plus size={13} sw={2} /></button>
              </div>
              <div className="flex-1 p-2 space-y-2 overflow-y-auto">
                {items.map(l => (
                  <LeadCard key={l.id} lead={l}
                    onClick={() => setActive(l)}
                    onDragStart={() => setDragId(l.id)}
                    onDragEnd={() => setDragId(null)}
                    dragging={dragId === l.id} />
                ))}
                {items.length === 0 && (
                  <div className="text-center text-[11px] text-slate-400 py-8 border border-dashed border-slate-200 rounded">
                    Soltá un lead acá
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>

      {active && (
        <LeadPanel
          lead={active}
          onClose={() => setActive(null)}
          onMove={move}
          onUpdate={handleUpdate}
          onDelete={handleDelete}
          brokersList={brokersList}
        />
      )}
      {showForm && (
        <NuevoLeadForm
          onClose={() => setShowForm(false)}
          onCreated={lead => { setLeads(prev => [lead, ...prev]); setShowForm(false); }}
        />
      )}
    </div>
  );
}

function NuevoLeadForm({ onClose, onCreated }) {
  const [nombre, setNombre]           = useState('');
  const [telefono, setTelefono]       = useState('');
  const [email, setEmail]             = useState('');
  const [fuente, setFuente]           = useState('MANUAL');
  const [notas, setNotas]             = useState('');
  const [propiedadId, setPropiedadId] = useState('');
  const [saving, setSaving]           = useState(false);
  const [propiedades, setPropiedades] = useState([]);

  useEffect(() => {
    fetch(`${API_BASE}/api/propiedades`, { credentials: 'include' })
      .then(r => r.json())
      .then(data => setPropiedades(Array.isArray(data) ? data : (data.data ?? [])))
      .catch(err => console.error('[NuevoLeadForm.propiedades]', err));
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!nombre.trim()) { alert('El nombre es requerido.'); return; }
    setSaving(true);
    const body = { nombre: nombre.trim(), fuente };
    if (telefono.trim())    body.telefono    = telefono.trim();
    if (email.trim())       body.email       = email.trim();
    if (notas.trim())       body.notas       = notas.trim();
    if (propiedadId.trim()) body.propiedadId = propiedadId.trim();
    fetch(`${API_BASE}/api/leads`, {
      method: 'POST',
      credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    })
      .then(r => r.json())
      .then(data => {
        if (data.error) { alert(data.error); setSaving(false); return; }
        onCreated(adaptarLead(data));
      })
      .catch(err => {
        console.error('[leads.create]', err);
        alert('Error al crear lead.');
        setSaving(false);
      });
  };

  return (
    <div className="fixed inset-0 z-30 flex items-center justify-center">
      <div className="absolute inset-0 bg-ink/30 backdrop-blur-[2px]" onClick={onClose} />
      <div className="relative bg-white rounded-lg shadow-pop w-[480px] fade-in">
        <div className="px-6 py-5 border-b border-slate-100 flex items-center justify-between">
          <h2 className="font-serif text-[20px] text-ink">Nuevo lead</h2>
          <button onClick={onClose} className="p-1.5 rounded hover:bg-slate-100 text-slate-500"><I.X size={16} /></button>
        </div>
        <form onSubmit={handleSubmit} className="px-6 py-5 space-y-4">
          <div>
            <label className="block text-[11px] uppercase tracking-[0.12em] text-slate-400 mb-1.5">Nombre *</label>
            <input
              className="w-full border border-slate-200 rounded px-3 py-2 text-[13px] text-ink focus:outline-none focus:border-slate-400"
              value={nombre} onChange={e => setNombre(e.target.value)}
              placeholder="Nombre del lead" autoFocus />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-[11px] uppercase tracking-[0.12em] text-slate-400 mb-1.5">Teléfono</label>
              <input
                className="w-full border border-slate-200 rounded px-3 py-2 text-[13px] text-ink focus:outline-none focus:border-slate-400"
                value={telefono} onChange={e => setTelefono(e.target.value)}
                placeholder="+54 9 11…" />
            </div>
            <div>
              <label className="block text-[11px] uppercase tracking-[0.12em] text-slate-400 mb-1.5">Email</label>
              <input
                type="email"
                className="w-full border border-slate-200 rounded px-3 py-2 text-[13px] text-ink focus:outline-none focus:border-slate-400"
                value={email} onChange={e => setEmail(e.target.value)}
                placeholder="email@…" />
            </div>
          </div>
          <div>
            <label className="block text-[11px] uppercase tracking-[0.12em] text-slate-400 mb-1.5">Fuente</label>
            <select
              className="w-full border border-slate-200 rounded px-3 py-2 text-[13px] text-ink focus:outline-none focus:border-slate-400"
              value={fuente} onChange={e => setFuente(e.target.value)}>
              <option value="MANUAL">Manual</option>
              <option value="INSTAGRAM">Instagram</option>
              <option value="WHATSAPP">WhatsApp</option>
              <option value="TOKKO">Tokko</option>
              <option value="ZONAPROP">ZonaProp</option>
            </select>
          </div>
          <div>
            <label className="block text-[11px] uppercase tracking-[0.12em] text-slate-400 mb-1.5">Propiedad (opcional)</label>
            <select
              className="w-full border border-slate-200 rounded px-3 py-2 text-[13px] text-ink focus:outline-none focus:border-slate-400"
              value={propiedadId} onChange={e => setPropiedadId(e.target.value)}>
              <option value="">Sin propiedad</option>
              {propiedades.map(p => (
                <option key={p.id} value={p.id}>{p.direccion}{p.barrio ? ` · ${p.barrio}` : ''}</option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-[11px] uppercase tracking-[0.12em] text-slate-400 mb-1.5">Notas</label>
            <textarea
              className="w-full border border-slate-200 rounded px-3 py-2 text-[13px] text-ink focus:outline-none focus:border-slate-400 resize-none"
              rows={3}
              value={notas} onChange={e => setNotas(e.target.value)}
              placeholder="Interés, zona, presupuesto…" />
          </div>
          <div className="flex items-center justify-end gap-2 pt-1">
            <Button variant="outline" size="md" type="button" onClick={onClose}>Cancelar</Button>
            <Button variant="primary" size="md" type="submit" disabled={saving}>
              {saving ? 'Guardando…' : 'Crear lead'}
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
}

function LeadCard({ lead, onClick, onDragStart, onDragEnd, dragging }) {
  const scoreColor = lead.score >= 85 ? 'text-emerald-700 bg-emerald-50' : lead.score >= 70 ? 'text-amber-700 bg-amber-50' : 'text-slate-600 bg-slate-100';
  return (
    <div
      draggable
      onDragStart={onDragStart}
      onDragEnd={onDragEnd}
      onClick={onClick}
      className={`bg-white rounded border border-slate-100 p-3 cursor-pointer hover:border-slate-300 hover:shadow-card transition-all ${dragging ? 'opacity-40' : ''}`}>
      <div className="flex items-start justify-between gap-2">
        <div className="flex items-center gap-2 min-w-0">
          <ChannelIcon canal={lead.canal} />
          <span className="text-[12.5px] font-medium text-ink truncate">{lead.nombre}</span>
        </div>
        <span className={`text-[10px] font-mono font-medium px-1.5 py-0.5 rounded ${scoreColor}`}>{lead.score}</span>
      </div>
      <div className="text-[11px] text-slate-500 mt-1.5 leading-snug">{lead.interes}</div>
      <div className="mt-3 flex items-center justify-between">
        <BrokerChip code={lead.broker} size={20} />
        <span className="text-[10px] text-slate-400">{lead.last}</span>
      </div>
    </div>
  );
}

function LeadPanel({ lead, onClose, onMove, onUpdate, onDelete, brokersList = [] }) {
  const [reasignando, setReasignando] = useState(false);
  const [nuevoBroker, setNuevoBroker] = useState('');

  const handleAvanzar = () => {
    const idx = ETAPA_ORDER.indexOf(lead.etapa);
    if (idx < 0 || idx >= ETAPA_ORDER.length - 1) return;
    const nextEtapa = ETAPA_ORDER[idx + 1];
    onMove(lead.id, nextEtapa);
    onUpdate({ ...lead, etapa: nextEtapa });
  };

  const handleConfirmarReasignar = () => {
    if (!nuevoBroker) return;
    fetch(`${API_BASE}/api/leads/${lead.id}`, {
      method: 'PUT',
      credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ brokerId: nuevoBroker }),
    })
      .then(r => r.json())
      .then(data => {
        if (data.error) { alert(data.error); return; }
        onUpdate(adaptarLead(data));
        setReasignando(false);
      })
      .catch(err => {
        console.error('[leads.reasignar]', err);
        alert('Error al reasignar broker.');
      });
  };

  const handleAnular = () => {
    if (!confirm(`¿Anular el lead "${lead.nombre}"? Esta acción no se puede deshacer.`)) return;
    fetch(`${API_BASE}/api/leads/${lead.id}`, {
      method: 'DELETE',
      credentials: 'include',
    })
      .then(r => r.json())
      .then(data => {
        if (data.error) { alert(data.error); return; }
        onDelete(lead.id);
      })
      .catch(err => {
        console.error('[leads.anular]', err);
        alert('Error al anular lead.');
      });
  };

  const puedeAvanzar = ETAPA_ORDER.indexOf(lead.etapa) < ETAPA_ORDER.length - 1;

  return (
    <div className="fixed inset-0 z-30 flex">
      <div className="absolute inset-0 bg-ink/30 backdrop-blur-[2px]" onClick={onClose} />
      <div className="relative ml-auto h-full w-[480px] bg-white shadow-pop flex flex-col fade-in">
        <div className="px-6 py-5 border-b border-slate-100 flex items-start justify-between">
          <div className="flex-1">
            <div className="font-mono text-[10px] text-slate-400">{lead.id}</div>
            <h2 className="font-serif text-[24px] leading-tight text-ink mt-0.5">{lead.nombre}</h2>
            <div className="mt-2 flex items-center gap-2 text-[12px] text-slate-500">
              <ChannelIcon canal={lead.canal} />
              <span>{lead.canalIcon} {lead.canal}</span>
              <span className="text-slate-300">·</span>
              <span>{lead.last}</span>
            </div>
          </div>
          <button onClick={onClose} className="p-1.5 rounded hover:bg-slate-100 text-slate-500"><I.X size={16} /></button>
        </div>

        <div className="px-6 py-4 border-b border-slate-100 grid grid-cols-3 gap-3">
          <div>
            <div className="text-[10px] uppercase tracking-[0.12em] text-slate-400">Score</div>
            <div className="font-mono text-[22px] text-ink mt-0.5">{lead.score}</div>
          </div>
          <div>
            <div className="text-[10px] uppercase tracking-[0.12em] text-slate-400">Broker</div>
            <div className="mt-1 flex items-center gap-1.5"><BrokerChip code={lead.broker} size={22} /><span className="text-[12.5px] text-ink">{BROKERS[lead.broker].nombre}</span></div>
          </div>
          <div>
            <div className="text-[10px] uppercase tracking-[0.12em] text-slate-400">Etapa</div>
            <div className="text-[13px] text-ink mt-0.5">{lead.etapa}</div>
          </div>
        </div>

        <div className="px-6 py-4 border-b border-slate-100">
          <div className="text-[10px] uppercase tracking-[0.12em] text-slate-400">Interés</div>
          <div className="text-[13px] text-ink mt-1">{lead.interes}</div>
        </div>

        <div className="flex-1 overflow-y-auto px-6 py-5">
          <div className="text-[10px] uppercase tracking-[0.12em] text-slate-400 mb-3">Historial bot</div>
          <ChatHistory canal={lead.canal} nombre={lead.nombre} />
        </div>

        {reasignando && (
          <div className="px-6 pb-3 flex items-center gap-2 border-b border-slate-100">
            <select
              className="flex-1 border border-slate-200 rounded px-2 py-1.5 text-[12.5px] text-ink focus:outline-none"
              value={nuevoBroker}
              onChange={e => setNuevoBroker(e.target.value)}>
              <option value="">Seleccioná broker…</option>
              {brokersList.map(b => (
                <option key={b.id} value={b.id}>{b.nombre} {b.apellido}</option>
              ))}
            </select>
            <Button variant="primary" size="md" onClick={handleConfirmarReasignar}>Confirmar</Button>
            <Button variant="outline" size="md" onClick={() => setReasignando(false)}>Cancelar</Button>
          </div>
        )}
        <div className="px-6 py-4 border-t border-slate-100 bg-canvas flex items-center gap-2">
          <Button variant="outline" size="md" onClick={() => { setReasignando(r => !r); setNuevoBroker(''); }}>Reasignar</Button>
          <Button variant="outline" size="md" onClick={handleAnular}>Anular</Button>
          <div className="flex-1" />
          <Button variant="gold" size="md" onClick={handleAvanzar} disabled={!puedeAvanzar}>Avanzar etapa</Button>
        </div>
      </div>
    </div>
  );
}

function ChatHistory({ canal, nombre }) {
  const msgs = [
    { from: 'bot',  t: 'Hola! Soy el asistente de Lanven. ¿En qué barrio estás buscando?', tt: '10:42' },
    { from: 'user', t: 'Hola. Núñez o Belgrano, departamento de 3 ambientes.',              tt: '10:43' },
    { from: 'bot',  t: '¿Buscás para venta o alquiler? ¿Tenés rango de presupuesto?',       tt: '10:43' },
    { from: 'user', t: 'Venta, hasta USD 320k aprox.',                                      tt: '10:44' },
    { from: 'bot',  t: 'Tengo 3 opciones que coinciden. ¿Te derivo con Sofía?',             tt: '10:45' },
    { from: 'user', t: 'Sí, dale.',                                                         tt: '10:46' },
  ];
  return (
    <ul className="space-y-2">
      {msgs.map((m, i) => (
        <li key={i} className={`flex ${m.from === 'user' ? 'justify-end' : 'justify-start'}`}>
          <div className={`max-w-[78%] px-3 py-2 rounded text-[12.5px] ${m.from === 'user' ? 'bg-slate-700 text-white' : 'bg-canvas text-ink border border-slate-100'}`}>
            <div>{m.t}</div>
            <div className={`text-[10px] mt-1 font-mono ${m.from === 'user' ? 'text-slate-300' : 'text-slate-400'}`}>{m.tt}</div>
          </div>
        </li>
      ))}
    </ul>
  );
}

// ── SimuladorWebhook ──────────────────────────────────────────────────────────
// Panel colapsable visible solo para ADMIN.
// Simula un lead entrante llamando al webhook correspondiente.
function SimuladorWebhook({ onLeadCreado }) {
  const [abierto, setAbierto]         = useState(false);
  const [canal, setCanal]             = useState('TOKKO');
  const [nombre, setNombre]           = useState('');
  const [telefono, setTelefono]       = useState('');
  const [email, setEmail]             = useState('');
  const [propiedadId, setPropiedadId] = useState('');
  const [mensaje, setMensaje]         = useState('');
  const [propiedades, setPropiedades] = useState([]);
  const [enviando, setEnviando]       = useState(false);

  useEffect(() => {
    if (!abierto) return;
    fetch(`${API_BASE}/api/propiedades`, { credentials: 'include' })
      .then(r => r.json())
      .then(data => setPropiedades(Array.isArray(data) ? data : (data.data ?? [])))
      .catch(err => console.error('[SimuladorWebhook.propiedades]', err));
  }, [abierto]);

  const handleEnviar = () => {
    if (!nombre.trim()) { alert('Nombre es requerido.'); return; }
    setEnviando(true);
    fetch(`${API_BASE}/api/webhooks/leads/${canal.toLowerCase()}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-lanven-secret': 'lanven-secret-local',
      },
      body: JSON.stringify({
        nombre:      nombre.trim(),
        telefono:    telefono.trim() || undefined,
        email:       email.trim()    || undefined,
        propiedadId: propiedadId     || undefined,
        mensaje:     mensaje.trim()  || undefined,
        fuente:      canal,
      }),
    })
      .then(r => r.json())
      .then(data => {
        if (!data.success) { alert(data.error || 'Error al simular.'); setEnviando(false); return; }
        alert(`Lead creado: ${data.leadId}`);
        // Recargar lista de leads
        fetch(`${API_BASE}/api/leads`, { credentials: 'include' })
          .then(r => r.json())
          .then(json => onLeadCreado((Array.isArray(json) ? json : (json.data ?? [])).map(adaptarLead)))
          .catch(err => console.error('[SimuladorWebhook.reload]', err));
        // Limpiar form
        setNombre(''); setTelefono(''); setEmail(''); setPropiedadId(''); setMensaje('');
        setEnviando(false);
      })
      .catch(err => {
        console.error('[SimuladorWebhook.enviar]', err);
        alert('Error al simular lead.');
        setEnviando(false);
      });
  };

  return (
    <div className="mb-5 border border-dashed border-slate-300 rounded-md bg-white shadow-card">
      <button
        onClick={() => setAbierto(a => !a)}
        className="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-canvas transition-colors rounded-md">
        <span className="text-[12px] font-semibold text-ink tracking-tight">🧪 Simular lead entrante</span>
        <span className="text-slate-400 text-[11px]">{abierto ? '▲ cerrar' : '▼ expandir'}</span>
      </button>
      {abierto && (
        <div className="px-4 pb-4 border-t border-slate-100 pt-3 space-y-3">
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-[11px] uppercase tracking-[0.12em] text-slate-400 mb-1.5">Canal</label>
              <select
                className="w-full border border-slate-200 rounded px-3 py-2 text-[13px] text-ink focus:outline-none focus:border-slate-400"
                value={canal} onChange={e => setCanal(e.target.value)}>
                <option value="TOKKO">🏠 Tokko</option>
                <option value="ZONAPROP">🔍 ZonaProp</option>
                <option value="INSTAGRAM">📸 Instagram</option>
                <option value="WHATSAPP">💬 WhatsApp</option>
              </select>
            </div>
            <div>
              <label className="block text-[11px] uppercase tracking-[0.12em] text-slate-400 mb-1.5">Nombre *</label>
              <input
                className="w-full border border-slate-200 rounded px-3 py-2 text-[13px] text-ink focus:outline-none focus:border-slate-400"
                value={nombre} onChange={e => setNombre(e.target.value)}
                placeholder="Nombre del lead" />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-[11px] uppercase tracking-[0.12em] text-slate-400 mb-1.5">Teléfono</label>
              <input
                className="w-full border border-slate-200 rounded px-3 py-2 text-[13px] text-ink focus:outline-none focus:border-slate-400"
                value={telefono} onChange={e => setTelefono(e.target.value)}
                placeholder="+54 9 11…" />
            </div>
            <div>
              <label className="block text-[11px] uppercase tracking-[0.12em] text-slate-400 mb-1.5">Email</label>
              <input
                type="email"
                className="w-full border border-slate-200 rounded px-3 py-2 text-[13px] text-ink focus:outline-none focus:border-slate-400"
                value={email} onChange={e => setEmail(e.target.value)}
                placeholder="email@…" />
            </div>
          </div>
          <div>
            <label className="block text-[11px] uppercase tracking-[0.12em] text-slate-400 mb-1.5">Propiedad (opcional)</label>
            <select
              className="w-full border border-slate-200 rounded px-3 py-2 text-[13px] text-ink focus:outline-none focus:border-slate-400"
              value={propiedadId} onChange={e => setPropiedadId(e.target.value)}>
              <option value="">Sin propiedad</option>
              {propiedades.map(p => (
                <option key={p.id} value={p.id}>{p.direccion}{p.barrio ? ` · ${p.barrio}` : ''}</option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-[11px] uppercase tracking-[0.12em] text-slate-400 mb-1.5">Mensaje (opcional)</label>
            <textarea
              className="w-full border border-slate-200 rounded px-3 py-2 text-[13px] text-ink focus:outline-none focus:border-slate-400 resize-none"
              rows={2}
              value={mensaje} onChange={e => setMensaje(e.target.value)}
              placeholder="Interés del lead…" />
          </div>
          <div className="flex justify-end">
            <Button variant="primary" size="md" onClick={handleEnviar} disabled={enviando}>
              {enviando ? 'Enviando…' : '🚀 Simular'}
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}

window.Leads = Leads;