/* Painel Nanda — telas A: Dashboard, Pipeline, Chat, Contatos. window.App.ScreensA */
(function () {
  const I = window.App.Icons;
  const U = window.App.UI;
  const D = window.App.Data;
  const CFG = window.NANDA_CONFIG || {};
  const BR = CFG.brand || {};
  const AG = BR.agente || 'Nanda';
  const { useState, useMemo, useEffect, useRef } = React;
  // Datas defensivas: integrações externas podem criar sessions
  // sem historico e, no futuro, pode vir mensagem sem timestamp. Formatar data
  // inválida NUNCA pode quebrar a tela — devolve '' e a UI segue.
  const fmtHrs = (iso) => {
    if (!iso) return '';
    const t = new Date(iso).getTime();
    if (!isFinite(t)) return '';
    const diff = (Date.now() - t) / 3600e3;
    if (diff < 1) return Math.max(1, Math.round(diff * 60)) + 'm';
    if (diff < 24) return Math.round(diff) + 'h';
    return Math.round(diff / 24) + 'd';
  };
  const hhmm = (iso) => {
    if (!iso) return '';
    const d = new Date(iso);
    return isFinite(d.getTime()) ? d.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' }) : '';
  };
  // Só mensagens reais (objetos). A sync do CRM cria sessions com data SEM
  // historico (vira []) e um item null no meio do array não pode derrubar o
  // Chat inteiro (TypeError em .timestamp — bug visto em produção 2026-09-01).
  const validMsgs = (arr) => (Array.isArray(arr) ? arr.filter((m) => m && typeof m === 'object') : []);

  /* ─────────────── DASHBOARD ─────────────── */
  function LineChart({ serie }) {
    const W = 560, H = 210, pad = 34, top = 36;
    const ticks = [0, 9, 18, 27, 36];
    const n = serie.length;
    const x = (i) => pad + (i * (W - pad - 8)) / (n - 1);
    const y = (v) => H - pad - (v / top) * (H - pad - 12);
    const line = serie.map((v, i) => `${i ? 'L' : 'M'}${x(i).toFixed(1)} ${y(v).toFixed(1)}`).join(' ');
    const area = `${line} L${x(n - 1).toFixed(1)} ${H - pad} L${x(0).toFixed(1)} ${H - pad} Z`;
    return (
      <svg viewBox={`0 0 ${W} ${H}`} className="w-full">
        <defs><linearGradient id="fill" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#2e6fd6" stopOpacity=".28" /><stop offset="1" stopColor="#2e6fd6" stopOpacity="0" /></linearGradient></defs>
        {ticks.map((t) => (
          <g key={t}>
            <line x1={pad} x2={W - 4} y1={y(t)} y2={y(t)} stroke="#1c2431" strokeDasharray="3 4" />
            <text x={pad - 8} y={y(t) + 3} textAnchor="end" fontSize="10" fill="#5b6676">{t}</text>
          </g>
        ))}
        <path d={area} fill="url(#fill)" />
        <path d={line} fill="none" stroke="#5aa2ff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
        {serie.map((v, i) => <circle key={i} cx={x(i)} cy={y(v)} r={i === n - 1 ? 4 : 2.5} fill="#5aa2ff" stroke="#070c12" strokeWidth="1.5" />)}
        <text x={pad} y={H - 8} fontSize="10" fill="#5b6676">Hoje</text>
      </svg>
    );
  }

  function StatusBanner({ health }) {
    const ok = health && health.connected;
    const pct = health ? health.pct : 0;
    const [open, setOpen] = useState(false);
    return (
      <U.Card className="mb-6" style={{ borderColor: ok ? 'rgba(38,162,105,.35)' : 'rgba(193,91,91,.4)' }}>
        <div className="flex flex-wrap items-center justify-between gap-3">
          <div className="flex items-center gap-3">
            <span className={'grid h-9 w-9 place-items-center rounded-full ' + (ok ? 'bg-ok-soft text-ok' : 'bg-bad-soft text-bad')}>
              {ok ? <I.Check size={18} /> : <I.X size={18} />}
            </span>
            <div>
              <div className="text-[14px] font-semibold">Status do Sistema</div>
              <div className="text-[12.5px] text-muted">{ok ? 'WhatsApp conectado e operante' : 'Há configurações obrigatórias pendentes'}</div>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <U.Badge tone={ok ? 'ok' : 'bad'}>{pct}% OK</U.Badge>
            <button className="grid h-9 w-9 place-items-center rounded-lg border border-line bg-surface text-muted hover:text-fg"><I.Refresh size={16} /></button>
          </div>
        </div>
        <div className="mt-3 h-1.5 w-full overflow-hidden rounded-full bg-elevate">
          <div className="h-full rounded-full" style={{ width: pct + '%', background: ok ? 'linear-gradient(90deg,#1f7a52,#26a269)' : 'linear-gradient(90deg,#8a3c3c,#c15b5b)' }} />
        </div>
        <button onClick={() => setOpen((v) => !v)} className="mt-3 flex items-center gap-1 text-[12.5px] text-muted hover:text-fg">
          Ver detalhes <I.ChevronDown size={14} className={'transition-transform ' + (open ? 'rotate-180' : '')} />
        </button>
        {open && (
          <div className="mt-3 space-y-2 rounded-lg border border-line bg-surface p-3 text-[12.5px]">
            <div className="flex items-center justify-between"><span className="text-muted">WhatsApp (Zernio) conectado</span><span className={(health && health.connected) ? 'text-ok' : 'text-bad'}>{(health && health.connected) ? 'Sim' : 'Não'}</span></div>
            <div className="flex items-center justify-between"><span className="text-muted">Conta WhatsApp Business ativa</span><span className={(health && health.smartphoneConnected) ? 'text-ok' : 'text-bad'}>{(health && health.smartphoneConnected) ? 'Sim' : 'Não'}</span></div>
            <div className="flex items-center justify-between"><span className="text-muted">Modo</span><span className="text-fg/90">{(health && health.demo) ? 'Demonstração' : 'Produção'}</span></div>
            {health && health.error && (
              <div className="border-t border-line pt-2"><span className="text-muted">Erro reportado: </span><span className="text-bad">{String(health.error)}</span></div>
            )}
          </div>
        )}
      </U.Card>
    );
  }

  function Dashboard({ data }) {
    const [range, setRange] = useState('hoje');
    const dash = data.dash || {};
    return (
      <div>
        <StatusBanner health={data.health} />
        <U.PageHead title="Dashboard" subtitle="Visão geral da performance da sua IA hoje."
          right={<div className="flex rounded-lg border border-line bg-surface p-0.5">
            {[['hoje', 'Hoje'], ['7d', '7 Dias'], ['30d', '30 Dias']].map(([k, l]) => (
              <button key={k} onClick={() => setRange(k)} className={'rounded-md px-3 py-1.5 text-[12.5px] font-medium ' + (range === k ? 'bg-brand-soft text-fg' : 'text-muted hover:text-fg')}>{l}</button>
            ))}
          </div>} />
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
          <U.StatCard label="Atendimentos Hoje" value={dash.atendimentosHoje} delta={dash.atendimentosDelta} icon={I.MsgCircle} />
          <U.StatCard label="Conversões" value={dash.conversoes} delta={dash.conversoesDelta} icon={I.Dollar} />
          <U.StatCard label="Tempo Médio" value={dash.tempoMedio} delta={dash.tempoDelta} icon={I.Activity} />
          <U.StatCard label="Novos Leads" value={dash.novosLeads} delta={dash.novosDelta} icon={I.Contacts} />
        </div>
        <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
          <U.Card>
            <div className="mb-3 flex items-start justify-between">
              <div><div className="text-[15px] font-semibold">Volume de Atendimentos</div><div className="text-[12.5px] text-muted">Interações da IA hoje</div></div>
              <I.Up size={16} className="text-faint" />
            </div>
            <LineChart serie={dash.serieVolume || [0]} />
          </U.Card>
          <U.Card>
            <div className="mb-4"><div className="text-[15px] font-semibold">Conversões</div><div className="text-[12.5px] text-muted">Reuniões, consultas e ações concluídas</div></div>
            <div className="flex items-center justify-between text-[13px]"><span className="text-muted">Hoje</span><span className="font-semibold">{dash.conversoesPeriodo} conv.</span></div>
            <div className="mt-2 h-2 w-full overflow-hidden rounded-full bg-elevate"><div className="h-full rounded-full bg-gradient-to-r from-brand to-bright" style={{ width: '72%' }} /></div>
            <div className="mt-8 flex items-center justify-between border-t border-line pt-4 text-[13px]"><span className="text-muted">Total no período</span><span className="font-semibold">{dash.conversoesPeriodo} conversões</span></div>
          </U.Card>
        </div>
      </div>
    );
  }

  /* ─────────────── NOVO LEAD (modal compartilhado: Pipeline "Novo deal" / Contatos "Novo contato") ─────────────── */
  function NewLeadModal({ open, onClose, defaultColuna, onCreated }) {
    const [nome, setNome] = useState('');
    const [telefone, setTelefone] = useState('');
    const [prioridade, setPrioridade] = useState('media');
    const [coluna, setColuna] = useState(defaultColuna || 'novo');
    const [busy, setBusy] = useState(false);
    const [err, setErr] = useState(null);
    useEffect(() => {
      if (open) { setNome(''); setTelefone(''); setPrioridade('media'); setColuna(defaultColuna || 'novo'); setErr(null); }
    }, [open, defaultColuna]);
    const inputCls = 'h-10 w-full rounded-lg border border-line bg-surface px-3 text-[13.5px] text-fg placeholder:text-faint outline-none focus:border-brand/60';
    const submit = async () => {
      if (!nome.trim() || !telefone.trim()) { setErr('Nome e telefone são obrigatórios.'); return; }
      setBusy(true); setErr(null);
      try {
        const { lead } = await D.createLead({ nome: nome.trim(), telefone: telefone.trim(), prioridade, coluna });
        onCreated && onCreated(lead);
        onClose();
      } catch (e) { setErr(String(e.message || e)); }
      finally { setBusy(false); }
    };
    return (
      <U.Modal open={open} onClose={onClose} title="Novo Lead">
        <div className="space-y-3">
          <div><label className="mb-1.5 block text-[12.5px] text-muted">Nome</label>
            <input value={nome} onChange={(e) => setNome(e.target.value)} placeholder="Nome completo" className={inputCls} /></div>
          <div><label className="mb-1.5 block text-[12.5px] text-muted">Telefone (WhatsApp)</label>
            <input value={telefone} onChange={(e) => setTelefone(e.target.value)} placeholder="55 24 99999-9999" className={inputCls} /></div>
          <div className="grid grid-cols-2 gap-3">
            <div><label className="mb-1.5 block text-[12.5px] text-muted">Prioridade</label>
              <select value={prioridade} onChange={(e) => setPrioridade(e.target.value)} className={inputCls}>
                <option value="alta">Alta</option><option value="media">Média</option><option value="baixa">Baixa</option>
              </select></div>
            <div><label className="mb-1.5 block text-[12.5px] text-muted">Coluna</label>
              <select value={coluna} onChange={(e) => setColuna(e.target.value)} className={inputCls}>
                {D.COLUMNS.map((c) => <option key={c.key} value={c.key}>{c.label}</option>)}
              </select></div>
          </div>
          {err && <div className="rounded-lg border border-bad/40 bg-bad-soft px-3 py-2 text-[12.5px] text-bad">{err}</div>}
          <div className="flex justify-end gap-2 pt-1">
            <U.Button kind="ghost" onClick={onClose} disabled={busy}>Cancelar</U.Button>
            <U.Button kind="primary" onClick={submit} disabled={busy}>{busy ? 'Salvando…' : 'Criar lead'}</U.Button>
          </div>
        </div>
      </U.Modal>
    );
  }

  /* ─────────────── EDITAR LEAD (modal compartilhado: Contatos / Chat — só Admin) ─────────────── */
  function EditLeadModal({ open, onClose, lead, onUpdated }) {
    const [nome, setNome] = useState('');
    const [telefone, setTelefone] = useState('');
    const [email, setEmail] = useState('');
    const [status, setStatus] = useState('novo');
    const [busy, setBusy] = useState(false);
    const [err, setErr] = useState(null);
    useEffect(() => {
      if (open && lead) {
        setNome(lead.nome || ''); setTelefone(lead.telefone || ''); setEmail(lead.email || '');
        setStatus(lead.status || 'novo'); setErr(null);
      }
    }, [open, lead]);
    const inputCls = 'h-10 w-full rounded-lg border border-line bg-surface px-3 text-[13.5px] text-fg placeholder:text-faint outline-none focus:border-brand/60';
    const submit = async () => {
      if (!lead) return;
      if (!nome.trim() || !telefone.trim()) { setErr('Nome e telefone são obrigatórios.'); return; }
      const patch = {};
      if (nome.trim() !== (lead.nome || '')) patch.nome = nome.trim();
      if (telefone.trim() !== (lead.telefone || '')) patch.telefone = telefone.trim();
      if (email.trim() !== (lead.email || '')) patch.email = email.trim();
      if (status !== lead.status) patch.status = status;
      if (!Object.keys(patch).length) { onClose(); return; }
      setBusy(true); setErr(null);
      try {
        const { lead: updated } = await D.updateLead(lead.id, patch);
        onUpdated && onUpdated(updated);
        onClose();
      } catch (e) { setErr(String(e.message || e)); }
      finally { setBusy(false); }
    };
    return (
      <U.Modal open={open} onClose={onClose} title="Editar Lead">
        <div className="space-y-3">
          <div><label className="mb-1.5 block text-[12.5px] text-muted">Nome</label>
            <input value={nome} onChange={(e) => setNome(e.target.value)} placeholder="Nome completo" className={inputCls} /></div>
          <div><label className="mb-1.5 block text-[12.5px] text-muted">Telefone (WhatsApp)</label>
            <input value={telefone} onChange={(e) => setTelefone(e.target.value)} placeholder="55 24 99999-9999" className={inputCls} /></div>
          <div><label className="mb-1.5 block text-[12.5px] text-muted">E-mail</label>
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="opcional" className={inputCls} /></div>
          <div><label className="mb-1.5 block text-[12.5px] text-muted">Status</label>
            <select value={status} onChange={(e) => setStatus(e.target.value)} className={inputCls}>
              {D.COLUMNS.map((c) => <option key={c.key} value={c.key}>{c.label}</option>)}
            </select></div>
          {err && <div className="rounded-lg border border-bad/40 bg-bad-soft px-3 py-2 text-[12.5px] text-bad">{err}</div>}
          <div className="flex justify-end gap-2 pt-1">
            <U.Button kind="ghost" onClick={onClose} disabled={busy}>Cancelar</U.Button>
            <U.Button kind="primary" onClick={submit} disabled={busy}>{busy ? 'Salvando…' : 'Salvar'}</U.Button>
          </div>
        </div>
      </U.Modal>
    );
  }

  /* ─────────────── ETAPAS DO PIPELINE (módulo "Configurar") ─────────────── */
  function EstagiosManager() {
    const [estagios, setEstagios] = useState([]);
    const [loading, setLoading] = useState(true);
    const [err, setErr] = useState(null);
    const [busyId, setBusyId] = useState(null);
    const [newNome, setNewNome] = useState('');
    const [newCor, setNewCor] = useState('#5aa2ff');
    const [newTipo, setNewTipo] = useState('manual');
    const [creating, setCreating] = useState(false);

    const load = async () => {
      setLoading(true); setErr(null);
      try { setEstagios(await D.pipelineEstagios()); }
      catch (e) { setErr(String(e.message || e)); }
      finally { setLoading(false); }
    };
    useEffect(() => { load(); }, []);

    const patch = async (id, p) => {
      setBusyId(id);
      try { await D.updateEstagio(id, p); await load(); }
      catch (e) { setErr(String(e.message || e)); }
      finally { setBusyId(null); }
    };
    const remove = async (id, nome) => {
      if (!window.confirm(`Excluir a etapa "${nome}"? Os leads não são apagados, só perdem essa referência.`)) return;
      setBusyId(id);
      try { await D.deleteEstagio(id); await load(); }
      catch (e) { setErr(String(e.message || e)); }
      finally { setBusyId(null); }
    };
    const move = async (idx, dir) => {
      const target = estagios[idx + dir];
      const cur = estagios[idx];
      if (!target) return;
      setBusyId(cur.id);
      try {
        await Promise.all([D.updateEstagio(cur.id, { ordem: target.ordem }), D.updateEstagio(target.id, { ordem: cur.ordem })]);
        await load();
      } catch (e) { setErr(String(e.message || e)); }
      finally { setBusyId(null); }
    };
    const create = async () => {
      if (!newNome.trim()) return;
      setCreating(true);
      try {
        await D.createEstagio({ nome: newNome.trim(), cor: newCor, tipo: newTipo, criterios: '' });
        setNewNome(''); setNewCor('#5aa2ff'); setNewTipo('manual');
        await load();
      } catch (e) { setErr(String(e.message || e)); }
      finally { setCreating(false); }
    };

    if (loading) return <div className="py-8 text-center text-[13px] text-muted">Carregando etapas…</div>;
    return (
      <div>
        <div className="mb-3 text-[12.5px] text-muted">
          Manual: você move o lead arrastando o card. Automático: a {AG} move sozinha quando a conversa atender aos critérios abaixo.
        </div>
        {err && <div className="mb-3 rounded-lg border border-bad/40 bg-bad-soft px-3 py-2 text-[12.5px] text-bad">{err}</div>}
        <div className="max-h-[360px] space-y-2 overflow-y-auto scroll-thin pr-1">
          {estagios.map((e, idx) => (
            <div key={e.id} className="rounded-lg border border-line bg-surface p-3">
              <div className="flex items-center gap-2">
                <input type="color" value={e.cor || '#5aa2ff'} onChange={(ev) => patch(e.id, { cor: ev.target.value })}
                  title="Cor da etapa" className="h-8 w-8 shrink-0 cursor-pointer rounded border border-line bg-transparent p-0" />
                <input defaultValue={e.nome} key={e.id + '_' + e.nome}
                  onBlur={(ev) => { const v = ev.target.value.trim(); if (v && v !== e.nome) patch(e.id, { nome: v }); }}
                  className="h-8 flex-1 rounded-md border border-line bg-surface2 px-2 text-[13px] text-fg outline-none focus:border-brand/60" />
                <div className="flex shrink-0 rounded-lg border border-line bg-surface2 p-0.5">
                  <button onClick={() => patch(e.id, { tipo: 'manual' })} disabled={busyId === e.id}
                    className={'rounded-md px-2.5 py-1 text-[11.5px] font-medium ' + (e.tipo !== 'automatico' ? 'bg-brand-soft text-fg' : 'text-muted hover:text-fg')}>Manual</button>
                  <button onClick={() => patch(e.id, { tipo: 'automatico' })} disabled={busyId === e.id}
                    className={'rounded-md px-2.5 py-1 text-[11.5px] font-medium ' + (e.tipo === 'automatico' ? 'bg-brand-soft text-fg' : 'text-muted hover:text-fg')}>Automático</button>
                </div>
                <div className="flex shrink-0 items-center gap-0.5">
                  <button onClick={() => move(idx, -1)} disabled={idx === 0 || busyId === e.id} title="Mover pra cima"
                    className="grid h-7 w-7 place-items-center rounded-md text-faint hover:bg-elevate hover:text-fg disabled:opacity-30"><I.ChevronDown size={14} className="rotate-180" /></button>
                  <button onClick={() => move(idx, 1)} disabled={idx === estagios.length - 1 || busyId === e.id} title="Mover pra baixo"
                    className="grid h-7 w-7 place-items-center rounded-md text-faint hover:bg-elevate hover:text-fg disabled:opacity-30"><I.ChevronDown size={14} /></button>
                  <button onClick={() => remove(e.id, e.nome)} disabled={busyId === e.id} title="Excluir etapa"
                    className="grid h-7 w-7 place-items-center rounded-md text-faint hover:bg-bad-soft hover:text-bad"><I.X size={14} /></button>
                </div>
              </div>
              {e.tipo === 'automatico' && (
                <div className="mt-2">
                  <label className="mb-1 block text-[11px] text-faint">Critérios para IA mover para este estágio</label>
                  <textarea defaultValue={e.criterios || ''} key={e.id + '_crit_' + (e.criterios || '')} rows={2}
                    onBlur={(ev) => { if (ev.target.value !== (e.criterios || '')) patch(e.id, { criterios: ev.target.value }); }}
                    placeholder="Ex.: lead confirmou nome, horário e data da consulta"
                    className="w-full rounded-lg border border-line bg-surface2 p-2 text-[12.5px] text-fg placeholder:text-faint outline-none focus:border-brand/60" />
                </div>
              )}
            </div>
          ))}
        </div>
        <div className="mt-3 rounded-lg border border-dashed border-line2 p-3">
          <div className="mb-2 text-[11px] font-semibold tracking-wide text-faint">NOVA ETAPA</div>
          <div className="flex items-center gap-2">
            <input type="color" value={newCor} onChange={(e) => setNewCor(e.target.value)} className="h-8 w-8 shrink-0 cursor-pointer rounded border border-line bg-transparent p-0" />
            <input value={newNome} onChange={(e) => setNewNome(e.target.value)} placeholder="Nome da etapa" onKeyDown={(e) => e.key === 'Enter' && create()}
              className="h-8 flex-1 rounded-md border border-line bg-surface2 px-2 text-[13px] text-fg placeholder:text-faint outline-none focus:border-brand/60" />
            <div className="flex shrink-0 rounded-lg border border-line bg-surface2 p-0.5">
              <button onClick={() => setNewTipo('manual')} className={'rounded-md px-2.5 py-1 text-[11.5px] font-medium ' + (newTipo !== 'automatico' ? 'bg-brand-soft text-fg' : 'text-muted hover:text-fg')}>Manual</button>
              <button onClick={() => setNewTipo('automatico')} className={'rounded-md px-2.5 py-1 text-[11.5px] font-medium ' + (newTipo === 'automatico' ? 'bg-brand-soft text-fg' : 'text-muted hover:text-fg')}>Automático</button>
            </div>
            <U.Button kind="primary" size="sm" onClick={create} disabled={creating || !newNome.trim()}><I.Plus size={14} />{creating ? 'Criando…' : 'Nova Etapa'}</U.Button>
          </div>
        </div>
      </div>
    );
  }

  /* ─────────────── PIPELINE ─────────────── */
  function DealCard({ lead, onDragStart }) {
    return (
      <div draggable onDragStart={(e) => onDragStart(e, lead)}
        className="cursor-grab rounded-lg border border-line bg-surface2 p-3 active:cursor-grabbing hover:border-line2">
        <U.Badge tone={lead.prioridade === 'alta' ? 'bad' : lead.prioridade === 'baixa' ? 'muted' : 'warn'} className="mb-2">{D.prioLabel(lead.prioridade)}</U.Badge>
        <div className="text-[13.5px] font-semibold leading-tight">{lead.nome}</div>
        <div className="mt-0.5 text-[12px] text-faint">{lead.memoria.interesses[0] || 'Lead WhatsApp'}</div>
        <div className="mt-3 flex items-center justify-between">
          <span className="flex items-center gap-1 text-[13px] font-medium text-ok"><I.Dollar size={13} />R$ {Number(lead.valor).toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</span>
          <U.Avatar name={lead.responsavel || lead.nome} size={24} />
        </div>
      </div>
    );
  }

  function Pipeline({ data }) {
    const [leads, setLeads] = useState(() => data.leads.map((l) => ({ ...l })));
    const [q, setQ] = useState('');
    const [over, setOver] = useState(null);
    const [cfgOpen, setCfgOpen] = useState(false);
    const [cfgTab, setCfgTab] = useState('Etapas');
    const [newDealOpen, setNewDealOpen] = useState(false);
    const [hiddenCols, setHiddenCols] = useState(() => new Set());
    const drag = useRef(null);
    useEffect(() => { setLeads(data.leads.map((l) => ({ ...l }))); }, [data.leads]);
    const onDragStart = (e, lead) => { drag.current = lead.id; e.dataTransfer.effectAllowed = 'move'; };
    const onDrop = (col) => { const id = drag.current; if (id) setLeads((ls) => ls.map((l) => l.id === id ? { ...l, status: col } : l)); setOver(null); drag.current = null; };
    const filt = leads.filter((l) => l.nome.toLowerCase().includes(q.toLowerCase()));
    const visibleColumns = D.COLUMNS.filter((col) => !hiddenCols.has(col.key));
    const toggleCol = (key) => setHiddenCols((prev) => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key); else next.add(key);
      return next;
    });
    return (
      <div className="flex h-full flex-col">
        <U.PageHead title="Pipeline de Vendas" subtitle="Gerencie oportunidades e acompanhe o fluxo de receita."
          right={<><div className="w-56"><U.Search value={q} onChange={setQ} placeholder="Buscar oportunidade..." /></div>
            <U.Button kind="ghost" onClick={() => setCfgOpen(true)}><I.Settings size={15} />Configurar</U.Button>
            <U.Button kind="primary" onClick={() => setNewDealOpen(true)}><I.Plus size={15} />Novo deal</U.Button></>} />
        <div className="flex flex-1 gap-4 overflow-x-auto pb-2">
          {visibleColumns.map((col) => {
            const items = filt.filter((l) => l.status === col.key);
            const total = items.reduce((s, l) => s + Number(l.valor || 0), 0);
            return (
              <div key={col.key} onDragOver={(e) => { e.preventDefault(); setOver(col.key); }} onDrop={() => onDrop(col.key)}
                className={'flex w-72 shrink-0 flex-col rounded-xl border bg-surface/40 ' + (over === col.key ? 'border-brand/60' : 'border-line')}>
                <div className="border-b border-line p-3">
                  <div className="flex items-center justify-between">
                    <span className="text-[12px] font-semibold tracking-wide text-muted">{col.label}</span>
                    <span className="grid h-5 min-w-5 place-items-center rounded-full bg-elevate px-1.5 text-[11px] text-muted">{items.length}</span>
                  </div>
                  <div className="mt-1 text-[11.5px] text-faint">Total: R$ {total.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</div>
                </div>
                <div className="flex-1 space-y-2 overflow-y-auto p-2 scroll-thin" style={{ minHeight: 120 }}>
                  {items.map((l) => <DealCard key={l.id} lead={l} onDragStart={onDragStart} />)}
                </div>
              </div>
            );
          })}
        </div>
        <U.Modal open={cfgOpen} onClose={() => setCfgOpen(false)} title="Configurar Pipeline" width={620}>
          <div className="mb-4 inline-flex rounded-lg border border-line bg-surface p-0.5">
            {['Etapas', 'Colunas visíveis'].map((t) => (
              <button key={t} onClick={() => setCfgTab(t)} className={'rounded-md px-3 py-1.5 text-[12.5px] font-medium ' + (cfgTab === t ? 'bg-brand-soft text-fg' : 'text-muted hover:text-fg')}>{t}</button>
            ))}
          </div>
          {cfgTab === 'Etapas' ? <EstagiosManager /> : (
            <div>
              <div className="mb-3 text-[12.5px] text-muted">Escolha quais colunas aparecem no quadro. Vale só para esta sessão do navegador (ainda não é salvo no servidor).</div>
              <div className="space-y-2">
                {D.COLUMNS.map((col) => (
                  <label key={col.key} className="flex items-center gap-2.5 rounded-lg border border-line bg-surface px-3 py-2 text-[13px]">
                    <input type="checkbox" checked={!hiddenCols.has(col.key)} onChange={() => toggleCol(col.key)} className="h-4 w-4 accent-brand" />
                    {col.label}
                  </label>
                ))}
              </div>
            </div>
          )}
          <div className="mt-4 flex justify-end"><U.Button kind="primary" onClick={() => setCfgOpen(false)}>Concluir</U.Button></div>
        </U.Modal>
        <NewLeadModal open={newDealOpen} onClose={() => setNewDealOpen(false)} defaultColuna="novo"
          onCreated={(lead) => setLeads((ls) => [lead, ...ls])} />
      </div>
    );
  }

  /* Badge de canal (WhatsApp/Instagram) — cantinho do avatar, mesmo padrão do
     pontinho de status (pausado/ativo) que já mora ali do lado, só que no canto
     de cima. `border` recebe a cor de fundo ao redor (border-surface2 na lista,
     border-bg no cabeçalho da thread) pra recortar limpo, igual o pontinho já faz. */
  function ChannelBadge({ canal, border }) {
    const insta = canal === 'instagram';
    const Icon = insta ? I.Instagram : I.WhatsApp;
    return (
      <span title={insta ? 'Instagram Direct' : 'WhatsApp'}
        className={'absolute -top-1 -right-1 grid h-4 w-4 place-items-center rounded-full border-2 text-white ' + border + ' ' + (insta ? 'bg-[#E1306C]' : 'bg-ok')}>
        <Icon size={9} sw={2.4} />
      </span>
    );
  }

  /* ─────────────── CHAT AO VIVO ─────────────── */
  function Chat({ data, isAdmin, perms }) {
    // Refaz leads/sessions ao MONTAR (login, ou volta de outra aba — o
    // roteador em app.jsx desmonta/remonta o componente a cada troca de
    // rota), em vez de usar só o snapshot do login (portado de
    // tina-painel-fix-manuais-20261001, aprovado Márcio msg 7164). useEffect
    // com [] roda uma vez por montagem, sem polling contínuo. Falha de rede
    // mantém os dados já carregados (nunca esvazia a tela).
    const [sessionsLive, setSessionsLive] = useState(data.sessions);
    const [leadsLive, setLeadsLive] = useState(data.leads);
    useEffect(() => {
      let alive = true;
      (async () => {
        try {
          const [freshLeads, freshSessions] = await Promise.all([D.leads(), D.sessions()]);
          if (alive) { setLeadsLive(freshLeads); setSessionsLive(freshSessions); }
        } catch (e) { /* mantém os dados atuais; não derruba a tela por falha de rede */ }
      })();
      return () => { alive = false; };
    }, []);
    const sessions = sessionsLive;
    const leadById = useMemo(() => Object.fromEntries(leadsLive.map((l) => [l.id, l])), [leadsLive]);
    // Filtro por agente: a Nanda tem UM fluxo (WhatsApp), então o filtro nunca
    // aparece (agentTabs sempre cai em 1 categoria real). Mantido inerte; se um
    // dia houver um 2º número/funil, é aqui que se reativa.
    const canVend = !perms || perms.verVendas !== false;
    const agentTabs = [['todos', 'Todas'], canVend && ['vendas', 'Vendas']].filter(Boolean);
    const showFilter = agentTabs.length > 2;  // nunca true hoje (só 1 categoria real)
    const soloAlt = null;
    const [agFilter, setAgFilter] = useState('todos');
    const effFilter = soloAlt || agFilter;
    // Resolve os dados de exibição de uma sessão a partir do lead (leadById).
    // Fallback defensivo pra sessão sem linha em `leads` ainda: nunca retorna
    // null pra uma sessão válida -> sem crash.
    const infoFor = (s) => {
      if (!s) return null;
      const l = leadById[s.lead_id];
      if (l) return l;
      // guarda (portado de tina-painel-fix-20261007): sem isso lead.memoria.*
      // quebra o painel (TypeError) quando a sessão mais recente não tem lead casado.
      return { id: s.lead_id, nome: s.nome || s.telefone || 'Contato', telefone: s.telefone || '', status: null, estado: s.estado, memoria: { interesses: [], proxima_acao: '', dores: [], objecoes: [], desejo: '' }, total_conversas: 0 };
    };
    // Default: primeira sessão que TEM conversa (sessões criadas pela sync do
    // CRM vêm sem historico e são as mais recentes — não podem ser o default).
    const [sel, setSel] = useState(() => {
      const f = sessions.find((s) => validMsgs(s.historico).length > 0) || sessions[0];
      return f && f.lead_id;
    });
    const [q, setQ] = useState('');
    const [draft, setDraft] = useState('');
    const [hist, setHist] = useState({});
    // Abaixo de xl (1280px) o painel de info virou um drawer sobreposto com fundo
    // escurecido (fix de hoje pro bug "informações do lead não abre"). Nessa faixa
    // ele NÃO pode nascer aberto por padrão -- isso bloquearia a lista inteira atrás
    // de um fundo escuro assim que a tela carrega, com um lead qualquer já
    // pré-selecionado (achado testando ao vivo: 1o clique na lista ficava preso,
    // interceptado pelo backdrop). Em xl+ é inline (não bloqueia nada) e continua
    // aberto por padrão, do jeito que sempre foi.
    const xlNow = () => (typeof window !== 'undefined' ? window.innerWidth >= 1280 : true);
    const [showInfo, setShowInfo] = useState(xlNow);
    const [editOpen, setEditOpen] = useState(false);
    const [overrides, setOverrides] = useState({});
    const [mobShowThread, setMobShowThread] = useState(false); // master-detail no mobile
    const bottom = useRef(null);
    // ── Assumir/retomar (modo manual). manualOv guarda o override local por lead
    // pra UI refletir na hora; o valor real vem de isPaused (leads.modo_manual
    // carregado do banco). pausing/sending evitam clique duplo; sendErr mostra
    // falha REAL de entrega em vez de fingir que enviou.
    const [manualOv, setManualOv] = useState({});
    const [pausing, setPausing] = useState(false);
    const [sending, setSending] = useState(false);
    const [sendErr, setSendErr] = useState(null);
    const cur = sessions.find((s) => s.lead_id === sel);
    const baseLead = infoFor(cur);
    const lead = overrides[sel] ? { ...baseLead, ...overrides[sel] } : baseLead;
    // Metadados por agente: a Nanda só tem 'vendas', então isAltAgent fica
    // permanentemente false e AgMeta indefinido (o JSX abaixo os usa em vários
    // pontos; mantidos pra um eventual 2º agente).
    const AGENTE_META = {};
    const agente = (cur && cur.agente) || 'vendas';
    const isAltAgent = false;
    const AgMeta = AGENTE_META[agente];
    const messages = validMsgs((hist[sel]) || (cur && cur.historico));
    useEffect(() => { if (bottom.current) bottom.current.scrollTop = bottom.current.scrollHeight; }, [sel, messages.length]);
    useEffect(() => { setShowInfo(xlNow()); }, [sel]);
    // Estado "assumido" (IA pausada) do lead atual: override local vence, senão o
    // valor carregado do banco (isPaused <- leads.modo_manual).
    const isPaused = (sel in manualOv) ? manualOv[sel] : !!(cur && cur.pausado);

    // Assumir (pausa a Nanda) / Retomar (devolve pra Nanda). Chama o backend e
    // reflete na hora; em falha, mostra o erro e NÃO muda o estado visual.
    const toggleManual = async () => {
      if (!lead || pausing) return;
      const next = !isPaused;
      setPausing(true); setSendErr(null);
      try {
        await D.setManual(lead, next);
        setManualOv((o) => ({ ...o, [sel]: next }));
      } catch (e) {
        setSendErr((next ? 'Falha ao assumir a conversa: ' : 'Falha ao retomar: ') + ((e && e.message) || 'erro'));
      } finally { setPausing(false); }
    };

    const send = async () => {
      const text = draft.trim();
      if (!text || !lead || sending) return;
      setSendErr(null); setSending(true);
      const optimistic = { fromMe: true, text, type: 'text', timestamp: new Date().toISOString() };
      setHist((h) => ({ ...h, [sel]: [ ...((h[sel]) || messages), optimistic ] }));
      setDraft('');
      // Ao mandar manual, ASSUME a conversa (pausa a Nanda) se ainda não estiver
      // assumida.
      if (!isAltAgent && !isPaused) {
        try { await D.setManual(lead, true); setManualOv((o) => ({ ...o, [sel]: true })); }
        catch (e) { console.warn('[painel] auto-pausar ao assumir falhou:', (e && e.message) || e); }
      }
      // Envio real. Se o backend falhar (ex.: lead fora da janela de 24h / Direct
      // Send bloqueado), desfaz o balão otimista, devolve o texto e AVISA — nada
      // de fingir que enviou.
      try {
        const res = await D.sendMessage(lead, text, agente);
        if (res && res.success === false) throw new Error(res.error || 'falha no envio');
      } catch (e) {
        const hint = ' — se o lead está há mais de 24h sem responder, o WhatsApp exige um template aprovado.';
        setHist((h) => ({ ...h, [sel]: ((h[sel]) || []).filter((m) => m !== optimistic) }));
        setDraft(text);
        setSendErr('Não foi possível entregar. ' + ((e && e.message) || '') + hint);
      } finally { setSending(false); }
    };
    // "Chats Ativos" = sessões com pelo menos 1 mensagem real. As sessions que a
    // sync do CRM cria só com cadastro (sem historico) não são chats — escondê-las
    // aqui não esconde dado bom: os 22+ leads que responderam TÊM historico e ficam.
    const list = sessions.filter((s) => {
      const l = leadById[s.lead_id];
      // Sessão sem lead correspondente: continua escondida (comportamento atual, sem regressão).
      if (!l) return false;
      if (effFilter !== 'todos' && (s.agente || 'vendas') !== effFilter) return false;
      const nome = (l && l.nome) || s.nome || s.telefone || '';
      if (!nome.toLowerCase().includes(q.toLowerCase())) return false;
      return validMsgs(hist[s.lead_id] || s.historico).length > 0;
    });
    return (
      <div className="flex h-full overflow-hidden rounded-xl border border-line">
        {/* Esquerda: lista (full no mobile; some quando uma conversa está aberta) */}
        <div className={'w-full shrink-0 flex-col border-r border-line bg-surface2/50 md:flex md:w-80 ' + (mobShowThread ? 'hidden' : 'flex')}>
          <div className="border-b border-line p-4">
            <div className="mb-3 text-[15px] font-semibold">Chats Ativos</div>
            <U.Search value={q} onChange={setQ} placeholder="Buscar conversa..." />
            {showFilter ? (
            <div className="mt-3 flex flex-wrap gap-1">
              {agentTabs.map(([k, lb]) => (
                <button key={k} onClick={() => setAgFilter(k)}
                  className={'rounded-md px-2.5 py-1 text-[11.5px] font-medium transition-colors ' + (agFilter === k ? 'bg-brand text-white' : 'bg-surface2 text-muted hover:text-fg')}>{lb}</button>
              ))}
            </div>
            ) : null}
          </div>
          <div className="flex-1 overflow-y-auto scroll-thin">
            {list.map((s) => {
              const l = infoFor(s); const msgs = validMsgs(hist[s.lead_id] || s.historico);
              const rowMeta = null; // badge de agente alternativo: sem uso, só 'vendas' aqui
              // last pode não existir (sessão sem conversa) — o render abaixo tolera.
              const last = msgs[msgs.length - 1]; const on = s.lead_id === sel;
              return (
                <button key={s.id} onClick={() => { setSel(s.lead_id); setMobShowThread(true); }}
                  className={'flex w-full gap-3 border-b border-line/60 p-3 text-left ' + (on ? 'bg-brand-soft' : 'hover:bg-elevate')}
                  style={on ? { boxShadow: 'inset 3px 0 0 #5aa2ff' } : null}>
                  <div className="relative"><U.Avatar name={l.nome} size={40} />
                    <ChannelBadge canal={s.canal} border="border-surface2" />
                    <span className={'absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2 border-surface2 ' + (s.pausado ? 'bg-warn' : 'bg-ok')} /></div>
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center justify-between gap-2"><span className="truncate text-[13.5px] font-medium">{l.nome}</span><span className="shrink-0 text-[11px] text-faint">{last ? fmtHrs(last.timestamp) : ''}</span></div>
                    <div className="truncate text-[12px] text-muted">{last ? last.text : 'Sem mensagens'}</div>
                    <div className="mt-1.5">{rowMeta
                      ? <U.Badge tone="brand"><rowMeta.Icon size={11} />{rowMeta.label}</U.Badge>
                      : (s.pausado ? <U.Badge tone="warn"><I.Pause size={11} />Pausado</U.Badge> : <U.Badge tone="ok"><I.Bot size={11} />{AG}</U.Badge>)}</div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>
        {/* Centro: thread (some no mobile enquanto a lista está aberta) */}
        <div className={'min-w-0 flex-1 flex-col bg-bg/40 md:flex ' + (mobShowThread ? 'flex' : 'hidden')}>
          {lead ? <>
            <div className="flex items-center justify-between border-b border-line px-4 py-3">
              <div className="flex min-w-0 items-center gap-3">
                <button onClick={() => setMobShowThread(false)} aria-label="Voltar para a lista"
                  className="grid h-9 w-9 shrink-0 place-items-center rounded-lg text-muted hover:bg-elevate hover:text-fg md:hidden"><I.ChevronLeft size={18} /></button>
                <div className="relative"><U.Avatar name={lead.nome} size={40} /><ChannelBadge canal={cur.canal} border="border-bg" /><span className={'absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2 border-bg ' + (isPaused ? 'bg-warn' : 'bg-ok')} /></div>
                <div className="min-w-0"><div className="flex items-center gap-2 text-[14px] font-semibold"><span className="truncate">{lead.nome}</span> {isAltAgent ? <U.Badge tone="brand"><AgMeta.Icon size={11} />{AgMeta.label}</U.Badge> : (isPaused ? <U.Badge tone="warn">Pausado</U.Badge> : <U.Badge tone="ok"><I.Bot size={11} />{AG}</U.Badge>)}</div><div className="truncate text-[12px] text-bright">{lead.telefone}</div></div>
              </div>
              <div className="flex shrink-0 items-center gap-1 text-muted">
                {!isAltAgent && <button onClick={toggleManual} disabled={pausing}
                  title={isPaused ? 'Retomar: a ' + AG + ' volta a responder este lead' : 'Assumir: pausa a ' + AG + ' e você conduz a conversa'}
                  className={'flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-[12.5px] font-medium ' + (isPaused ? 'bg-warn/20 text-warn hover:bg-warn/30' : 'text-muted hover:bg-elevate hover:text-fg') + (pausing ? ' opacity-60' : '')}>
                  {isPaused ? <><I.Bot size={15} />{pausing ? '…' : 'Retomar IA'}</> : <><I.Pause size={15} />{pausing ? '…' : 'Assumir'}</>}
                </button>}
                <button onClick={() => setShowInfo((v) => !v)} title="Informações do lead"
                  className={'grid h-8 w-8 place-items-center rounded-lg hover:bg-elevate hover:text-fg ' + (showInfo ? 'bg-elevate text-fg' : '')}><I.Info size={17} /></button>
                <button className="grid h-8 w-8 place-items-center rounded-lg hover:bg-elevate hover:text-fg"><I.More size={17} /></button>
              </div>
            </div>
            <div ref={bottom} className="flex-1 space-y-3 overflow-y-auto p-3 scroll-thin sm:p-5">
              {messages.map((mm, i) => (
                <div key={i} className={'flex ' + (mm.fromMe ? 'justify-end' : 'justify-start')}>
                  <div className={'max-w-[76%] rounded-2xl px-3.5 py-2 text-[13.5px] leading-snug ' + (mm.fromMe ? 'rounded-br-sm bg-brand-soft text-fg' : 'rounded-bl-sm border border-line bg-surface2 text-fg/90')}>
                    <div>{mm.text}</div>
                    <div className={'mt-1 flex items-center gap-1 text-[10px] ' + (mm.fromMe ? 'justify-end text-bright/70' : 'text-faint')}>{hhmm(mm.timestamp)}{mm.fromMe && <I.DoubleCheck size={13} />}</div>
                  </div>
                </div>
              ))}
            </div>
            {sendErr && <div className="border-t border-warn/30 bg-warn/10 px-3 py-2 text-[12px] leading-snug text-warn">{sendErr}</div>}
            <div className="border-t border-line">
              {isAltAgent && (
                <div className="flex items-center gap-1.5 px-4 pt-2 text-[11px] text-muted">
                  <AgMeta.Icon size={12} className="shrink-0 text-bright" />
                  <span>A resposta sai pelo número de <span className="text-bright">{AgMeta.label}</span>{cur && cur.telefone ? ' (+' + cur.telefone + ')' : ''} — nunca pelo de vendas.</span>
                </div>
              )}
              <div className="flex items-center gap-2 p-3">
                <button className="grid h-9 w-9 place-items-center rounded-lg text-faint hover:bg-elevate hover:text-fg"><I.Smile size={18} /></button>
                <button className="grid h-9 w-9 place-items-center rounded-lg text-faint hover:bg-elevate hover:text-fg"><I.Clip size={18} /></button>
                <input value={draft} onChange={(e) => setDraft(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && send()} disabled={sending}
                  placeholder={isAltAgent ? ('Responder pelo número de ' + AgMeta.label + '…') : (isPaused ? 'Você assumiu: escreva pro cliente (a ' + AG + ' está pausada)' : (AG + ' está respondendo automaticamente; enviar assume a conversa'))} className="h-10 flex-1 rounded-lg border border-line bg-surface px-3 text-[13.5px] text-fg placeholder:text-faint outline-none focus:border-brand/60 disabled:opacity-60" />
                <button onClick={send} disabled={sending} className="grid h-10 w-10 place-items-center rounded-lg bg-brand text-white hover:bg-brand-hover disabled:opacity-60"><I.Send size={18} /></button>
              </div>
            </div>
          </> : <div className="grid flex-1 place-items-center text-muted">Selecione uma conversa</div>}
        </div>
        {/* Direita: info do lead — inline a partir de xl (1280px); abaixo disso vira um drawer
            sobreposto com fundo escurecido. Antes o painel só existia com "xl:flex" (sem "flex"
            de base), então em QUALQUER tela abaixo de 1280px o clique no botão de toggle (I.Info)
            não tinha nenhum efeito visível — bug reportado como "informações do lead não abre nada",
            confirmado ao vivo em 1024x768 e em 390x844 (mobile): painel montado, display:none. */}
        {lead && showInfo && <>
          <div onClick={() => setShowInfo(false)} aria-hidden="true"
            className="fixed inset-0 z-40 bg-black/60 xl:hidden" />
          <div className="fixed inset-y-0 right-0 z-50 flex w-80 max-w-[85vw] flex-col overflow-y-auto border-l border-line bg-surface2 shadow-2xl scroll-thin xl:static xl:z-auto xl:max-w-none xl:flex xl:bg-surface2/50 xl:shadow-none">
          <div className="flex items-center justify-between border-b border-line px-4 py-3">
            <span className="text-[14px] font-semibold">{isAltAgent ? 'Informações da Conversa' : 'Informações do Lead'}</span>
            <div className="flex items-center gap-1">
              {isAdmin && !isAltAgent && <button onClick={() => setEditOpen(true)} title="Editar lead" className="text-faint hover:text-fg"><I.Edit size={16} /></button>}
              <button onClick={() => setShowInfo(false)} title="Fechar informações do lead" className="text-faint hover:text-fg"><I.X size={16} /></button>
            </div>
          </div>
          <div className="flex flex-col items-center gap-2 p-5">
            <U.Avatar name={lead.nome} size={80} ring />
            <div className="text-[16px] font-semibold">{lead.nome}</div>
            {isAltAgent
              ? <U.Badge tone="brand"><AgMeta.Icon size={11} />{AgMeta.label}</U.Badge>
              : <U.Badge tone="brand">{D.statusLabel(lead.status)}</U.Badge>}
          </div>
          {(
          <div className="space-y-4 px-4 pb-5">
            <div>
              <div className="mb-2 text-[11px] font-semibold tracking-wide text-faint">DADOS DE CONTATO</div>
              <div className="flex items-center gap-3 rounded-lg border border-line bg-surface p-3"><span className="text-bright"><I.Phone size={16} /></span><div><div className="text-[11px] text-faint">Telefone</div><div className="text-[13px]">{lead.telefone}</div></div></div>
            </div>
            <div>
              <div className="mb-2 flex items-center gap-1.5 text-[11px] font-semibold tracking-wide text-faint"><I.Sparkles size={13} />INFORMAÇÕES PRIORITÁRIAS</div>
              <div className="space-y-3 rounded-lg border border-line bg-surface p-3">
                <div>
                  <div className="text-[11px] text-faint">Dores</div>
                  {lead.memoria.dores && lead.memoria.dores.length
                    ? <ul className="mt-1 list-disc space-y-0.5 pl-4 text-[12.5px] leading-relaxed text-fg/90">{lead.memoria.dores.map((it, i) => <li key={i}>{it}</li>)}</ul>
                    : <div className="mt-1 text-[12.5px] italic text-faint">Sem dados ainda</div>}
                </div>
                <div>
                  <div className="text-[11px] text-faint">Objeções</div>
                  {lead.memoria.objecoes && lead.memoria.objecoes.length
                    ? <ul className="mt-1 list-disc space-y-0.5 pl-4 text-[12.5px] leading-relaxed text-fg/90">{lead.memoria.objecoes.map((it, i) => <li key={i}>{it}</li>)}</ul>
                    : <div className="mt-1 text-[12.5px] italic text-faint">Sem dados ainda</div>}
                </div>
                <div>
                  <div className="text-[11px] text-faint">Desejo</div>
                  <div className="mt-1 text-[12.5px] leading-relaxed text-fg/90">{lead.memoria.desejo || <span className="italic text-faint">Sem dados ainda</span>}</div>
                </div>
              </div>
            </div>
            <div>
              <div className="mb-2 flex items-center gap-1.5 text-[11px] font-semibold tracking-wide text-faint"><I.Brain size={13} />MEMÓRIA DA {AG.toUpperCase()}</div>
              <div className="rounded-lg border border-line bg-surface p-3">
                <div className="text-[11px] text-faint">Interesses</div>
                <div className="mt-1 text-[12.5px] leading-relaxed text-fg/90">{lead.memoria.interesses.join(', ')}</div>
                <div className="mt-3 text-[11px] text-faint">Próxima Ação Sugerida</div>
                <div className="mt-1 text-[12.5px] text-bright">{lead.memoria.proxima_acao}</div>
              </div>
            </div>
            <div className="text-center text-[12px] text-faint">Total de conversas: {lead.total_conversas}</div>
            <div>
              <div className="mb-2 flex items-center gap-1.5 text-[11px] font-semibold tracking-wide text-faint"><I.User size={13} />RESPONSÁVEL</div>
              <div className="rounded-lg border border-line bg-surface p-2.5 text-[13px] text-fg/90">{lead.responsavel || 'Não atribuído'}</div>
            </div>
          </div>
          )}
          </div>
        </>}
        <EditLeadModal open={editOpen} onClose={() => setEditOpen(false)} lead={lead}
          onUpdated={(upd) => { setOverrides((o) => ({ ...o, [upd.id]: upd })); setEditOpen(false); }} />
      </div>
    );
  }

  /* ─────────────── CONTATOS ─────────────── */
  function Contacts({ data, isAdmin }) {
    const [q, setQ] = useState('');
    const [leads, setLeads] = useState(() => data.leads.map((l) => ({ ...l })));
    const [newContactOpen, setNewContactOpen] = useState(false);
    const [editLead, setEditLead] = useState(null);
    useEffect(() => { setLeads(data.leads.map((l) => ({ ...l }))); }, [data.leads]);
    const rows = leads.filter((l) => (l.nome + l.telefone).toLowerCase().includes(q.toLowerCase()));
    const th = 'px-4 py-3 text-left text-[11px] font-semibold tracking-wide text-faint';
    return (
      <div>
        <U.PageHead title="Contatos" subtitle="Gerencie sua base de leads e pacientes com inteligência."
          right={<><U.Button kind="ghost"><I.Filter size={15} />Filtros avançados</U.Button><U.Button kind="primary" onClick={() => setNewContactOpen(true)}><I.Plus size={15} />Novo contato</U.Button></>} />
        <div className="mb-4 w-full max-w-md"><U.Search value={q} onChange={setQ} placeholder="Buscar por nome, e-mail ou telefone" /></div>
        <U.Card pad={false} className="overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full min-w-[720px]">
              <thead className="border-b border-line bg-surface2/60"><tr><th className={th}>NOME / TELEFONE</th><th className={th}>STATUS</th><th className={th}>CANAIS</th><th className={th}>ÚLTIMA INTERAÇÃO</th><th className={th}>AÇÕES</th></tr></thead>
              <tbody>
                {rows.map((l) => (
                  <tr key={l.id} className="border-b border-line/60 hover:bg-elevate/40">
                    <td className="px-4 py-3"><div className="flex items-center gap-3"><U.Avatar name={l.nome} size={36} /><div><div className="text-[13.5px] font-medium">{l.nome}</div><div className="text-[12px] text-faint">{l.telefone}</div></div></div></td>
                    <td className="px-4 py-3"><U.Badge tone={l.status === 'ganho' ? 'ok' : l.status === 'perdido' ? 'bad' : 'brand'}>{D.statusLabel(l.status)}</U.Badge></td>
                    <td className="px-4 py-3"><div className="flex items-center gap-2 text-[12.5px] text-muted"><span className="grid h-6 w-6 place-items-center rounded bg-ok-soft text-ok"><I.Phone size={12} /></span>via WhatsApp</div></td>
                    <td className="px-4 py-3 text-[12.5px] text-muted">{fmtHrs(l.ultima_interacao)} atrás</td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-1">
                        {isAdmin && <button onClick={() => setEditLead(l)} title="Editar lead" className="grid h-8 w-8 place-items-center rounded-lg text-faint hover:bg-elevate hover:text-fg"><I.Edit size={16} /></button>}
                        <button className="grid h-8 w-8 place-items-center rounded-lg text-faint hover:bg-elevate hover:text-fg"><I.More size={16} /></button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </U.Card>
        <NewLeadModal open={newContactOpen} onClose={() => setNewContactOpen(false)} defaultColuna="novo"
          onCreated={(lead) => setLeads((ls) => [lead, ...ls])} />
        <EditLeadModal open={!!editLead} onClose={() => setEditLead(null)} lead={editLead}
          onUpdated={(upd) => { setLeads((ls) => ls.map((x) => x.id === upd.id ? upd : x)); setEditLead(null); }} />
      </div>
    );
  }

  window.App = window.App || {};
  window.App.ScreensA = { Dashboard, Pipeline, Chat, Contacts };
})();