// ═══════════════════════════════════════════════════════════════════
// Screen: Cadastro e lista de Leads
// ═══════════════════════════════════════════════════════════════════

const origemLabels = {
  ativa: 'Ativa', parceiros: 'Parceiros', hunter: 'Hunter', fidelizacao: 'Fidelização',
  eventos: 'Eventos', marketing: 'Mkt de conteúdo', site: 'Site',
};
const statusTones = {
  fechado: 'success', negociacao: 'warn', qualificado: 'info', perdido: 'danger',
};
const statusLabels = {
  fechado: 'Fechado', negociacao: 'Em negociação', qualificado: 'Qualificado', perdido: 'Perdido',
};

const papelOpts = [
  { value: 'Qualificador', label: 'Qualificador' },
  { value: 'Finalizador',  label: 'Finalizador'  },
  { value: 'Organizador',  label: 'Organizador'  },
  { value: 'Executor',     label: 'Executor'     },
];

// ── Definições de gatilhos de comissão ───────────────────────────────
// Construídas dinamicamente a partir das regras vigentes (ver getGatilhoDefs)
const GATILHO_DEFS_BASE = {
  reuniao:        { label: 'Reunião institucional qualificada', valor: 250,  recebe: 'Time de prospecção / qualificação (proporcional ao salário)' },
  proposta:       { label: 'Proposta técnica aprovada',         valor: 500,  recebe: 'Todos os envolvidos na proposta (proporcional ao salário)' },
  proposta_bonus: { label: 'Bônus — margem acima da meta',      valor: 100,  recebe: 'Todos os envolvidos na proposta' },
  proposta_fidel: { label: 'Proposta aprovada (Fidelização)',   valor: 1000, recebe: 'Líder pós-vendas 20% · PMO 10% · executores 20% · proponente 50%' },
  nps:            { label: 'NPS — nota de satisfação', valor: 1000, recebe: '40% pós-vendas · 30% PMO · 30% time de execução', temExtra: true, extraLabel: 'Nota NPS', extraPlaceholder: '3,8' },
  publicacao:     { label: 'Autorização publicação de dados',   valor: 250,  recebe: 'Líderes de pós-vendas (Carol ou Rafa)' },
  edital:         { label: 'Edital submetido',                  valor: 1500, recebe: '50% líder de editais + 50% time de escrita' },
};
// Retorna defs com label/limiar do NPS adaptado às regras vigentes
function getGatilhoDefs(regras) {
  const limiar = regras?.variavel?.fideliz_nps?.limiar ?? 3.5;
  return {
    ...GATILHO_DEFS_BASE,
    nps: { ...GATILHO_DEFS_BASE.nps, label: `NPS — nota de satisfação ≥ ${String(limiar).replace('.', ',')}` },
  };
}
// Retorna lista de tipos de gatilho disponíveis para a origem, filtrando conforme regras
function gatilhosPorOrigem(origem, regras) {
  const temBonus = !!regras?.variavel?.proposta_bonus;
  const mapa = {
    ativa:       ['reuniao', 'proposta', temBonus && 'proposta_bonus'],
    parceiros:   ['reuniao', 'proposta', temBonus && 'proposta_bonus'],
    hunter:      ['reuniao', 'proposta', temBonus && 'proposta_bonus'],
    fidelizacao: ['proposta_fidel', temBonus && 'proposta_bonus', 'nps', 'publicacao'],
    eventos:     ['proposta', temBonus && 'proposta_bonus'],
    marketing:   ['reuniao', 'proposta', temBonus && 'proposta_bonus'],
    site:        ['reuniao', 'proposta', temBonus && 'proposta_bonus'],
    editais:     ['edital', temBonus && 'proposta_bonus'],
  };
  return (mapa[origem] || ['proposta', temBonus && 'proposta_bonus']).filter(Boolean);
}


// ── Checklist de gatilhos por lead ───────────────────────────────────
function GatilhosChecklist({ lead, vendedores, regras, onLeadChange }) {
  const GATILHO_DEFS = getGatilhoDefs(regras);
  const tipos = gatilhosPorOrigem(lead.origem, regras);
  const gatilhos = lead.gatilhos || [];
  const [marcandoTipo, setMarcandoTipo] = useState(null);
  const [formMarca, setFormMarca] = useState({ data: '', extra: '', comissionados: [] });

  const getGatilho = (tipo) => gatilhos.find(g => g.tipo === tipo);

  const abrirMarcar = (tipo) => {
    const ex = getGatilho(tipo);
    setFormMarca({
      data: ex?.data || new Date().toISOString().slice(0, 10),
      extra: ex?.extra || '',
      comissionados: ex?.comissionados || (lead.participacoes || []).map(p => p.v),
    });
    setMarcandoTipo(tipo);
  };

  const confirmar = () => {
    const novos = gatilhos.filter(g => g.tipo !== marcandoTipo);
    novos.push({ tipo: marcandoTipo, ok: true, data: formMarca.data, extra: formMarca.extra, comissionados: formMarca.comissionados });
    onLeadChange({ ...lead, gatilhos: novos });
    setMarcandoTipo(null);
  };

  const desmarcar = (tipo) => {
    onLeadChange({ ...lead, gatilhos: gatilhos.filter(g => g.tipo !== tipo) });
  };

  const toggleComissionado = (id) => {
    const ids = formMarca.comissionados;
    setFormMarca(f => ({ ...f, comissionados: ids.includes(id) ? ids.filter(x => x !== id) : [...ids, id] }));
  };

  const ativos = vendedores.filter(v => v.ativo || (lead.participacoes || []).some(p => p.v === v.id));
  const temGatilhosSistema = gatilhos.length > 0;

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>
          Gatilhos de Comissão
        </div>
        {temGatilhosSistema && (
          <Tag tone="brand">Sistema de gatilhos ativo</Tag>
        )}
        {!temGatilhosSistema && (
          <Tag tone="neutral">Usando campos legados até marcar o 1º gatilho</Tag>
        )}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {tipos.map(tipo => {
          const def = GATILHO_DEFS[tipo];
          const g = getGatilho(tipo);
          const ok = !!g?.ok;
          return (
            <div key={tipo} style={{
              padding: '12px 16px', borderRadius: 10,
              border: `1px solid ${ok ? 'var(--escalab-brand-soft)' : 'var(--escalab-line)'}`,
              background: ok ? 'var(--escalab-brand-tint)' : '#fff',
              display: 'flex', gap: 14, alignItems: 'flex-start',
            }}>
              <button onClick={() => ok ? desmarcar(tipo) : abrirMarcar(tipo)} style={{
                width: 22, height: 22, borderRadius: 6, flexShrink: 0, marginTop: 2,
                border: `2px solid ${ok ? 'var(--escalab-brand)' : 'var(--escalab-line)'}`,
                background: ok ? 'var(--escalab-brand)' : '#fff',
                cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff', fontSize: 13, fontWeight: 900, lineHeight: 1,
              }}>
                {ok ? '✓' : ''}
              </button>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
                  <span style={{ fontSize: 13.5, fontWeight: 600, color: ok ? 'var(--escalab-brand-deep)' : 'var(--escalab-ink)' }}>
                    {def.label}
                  </span>
                  <Tag tone={ok ? 'brand' : 'neutral'}>R$ {def.valor.toLocaleString('pt-BR')}</Tag>
                </div>
                <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginTop: 2, lineHeight: 1.4 }}>{def.recebe}</div>
                {ok && g && (
                  <div style={{ marginTop: 8, fontSize: 12, color: 'var(--escalab-brand-deep)', display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
                    <span>📅 {g.data}</span>
                    {g.extra && <span>Nota: <strong>{g.extra}/4</strong></span>}
                    {(g.comissionados || []).length > 0 && (
                      <span>👥 {g.comissionados.map(id => {
                        const v = vendedores.find(x => x.id === id);
                        return v ? v.nome.split(' ')[0] : id;
                      }).join(', ')}</span>
                    )}
                    <button onClick={() => abrirMarcar(tipo)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--escalab-brand)', fontSize: 12, padding: 0, textDecoration: 'underline' }}>editar</button>
                  </div>
                )}
                {!ok && (
                  <button onClick={() => abrirMarcar(tipo)} style={{ marginTop: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--escalab-brand)', fontSize: 12.5, fontWeight: 500, padding: 0 }}>
                    + Marcar como concluído
                  </button>
                )}
              </div>
            </div>
          );
        })}
      </div>

      {/* Mini-modal para marcar o gatilho */}
      <Modal open={!!marcandoTipo} onClose={() => setMarcandoTipo(null)}
        title={marcandoTipo ? GATILHO_DEFS[marcandoTipo]?.label : ''}
        width={500}
        footer={<>
          <Button variant="outline" onClick={() => setMarcandoTipo(null)}>Cancelar</Button>
          <Button variant="primary" icon="check" onClick={confirmar}>Confirmar gatilho</Button>
        </>}
      >
        {marcandoTipo && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Banner tone="success" icon="check">
              <strong>R$ {GATILHO_DEFS[marcandoTipo]?.valor?.toLocaleString('pt-BR')}</strong> — {GATILHO_DEFS[marcandoTipo]?.recebe}
            </Banner>
            <Field label="Data em que aconteceu">
              <Input type="date" value={formMarca.data} onChange={v => setFormMarca(f => ({ ...f, data: v }))} />
            </Field>
            {GATILHO_DEFS[marcandoTipo]?.temExtra && (
              <Field label={GATILHO_DEFS[marcandoTipo].extraLabel} hint="Escala de 0 a 4. Comissão só é gerada se ≥ 3,5.">
                <Input value={formMarca.extra} onChange={v => setFormMarca(f => ({ ...f, extra: v }))} placeholder={GATILHO_DEFS[marcandoTipo].extraPlaceholder} />
              </Field>
            )}
            <Field label="Quem recebe esta comissão?">
              <div style={{ border: '1px solid var(--escalab-line)', borderRadius: 10, overflow: 'hidden' }}>
                {ativos.map((v, i) => {
                  const marcado = formMarca.comissionados.includes(v.id);
                  return (
                    <label key={v.id} style={{
                      display: 'flex', gap: 12, alignItems: 'center', padding: '10px 14px', cursor: 'pointer',
                      background: marcado ? 'var(--escalab-brand-tint)' : '#fff',
                      borderBottom: i < ativos.length - 1 ? '1px solid var(--escalab-line)' : 'none',
                    }}>
                      <input type="checkbox" checked={marcado} onChange={() => toggleComissionado(v.id)}
                        style={{ accentColor: 'var(--escalab-brand)', width: 15, height: 15, flexShrink: 0 }} />
                      <Avatar v={v} size={24} />
                      <span style={{ fontSize: 13, fontWeight: marcado ? 600 : 400, flex: 1 }}>{v.nome}</span>
                      <span style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>{v.papel}</span>
                    </label>
                  );
                })}
              </div>
            </Field>
          </div>
        )}
      </Modal>
    </div>
  );
}

function computeLeadStatus(form) {
  if (form.proposta === 'nao') return 'perdido';
  if (form.vendido) return 'fechado';
  if (form.proposta === 'aprovada') return 'negociacao';
  return 'qualificado';
}

function LeadFormModal({ open, onClose, lead, vendedores, onSave, title, trimestreAtual }) {
  const blank = {
    lead: '', cliente: '',
    trimestre: trimestreAtual || '1T/2026',
    data: new Date().toISOString().slice(0, 10),
    origem: 'ativa', qualificado: 'sim', proposta: 'pendente',
    vendido: false, valor: '', markup: '', setor: 'pd',
    participacoes: [], comissiona: true, justificativa: '',
    gatilhos: [],
  };

  const [form, setForm] = useState(blank);

  useEffect(() => {
    if (open) {
      setForm(lead
        ? { ...lead, valor: lead.valor || '', markup: lead.markup || '' }
        : blank
      );
    }
  }, [open]);

  const set = (key, val) => setForm(f => ({ ...f, [key]: val }));

  const addParticipacao = () => {
    const primeiro = vendedores.find(v => v.ativo);
    set('participacoes', [...(form.participacoes || []), { v: primeiro?.id || '', papel: 'Qualificador' }]);
  };

  const removeParticipacao = (idx) =>
    set('participacoes', form.participacoes.filter((_, i) => i !== idx));

  const updateParticipacao = (idx, key, val) =>
    set('participacoes', form.participacoes.map((p, i) => i === idx ? { ...p, [key]: val } : p));

  const handleSave = () => {
    if (!form.lead.trim()) { alert('Informe o nome do lead.'); return; }
    onSave({ ...form, status: computeLeadStatus(form), valor: +form.valor || 0, markup: +form.markup || 0 });
  };

  const ativos = vendedores.filter(v => v.ativo);

  return (
    <Modal open={open} onClose={onClose} title={title} width={720}
      footer={<>
        <Button variant="outline" onClick={onClose}>Cancelar</Button>
        <Button variant="primary" icon="check" onClick={handleSave}>Salvar lead</Button>
      </>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <Field label="Nome do lead" span={2}>
            <Input value={form.lead} onChange={v => set('lead', v)} placeholder="Ex: Nexa Minerais — Piloto CCS" />
          </Field>
          <Field label="Cliente">
            <Input value={form.cliente} onChange={v => set('cliente', v)} placeholder="Nexa Recursos" />
          </Field>
          <Field label="Data">
            <Input value={form.data} onChange={v => set('data', v)} type="date" />
          </Field>
          <Field label="Trimestre do lead">
            <Select value={form.trimestre || trimestreAtual} onChange={v => set('trimestre', v)}
              options={['1T/2026','2T/2026','3T/2026','4T/2026','1T/2027','2T/2027'].map(t => ({ value: t, label: t }))} />
          </Field>
          <Field label="Origem da prospecção">
            <Select value={form.origem} onChange={v => set('origem', v)}
              options={Object.entries(origemLabels).map(([val, l]) => ({ value: val, label: l }))} />
          </Field>
          <Field label="Qualificado?">
            <Select value={form.qualificado} onChange={v => set('qualificado', v)}
              options={[{value:'sim',label:'Sim'},{value:'nao',label:'Não'},{value:'na',label:'Não se aplica'}]} />
          </Field>
          <Field label="Proposta técnica aprovada?">
            <Select value={form.proposta} onChange={v => set('proposta', v)}
              options={[{value:'aprovada',label:'Sim'},{value:'pendente',label:'Ainda não'},{value:'nao',label:'Não'}]} />
          </Field>
          <Field label="Projeto vendido?">
            <Select value={form.vendido ? 'sim' : 'nao'} onChange={v => set('vendido', v === 'sim')}
              options={[{value:'sim',label:'Sim'},{value:'nao',label:'Não'}]} />
          </Field>
          <Field label="Valor da venda (R$)">
            <Input value={form.valor} onChange={v => set('valor', v)} prefix="R$" placeholder="0" type="number" />
          </Field>
          <Field label="Markup (%)">
            <Input value={form.markup} onChange={v => set('markup', v)} suffix="%" placeholder="0" type="number" />
          </Field>
        </div>

        {/* Participantes */}
        <div style={{ border: '1px solid var(--escalab-line)', borderRadius: 10, overflow: 'hidden' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 16px', background: 'var(--escalab-paper)', borderBottom: (form.participacoes||[]).length > 0 ? '1px solid var(--escalab-line)' : 'none' }}>
            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-slate)' }}>
              Participantes &amp; papéis
            </div>
            <Button variant="outline" size="sm" icon="plus" onClick={addParticipacao}>Adicionar</Button>
          </div>
          {(form.participacoes || []).map((p, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr auto', gap: 8, padding: '10px 16px', alignItems: 'center', borderBottom: i < form.participacoes.length - 1 ? '1px solid var(--escalab-line)' : 'none' }}>
              <Select value={p.v} onChange={v => updateParticipacao(i, 'v', v)}
                options={ativos.map(v => ({ value: v.id, label: v.nome }))} />
              <Select value={p.papel} onChange={v => updateParticipacao(i, 'papel', v)}
                options={papelOpts} />
              <button onClick={() => removeParticipacao(i)} style={{ border: '1px solid var(--escalab-line)', borderRadius: 8, background: '#fff', cursor: 'pointer', padding: '9px 12px', color: 'var(--escalab-mute)', display: 'flex', alignItems: 'center' }}>
                <Icon name="close" size={14} />
              </button>
            </div>
          ))}
          {(form.participacoes || []).length === 0 && (
            <div style={{ padding: '14px 16px', fontSize: 13, color: 'var(--escalab-mute)' }}>
              Nenhum participante. Clique em "Adicionar" para incluir.
            </div>
          )}
        </div>

        {/* Toggle comissiona */}
        <div style={{ padding: 16, background: 'var(--escalab-paper)', borderRadius: 10, border: '1px solid var(--escalab-line)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600 }}>Participa do comissionamento?</div>
              <div style={{ fontSize: 12.5, color: 'var(--escalab-slate)', marginTop: 2 }}>Desmarque para excluir este lead do cálculo com justificativa registrada.</div>
            </div>
            <Toggle checked={!!form.comissiona} onChange={v => set('comissiona', v)} />
          </div>
          {!form.comissiona && (
            <div style={{ marginTop: 12 }}>
              <Field label="Justificativa">
                <Input value={form.justificativa || ''} onChange={v => set('justificativa', v)} placeholder="Motivo da exclusão do comissionamento…" />
              </Field>
            </div>
          )}
        </div>
      </div>
    </Modal>
  );
}

function LeadsScreen({ state, setState, perfilId }) {
  const { leads, vendedores, regras, trimestre } = state;
  const nomeUsuario = vendedores.find(v => v.id === perfilId)?.nome || 'Sistema';
  const agora = () => new Date().toLocaleString('pt-BR', { day:'2-digit', month:'2-digit', year:'numeric', hour:'2-digit', minute:'2-digit' }).replace(',', '');
  const [search, setSearch] = useState('');
  const [filtroOrigem, setFiltroOrigem] = useState('');
  const [filtroStatus, setFiltroStatus] = useState('');
  const [novoOpen, setNovoOpen] = useState(false);
  const [detalhe, setDetalhe] = useState(null);
  const [editOpen, setEditOpen] = useState(false);
  const [editLead, setEditLead] = useState(null);

  const filtrados = leads.filter(l => {
    if (search && !l.lead.toLowerCase().includes(search.toLowerCase()) && !l.cliente.toLowerCase().includes(search.toLowerCase())) return false;
    if (filtroOrigem && l.origem !== filtroOrigem) return false;
    if (filtroStatus && l.status !== filtroStatus) return false;
    return true;
  });

  const handleSaveNovo = (lead) => {
    const nextId = 'L' + String(leads.length + 1).padStart(3, '0');
    setState.setLeads([...leads, { ...lead, id: nextId }]);
    setState.addHistorico({
      id: 'hL_' + Date.now(),
      data: agora(),
      usuario: nomeUsuario,
      regra: 'Lead adicionado',
      de: '—',
      para: lead.lead,
      nota: `Origem: ${origemLabels[lead.origem] || lead.origem} · Trimestre: ${lead.trimestre || trimestre}`,
    });
    setNovoOpen(false);
  };

  const handleSaveEdit = (lead) => {
    setState.setLeads(leads.map(l => l.id === lead.id ? lead : l));
    setDetalhe(lead);
    setEditOpen(false);
  };

  const handleApagar = () => {
    if (!detalhe) return;
    if (!window.confirm(`Apagar "${detalhe.lead}"? Esta ação não pode ser desfeita.`)) return;
    setState.setLeads(leads.filter(l => l.id !== detalhe.id));
    setState.addHistorico({
      id: 'hL_' + Date.now(),
      data: agora(),
      usuario: nomeUsuario,
      regra: 'Lead removido',
      de: detalhe.lead,
      para: '—',
      nota: `Origem: ${origemLabels[detalhe.origem] || detalhe.origem} · Trimestre: ${detalhe.trimestre || trimestre}`,
    });
    setDetalhe(null);
  };

  const handleGatilhoChange = (leadAtualizado) => {
    setState.setLeads(leads.map(l => l.id === leadAtualizado.id ? leadAtualizado : l));
    setDetalhe(leadAtualizado);
  };

  const openEdit = () => {
    setEditLead(detalhe);
    setEditOpen(true);
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 20, flexWrap: 'wrap' }}>
        <div>
          <Eyebrow idx="03">Leads &amp; oportunidades</Eyebrow>
          <h1 style={{ fontSize: 44, margin: 0, letterSpacing: '-.02em', lineHeight: 1.05 }}>
            O que <em style={{ fontStyle: 'normal', color: 'var(--escalab-brand)' }}>está em jogo</em> agora.
          </h1>
          <p style={{ marginTop: 14, color: 'var(--escalab-slate)', fontSize: 16, maxWidth: 640 }}>
            Substitui a aba <em style={{ fontStyle: 'normal' }}>Controle diretoria</em> da planilha. Cada lead tem origem, status, papéis atribuídos e um toggle &quot;participa do comissionamento?&quot; com justificativa.
          </p>
        </div>
        <Button variant="primary" icon="plus" onClick={() => setNovoOpen(true)}>Novo lead</Button>
      </div>

      {/* Filtros */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr auto', gap: 10 }}>
        <Input value={search} onChange={setSearch} placeholder="Buscar por nome ou cliente…" prefix="🔍" />
        <Select value={filtroOrigem} onChange={setFiltroOrigem} placeholder="Todas as origens"
          options={Object.entries(origemLabels).map(([v, l]) => ({ value: v, label: l }))} />
        <Select value={filtroStatus} onChange={setFiltroStatus} placeholder="Todos os status"
          options={Object.entries(statusLabels).map(([v, l]) => ({ value: v, label: l }))} />
        <Button variant="outline" icon="filter" onClick={() => { setFiltroOrigem(''); setFiltroStatus(''); setSearch(''); }}>Limpar</Button>
      </div>

      {/* Tabela */}
      <Card pad={0}>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--escalab-mute)', background: 'var(--escalab-paper)' }}>
              <th style={{ textAlign: 'left', padding: '12px 20px' }}>Lead / cliente</th>
              <th style={{ textAlign: 'left', padding: '12px 12px' }}>Origem</th>
              <th style={{ textAlign: 'left', padding: '12px 12px' }}>Status</th>
              <th style={{ textAlign: 'left', padding: '12px 12px' }}>Envolvidos</th>
              <th style={{ textAlign: 'right', padding: '12px 12px' }}>Valor</th>
              <th style={{ textAlign: 'center', padding: '12px 20px' }}>Comissiona</th>
            </tr>
          </thead>
          <tbody>
            {filtrados.map(l => (
              <tr key={l.id} onClick={() => setDetalhe(l)} style={{ borderTop: '1px solid var(--escalab-line)', cursor: 'pointer' }}>
                <td style={{ padding: '14px 20px' }}>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{l.lead}</div>
                  <div style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>{l.cliente} · {l.id} · {l.data}</div>
                </td>
                <td style={{ padding: '14px 12px' }}><Tag tone="outline">{origemLabels[l.origem]}</Tag></td>
                <td style={{ padding: '14px 12px' }}><Tag tone={statusTones[l.status] || 'neutral'}>{statusLabels[l.status] || l.status}</Tag></td>
                <td style={{ padding: '14px 12px' }}>
                  <div style={{ display: 'flex' }}>
                    {[...new Set((l.participacoes || []).map(p => p.v))].slice(0, 4).map((vid, i) => {
                      const v = vendedores.find(x => x.id === vid);
                      return v ? <div key={vid + i} style={{ marginLeft: i > 0 ? -8 : 0, border: '2px solid #fff', borderRadius: '50%' }}><Avatar v={v} size={28} /></div> : null;
                    })}
                  </div>
                </td>
                <td style={{ padding: '14px 12px', textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontWeight: 600 }}>{l.valor ? brl(l.valor) : '—'}</td>
                <td style={{ padding: '14px 20px', textAlign: 'center' }}>
                  {l.comissiona ? <Tag tone="success">Sim</Tag> : <Tag tone="neutral">Não</Tag>}
                </td>
              </tr>
            ))}
            {filtrados.length === 0 && (
              <tr>
                <td colSpan={6} style={{ padding: 40, textAlign: 'center', color: 'var(--escalab-mute)', fontSize: 14 }}>
                  Nenhum lead encontrado.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </Card>

      {/* Modal novo lead */}
      <LeadFormModal
        open={novoOpen}
        onClose={() => setNovoOpen(false)}
        lead={null}
        vendedores={vendedores}
        onSave={handleSaveNovo}
        title="Cadastrar novo lead"
        trimestreAtual={trimestre}
      />

      {/* Modal editar lead */}
      <LeadFormModal
        open={editOpen}
        onClose={() => setEditOpen(false)}
        lead={editLead}
        vendedores={vendedores}
        onSave={handleSaveEdit}
        title={editLead ? 'Editar: ' + editLead.lead : 'Editar lead'}
      />

      {/* Modal detalhe */}
      <Modal open={!!detalhe && !editOpen} onClose={() => setDetalhe(null)} title={detalhe ? detalhe.lead : ''} width={720}
        footer={<>
          <Button variant="outline" onClick={() => setDetalhe(null)}>Fechar</Button>
          <Button variant="ghost" onClick={handleApagar} style={{ color: '#dc2626', marginRight: 'auto' }}>Apagar lead</Button>
          <Button variant="primary" icon="edit" onClick={openEdit}>Editar lead</Button>
        </>}>
        {detalhe && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
              <Stat label="Valor" value={detalhe.valor ? brl(detalhe.valor) : '—'} tone="light" />
              <Stat label="Markup" value={detalhe.markup ? detalhe.markup + '%' : '—'} tone="light" />
              <Stat label="Origem" value={origemLabels[detalhe.origem]} tone="light" />
              <Stat label="Status" value={statusLabels[detalhe.status] || detalhe.status} tone="light" />
            </div>
            <div>
              <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 10 }}>Participantes &amp; papéis</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {(detalhe.participacoes || []).length === 0 && (
                  <div style={{ fontSize: 13, color: 'var(--escalab-mute)', padding: '4px 0' }}>Nenhum participante cadastrado.</div>
                )}
                {(detalhe.participacoes || []).map((p, i) => {
                  const v = vendedores.find(x => x.id === p.v);
                  return v ? (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', background: 'var(--escalab-paper)', borderRadius: 8 }}>
                      <Avatar v={v} size={30} />
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 13.5, fontWeight: 600 }}>{v.nome}</div>
                        <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>{v.setor}</div>
                      </div>
                      <Tag tone="brand">{p.papel}</Tag>
                    </div>
                  ) : null;
                })}
              </div>
            </div>
            {!detalhe.comissiona && (
              <Banner tone="warn" icon="warn">
                <strong>Fora do comissionamento.</strong> {detalhe.justificativa}
              </Banner>
            )}
            {detalhe.comissiona && (
              <GatilhosChecklist
                lead={detalhe}
                vendedores={vendedores}
                regras={regras}
                onLeadChange={handleGatilhoChange}
              />
            )}
          </div>
        )}
      </Modal>
    </div>
  );
}

Object.assign(window, { LeadsScreen, origemLabels, statusTones, statusLabels, computeLeadStatus, papelOpts });