// ═══════════════════════════════════════════════════════
// BAUKO CRM — BDR Kanban (telemarketing / pré-vendas)
// ═══════════════════════════════════════════════════════
//
// Kanban exclusivo do time de BDR para qualificação de prospects.
// SEPARADO E INDEPENDENTE do pipeline dos vendedores (Pipeline).
// Cards entram pela Prospecção (onAddProspects) e podem ser
// promovidos para o pipeline de vendas (criando Cliente + Oportunidade).
//
// Persistência: SharePoint List "CRM BDR" (chave interna: CRMBDR)
//
/* global React, CRM_DATA, CRM_API, BAUKO_AUTH, Badge, Modal, FormField, fR, fDate */

const { useState: useBdrState, useEffect: useBdrEffect, useRef: useBdrRef } = React;

// ── Etapas do kanban BDR ──────────────────────────────
const BDR_ETAPAS = [
  { id: 'a_contatar',         label: 'A contatar',           color: 'var(--tx-3)',    bg: 'var(--surface-2)' },
  { id: 'tentativa_contato',  label: 'Tentativa de contato', color: '#8a5a00',        bg: 'var(--warn-050)'  },
  { id: 'contato_realizado',  label: 'Contato realizado',    color: 'var(--info)',    bg: 'var(--info-050)'  },
  { id: 'qualificado',        label: 'Qualificado',          color: 'var(--grn-600)', bg: 'var(--grn-050)'   },
  { id: 'descartado',         label: 'Descartado',           color: 'var(--danger)',  bg: '#fef2f2'          },
  { id: 'enviado_pipeline',   label: 'Enviado ao pipeline',  color: 'var(--ok)',      bg: 'var(--ok-050)'    },
];

const BDR_ETAPAS_ATIVAS  = ['a_contatar', 'tentativa_contato', 'contato_realizado', 'qualificado'];
const BDR_ETAPAS_FINAIS  = new Set(['descartado', 'enviado_pipeline']);
const BDR_ETAPA_READONLY = 'enviado_pipeline';
const BDR_LIST_NAME      = 'CRMBDR';

// ── Helpers ───────────────────────────────────────────
// Lista de vendedores destinatários do fluxo BDR → Pipeline.
// Fonte de verdade: BAUKO_AUTH.WHITELIST_DETAILS (alimentada pelo SharePoint
// Controle de Acessos.xlsx via loadWhitelistFromSharePoint). Cadastrar/desativar
// usuário no Excel reflete automaticamente aqui (TTL cache 1h).
// Fallbacks: VENDEDORES hardcoded (legado) → WHITELIST HARDCODED (sempre disponível).
function getVendedores() {
  if (window.BAUKO_AUTH && typeof window.BAUKO_AUTH.getVendedoresAtivos === 'function') {
    var lista = window.BAUKO_AUTH.getVendedoresAtivos();
    if (Array.isArray(lista) && lista.length) return lista;
  }
  // Fallback legado: array hardcoded BAUKO_AUTH.VENDEDORES (se alguém ainda usa)
  var src = (window.BAUKO_AUTH && window.BAUKO_AUTH.VENDEDORES) || [];
  return Array.isArray(src) ? src : [];
}
function bdrNewId() {
  return 'BDR-' + String(Date.now()).slice(-6) + String(Math.floor(Math.random() * 100)).padStart(2, '0');
}
function bdrNormCnpj(s) { return String(s || '').replace(/\D/g, ''); }
function bdrFmtCnpj(s) {
  var d = bdrNormCnpj(s);
  if (d.length !== 14) return s || '';
  return d.slice(0, 2) + '.' + d.slice(2, 5) + '.' + d.slice(5, 8) + '/' + d.slice(8, 12) + '-' + d.slice(12);
}
function bdrFmtDataCurta(iso) {
  if (!iso) return '—';
  try {
    var d = new Date(iso);
    if (isNaN(d)) return '—';
    return d.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' });
  } catch (e) { return '—'; }
}
function bdrDiasNaEtapa(iso) {
  if (!iso) return null;
  try {
    var d = new Date(iso);
    if (isNaN(d)) return null;
    return Math.floor((Date.now() - d.getTime()) / 86400000);
  } catch (e) { return null; }
}
function bdrTruncar(s, n) {
  if (!s) return '';
  s = String(s);
  return s.length > n ? s.slice(0, n - 1) + '…' : s;
}
function bdrIsSpConfigurado() {
  var lists = window.BAUKO_AUTH && window.BAUKO_AUTH.SHAREPOINT && window.BAUKO_AUTH.SHAREPOINT.lists;
  return !!(lists && lists[BDR_LIST_NAME]);
}

// Converte uma empresa da Prospecção em card BDR
function bdrEmpresaToCard(emp) {
  return {
    id:               bdrNewId(),
    razao_social:     emp.razao_social || emp.nome_fantasia || '(sem razão social)',
    cnpj:             bdrNormCnpj(emp.cnpj_raw || emp.cnpj_formatado || emp.cnpj),
    cidade:           emp.municipio_nome || emp.cidade || '',
    uf:               (emp.uf || '').toUpperCase().slice(0, 2),
    cnae:             emp.cnae_descricao || '',
    telefone:         emp.telefone || '',
    etapa:            'a_contatar',
    vendedor_destino: '',
    data_entrada:     new Date().toISOString(),
    observacao:       '',
    oportunidade_id:  '',
    contato_nome:     '',
    contato_email:    '',
    timeline:         [],
  };
}

// Retorna o email do usuário REAL logado (autor de interações da timeline).
// Usa CRM_USER.realEmail (não muda com "Visualizar como" — log de auditoria
// sempre reflete quem efetivamente fez a ação).
function bdrAutorAtual() {
  return (window.CRM_USER && window.CRM_USER.realEmail) || '';
}

// ── Catálogos da timeline ────────────────────────────
var BDR_TIPOS_INTERACAO = [
  { id: 'ligacao',   label: 'Ligação',      icon: 'phone'        },
  { id: 'whatsapp',  label: 'WhatsApp',     icon: 'message-circle' },
  { id: 'email',     label: 'E-mail',       icon: 'mail'         },
  { id: 'visita',    label: 'Visita',       icon: 'map-pin'      },
  { id: 'reuniao',   label: 'Reunião',      icon: 'users'        },
  { id: 'nota',      label: 'Nota interna', icon: 'sticky-note'  },
];
var BDR_RESULTADOS = [
  { id: 'positivo',     label: 'Positivo',     color: 'var(--grn-600)', bg: 'var(--grn-050)'   },
  { id: 'neutro',       label: 'Neutro',       color: 'var(--tx-2)',    bg: 'var(--surface-2)' },
  { id: 'negativo',     label: 'Negativo',     color: 'var(--danger)',  bg: '#fef2f2'          },
  { id: 'sem_resposta', label: 'Sem resposta', color: '#8a5a00',        bg: 'var(--warn-050)'  },
];
function bdrTipoInfo(id)      { return BDR_TIPOS_INTERACAO.find(function(x){ return x.id === id; }) || { label: id, icon: 'circle' }; }
function bdrResultadoInfo(id) { return BDR_RESULTADOS.find(function(x){ return x.id === id; })       || { label: id, color: 'var(--tx-3)', bg: 'var(--surface-2)' }; }

// ── Modal: confirmar descarte ─────────────────────────
function DescartarBdrModal({ open, card, onConfirm, onClose }) {
  if (!open || !card) return null;
  return (
    <Modal open={open} onClose={onClose} title="Descartar prospect" subtitle={card.razao_social}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 16 }}>
        <div style={{ background: '#fef2f2', border: '1px solid var(--danger)', borderRadius: 'var(--r-md)', padding: '12px 14px', font: '400 13px/1.45 var(--ff-body)', color: 'var(--tx)' }}>
          Tem certeza que deseja descartar este prospect? Ele vai para a coluna <strong>Descartado</strong> e não aparece mais no fluxo ativo (pode ser recuperado movendo manualmente).
        </div>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <button className="btn btn-secondary" onClick={onClose}>Cancelar</button>
          <button className="btn" onClick={onConfirm} style={{ background: 'var(--danger)', color: '#fff', borderColor: 'var(--danger)' }}>
            <i data-lucide="x-circle"></i> Descartar
          </button>
        </div>
      </div>
    </Modal>
  );
}

// ── Modal: detalhes ───────────────────────────────────
function DetalhesBdrModal({ open, card, onClose, onRegistrarInteracao, onEditar }) {
  if (!open || !card) return null;
  var rows = [
    ['Razão social',  card.razao_social || '—'],
    ['CNPJ',          bdrFmtCnpj(card.cnpj)],
    ['Cidade / UF',   (card.cidade || '—') + ' / ' + (card.uf || '—')],
    ['CNAE principal', card.cnae || '—'],
    ['Telefone',      card.telefone || '—'],
    ['Contato',       card.contato_nome || '—'],
    ['Contato (e-mail)', card.contato_email || '—'],
    ['Etapa atual',   (BDR_ETAPAS.find(function(e){ return e.id === card.etapa; }) || {}).label || card.etapa],
    ['Data de entrada na etapa', card.data_entrada ? new Date(card.data_entrada).toLocaleString('pt-BR') : '—'],
  ];
  if (card.vendedor_destino) {
    var v = getVendedores().find(function(x){ return x.id === card.vendedor_destino; });
    rows.push(['Vendedor destino', v ? v.nome : card.vendedor_destino]);
  }
  if (card.oportunidade_id) rows.push(['Oportunidade', card.oportunidade_id]);
  if (card.observacao)      rows.push(['Notas gerais', card.observacao]);

  // Timeline ordenada do mais recente pro mais antigo
  var timelineSorted = (card.timeline || []).slice().sort(function(a, b) {
    return (b.ts || '').localeCompare(a.ts || '');
  });
  var isEnviado = card.etapa === 'enviado_pipeline';

  return (
    <Modal open={open} onClose={onClose} title="Detalhes do prospect" subtitle={card.razao_social}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 14 }}>
        {/* Dados */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {rows.map(function(r) {
            return (
              <div key={r[0]} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12, padding: '8px 0', borderBottom: '1px solid var(--border)' }}>
                <span style={{ font: '600 10px/1 var(--ff-body)', textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--tx-3)' }}>{r[0]}</span>
                <span style={{ font: '400 12px/1.3 var(--ff-mono)', color: 'var(--tx)', textAlign: 'right', maxWidth: '65%', whiteSpace: 'pre-wrap' }}>{r[1]}</span>
              </div>
            );
          })}
        </div>

        {/* Histórico de interações */}
        <div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
            <span style={{ font: '600 11px/1 var(--ff-body)', textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--tx-2)' }}>
              Histórico de interações {timelineSorted.length > 0 && <span style={{ color: 'var(--tx-3)' }}>({timelineSorted.length})</span>}
            </span>
            {!isEnviado && onRegistrarInteracao && (
              <button className="btn btn-ghost" style={{ fontSize: 11, padding: '4px 10px' }} onClick={function(){ onClose(); onRegistrarInteracao(); }}>
                <i data-lucide="plus" style={{ width: 11, height: 11 }}></i> Nova interação
              </button>
            )}
          </div>
          {timelineSorted.length === 0 ? (
            <div style={{ padding: '14px 12px', background: 'var(--surface-2)', borderRadius: 'var(--r-md)', border: '1px dashed var(--border)', textAlign: 'center', font: '400 12px/1.4 var(--ff-body)', color: 'var(--tx-3)' }}>
              Nenhuma interação registrada ainda.
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {timelineSorted.map(function(evt) {
                var t = bdrTipoInfo(evt.tipo);
                var r = bdrResultadoInfo(evt.resultado);
                return (
                  <div key={evt.id} style={{ display: 'flex', gap: 10, padding: '10px 12px', background: 'var(--surface)', border: '1px solid var(--border)', borderLeft: '3px solid ' + r.color, borderRadius: 'var(--r-md)' }}>
                    <div style={{ flexShrink: 0, width: 28, height: 28, borderRadius: 'var(--r-md)', background: r.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <i data-lucide={t.icon} style={{ width: 14, height: 14, color: r.color }}></i>
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'baseline', marginBottom: 2 }}>
                        <span style={{ font: '500 13px/1.3 var(--ff-body)', color: 'var(--tx)' }}>{evt.titulo || '—'}</span>
                        <span style={{ font: '400 10px/1 var(--ff-mono)', color: 'var(--tx-3)', flexShrink: 0 }} title={new Date(evt.ts).toLocaleString('pt-BR')}>
                          {evt.ts ? new Date(evt.ts).toLocaleDateString('pt-BR', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' }) : '—'}
                        </span>
                      </div>
                      <div style={{ font: '400 11px/1 var(--ff-mono)', color: 'var(--tx-3)', marginBottom: evt.notas ? 6 : 0 }}>
                        {t.label}
                        <span style={{ margin: '0 6px' }}>·</span>
                        <span style={{ color: r.color, fontWeight: 600 }}>{r.label}</span>
                        {evt.autor && <><span style={{ margin: '0 6px' }}>·</span>{evt.autor}</>}
                      </div>
                      {evt.notas && (
                        <div style={{ font: '400 12px/1.45 var(--ff-body)', color: 'var(--tx-2)', whiteSpace: 'pre-wrap' }}>
                          {evt.notas}
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          {!isEnviado && onEditar && (
            <button className="btn btn-secondary" onClick={function(){ onClose(); onEditar(); }}>
              <i data-lucide="edit-2"></i> Editar dados
            </button>
          )}
          <button className="btn btn-secondary" onClick={onClose}>Fechar</button>
        </div>
      </div>
    </Modal>
  );
}

// ── Modal: enviar para pipeline ───────────────────────
function EnviarPipelineModal({ open, card, vendedores, onConfirm, onClose }) {
  var [vendedorId, setVendedorId] = useBdrState('');
  var [obs, setObs]               = useBdrState('');
  var [saving, setSaving]         = useBdrState(false);
  var [erro, setErro]             = useBdrState('');

  useBdrEffect(function() {
    if (open) { setVendedorId(''); setObs(''); setSaving(false); setErro(''); }
  }, [open]);

  if (!open || !card) return null;

  async function handleConfirm() {
    if (!vendedorId) { setErro('Selecione um vendedor responsável.'); return; }
    setSaving(true); setErro('');
    try {
      await onConfirm({ vendedorId: vendedorId, obs: obs });
      // onConfirm é responsável por fechar o modal em caso de sucesso
    } catch (e) {
      setErro(e && e.message ? e.message : 'Erro ao enviar.');
      setSaving(false);
    }
  }

  return (
    <Modal open={open} onClose={saving ? function(){} : onClose} title="Enviar para pipeline" subtitle={card.razao_social}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 16 }}>
        <div style={{ background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 'var(--r-md)', padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 6 }}>
          {[
            ['CNPJ',      bdrFmtCnpj(card.cnpj) || '—'],
            ['Cidade/UF', (card.cidade || '—') + ' / ' + (card.uf || '—')],
            ['CNAE',      bdrTruncar(card.cnae, 60) || '—'],
          ].map(function(p) {
            return (
              <div key={p[0]} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
                <span style={{ font: '600 10px/1 var(--ff-body)', textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--tx-3)' }}>{p[0]}</span>
                <span style={{ font: '400 12px/1.2 var(--ff-mono)', color: 'var(--tx)', textAlign: 'right', maxWidth: '65%' }}>{p[1]}</span>
              </div>
            );
          })}
        </div>

        <div className="f">
          <label>Vendedor responsável <span style={{ color: 'var(--danger)' }}>*</span></label>
          <select className="inp" value={vendedorId} onChange={function(e){ setVendedorId(e.target.value); }} disabled={saving}>
            <option value="">— Selecione —</option>
            {vendedores.map(function(v) {
              return <option key={v.id} value={v.id}>{v.nome}</option>;
            })}
          </select>
          {vendedores.length === 0 && (
            <div style={{ marginTop: 6, font: '400 11px/1.4 var(--ff-body)', color: 'var(--warn)' }}>
              Nenhum vendedor configurado em <code>BAUKO_AUTH.VENDEDORES</code> (auth-config.js).
            </div>
          )}
        </div>

        <div className="f">
          <label>Observação (opcional)</label>
          <textarea className="inp" rows={3} value={obs} onChange={function(e){ setObs(e.target.value); }}
            placeholder="Notas para o vendedor (contexto da qualificação, próximos passos…)"
            style={{ resize: 'vertical', lineHeight: 1.5, fontFamily: 'var(--ff-body)', fontSize: 13 }}
            disabled={saving} />
        </div>

        {erro && (
          <div style={{ background: '#fef2f2', border: '1px solid var(--danger)', borderRadius: 'var(--r-sm)', padding: '8px 12px', font: '400 12px/1.4 var(--ff-body)', color: 'var(--danger)' }}>{erro}</div>
        )}

        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <button className="btn btn-secondary" onClick={onClose} disabled={saving}>Cancelar</button>
          <button className="btn btn-primary" onClick={handleConfirm} disabled={saving || vendedores.length === 0}>
            <i data-lucide="send"></i> {saving ? 'Enviando…' : 'Confirmar envio'}
          </button>
        </div>
      </div>
    </Modal>
  );
}

// ── Modal: editar dados do prospect ───────────────────
function EditarBdrModal({ open, card, onSave, onClose }) {
  var [telefone,      setTelefone]      = useBdrState('');
  var [contatoNome,   setContatoNome]   = useBdrState('');
  var [contatoEmail,  setContatoEmail]  = useBdrState('');
  var [observacao,    setObservacao]    = useBdrState('');
  var [saving,        setSaving]        = useBdrState(false);
  var [erro,          setErro]          = useBdrState('');

  useBdrEffect(function() {
    if (open && card) {
      setTelefone(card.telefone || '');
      setContatoNome(card.contato_nome || '');
      setContatoEmail(card.contato_email || '');
      setObservacao(card.observacao || '');
      setSaving(false); setErro('');
    }
  }, [open, card && card.id]);

  if (!open || !card) return null;

  async function handleSave() {
    setSaving(true); setErro('');
    try {
      await onSave({
        telefone:      telefone.trim(),
        contato_nome:  contatoNome.trim(),
        contato_email: contatoEmail.trim().toLowerCase(),
        observacao:    observacao,
      });
    } catch (e) {
      setErro(e && e.message ? e.message : 'Erro ao salvar.');
      setSaving(false);
    }
  }

  return (
    <Modal open={open} onClose={saving ? function(){} : onClose} title="Editar dados do prospect" subtitle={card.razao_social}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 16 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <div className="f">
            <label>Telefone</label>
            <input className="inp" value={telefone} onChange={function(e){ setTelefone(e.target.value); }} placeholder="(00) 00000-0000" disabled={saving} />
          </div>
          <div className="f">
            <label>Contato (nome)</label>
            <input className="inp" value={contatoNome} onChange={function(e){ setContatoNome(e.target.value); }} placeholder="Quem atende / decisor" disabled={saving} />
          </div>
          <div className="f" style={{ gridColumn: '1 / -1' }}>
            <label>Contato (e-mail)</label>
            <input className="inp" type="email" value={contatoEmail} onChange={function(e){ setContatoEmail(e.target.value); }} placeholder="email@exemplo.com.br" disabled={saving} />
          </div>
        </div>
        <div className="f">
          <label>Notas gerais sobre a empresa</label>
          <textarea className="inp" rows={4} value={observacao} onChange={function(e){ setObservacao(e.target.value); }}
            placeholder="Contexto estático: porte, frota, tipo de obras, etc. Para histórico de ligações, use 'Registrar interação'."
            style={{ resize: 'vertical', lineHeight: 1.5, fontFamily: 'var(--ff-body)', fontSize: 13 }}
            disabled={saving} />
        </div>
        {erro && <div style={{ background: '#fef2f2', border: '1px solid var(--danger)', borderRadius: 'var(--r-sm)', padding: '8px 12px', font: '400 12px/1.4 var(--ff-body)', color: 'var(--danger)' }}>{erro}</div>}
        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <button className="btn btn-secondary" onClick={onClose} disabled={saving}>Cancelar</button>
          <button className="btn btn-primary" onClick={handleSave} disabled={saving}>
            <i data-lucide="check"></i> {saving ? 'Salvando…' : 'Salvar'}
          </button>
        </div>
      </div>
    </Modal>
  );
}

// ── Modal: registrar interação (timeline append-only) ─
function RegistrarInteracaoModal({ open, card, onSave, onClose }) {
  var [tipo,       setTipo]       = useBdrState('ligacao');
  var [titulo,     setTitulo]     = useBdrState('');
  var [notas,      setNotas]      = useBdrState('');
  var [resultado,  setResultado]  = useBdrState('neutro');
  var [saving,     setSaving]     = useBdrState(false);
  var [erro,       setErro]       = useBdrState('');

  useBdrEffect(function() {
    if (open) { setTipo('ligacao'); setTitulo(''); setNotas(''); setResultado('neutro'); setSaving(false); setErro(''); }
  }, [open]);

  if (!open || !card) return null;

  async function handleSave() {
    if (!titulo.trim()) { setErro('Informe um título curto da interação.'); return; }
    setSaving(true); setErro('');
    try {
      var evento = {
        id:        'evt_' + Date.now() + '_' + Math.floor(Math.random() * 1000),
        ts:        new Date().toISOString(),
        tipo:      tipo,
        resultado: resultado,
        titulo:    titulo.trim(),
        notas:     notas,
        autor:     bdrAutorAtual(),
      };
      await onSave(evento);
    } catch (e) {
      setErro(e && e.message ? e.message : 'Erro ao registrar.');
      setSaving(false);
    }
  }

  return (
    <Modal open={open} onClose={saving ? function(){} : onClose} title="Registrar interação" subtitle={card.razao_social}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 16 }}>
        <FormField label="Tipo">
          <div className="tog">
            {BDR_TIPOS_INTERACAO.map(function(t) {
              return <div key={t.id} className={'tb ' + (tipo === t.id ? 'on' : '')} onClick={saving ? null : function(){ setTipo(t.id); }}>
                <i data-lucide={t.icon} style={{ width: 12, height: 12, marginRight: 4, verticalAlign: '-1px' }}></i> {t.label}
              </div>;
            })}
          </div>
        </FormField>
        <FormField label="Título">
          <input className="inp" value={titulo} onChange={function(e){ setTitulo(e.target.value); }}
            placeholder='Ex: "Falei com Mariana — pediu retorno após 14h"' disabled={saving} />
        </FormField>
        <FormField label="Notas (opcional)">
          <textarea className="inp" rows={4} value={notas} onChange={function(e){ setNotas(e.target.value); }}
            placeholder="Detalhes da conversa, dúvidas, próximos passos…"
            style={{ resize: 'vertical', lineHeight: 1.5, fontFamily: 'var(--ff-body)', fontSize: 13 }}
            disabled={saving} />
        </FormField>
        <FormField label="Resultado">
          <div className="tog" style={{ width: 'fit-content' }}>
            {BDR_RESULTADOS.map(function(r) {
              return <div key={r.id} className={'tb ' + (resultado === r.id ? 'on' : '')} onClick={saving ? null : function(){ setResultado(r.id); }}>{r.label}</div>;
            })}
          </div>
        </FormField>
        {erro && <div style={{ background: '#fef2f2', border: '1px solid var(--danger)', borderRadius: 'var(--r-sm)', padding: '8px 12px', font: '400 12px/1.4 var(--ff-body)', color: 'var(--danger)' }}>{erro}</div>}
        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <button className="btn btn-secondary" onClick={onClose} disabled={saving}>Cancelar</button>
          <button className="btn btn-primary" onClick={handleSave} disabled={saving}>
            <i data-lucide="plus-circle"></i> {saving ? 'Registrando…' : 'Registrar'}
          </button>
        </div>
      </div>
    </Modal>
  );
}

// ── Menu dropdown do card "..." ───────────────────────
function BdrCardMenu({ card, onMover, onDetalhes, onDescartar, onEditar, onRegistrarInteracao }) {
  var [open, setOpen] = useBdrState(false);
  var [moverOpen, setMoverOpen] = useBdrState(false);
  var ref = useBdrRef(null);

  useBdrEffect(function() {
    function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) { setOpen(false); setMoverOpen(false); } }
    if (open) document.addEventListener('mousedown', onDoc);
    return function() { document.removeEventListener('mousedown', onDoc); };
  }, [open]);

  var etapasMover = BDR_ETAPAS.filter(function(e) {
    if (e.id === card.etapa) return false;
    if (e.id === BDR_ETAPA_READONLY) return false; // "Enviado ao pipeline" só via fluxo de qualificação
    return true;
  });

  var menuItemStyle = {
    display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '7px 10px',
    background: 'transparent', border: 'none', cursor: 'pointer', borderRadius: 'var(--r-sm)',
    font: '400 12px/1 var(--ff-body)', color: 'var(--tx-2)', textAlign: 'left',
  };

  return (
    <div ref={ref} style={{ position: 'relative' }} onClick={function(e){ e.stopPropagation(); }}>
      <button onClick={function(e){ e.stopPropagation(); setOpen(function(o){ return !o; }); setMoverOpen(false); }}
        style={{ background: 'transparent', border: '1px solid transparent', cursor: 'pointer', padding: '4px 6px', color: 'var(--tx-3)', borderRadius: 'var(--r-sm)', display: 'flex', alignItems: 'center' }}
        title="Ações" onMouseEnter={function(e){ e.currentTarget.style.borderColor = 'var(--border)'; }}
        onMouseLeave={function(e){ e.currentTarget.style.borderColor = 'transparent'; }}>
        <i data-lucide="more-horizontal" style={{ width: 14, height: 14 }}></i>
      </button>
      {open && (
        <div style={{ position: 'absolute', right: 0, top: '100%', marginTop: 4, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-md)', boxShadow: 'var(--shadow-2)', padding: 4, minWidth: 180, zIndex: 100 }}>
          {!moverOpen && (
            <>
              <button style={menuItemStyle}
                onMouseEnter={function(e){ e.currentTarget.style.background = 'var(--surface-2)'; }}
                onMouseLeave={function(e){ e.currentTarget.style.background = 'transparent'; }}
                onClick={function(e){ e.stopPropagation(); setOpen(false); onRegistrarInteracao && onRegistrarInteracao(); }}>
                <i data-lucide="plus-circle" style={{ width: 13, height: 13 }}></i> Registrar interação
              </button>
              <button style={menuItemStyle}
                onMouseEnter={function(e){ e.currentTarget.style.background = 'var(--surface-2)'; }}
                onMouseLeave={function(e){ e.currentTarget.style.background = 'transparent'; }}
                onClick={function(e){ e.stopPropagation(); setOpen(false); onEditar && onEditar(); }}>
                <i data-lucide="edit-2" style={{ width: 13, height: 13 }}></i> Editar dados
              </button>
              <button style={menuItemStyle}
                onMouseEnter={function(e){ e.currentTarget.style.background = 'var(--surface-2)'; }}
                onMouseLeave={function(e){ e.currentTarget.style.background = 'transparent'; }}
                onClick={function(e){ e.stopPropagation(); setMoverOpen(true); }}>
                <i data-lucide="move" style={{ width: 13, height: 13 }}></i> Mover etapa <i data-lucide="chevron-right" style={{ width: 11, height: 11, marginLeft: 'auto' }}></i>
              </button>
              <button style={menuItemStyle}
                onMouseEnter={function(e){ e.currentTarget.style.background = 'var(--surface-2)'; }}
                onMouseLeave={function(e){ e.currentTarget.style.background = 'transparent'; }}
                onClick={function(e){ e.stopPropagation(); setOpen(false); onDetalhes && onDetalhes(); }}>
                <i data-lucide="eye" style={{ width: 13, height: 13 }}></i> Ver detalhes
              </button>
              {card.etapa !== 'descartado' && (
                <button style={Object.assign({}, menuItemStyle, { color: 'var(--danger)', borderTop: '1px solid var(--border)', marginTop: 4, paddingTop: 8 })}
                  onMouseEnter={function(e){ e.currentTarget.style.background = '#fef2f2'; }}
                  onMouseLeave={function(e){ e.currentTarget.style.background = 'transparent'; }}
                  onClick={function(e){ e.stopPropagation(); setOpen(false); onDescartar && onDescartar(); }}>
                  <i data-lucide="x-circle" style={{ width: 13, height: 13 }}></i> Descartar
                </button>
              )}

            </>
          )}
          {moverOpen && (
            <>
              <div style={{ padding: '6px 10px 4px', font: '600 10px/1 var(--ff-body)', textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--tx-3)' }}>Mover para</div>
              {etapasMover.map(function(e) {
                return (
                  <button key={e.id} style={menuItemStyle}
                    onMouseEnter={function(ev){ ev.currentTarget.style.background = 'var(--surface-2)'; }}
                    onMouseLeave={function(ev){ ev.currentTarget.style.background = 'transparent'; }}
                    onClick={function(ev){ ev.stopPropagation(); setOpen(false); setMoverOpen(false); onMover && onMover(e.id); }}>
                    <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: e.color, flexShrink: 0 }}></span>
                    {e.label}
                  </button>
                );
              })}
              <button style={Object.assign({}, menuItemStyle, { color: 'var(--tx-3)', borderTop: '1px solid var(--border)', marginTop: 4, paddingTop: 8 })}
                onClick={function(ev){ ev.stopPropagation(); setMoverOpen(false); }}>
                <i data-lucide="chevron-left" style={{ width: 11, height: 11 }}></i> Voltar
              </button>
            </>
          )}
        </div>
      )}
    </div>
  );
}

// ── Card BDR ──────────────────────────────────────────
function BdrCard({ card, onMover, onDetalhes, onDescartar, onEnviarPipeline, onEditar, onRegistrarInteracao }) {
  var dias = bdrDiasNaEtapa(card.data_entrada);
  var isQualificado = card.etapa === 'qualificado';
  var isEnviado     = card.etapa === 'enviado_pipeline';
  var isDescartado  = card.etapa === 'descartado';
  var vend = card.vendedor_destino ? getVendedores().find(function(v){ return v.id === card.vendedor_destino; }) : null;
  var nInteracoes = (card.timeline && card.timeline.length) || 0;
  var ultimaInteracao = nInteracoes > 0 ? card.timeline[card.timeline.length - 1] : null;

  return (
    <div className="pipe-card" onClick={function(){ onDetalhes && onDetalhes(); }}
      style={{
        position: 'relative',
        opacity: isDescartado ? 0.65 : 1,
        borderLeft: isEnviado ? '3px solid var(--ok)' : (isDescartado ? '3px solid var(--danger)' : '3px solid transparent'),
      }}>
      {/* Header: ID + menu */}
      <div className="pipe-card__header">
        <span className="mono tx3" style={{ fontSize: 10 }}>{card.id}</span>
        {!isEnviado && (
          <BdrCardMenu card={card}
            onMover={onMover}
            onDetalhes={onDetalhes}
            onDescartar={onDescartar}
            onEditar={onEditar}
            onRegistrarInteracao={onRegistrarInteracao} />
        )}
      </div>

      {/* Razão social (destaque) */}
      <div className="pipe-card__title" style={{ marginBottom: 4 }}>
        {bdrTruncar(card.razao_social, 60)}
      </div>

      {/* Cidade/UF + Telefone */}
      <div style={{ font: '400 11px/1.3 var(--ff-mono)', color: 'var(--tx-3)', marginBottom: 6 }}>
        <i data-lucide="map-pin" style={{ width: 10, height: 10, verticalAlign: '-1px', marginRight: 3 }}></i>
        {(card.cidade || '—') + ' / ' + (card.uf || '—')}
        {card.telefone && (
          <>
            <span style={{ margin: '0 6px', opacity: 0.4 }}>·</span>
            <i data-lucide="phone" style={{ width: 10, height: 10, verticalAlign: '-1px', marginRight: 3 }}></i>
            {card.telefone}
          </>
        )}
      </div>

      {/* Contato (se preenchido) */}
      {card.contato_nome && (
        <div style={{ font: '400 11px/1.3 var(--ff-body)', color: 'var(--tx-2)', marginBottom: 6 }}>
          <i data-lucide="user" style={{ width: 10, height: 10, verticalAlign: '-1px', marginRight: 3, color: 'var(--tx-3)' }}></i>
          {bdrTruncar(card.contato_nome, 30)}
        </div>
      )}

      {/* CNAE */}
      {card.cnae && (
        <div style={{ font: '400 11px/1.3 var(--ff-body)', color: 'var(--tx-2)', marginBottom: 8 }}
          title={card.cnae}>
          {bdrTruncar(card.cnae, 60)}
        </div>
      )}

      {/* Indicador de timeline (última interação) */}
      {nInteracoes > 0 && ultimaInteracao && (
        <div style={{ marginBottom: 6, padding: '6px 8px', background: bdrResultadoInfo(ultimaInteracao.resultado).bg, borderRadius: 'var(--r-sm)', font: '400 10px/1.3 var(--ff-mono)', color: 'var(--tx-2)', display: 'flex', alignItems: 'center', gap: 5 }}>
          <i data-lucide={bdrTipoInfo(ultimaInteracao.tipo).icon} style={{ width: 11, height: 11, color: bdrResultadoInfo(ultimaInteracao.resultado).color, flexShrink: 0 }}></i>
          <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={ultimaInteracao.titulo}>{bdrTruncar(ultimaInteracao.titulo, 40)}</span>
          <span style={{ color: 'var(--tx-3)', flexShrink: 0 }}>{nInteracoes}×</span>
        </div>
      )}

      {/* Footer: badge origem + data entrada */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8, gap: 6, flexWrap: 'wrap' }}>
        <span style={{
          font: '600 9px/1 var(--ff-body)', textTransform: 'uppercase', letterSpacing: '.06em',
          padding: '3px 7px', borderRadius: 'var(--r-pill)',
          background: 'var(--info-050)', color: 'var(--info)', border: '1px solid var(--info)',
        }}>Prospecção</span>
        <span style={{ font: '400 10px/1 var(--ff-mono)', color: 'var(--tx-3)' }}
          title={'Entrada na etapa: ' + (card.data_entrada ? new Date(card.data_entrada).toLocaleString('pt-BR') : '—')}>
          <i data-lucide="clock" style={{ width: 10, height: 10, verticalAlign: '-1px', marginRight: 3 }}></i>
          {bdrFmtDataCurta(card.data_entrada)}
          {dias != null && dias > 0 && <span style={{ marginLeft: 4, color: dias > 14 ? 'var(--warn)' : 'var(--tx-3)' }}>· {dias}d</span>}
        </span>
      </div>

      {/* Vendedor (quando enviado) */}
      {isEnviado && vend && (
        <div style={{ marginTop: 8, padding: '6px 8px', background: 'var(--ok-050)', borderRadius: 'var(--r-sm)', display: 'flex', alignItems: 'center', gap: 6, font: '400 11px/1 var(--ff-mono)', color: 'var(--tx-2)' }}>
          <span style={{ width: 14, height: 14, borderRadius: '50%', background: vend.cor || 'var(--grn)', display: 'inline-block' }}></span>
          {vend.nome}
        </div>
      )}

      {/* Botão "Enviar para pipeline" (somente na etapa qualificado) */}
      {isQualificado && (
        <button className="btn btn-primary" style={{ width: '100%', marginTop: 10, padding: '8px 10px', font: '500 12px/1 var(--ff-body)' }}
          onClick={function(e){ e.stopPropagation(); onEnviarPipeline && onEnviarPipeline(); }}>
          <i data-lucide="send"></i> Enviar para pipeline
        </button>
      )}
    </div>
  );
}

// ── Helpers localStorage "já prospectados" ──────────────
var BDR_PROSP_KEY = 'bdr_prospectados';
function bdrMarcarProspectado(cnpj) {
  if (!cnpj) return;
  try {
    var raw = localStorage.getItem(BDR_PROSP_KEY);
    var set = raw ? JSON.parse(raw) : [];
    var cnpjNorm = String(cnpj).replace(/\D/g, '');
    if (cnpjNorm && set.indexOf(cnpjNorm) < 0) {
      set.push(cnpjNorm);
      localStorage.setItem(BDR_PROSP_KEY, JSON.stringify(set));
    }
  } catch(e) {}
}

// ── BDR: componente principal ─────────────────────────
function BDR({ onNav, pendingProspects, onConsumePending }) {
  var [cards,   setCards]   = useBdrState([]);
  var [loading, setLoading] = useBdrState(true);
  var [erroSp,  setErroSp]  = useBdrState(null);

  var [dragId,   setDragId]   = useBdrState(null);
  var [dragOver, setDragOver] = useBdrState(null);

  var [selDesc,        setSelDesc]        = useBdrState(function(){ return new Set(); });
  var [showListaDesc,  setShowListaDesc]  = useBdrState(true);

  var [modalDescartar,     setModalDescartar]     = useBdrState(null);
  var [modalDetalhes,      setModalDetalhes]      = useBdrState(null);
  var [modalEnviar,        setModalEnviar]        = useBdrState(null);
  var [modalEditar,        setModalEditar]        = useBdrState(null);
  var [modalInteracao,     setModalInteracao]     = useBdrState(null);

  var vendedores = getVendedores();
  var spConfigurado = bdrIsSpConfigurado();

  // ── Boot: carrega cards do SP ───────────────────────
  useBdrEffect(function() {
    var alive = true;
    if (!spConfigurado || typeof CRM_API === 'undefined') {
      setLoading(false);
      if (!spConfigurado) setErroSp('Lista SP "CRM BDR" não configurada. Veja instruções no README/skill.');
      return function() { alive = false; };
    }
    setLoading(true);
    CRM_API.loadList(BDR_LIST_NAME)
      .then(function(arr) {
        if (!alive) return;
        // Normaliza tipos
        var norm = (arr || []).map(function(r) {
          return {
            _spId:            r._spId,
            id:               r.id || r.Title || bdrNewId(),
            razao_social:     r.razao_social || '',
            cnpj:             bdrNormCnpj(r.cnpj),
            cidade:           r.cidade || '',
            uf:               (r.uf || '').toUpperCase(),
            cnae:             r.cnae || '',
            telefone:         r.telefone || '',
            etapa:            r.etapa || 'a_contatar',
            vendedor_destino: r.vendedor_destino || '',
            data_entrada:     r.data_entrada || new Date().toISOString(),
            observacao:       r.observacao || '',
            oportunidade_id:  r.oportunidade_id || '',
            contato_nome:     r.contato_nome || '',
            contato_email:    r.contato_email || '',
            timeline:         Array.isArray(r.timeline) ? r.timeline : [],
          };
        });
        setCards(norm);
        setLoading(false);
      })
      .catch(function(e) {
        if (!alive) return;
        console.warn('[BDR] Falha ao carregar SP:', e.message);
        setErroSp('Falha ao carregar SharePoint: ' + e.message);
        setLoading(false);
      });
    return function() { alive = false; };
  }, []);

  // ── Recebe prospects da Prospecção (via prop) ───────
  useBdrEffect(function() {
    if (!pendingProspects || !pendingProspects.length) return;
    var existentesCnpj = new Set(cards.map(function(c){ return c.cnpj; }).filter(Boolean));
    var novos = pendingProspects
      .map(bdrEmpresaToCard)
      .filter(function(c) { return !c.cnpj || !existentesCnpj.has(c.cnpj); }); // evita duplicar pelo CNPJ
    if (!novos.length) {
      if (typeof onConsumePending === 'function') onConsumePending();
      return;
    }
    // Adiciona localmente já
    setCards(function(prev) { return novos.concat(prev); });
    if (typeof onConsumePending === 'function') onConsumePending();
    // Persiste cada um no SP (fire-and-forget com captura de _spId)
    if (spConfigurado && typeof CRM_API !== 'undefined') {
      novos.forEach(function(c) {
        CRM_API.addItem(BDR_LIST_NAME, c)
          .then(function(created) {
            var spId = created && created.id ? String(created.id) : '';
            setCards(function(prev) {
              return prev.map(function(x) { return x.id === c.id ? Object.assign({}, x, { _spId: spId }) : x; });
            });
          })
          .catch(function(e) { console.warn('[BDR] addItem falhou para', c.id, ':', e.message); });
      });
    }
  }, [pendingProspects]);

  // ── Re-renderiza ícones lucide após updates ────────
  useBdrEffect(function() {
    if (typeof window.lucide !== 'undefined' && window.lucide.createIcons) {
      try { window.lucide.createIcons(); } catch (e) {}
    }
  });

  // ── Helpers de persistência ─────────────────────────
  function persistUpdate(card, updates) {
    if (!card._spId || !spConfigurado || typeof CRM_API === 'undefined') return;
    CRM_API.updateItem(BDR_LIST_NAME, card._spId, updates)
      .catch(function(e) { console.warn('[BDR] update falhou para', card.id, ':', e.message); });
  }

  function moverEtapa(cardId, novaEtapa) {
    setCards(function(prev) {
      return prev.map(function(c) {
        if (c.id !== cardId) return c;
        if (c.etapa === novaEtapa) return c;
        var upd = { etapa: novaEtapa, data_entrada: new Date().toISOString() };
        persistUpdate(c, upd);
        return Object.assign({}, c, upd);
      });
    });
  }

  function confirmarDescartar() {
    if (!modalDescartar) return;
    bdrMarcarProspectado(modalDescartar.cnpj);
    moverEtapa(modalDescartar.id, 'descartado');
    setModalDescartar(null);
    setShowListaDesc(true); // garante que a lista fica visível ao descartar
  }

  // ── Descartados: excluir / restaurar ────────────────
  function excluirDescartado(cardId) {
    var card = cards.find(function(c){ return c.id === cardId; });
    if (!card) return;
    setCards(function(prev){ return prev.filter(function(c){ return c.id !== cardId; }); });
    setSelDesc(function(prev){ var n = new Set(prev); n.delete(cardId); return n; });
    if (card._spId && spConfigurado && typeof CRM_API !== 'undefined') {
      CRM_API.deleteItem(BDR_LIST_NAME, card._spId)
        .catch(function(e){ console.warn('[BDR] deleteItem descartado:', e.message); });
    }
  }

  async function excluirDescartadosLote() {
    if (!selDesc.size) return;
    if (!await window.CRM_CONFIRM('Excluir ' + selDesc.size + ' prospect(s) descartado(s)? Esta ação não pode ser desfeita.', { danger: true })) return;
    selDesc.forEach(function(id){ excluirDescartado(id); });
    setSelDesc(new Set());
  }

  function restaurarDescartado(cardId) {
    moverEtapa(cardId, 'a_contatar');
    setSelDesc(function(prev){ var n = new Set(prev); n.delete(cardId); return n; });
  }

  function restaurarDescartadosLote() {
    if (!selDesc.size) return;
    selDesc.forEach(function(id){ restaurarDescartado(id); });
    setSelDesc(new Set());
  }

  function toggleSelDesc(cardId) {
    setSelDesc(function(prev){
      var n = new Set(prev);
      if (n.has(cardId)) n.delete(cardId); else n.add(cardId);
      return n;
    });
  }

  function toggleSelDescAll(descartados) {
    if (selDesc.size === descartados.length) {
      setSelDesc(new Set());
    } else {
      setSelDesc(new Set(descartados.map(function(c){ return c.id; })));
    }
  }

  async function confirmarEditar(updates) {
    var card = modalEditar;
    if (!card) throw new Error('Card inválido.');
    // Atualiza local imediato
    setCards(function(prev) {
      return prev.map(function(c) { return c.id === card.id ? Object.assign({}, c, updates) : c; });
    });
    // Persiste no SP
    if (card._spId && spConfigurado && typeof CRM_API !== 'undefined') {
      await CRM_API.updateItem(BDR_LIST_NAME, card._spId, updates);
    }
    setModalEditar(null);
  }

  async function confirmarRegistrarInteracao(evento) {
    var card = modalInteracao;
    if (!card) throw new Error('Card inválido.');
    var novaTimeline = (card.timeline || []).slice();
    novaTimeline.push(evento);
    // Atualiza local imediato
    setCards(function(prev) {
      return prev.map(function(c) { return c.id === card.id ? Object.assign({}, c, { timeline: novaTimeline }) : c; });
    });
    // Persiste no SP (lib serializa timeline → timeline_json automaticamente)
    if (card._spId && spConfigurado && typeof CRM_API !== 'undefined') {
      await CRM_API.updateItem(BDR_LIST_NAME, card._spId, { timeline: novaTimeline });
    }
    setModalInteracao(null);
  }

  async function confirmarEnviarPipeline(opts) {
    var card = modalEnviar;
    if (!card) throw new Error('Card inválido.');
    var vend = vendedores.find(function(v){ return v.id === opts.vendedorId; });
    if (!vend) throw new Error('Vendedor não encontrado.');

    // 1) Verifica se já existe cliente por CNPJ (apenas se tivermos CNPJ)
    var cnpjNorm = bdrNormCnpj(card.cnpj);
    var cliente = null;
    if (cnpjNorm) {
      cliente = CRM_DATA.clientes.find(function(c) { return bdrNormCnpj(c.cnpj) === cnpjNorm; }) || null;
    }

    // 2) Cria cliente se não existir
    if (!cliente) {
      var novoCli = {
        id:           'C-' + String(Date.now()).slice(-6),
        tipo_cliente: 'PJ',
        razao:        card.razao_social,
        cnpj:         bdrFmtCnpj(card.cnpj),
        cpf:          '',
        atividade:    '',
        segmento:     '',
        ie:           '',
        endereco:     '',
        cep:          '',
        cidade:       card.cidade || '',
        uf:           card.uf || '',
        contato:      '',
        fone:         card.telefone || '',
        email:        '',
        volume_anual: 0,
        status:       'ativo',
      };
      if (typeof CRM_API !== 'undefined') {
        var createdCli = await CRM_API.addItem('Clientes', novoCli);
        var spIdCli = createdCli && createdCli.id ? String(createdCli.id) : '';
        novoCli._spId = spIdCli;
      }
      CRM_DATA.clientes.push(novoCli);
      cliente = novoCli;
    }

    // 3) Cria oportunidade etapa=lead
    var novaOp = {
      id:                  'OP-' + String(Date.now()).slice(-6),
      titulo:              'Lead BDR · ' + bdrTruncar(card.razao_social, 40),
      cliente_id:          cliente.id,
      vendedor_id:         vend.id,
      valor:               0,
      etapa:               'lead',
      prioridade:          'media',
      probabilidade:       10,
      data_abertura:       new Date().toISOString().slice(0, 10),
      previsao_fechamento: '',
      descricao:           opts.obs ? ('[Origem: BDR]\n' + opts.obs) : '[Origem: BDR · Prospecção qualificada]',
      origem:              'Prospecção ativa',
    };
    if (typeof CRM_API !== 'undefined') {
      var createdOp = await CRM_API.addItem('Oportunidades', novaOp);
      var spIdOp = createdOp && createdOp.id ? String(createdOp.id) : '';
      novaOp._spId = spIdOp;
    }
    CRM_DATA.oportunidades.unshift(novaOp);

    // 4) Atualiza o card BDR (etapa=enviado_pipeline + metadados)
    var nowIso = new Date().toISOString();
    var updCard = {
      etapa:           'enviado_pipeline',
      vendedor_destino: vend.id,
      observacao:      opts.obs || '',
      oportunidade_id: novaOp.id,
      data_entrada:    nowIso,
    };
    setCards(function(prev) {
      return prev.map(function(c) { return c.id === card.id ? Object.assign({}, c, updCard) : c; });
    });
    persistUpdate(card, updCard);

    // 5) Dispara evento
    try {
      window.dispatchEvent(new CustomEvent('crm_bdr_sent_to_pipeline', {
        detail: { clienteId: cliente.id, oportunidadeId: novaOp.id, vendedor: vend.id, cardId: card.id }
      }));
    } catch (e) {}

    // 6) Fecha modal
    setModalEnviar(null);
  }

  // ── Filtros ─────────────────────────────────────────
  // Descartados ficam fora do kanban — aparecem na lista abaixo
  var etapasVisiveis = BDR_ETAPAS.filter(function(e) {
    return e.id !== 'descartado';
  });
  var descartados  = cards.filter(function(c){ return c.etapa === 'descartado'; });
  var nDescartados = descartados.length;
  var nEnviados    = cards.filter(function(c){ return c.etapa === 'enviado_pipeline'; }).length;
  var nAtivos      = cards.filter(function(c){ return BDR_ETAPAS_ATIVAS.indexOf(c.etapa) >= 0; }).length;

  // ── Drag and drop ───────────────────────────────────
  function handleDragStart(e, cardId, etapaAtual) {
    if (etapaAtual === 'enviado_pipeline') { e.preventDefault(); return; }
    setDragId(cardId);
    e.dataTransfer.effectAllowed = 'move';
  }
  function handleDragOver(e, etapaId) {
    if (etapaId === 'enviado_pipeline') return; // readonly via drag
    e.preventDefault();
    setDragOver(etapaId);
  }
  function handleDrop(e, etapaId) {
    e.preventDefault();
    if (etapaId === 'enviado_pipeline') { setDragId(null); setDragOver(null); return; }
    if (dragId) {
      if (etapaId === 'descartado') {
        var c = cards.find(function(x){ return x.id === dragId; });
        if (c) setModalDescartar(c);
      } else {
        moverEtapa(dragId, etapaId);
      }
    }
    setDragId(null); setDragOver(null);
  }
  function handleDragEnd() { setDragId(null); setDragOver(null); }

  // ── Render ──────────────────────────────────────────
  return (
    <div data-screen-label="12 BDR" style={{ paddingBottom: 20 }}>
      {/* Toolbar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16, flexWrap: 'wrap' }}>
        <div style={{ font: '400 12px/1 var(--ff-mono)', color: 'var(--tx-3)' }}>
          <strong style={{ color: 'var(--tx-2)' }}>{nAtivos}</strong> ativos
          <span style={{ margin: '0 8px', opacity: 0.4 }}>·</span>
          <strong style={{ color: 'var(--ok)' }}>{nEnviados}</strong> enviados ao pipeline
          {nDescartados > 0 && (
            <>
              <span style={{ margin: '0 8px', opacity: 0.4 }}>·</span>
              <strong style={{ color: 'var(--danger)' }}>{nDescartados}</strong> descartados
            </>
          )}
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8, alignItems: 'center' }}>
          {onNav && (
            <button className="btn btn-secondary" onClick={function(){ onNav('prospeccao'); }}>
              <i data-lucide="search"></i> Buscar prospects
            </button>
          )}
        </div>
      </div>

      {/* Banners */}
      {!spConfigurado && (
        <div style={{ padding: '10px 14px', marginBottom: 14, background: 'var(--warn-050)', border: '1px solid var(--warn)', borderRadius: 'var(--r-md)', font: '400 12px/1.4 var(--ff-body)', color: 'var(--tx-2)' }}>
          ⚠ Lista SharePoint <strong>CRM BDR</strong> não configurada. Cards são exibidos apenas em memória e não persistem.
          Configure em <code>BAUKO_AUTH.SHAREPOINT.lists.CRMBDR</code> (auth-config.js).
        </div>
      )}
      {erroSp && spConfigurado && (
        <div style={{ padding: '10px 14px', marginBottom: 14, background: '#fef2f2', border: '1px solid var(--danger)', borderRadius: 'var(--r-md)', font: '400 12px/1.4 var(--ff-body)', color: 'var(--danger)' }}>
          {erroSp}
        </div>
      )}

      {/* Loading */}
      {loading && (
        <div style={{ padding: 32, textAlign: 'center', color: 'var(--tx-3)', font: '400 13px/1 var(--ff-mono)' }}>
          Carregando cards BDR…
        </div>
      )}

      {/* Kanban board */}
      {!loading && (
        <div className="kanban-board"
          style={{ gridTemplateColumns: 'repeat(' + etapasVisiveis.length + ', minmax(220px, 1fr))' }}>
          {etapasVisiveis.map(function(etapa) {
            var colCards = cards.filter(function(c){ return c.etapa === etapa.id; });
            // Ordena por data_entrada desc (mais recente em cima)
            colCards.sort(function(a, b) { return (b.data_entrada || '').localeCompare(a.data_entrada || ''); });
            var isOver = dragOver === etapa.id;
            var isReadonly = etapa.id === BDR_ETAPA_READONLY;
            return (
              <div key={etapa.id}
                className={'kanban-col ' + (isOver ? 'kanban-col--over' : '')}
                onDragOver={function(e){ handleDragOver(e, etapa.id); }}
                onDrop={function(e){ handleDrop(e, etapa.id); }}
                style={isReadonly ? { background: 'var(--surface-2)', opacity: 0.92 } : {}}>
                {/* Header */}
                <div className="kanban-col__hd">
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span className="kanban-col__label" style={{ color: etapa.color, background: etapa.bg }}>{etapa.label}</span>
                    <span className="kanban-col__count">{colCards.length}</span>
                  </div>
                  {isReadonly && (
                    <span style={{ font: '400 9px/1 var(--ff-mono)', color: 'var(--tx-3)', textTransform: 'uppercase', letterSpacing: '.06em' }} title="Coluna histórica — somente leitura">
                      <i data-lucide="lock" style={{ width: 10, height: 10, verticalAlign: '-1px' }}></i> histórico
                    </span>
                  )}
                </div>
                {/* Cards */}
                <div className="kanban-col__body">
                  {colCards.map(function(card) {
                    var draggable = !isReadonly;
                    return (
                      <div key={card.id}
                        draggable={draggable}
                        onDragStart={function(e){ handleDragStart(e, card.id, card.etapa); }}
                        onDragEnd={handleDragEnd}
                        style={{ opacity: dragId === card.id ? 0.5 : 1, cursor: draggable ? 'grab' : 'default' }}>
                        <BdrCard card={card}
                          onMover={function(novaEtapa){
                            if (novaEtapa === 'descartado') setModalDescartar(card);
                            else moverEtapa(card.id, novaEtapa);
                          }}
                          onDetalhes={function(){ setModalDetalhes(card); }}
                          onDescartar={function(){ setModalDescartar(card); }}
                          onEnviarPipeline={function(){ setModalEnviar(card); }}
                          onEditar={function(){ setModalEditar(card); }}
                          onRegistrarInteracao={function(){ setModalInteracao(card); }}
                        />
                      </div>
                    );
                  })}
                  {colCards.length === 0 && (
                    <div style={{ padding: '24px 0', textAlign: 'center', color: 'var(--tx-3)', font: '400 12px/1.4 var(--ff-body)' }}>
                      <i data-lucide={isReadonly ? 'inbox' : 'circle'} style={{ width: 18, height: 18, marginBottom: 6, display: 'block', margin: '0 auto 8px' }}></i>
                      {isReadonly ? 'Nenhum envio ao pipeline ainda' : 'Sem cards'}
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* ── Lista de Descartados ───────────────────────── */}
      {nDescartados > 0 && (
        <div style={{ marginTop: 24, border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', overflow: 'hidden', background: 'var(--surface)' }}>
          {/* Header da seção */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', background: 'var(--surface-2)', borderBottom: showListaDesc ? '1px solid var(--border)' : 'none', cursor: 'pointer' }}
            onClick={function(){ setShowListaDesc(function(v){ return !v; }); }}>
            <i data-lucide={showListaDesc ? 'chevron-down' : 'chevron-right'} style={{ width: 14, height: 14, color: 'var(--tx-3)', flexShrink: 0 }}></i>
            <span style={{ font: '600 12px/1 var(--ff-body)', color: 'var(--danger)' }}>Descartados</span>
            <span style={{ font: '400 11px/1 var(--ff-mono)', color: 'var(--tx-3)', background: '#fef2f2', border: '1px solid var(--danger)', borderRadius: 'var(--r-pill)', padding: '2px 7px' }}>{nDescartados}</span>
            {selDesc.size > 0 && (
              <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }} onClick={function(e){ e.stopPropagation(); }}>
                <button className="btn btn-secondary" style={{ fontSize: 11, padding: '5px 10px', color: 'var(--grn)' }}
                  onClick={restaurarDescartadosLote}>
                  <i data-lucide="rotate-ccw" style={{ width: 12, height: 12 }}></i> Restaurar {selDesc.size}
                </button>
                <button className="btn btn-secondary" style={{ fontSize: 11, padding: '5px 10px', color: 'var(--danger)', borderColor: 'var(--danger)' }}
                  onClick={excluirDescartadosLote}>
                  <i data-lucide="trash-2" style={{ width: 12, height: 12 }}></i> Excluir {selDesc.size}
                </button>
              </div>
            )}
          </div>

          {/* Tabela */}
          {showListaDesc && (
            <div style={{ overflowX: 'auto' }}>
              <table style={{ width: '100%', borderCollapse: 'collapse', font: '400 12px/1 var(--ff-body)' }}>
                <thead>
                  <tr style={{ background: 'var(--surface-2)', borderBottom: '1px solid var(--border)' }}>
                    <th style={{ width: 36, padding: '8px 12px', textAlign: 'center' }}>
                      <input type="checkbox"
                        checked={selDesc.size === nDescartados}
                        onChange={function(){ toggleSelDescAll(descartados); }}
                        style={{ accentColor: 'var(--danger)', cursor: 'pointer' }} />
                    </th>
                    {['Empresa', 'CNPJ', 'Cidade / UF', 'Descartado em', ''].map(function(h){
                      return <th key={h} style={{ padding: '8px 12px', textAlign: 'left', font: '600 10px/1 var(--ff-body)', textTransform: 'uppercase', letterSpacing: '.05em', color: 'var(--tx-3)', whiteSpace: 'nowrap' }}>{h}</th>;
                    })}
                  </tr>
                </thead>
                <tbody>
                  {descartados.map(function(card, i){
                    var isSel = selDesc.has(card.id);
                    return (
                      <tr key={card.id}
                        style={{ borderBottom: i < nDescartados - 1 ? '1px solid var(--border)' : 'none', background: isSel ? 'rgba(220,53,69,.04)' : 'transparent', transition: 'background 120ms' }}>
                        <td style={{ padding: '10px 12px', textAlign: 'center' }}>
                          <input type="checkbox" checked={isSel} onChange={function(){ toggleSelDesc(card.id); }}
                            style={{ accentColor: 'var(--danger)', cursor: 'pointer' }} />
                        </td>
                        <td style={{ padding: '10px 12px' }}>
                          <div style={{ font: '500 12px/1.2 var(--ff-body)', color: 'var(--tx)' }}>{card.razao_social}</div>
                          {card.cnae && <div style={{ font: '400 10px/1 var(--ff-mono)', color: 'var(--tx-3)', marginTop: 3 }}>{bdrTruncar(card.cnae, 50)}</div>}
                        </td>
                        <td style={{ padding: '10px 12px', font: '400 11px/1 var(--ff-mono)', color: 'var(--tx-2)', whiteSpace: 'nowrap' }}>
                          {bdrFmtCnpj(card.cnpj) || '—'}
                        </td>
                        <td style={{ padding: '10px 12px', font: '400 11px/1 var(--ff-mono)', color: 'var(--tx-2)', whiteSpace: 'nowrap' }}>
                          {[card.cidade, card.uf].filter(Boolean).join(' / ') || '—'}
                        </td>
                        <td style={{ padding: '10px 12px', font: '400 11px/1 var(--ff-mono)', color: 'var(--tx-3)', whiteSpace: 'nowrap' }}>
                          {bdrFmtDataCurta(card.data_entrada)}
                        </td>
                        <td style={{ padding: '10px 12px', whiteSpace: 'nowrap' }}>
                          <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
                            <button className="btn btn-ghost" style={{ fontSize: 11, padding: '4px 9px', color: 'var(--grn)' }}
                              title="Restaurar para Kanban"
                              onClick={function(){ restaurarDescartado(card.id); }}>
                              <i data-lucide="rotate-ccw" style={{ width: 12, height: 12 }}></i> Restaurar
                            </button>
                            <button className="btn btn-ghost" style={{ fontSize: 11, padding: '4px 9px', color: 'var(--danger)' }}
                              title="Excluir permanentemente"
                              onClick={function(){
                                window.CRM_CONFIRM('Excluir "' + card.razao_social + '"? Esta ação não pode ser desfeita.', { danger: true })
                                  .then(function(ok){ if (ok) excluirDescartado(card.id); });
                              }}>
                              <i data-lucide="trash-2" style={{ width: 12, height: 12 }}></i> Excluir
                            </button>
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}

      {/* Modais */}
      <DescartarBdrModal open={!!modalDescartar} card={modalDescartar}
        onConfirm={confirmarDescartar} onClose={function(){ setModalDescartar(null); }} />
      <DetalhesBdrModal open={!!modalDetalhes} card={modalDetalhes}
        onClose={function(){ setModalDetalhes(null); }}
        onRegistrarInteracao={function(){ setModalInteracao(modalDetalhes); }}
        onEditar={function(){ setModalEditar(modalDetalhes); }} />
      <EnviarPipelineModal open={!!modalEnviar} card={modalEnviar}
        vendedores={vendedores}
        onConfirm={confirmarEnviarPipeline}
        onClose={function(){ setModalEnviar(null); }} />
      <EditarBdrModal open={!!modalEditar} card={modalEditar}
        onSave={confirmarEditar}
        onClose={function(){ setModalEditar(null); }} />
      <RegistrarInteracaoModal open={!!modalInteracao} card={modalInteracao}
        onSave={confirmarRegistrarInteracao}
        onClose={function(){ setModalInteracao(null); }} />
    </div>
  );
}

window.BDR = BDR;