/* Marketing · Leads — cartões por campanha e lista de pessoas. */

const LEADS_ESTADO_LABEL = {
  nova: 'Nova',
  em_qualificacao: 'Em qualificação',
  qualificada: 'Qualificada',
  atribuida: 'Atribuída',
  nurture: 'Nurture',
  descartada: 'Descartada',
};
const LEADS_PERIODOS = [
  { id: 'hoje', label: 'Hoje' },
  { id: '7d', label: '7 dias' },
  { id: '30d', label: '30 dias' },
  { id: '90d', label: '90 dias' },
  { id: 'tudo', label: 'Tudo' },
];

function leadsQs(extra) {
  const p = new URLSearchParams(extra || {});
  const email = window.currentUser?.email || '';
  if (email && !p.get('email')) p.set('email', email);
  return p.toString();
}

function leadsAgo(iso) {
  if (!iso) return '';
  const ms = Date.now() - new Date(iso).getTime();
  if (!Number.isFinite(ms) || ms < 0) return '';
  const h = Math.floor(ms / 3600000);
  if (h < 1) return 'agora';
  if (h < 24) return `há ${h}h`;
  const d = Math.floor(h / 24);
  return d < 30 ? `há ${d}d` : new Date(iso).toLocaleDateString('pt-PT');
}

function leadsBrand(marca) {
  if (typeof listaMarca === 'function') return listaMarca({ marca });
  return null;
}

function leadsCanalLabel(catalogo, id) {
  return (catalogo || []).find(c => c.id === id)?.label || id || 'Canal';
}

function leadsResumo(rows) {
  const n = (estado) => rows.filter(l => l.estado === estado).length;
  return {
    total: rows.length,
    nova: n('nova'),
    em_qualificacao: n('em_qualificacao'),
    qualificada: n('qualificada'),
    inbound: rows.filter(l => l.direccao !== 'outbound').length,
    outbound: rows.filter(l => l.direccao === 'outbound').length,
  };
}

function LeadsShell({ children }) {
  return (
    <div data-theme="light" style={{
      height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden',
      background: '#f8fafc',
      '--bg': '#f8fafc', '--bg-elev': '#ffffff', '--bg-hover': '#f1f5f9', '--bg-sunken': '#e8edf5',
      '--border': '#dde3ef', '--text': '#112954', '--text-muted': '#4a5e7a', '--text-dim': '#6b7fa3', '--ai-500': '#3859D0',
    }}>{children}</div>
  );
}

function LeadsChip({ active, label, count, onClick }) {
  return (
    <button type="button" onClick={onClick} style={{
      border: '1px solid ' + (active ? 'var(--ai-500)' : 'var(--border)'),
      background: active ? 'color-mix(in oklch, var(--ai-500) 12%, white)' : 'var(--bg-elev)',
      color: 'var(--text)', borderRadius: 99, padding: '4px 10px', fontSize: 11, cursor: 'pointer',
      fontFamily: 'var(--font-display)', display: 'inline-flex', gap: 6, alignItems: 'center',
    }}>
      <span>{label}</span>
      {count != null && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)' }}>{count}</span>}
    </button>
  );
}

function LeadsPessoas({ rows, catalogo, onOpen, onEstado }) {
  const th = { textAlign: 'left', fontSize: 10, letterSpacing: '.04em', textTransform: 'uppercase', color: 'var(--text-dim)', padding: '8px 10px', borderBottom: '1px solid var(--border)', fontWeight: 600 };
  const td = { padding: '10px', borderBottom: '1px solid var(--border)', fontSize: 12, verticalAlign: 'middle' };
  if (!rows.length) return <div style={{ padding: 28, color: 'var(--text-muted)', fontSize: 12 }}>Sem pessoas neste grupo.</div>;
  return (
    <div style={{ background: '#fff', border: '1px solid var(--border)', borderRadius: 10, overflow: 'auto' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr>
            {['Nome', 'Estado', 'Canal', 'Destino', 'Data', ''].map(h => <th key={h || 'a'} style={th}>{h}</th>)}
          </tr>
        </thead>
        <tbody>
          {rows.map(lead => (
            <tr key={lead.chave}>
              <td style={td}>
                <button type="button" onClick={() => onOpen(lead)} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', color: 'var(--text)', fontWeight: 650, fontSize: 13 }}>{lead.nome}</button>
                {lead.empresa && lead.empresa !== lead.nome && <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{lead.empresa}</div>}
                <div style={{ fontSize: 10, color: 'var(--text-dim)', marginTop: 2 }}>{leadsAgo(lead.at)}{lead.aceita_demo ? ' · aceita demo' : ''}</div>
              </td>
              <td style={td}>{LEADS_ESTADO_LABEL[lead.estado] || lead.estado}</td>
              <td style={td}>{leadsCanalLabel(catalogo, lead.canal)}</td>
              <td style={td}>{lead.destino || '—'}</td>
              <td style={{ ...td, color: 'var(--text-muted)', fontSize: 11 }}>{leadsAgo(lead.at)}</td>
              <td style={td}>
                <select value="" onChange={e => { if (e.target.value) onEstado(lead, e.target.value); }} style={{ fontSize: 11, border: '1px solid var(--border)', borderRadius: 6, padding: '4px 6px', background: '#fff' }}>
                  <option value="">Acção</option>
                  <option value="em_qualificacao">Qualificar</option>
                  <option value="atribuida">Atribuir comercial</option>
                  <option value="nurture">Nurture</option>
                  <option value="descartada">Descartar</option>
                </select>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function LeadsDigiBanner({ data, periodo, userName }) {
  const [seed] = React.useState(Math.random);
  const rawName = userName || (window.currentUser && (window.currentUser.nome_apresentar || window.currentUser.nome)) || '';
  const first = rawName.split(' ')[0] || '';
  const n = first ? first.charAt(0).toUpperCase() + first.slice(1).toLowerCase() : 'Fábio';
  const pl = (k, s, p) => k === 1 ? s : p;
  const juntar = (arr) => {
    const xs = [...new Set(arr.filter(Boolean))];
    if (!xs.length) return '';
    if (xs.length === 1) return xs[0];
    if (xs.length === 2) return `${xs[0]} e ${xs[1]}`;
    return `${xs.slice(0, -1).join(', ')} e ${xs[xs.length - 1]}`;
  };
  const periodoLabel = { hoje: 'hoje', '7d': 'nos últimos 7 dias', '30d': 'nos últimos 30 dias', '90d': 'nos últimos 90 dias', tudo: 'em todo o histórico' }[periodo] || 'neste período';

  const { heading, body } = React.useMemo(() => {
    const camps = data?.campanhas || [];
    const funil = data?.funil || {};
    const col = data?.colunas || {};
    const geradas = funil.geradas || 0;
    const qualificadas = funil.qualificadas || 0;
    const oportunidades = funil.oportunidades || 0;
    const vendas = funil.vendas || 0;
    const porTratar = (col.nova || 0) + (col.em_qualificacao || 0);
    const marcas = juntar(camps.map(c => c.marca_nome || c.marca));
    const titulos = juntar(camps.map(c => c.titulo));

    let pool;
    if (!camps.length) {
      pool = [
        `${n}, ainda não há campanhas com um canal publicado. A lista só nasce quando publicas.`,
        `${n}, o funil está vazio. Publica um canal e as leads passam a entrar aqui.`,
      ];
    } else if (porTratar > 0) {
      pool = [
        `${n}, ${pl(porTratar, 'uma lead ainda não está qualificada', `${porTratar} leads ainda não estão qualificadas`)}. A Digi AI continua a conversa — o handoff só acontece com o teu seguimento.`,
        `${n}, ${geradas} ${pl(geradas, 'lead chegou', 'leads chegaram')} de campanhas no ar. ${qualificadas === 0 ? 'Nenhuma está qualificada' : pl(qualificadas, 'Só uma está qualificada', `Só ${qualificadas} estão qualificadas`)}.`,
      ];
    } else if (qualificadas > 0 && oportunidades === 0) {
      pool = [
        `${n}, ${qualificadas} ${pl(qualificadas, 'lead qualificada ainda não virou', 'leads qualificadas ainda não viraram')} oportunidade.`,
        `${n}, a qualificação está feita. Falta passar ${pl(qualificadas, 'esta lead', 'estas leads')} a oportunidade.`,
      ];
    } else if (geradas > 0) {
      pool = [
        `${n}, ${geradas} ${pl(geradas, 'lead', 'leads')} ${periodoLabel} em ${camps.length} ${pl(camps.length, 'campanha no ar', 'campanhas no ar')}.`,
        `${n}, o funil de ${titulos} está actualizado ${periodoLabel}.`,
      ];
    } else {
      pool = [
        `${n}, ${titulos} ${pl(camps.length, 'está no ar', 'estão no ar')}, mas ainda sem leads ${periodoLabel}.`,
        `${n}, as campanhas já têm canal publicado. As leads entram aqui assim que chegarem.`,
      ];
    }
    const heading = pool[Math.floor(seed * pool.length)];

    const partes = [];
    if (!camps.length) {
      partes.push('Uma campanha só aparece nesta lista quando um dos canais definidos nela é publicado. A partir daí, as leads de todos os canais entram na mesma lista, com o canal como origem.');
    } else {
      const nMarcas = new Set(camps.map(c => c.marca_nome || c.marca).filter(Boolean)).size;
      if (marcas) partes.push(`${marcas} ${pl(nMarcas, 'tem', 'têm')} ${titulos} no ar — só entram campanhas com um canal publicado.`);
      const comLeads = [...camps].filter(c => c.total > 0).sort((a, b) => b.total - a.total);
      for (const c of comLeads.slice(0, 4)) {
        const canais = juntar((c.canais || []).map(id => leadsCanalLabel(data.catalogo, id)));
        partes.push(`${c.titulo} gerou ${c.total} ${pl(c.total, 'lead', 'leads')}${canais ? ` por ${canais}` : ''}, ${c.qualificadas} ${pl(c.qualificadas, 'qualificada', 'qualificadas')}.`);
      }
      const semLeads = camps.filter(c => !c.total);
      if (semLeads.length) partes.push(`${juntar(semLeads.map(c => c.titulo))} já ${pl(semLeads.length, 'está publicada', 'estão publicadas')}, ainda sem leads ${periodoLabel}.`);
      if (oportunidades || vendas) {
        partes.push(`${oportunidades} ${pl(oportunidades, 'oportunidade', 'oportunidades')} e ${vendas} ${pl(vendas, 'venda', 'vendas')}${funil.vendas_eur ? ` (${Number(funil.vendas_eur).toLocaleString('pt-PT', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 })})` : ''}.`);
      } else if (geradas) {
        partes.push(`Nenhuma chegou a oportunidade nem a venda ${periodoLabel}.`);
      }
      if (col.nurture) partes.push(`${col.nurture} ${pl(col.nurture, 'está em nurture', 'estão em nurture')}.`);
      if (col.descartada) partes.push(`${col.descartada} ${pl(col.descartada, 'foi descartada', 'foram descartadas')}.`);
    }
    return { heading, body: partes.join(' ') };
  }, [data, periodo, seed, n, periodoLabel]);

  return (
    <div style={{ flexShrink: 0, padding: '10px 0 8px' }}>
      <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--text)', fontFamily: 'var(--font-display)', marginBottom: 6, letterSpacing: '-0.02em' }}>{heading}</div>
      <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.75 }}>{body}</div>
    </div>
  );
}

function MktLeadsControlScreen({ userName, userEmail }) {
  const [vista, setVista] = React.useState('leads');
  const [marca, setMarca] = React.useState('todas');
  const [periodo, setPeriodo] = React.useState('30d');
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [erro, setErro] = React.useState('');
  const [q, setQ] = React.useState('');
  const [listas, setListas] = React.useState([]);
  const [aberto, setAberto] = React.useState(null);
  const [showTouches, setShowTouches] = React.useState(false);
  const [opMsg, setOpMsg] = React.useState('');
  const [ficha, setFicha] = React.useState(null);
  const [fichaTab, setFichaTab] = React.useState('origens');
  const [internas, setInternas] = React.useState(null);
  const [dirInterna, setDirInterna] = React.useState('todas');
  const [depInterno, setDepInterno] = React.useState('todos');
  const [qInterna, setQInterna] = React.useState('');
  const [conversa, setConversa] = React.useState(null);

  const load = React.useCallback(() => {
    setLoading(true);
    setErro('');
    fetch('/api/marketing/crm/leads/inbox?' + leadsQs({ marca, periodo, q }))
      .then(r => r.json())
      .then(d => { if (d.error) throw new Error(d.error); setData(d); })
      .catch(e => setErro(e.message))
      .finally(() => setLoading(false));
  }, [marca, periodo, q]);

  React.useEffect(() => { load(); }, [load]);
  React.useEffect(() => {
    fetch('/api/marketing/crm/listas').then(r => r.json()).then(d => {
      const rows = Array.isArray(d?.rows) ? d.rows : (Array.isArray(d) ? d : []);
      setListas(rows);
    }).catch(() => {});
  }, []);

  const loadInternas = React.useCallback(() => {
    fetch('/api/marketing/crm/leads/internas?' + leadsQs({ marca, periodo }))
      .then(r => r.status === 403 ? null : r.json())
      .then(d => { if (d && !d.error) setInternas(d); })
      .catch(() => {});
  }, [marca, periodo]);
  React.useEffect(() => { if (vista === 'internas') loadInternas(); }, [vista, loadInternas]);

  const gruposMarca = React.useMemo(() => {
    const map = new Map();
    for (const c of data?.campanhas || []) {
      const key = c.marca_nome || c.marca || 'Marca';
      if (!map.has(key)) map.set(key, []);
      map.get(key).push(c);
    }
    return [...map.entries()];
  }, [data]);

  const funil = data?.funil || {};
  const total = funil.geradas ?? data?.total ?? 0;
  const pctQual = funil.taxa_qualificadas ?? 0;
  const marcaLabel = marca === 'todas' ? 'todas as marcas' : (typeof AUD_BRANDS !== 'undefined' ? (AUD_BRANDS.find(b => b.slug === marca)?.name || marca) : marca);
  const brands = [{ slug: 'todas', name: 'Todas' }, ...((typeof AUD_BRAND_TABS !== 'undefined' ? AUD_BRAND_TABS : []))];

  const mudarEstado = async (lead, estado) => {
    let comercial_email;
    if (estado === 'atribuida') {
      comercial_email = window.prompt('Email do comercial') || '';
      if (!comercial_email) return;
    }
    const r = await fetch('/api/marketing/crm/leads/' + encodeURIComponent(lead.chave) + '/estado?' + leadsQs(), {
      method: 'PATCH', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ estado, comercial_email, visitor_id: lead.visitor_id }),
    }).then(x => x.json()).catch(e => ({ error: e.message }));
    if (r.error) { setErro(r.error); return; }
    load();
  };

  const ligarAnuncio = async (adId) => {
    const portalId = window.prompt('ID da campanha no portal (campanha_portal_id)');
    if (!portalId) return;
    const r = await fetch('/api/marketing/campanhas/' + encodeURIComponent(portalId) + '/ad-map', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ad_id: adId, platform: 'meta' }),
    }).then(x => x.json()).catch(e => ({ error: e.message }));
    if (r.error) { setErro(r.error); return; }
    load();
  };

  const correrLista = async (listaId, path) => {
    setOpMsg('');
    const r = await fetch(`/api/marketing/crm/listas/${listaId}/${path}`, { method: 'POST' }).then(x => x.json()).catch(e => ({ error: e.message }));
    if (r.error) setErro(r.error);
    else setOpMsg(path === 'send-t0' ? 'T0 pedido.' : path === 'process-followups' ? 'Follow-ups processados.' : 'Leads sincronizadas.');
    load();
  };

  if (conversa && window.SdrConversaView) {
    return <LeadsShell><window.SdrConversaView sessionId={conversa} onBack={() => setConversa(null)} onToast={() => {}} /></LeadsShell>;
  }

  if (ficha) {
    const tabs = [['origens', 'Origens'], ['conversa', 'Conversa'], ['lead', 'Lead']];
    return (
      <LeadsShell>
        <div style={{ padding: '16px 28px', borderBottom: '1px solid var(--border)', background: '#fff' }}>
          <button type="button" onClick={() => setFicha(null)} style={{ background: 'none', border: 'none', color: 'var(--text-muted)', cursor: 'pointer', marginBottom: 8 }}>← Lista</button>
          <div style={{ fontSize: 18, fontWeight: 700 }}>{ficha.nome}</div>
          <div style={{ display: 'flex', gap: 12, marginTop: 10 }}>
            {tabs.map(([id, label]) => (
              <button key={id} type="button" onClick={() => setFichaTab(id)} style={{ background: 'none', border: 'none', borderBottom: fichaTab === id ? '2px solid var(--ai-500)' : '2px solid transparent', padding: '6px 4px', cursor: 'pointer', fontWeight: fichaTab === id ? 650 : 500 }}>{label}</button>
            ))}
          </div>
        </div>
        <div style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: 24 }}>
          {fichaTab === 'origens' && (ficha.entradas || []).map((en, i) => (
            <div key={i} style={{ background: '#fff', border: '1px solid var(--border)', borderRadius: 8, padding: 12, fontSize: 12, marginBottom: 8 }}>
              <strong>{en.direccao}</strong> · {leadsCanalLabel(data?.catalogo, en.canal)} · {en.destino || '—'}{en.campanha_nome ? ` · ${en.campanha_nome}` : ''}
              <div style={{ color: 'var(--text-muted)', marginTop: 4 }}>{en.at ? new Date(en.at).toLocaleString('pt-PT') : ''}</div>
            </div>
          ))}
          {fichaTab === 'conversa' && ficha.visitor_id && window.SdrConversaView && <window.SdrConversaView sessionId={ficha.visitor_id} onBack={() => setFichaTab('origens')} onToast={() => {}} />}
          {fichaTab === 'conversa' && !ficha.visitor_id && <div style={{ color: 'var(--text-muted)' }}>Esta lead ainda não tem conversa na Digi.</div>}
          {fichaTab === 'lead' && ficha.contacto_id && window.ExternoLeadProfile && <window.ExternoLeadProfile externoId={ficha.contacto_id} onBack={() => setFichaTab('origens')} userEmail={userEmail} userName={userName} />}
          {fichaTab === 'lead' && !ficha.contacto_id && <div style={{ color: 'var(--text-muted)' }}>Ainda não há ficha de contacto no CRM.</div>}
        </div>
      </LeadsShell>
    );
  }

  const campanhaAberta = (data?.campanhas || []).find(c => String(c.id) === String(aberto?.id));
  const abertoRows = campanhaAberta
    ? (data?.leads || []).filter(l => String(l.campanha_id || l.campanha_portal_id) === String(campanhaAberta.id))
    : [];
  const listaCampanha = campanhaAberta?.lista_id
    ? (listas.find(l => String(l.id) === String(campanhaAberta.lista_id)) || { id: campanhaAberta.lista_id })
    : null;

  return (
    <LeadsShell>
      <div style={{ background: '#fff', borderBottom: '1px solid var(--border)', padding: '20px 40px 0', flexShrink: 0 }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.07em', color: 'var(--text-muted)', textTransform: 'uppercase', marginBottom: 6, fontFamily: 'var(--font-mono)' }}>MARKETING · LEADS</div>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
          <div>
            <h1 style={{ margin: 0, fontSize: 21, fontWeight: 700, color: 'var(--text)', fontFamily: 'var(--font-display)', letterSpacing: '-0.01em', lineHeight: 1.2 }}>Leads</h1>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6, flexWrap: 'wrap' }}>
              <span style={{ fontSize: 11, color: 'var(--text-muted)', fontFamily: 'var(--font-body)' }}>{total.toLocaleString('pt-PT')} leads · {marcaLabel}</span>
              <div style={{ width: 60, height: 4, borderRadius: 99, background: 'var(--border)', overflow: 'hidden' }}>
                <div style={{ width: `${pctQual || 0}%`, height: '100%', borderRadius: 99, background: 'var(--ai-500)' }} />
              </div>
              <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{pctQual || 0}% qualificadas</span>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexShrink: 0, marginTop: 2 }}>
            {LEADS_PERIODOS.map(p => (
              <button key={p.id} type="button" onClick={() => setPeriodo(p.id)} className="btn" style={{
                height: 30, padding: '0 12px', fontSize: 12,
                background: periodo === p.id ? 'var(--ai-500)' : undefined,
                color: periodo === p.id ? '#fff' : undefined,
                borderColor: periodo === p.id ? 'var(--ai-500)' : undefined,
              }}>{p.label}</button>
            ))}
            {data?.pode_internas && (
              <button type="button" className="btn" style={{ height: 30, padding: '0 14px', fontSize: 12 }} onClick={() => setVista(vista === 'internas' ? 'leads' : 'internas')}>
                {vista === 'internas' ? 'Leads' : 'Internas'}
              </button>
            )}
          </div>
        </div>
        <div style={{ height: 1, background: 'var(--border)', margin: '16px -40px 0' }} />
        <div style={{ display: 'flex', gap: 0, overflowX: 'auto' }}>
          {brands.map(b => (
            <button key={b.slug} type="button" onClick={() => setMarca(b.slug)} style={{
              background: 'none', border: 'none', outline: 'none',
              borderBottom: `2px solid ${marca === b.slug ? 'var(--ai-500)' : 'transparent'}`,
              color: marca === b.slug ? 'var(--text)' : 'var(--text-muted)',
              fontSize: 13, fontWeight: marca === b.slug ? 600 : 500,
              fontFamily: 'var(--font-display)', letterSpacing: '.01em',
              padding: '10px 16px 12px', cursor: 'pointer', whiteSpace: 'nowrap',
              transition: 'color .15s, border-color .15s',
            }}>{b.name}</button>
          ))}
        </div>
      </div>

      <div style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: '18px 28px 28px', display: 'flex', flexDirection: 'column', gap: 16 }}>
        {erro && <div style={{ color: '#9f1239', fontSize: 12 }}>{erro}</div>}
        {loading && typeof AudCalcProgress === 'function' && <AudCalcProgress message="A carregar as leads…" />}

        {vista === 'leads' && data && !aberto && (
          <>
            <LeadsDigiBanner data={data} periodo={periodo} userName={userName} />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 12 }}>
              {[
                ['Leads geradas', funil.geradas ?? 0, 'Campanhas no ar'],
                ['Qualificadas', funil.qualificadas ?? 0, funil.taxa_qualificadas != null ? `${funil.taxa_qualificadas}% das geradas` : '—'],
                ['Oportunidades', funil.oportunidades ?? 0, funil.taxa_oportunidades != null ? `${funil.taxa_oportunidades}% das qualificadas` : 'Resultados · SQL'],
                ['Vendas', funil.vendas ?? 0, `${funil.taxa_vendas != null ? funil.taxa_vendas + '% das oportunidades · ' : ''}${Number(funil.vendas_eur || 0).toLocaleString('pt-PT', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 })}`],
              ].map(([label, value, sub]) => (
                <div key={label} style={{ background: '#fff', border: '1px solid var(--border)', borderRadius: 10, padding: '14px 16px' }}>
                  <div style={{ fontSize: 10, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--text-dim)', fontWeight: 600 }}>{label}</div>
                  <div style={{ fontSize: 28, fontWeight: 700, marginTop: 4, letterSpacing: '-0.03em', fontFamily: 'var(--font-display)' }}>{Number(value).toLocaleString('pt-PT')}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 4 }}>{sub}</div>
                </div>
              ))}
            </div>
            {gruposMarca.map(([marcaNome, camps]) => (
              <div key={marcaNome}>
                <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 8 }}>{marcaNome}</div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 12 }}>
                  {camps.map(c => (
                    <button key={c.id} type="button" onClick={() => { setAberto({ id: c.id }); setShowTouches(false); setOpMsg(''); }} style={{ textAlign: 'left', background: '#fff', border: '1px solid var(--border)', borderRadius: 10, padding: 14, cursor: 'pointer' }}>
                      {typeof BrandMark === 'function' && <BrandMark brand={leadsBrand(c.marca_nome || c.marca)} empty="" />}
                      <div style={{ fontSize: 15, fontWeight: 700, marginTop: 6 }}>{c.titulo}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 8 }}>{(c.canais || []).map(id => leadsCanalLabel(data.catalogo, id)).join(' · ') || 'Sem leads neste período'}</div>
                      <div style={{ fontSize: 12, color: 'var(--text)', marginTop: 6 }}>{c.total} leads · {c.qualificadas} qualificadas</div>
                    </button>
                  ))}
                </div>
              </div>
            ))}
            {gruposMarca.length === 0 && <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>Nenhuma campanha com um canal publicado nesta marca.</div>}
          </>
        )}

        {vista === 'leads' && aberto && (
          <>
            <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'flex-start', flexWrap: 'wrap' }}>
              <div>
                <button type="button" onClick={() => setAberto(null)} style={{ background: 'none', border: 'none', color: 'var(--text-muted)', cursor: 'pointer', padding: 0, fontSize: 12 }}>← Campanhas</button>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
                  {typeof BrandMark === 'function' && <BrandMark brand={leadsBrand(campanhaAberta?.marca_nome || campanhaAberta?.marca)} empty="" />}
                  <h2 style={{ margin: 0, fontSize: 18 }}>{campanhaAberta?.titulo}</h2>
                </div>
                <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4 }}>{abertoRows.length} pessoas</div>
              </div>
              {listaCampanha && (
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  <button type="button" onClick={() => correrLista(listaCampanha.id, 'sync-leads')} style={{ border: '1px solid var(--border)', background: '#fff', borderRadius: 6, padding: '6px 10px', fontSize: 11, cursor: 'pointer' }}>Sincronizar leads</button>
                  <button type="button" onClick={() => correrLista(listaCampanha.id, 'send-t0')} style={{ border: '1px solid var(--border)', background: '#fff', borderRadius: 6, padding: '6px 10px', fontSize: 11, cursor: 'pointer' }}>Enviar T0</button>
                  <button type="button" onClick={() => correrLista(listaCampanha.id, 'process-followups')} style={{ border: '1px solid var(--border)', background: '#fff', borderRadius: 6, padding: '6px 10px', fontSize: 11, cursor: 'pointer' }}>Follow-ups</button>
                  <button type="button" onClick={() => setShowTouches(v => !v)} style={{ border: 'none', background: 'var(--ai-500)', color: '#fff', borderRadius: 6, padding: '6px 10px', fontSize: 11, cursor: 'pointer' }}>{showTouches ? 'Fechar templates' : 'Templates de toque'}</button>
                </div>
              )}
            </div>
            {opMsg && <div style={{ fontSize: 12, color: '#166534' }}>{opMsg}</div>}
            {showTouches && typeof TabWaTemplates === 'function' && (
              <TabWaTemplates campanhaNome={campanhaAberta?.titulo} marca={marca} />
            )}
            <LeadsPessoas rows={abertoRows} catalogo={data?.catalogo} onOpen={(lead) => { setFicha(lead); setFichaTab(lead.visitor_id ? 'conversa' : 'origens'); }} onEstado={mudarEstado} />
          </>
        )}

        {vista === 'internas' && (
          <>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <LeadsChip label="Todas" count={internas?.total || 0} active={dirInterna === 'todas'} onClick={() => { setDirInterna('todas'); setDepInterno('todos'); }} />
              {(internas?.direccoes || []).map(d => (
                <LeadsChip key={d.direccao} label={d.direccao} count={d.n} active={dirInterna === d.direccao} onClick={() => { setDirInterna(d.direccao); setDepInterno('todos'); }} />
              ))}
            </div>
            {dirInterna !== 'todas' && typeof AudFilterDropdown === 'function' && (
              <AudFilterDropdown label="Departamento" value={depInterno} onChange={setDepInterno}
                options={[{ value: 'todos', label: 'Todos' }, ...((internas?.direccoes || []).find(d => d.direccao === dirInterna)?.departamentos || []).map(d => ({ value: d.departamento, label: `${d.departamento} (${d.n})` }))]} />
            )}
            <input value={qInterna} onChange={e => setQInterna(e.target.value)} placeholder="Pesquisar colaborador" style={{ border: '1px solid var(--border)', borderRadius: 6, padding: '6px 8px', fontSize: 12, maxWidth: 280 }} />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 10 }}>
              {(internas?.conversas || []).filter(c => {
                if (dirInterna !== 'todas' && c.direccao !== dirInterna) return false;
                if (depInterno !== 'todos' && c.departamento !== depInterno) return false;
                if (qInterna && !`${c.colaborador} ${c.departamento}`.toLowerCase().includes(qInterna.toLowerCase())) return false;
                return true;
              }).map(c => (
                <button key={c.visitor_id} type="button" onClick={() => setConversa(c.visitor_id)} style={{ textAlign: 'left', background: '#fff', border: '1px solid var(--border)', borderRadius: 8, padding: 12, cursor: 'pointer' }}>
                  <div style={{ fontWeight: 700, fontSize: 13 }}>{c.colaborador}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 4 }}>{c.direccao} · {c.departamento}</div>
                  <div style={{ marginTop: 6 }}>{typeof BrandMark === 'function' && <BrandMark brand={leadsBrand(c.marca)} empty="" />}</div>
                  <div style={{ fontSize: 11, marginTop: 6, color: 'var(--text)' }}>{c.ultima_mensagem_resumo || 'Sem mensagem'}</div>
                  <div style={{ fontSize: 10, color: 'var(--text-dim)', marginTop: 6 }}>{c.n_msgs} msgs · {leadsAgo(c.updated_at)}</div>
                </button>
              ))}
            </div>
          </>
        )}
      </div>
    </LeadsShell>
  );
}

window.MktLeadsControlScreen = MktLeadsControlScreen;