/* Daily Prospect Carteira V3 — origem, SPINs da carteira e campanhas com clientes. */

const pcv3Fmt = v => {
  const n = Math.abs(Number(v) || 0);
  const s = n >= 1000 ? (n / 1000).toFixed(1).replace('.', ',') + 'k' : String(Math.round(n));
  return s + '€';
};

const PCV3 = {
  green: 'var(--dgd-green-700,#1F8A52)',
  blue: 'var(--dgd-primary-500,#61A9FF)',
  amber: 'var(--dgd-pumpkin-500,#FF9A40)',
  fg1: 'var(--dgd-fg-1)', fg2: 'var(--dgd-fg-2)', fg3: 'var(--dgd-fg-3)',
  border: 'var(--dgd-border-1)', surf: 'var(--dgd-bg-surface)', app: 'var(--dgd-bg-app)',
};
const pcv3Click = { cursor: 'pointer', color: 'var(--dgd-primary-500,#61A9FF)', textDecoration: 'underline dotted', fontWeight: 600 };
const pcv3Date = d => d ? new Date(d + 'T00:00:00').toLocaleDateString('pt-PT', { day: '2-digit', month: '2-digit', year: 'numeric' }) : null;
const pcv3Th = { textAlign: 'left', padding: '6px 8px', fontSize: 10, color: PCV3.fg3, fontFamily: 'var(--dgd-font-mono)', fontWeight: 600, textTransform: 'uppercase' };

const PCV3_ESTADO = {
  por_abrir: 'Por abrir',
  aberto: 'Aberta',
  em_activacao: 'Em activação',
  em_producao: 'Em produção',
  prompts_pendente: 'Prompts pendentes',
  estrategia_pendente: 'Estratégia pendente',
};

const PCV3_VIA = { consumo: 'Compra', spin: 'SPIN', 'consumo+spin': 'Compra · SPIN' };

function Pcv3Card({ n, color, title, children }) {
  return (
    <div style={{ background: PCV3.surf, border: `1px solid ${PCV3.border}`, borderRadius: 8, padding: '20px 24px', marginBottom: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <span style={{ width: 22, height: 22, borderRadius: 6, background: color, color: '#fff', fontSize: 12, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{n}</span>
        <span style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', color: PCV3.fg3, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{title}</span>
      </div>
      {children}
    </div>
  );
}

function Pcv3BriefingModal({ campanha, campanha_id, onClose }) {
  const [bdata, setBdata] = React.useState(null);
  const [bload, setBload] = React.useState(true);

  React.useEffect(() => {
    if (!campanha_id) { setBload(false); return; }
    fetch(`/api/comercial/sdr/campanha-briefing/${campanha_id}`, { credentials: 'include' })
      .then(r => r.ok ? r.json() : null)
      .then(d => { setBdata(d); setBload(false); })
      .catch(() => setBload(false));
  }, [campanha_id]);

  const row = (label, val) => val ? (
    <div style={{ marginBottom: 12 }}>
      <div style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', letterSpacing: '0.08em', color: PCV3.fg3, marginBottom: 3, textTransform: 'uppercase' }}>{label}</div>
      <div style={{ fontSize: 13, color: PCV3.fg1, lineHeight: 1.55 }}>{Array.isArray(val) ? val.join(' · ') : val}</div>
    </div>
  ) : null;

  const section = (title) => (
    <div style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', letterSpacing: '0.1em', color: PCV3.blue, textTransform: 'uppercase', marginTop: 20, marginBottom: 10, paddingBottom: 4, borderBottom: `1px solid ${PCV3.border}` }}>{title}</div>
  );

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)', zIndex: 9999, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '40px 16px', overflowY: 'auto' }}
      onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div style={{ background: 'var(--dgd-bg-surface)', borderRadius: 12, padding: '28px 32px', width: '100%', maxWidth: 680, boxShadow: '0 20px 60px rgba(0,0,0,0.25)', position: 'relative' }}>
        <button onClick={onClose} style={{ position: 'absolute', top: 16, right: 16, background: 'transparent', border: 'none', cursor: 'pointer', color: PCV3.fg3, padding: 4 }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
        <div style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', letterSpacing: '0.1em', color: PCV3.fg3, textTransform: 'uppercase', marginBottom: 6 }}>Briefing de Campanha</div>
        <div style={{ fontSize: 18, fontWeight: 700, color: PCV3.fg1, marginBottom: 20, paddingBottom: 16, borderBottom: `1px solid ${PCV3.border}` }}>{campanha}</div>
        {bload && <div style={{ color: PCV3.fg3, fontSize: 13 }}>A carregar...</div>}
        {!bload && !bdata && <div style={{ color: PCV3.fg3, fontSize: 13 }}>Briefing não disponível.</div>}
        {bdata && (
          <div>
            {section('Produto')}
            {row('Nome comercial', bdata.commercial_name)}
            {row('Elevator pitch', bdata.elevator_pitch)}
            {row('USPs', bdata.usps)}
            {row('Família de produto', bdata.product_family)}
            {row('Aplicações', bdata.applications)}

            {section('Audiência')}
            {row('Decisor', bdata.decision_maker)}
            {row('Utilizador final', bdata.end_user)}
            {row('Pain points', bdata.pain_points)}
            {row('Motivadores', bdata.motivators)}
            {row('Objecções', bdata.objections)}
            {row('Trigger de compra', bdata.purchase_trigger)}

            {section('Posicionamento')}
            {row('Narrativa de posicionamento', bdata.positioning_narrative)}
            {row('Diferenciação', bdata.differentiation_args)}
            {row('Tendências de mercado', bdata.market_trends)}

            {section('Campanha')}
            {row('Objectivo', bdata.objective)}
            {row('Mensagem-chave', bdata.key_message)}
            {row('Tom', bdata.tone)}
            {row('Oferta comercial', bdata.commercial_offer)}
            {row('Canais', bdata.channels)}
            {row('KPIs', bdata.kpis)}
            {(bdata.timeline_start || bdata.timeline_end) && row('Timeline', [bdata.timeline_start, bdata.timeline_end].filter(Boolean).join(' → '))}
          </div>
        )}
      </div>
    </div>
  );
}



function ScreenProspectCarteiraV3({ vendedorId, userName }) {
  const [state, setState] = React.useState({ data: null, loading: false, error: null });
  const [selectedCliente, setSelectedCliente] = React.useState(null);
  const [spinCliente, setSpinCliente] = React.useState(null);
  const [briefingModal, setBriefingModal] = React.useState(null); // { campanha, campanha_id }
  const [sdrOpDetail, setSdrOpDetail] = React.useState(null); // fm op object for OpDetailPanel

  const load = React.useCallback((force = false) => {
    if (!vendedorId) return;
    setState(s => ({ data: force ? s.data : null, loading: true, error: null }));
    fetch(`/api/comercial/prospect-carteira-v3/${encodeURIComponent(vendedorId)}${force ? '?force=true' : ''}`)
      .then(r => r.json())
      .then(json => {
        if (json.error) throw new Error(json.error);
        setState({ data: json, loading: false, error: null });
      })
      .catch(err => setState({ data: null, loading: false, error: err.message }));
  }, [vendedorId]);

  React.useEffect(() => { load(false); }, [load]);

  if (!vendedorId) return <div style={{ padding: 32, color: PCV3.fg3, fontSize: 13 }}>Sem vendedor seleccionado.</div>;

  const { data, loading, error } = state;
  const prospect = data?.prospect || null;
  const m = data?.metricas || {};
  const today = new Date().toLocaleDateString('pt-PT', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
  const first = (userName || '').split(' ')[0];

  return (
    <div className="scrollbar" style={{ height: '100%', overflowY: 'auto', padding: '28px 32px 80px' }}>
      {(() => {
        const M = window.ProspectClienteModal;
        if (!M) return null;
        if (spinCliente) return (
          <M nome={spinCliente.cliente} userName={userName} initialTab="spin"
            familias={spinCliente.familias} idComercial={(m.erp_codes || [])[0]}
            onClose={() => setSpinCliente(null)}
            onSpinSaved={() => {
              const nome = spinCliente.cliente;
              setState(s => {
                const metricas = s.data?.metricas;
                if (!metricas) return s;
                const spins = (metricas.spins || []).filter(x => x.cliente !== nome);
                return { ...s, data: { ...s.data, metricas: { ...metricas, spins, n_spins: spins.length } } };
              });
            }} />
        );
        return selectedCliente ? <M nome={selectedCliente} userName={userName} onClose={() => setSelectedCliente(null)} /> : null;
      })()}

      {briefingModal && <Pcv3BriefingModal campanha={briefingModal.campanha} campanha_id={briefingModal.campanha_id} onClose={() => setBriefingModal(null)} />}
      {sdrOpDetail && window.OpDetailPanel && (
        <div onClick={e => { if (e.target === e.currentTarget) setSdrOpDetail(null); }}
          style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)', zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
          <div style={{ width: '100%', maxWidth: 520, maxHeight: '88vh', overflowY: 'auto', borderRadius: 12, boxShadow: '0 16px 56px rgba(0,0,0,0.28)' }}>
            <window.OpDetailPanel op={{ ...(sdrOpDetail.fm_fields || {}), _next_date: sdrOpDetail.next_date, _mobileModal: true }} empresa="PTDIG" userName={userName} onClose={() => setSdrOpDetail(null)} />
          </div>
        </div>
      )}

      <div style={{ background: PCV3.surf, borderRadius: 10, padding: '24px 28px', marginBottom: 24, boxShadow: 'var(--dgd-shadow-card)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'flex-start' }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', letterSpacing: '0.1em', textTransform: 'uppercase', color: PCV3.fg3, marginBottom: 6 }}>COMERCIAL · CONSUMÍVEIS · PROSPECT V3</div>
            <h1 style={{ margin: 0, fontSize: 24, fontWeight: 700, fontFamily: 'var(--font-display,Montserrat,sans-serif)', color: PCV3.fg1, lineHeight: 1.2, letterSpacing: '-0.01em' }}>
              {first ? `${first}, ` : ''}{prospect?.hero?.titulo || 'SPINs da carteira, oportunidades novas e campanhas.'}
            </h1>
            {prospect?.hero?.subtitulo && <p style={{ margin: '8px 0 0', fontSize: 13, color: PCV3.fg2, lineHeight: 1.6 }}>{prospect.hero.subtitulo}</p>}
            <div style={{ marginTop: 10, display: 'inline-flex', alignItems: 'center', gap: 8, padding: '4px 12px', background: 'color-mix(in oklch, var(--dgd-primary-500,#61A9FF) 8%, transparent)', borderRadius: 4, fontSize: 10, fontFamily: 'var(--dgd-font-mono)', letterSpacing: '0.12em', color: PCV3.blue }}>⚡ DIGI · AGENTE AI DIGIDELTA</div>
          </div>
          <div style={{ textAlign: 'right', flexShrink: 0 }}>
            <button onClick={() => load(true)} disabled={loading}
              style={{ padding: '8px 16px', fontSize: 12, borderRadius: 6, border: `1px solid ${PCV3.border}`, background: PCV3.app, color: PCV3.fg2, cursor: loading ? 'not-allowed' : 'pointer', opacity: loading ? 0.5 : 1 }}>
              {loading ? 'A gerar…' : 'Regenerar'}
            </button>
            <div style={{ fontSize: 11, color: PCV3.fg3, marginTop: 6 }}>{today}</div>
          </div>
        </div>
      </div>

      {loading && !data && <div style={{ padding: 48, textAlign: 'center', color: PCV3.fg3, fontSize: 13 }}>A preparar o prospect…</div>}
      {error && <div style={{ padding: 14, color: 'var(--dgd-red-700,#B53B3B)', fontSize: 13 }}>{error}</div>}

      {data && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 12, marginBottom: 20 }}>
          {[
            ['Origem marketing', m.n_marketing || 0, PCV3.blue, m.cards?.marketing],
            ['Origem SDR', m.n_sdr || 0, PCV3.amber, m.cards?.sdr],
            ['SPINs de hoje', m.n_spins || 0, PCV3.green, m.cards?.spins],
            ['Campanhas', m.n_campanhas || 0, PCV3.fg1, m.cards?.campanhas],
          ].map(([label, value, color, frase]) => (
            <div key={label} style={{ background: PCV3.surf, border: `1px solid ${PCV3.border}`, borderRadius: 8, padding: '14px 16px' }}>
              <div style={{ fontSize: 10, color: PCV3.fg3, fontFamily: 'var(--dgd-font-mono)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>{label}</div>
              <div style={{ fontSize: 22, fontWeight: 700, color, fontFamily: 'var(--font-display,Montserrat,sans-serif)' }}>{value}</div>
              {frase && <div style={{ fontSize: 12, color: PCV3.fg2, marginTop: 6, lineHeight: 1.45 }}>{frase}</div>}
            </div>
          ))}
        </div>
      )}

      {prospect?.bloco4?.regra_do_dia && (
        <div style={{ marginBottom: 16, padding: '12px 16px', borderRadius: 8, borderLeft: `3px solid ${PCV3.green}`, background: PCV3.surf, fontSize: 13, color: PCV3.fg1 }}>
          <div style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', letterSpacing: '0.1em', color: PCV3.fg3, marginBottom: 4 }}>REGRA DO DIA</div>
          {prospect.bloco4.regra_do_dia}
        </div>
      )}

      {data && (
        <Pcv3Card n={1} color={PCV3.blue} title="ATRIBUÍDAS — MARKETING E SDR">
          <div style={{ fontSize: 11, color: PCV3.fg3, marginBottom: 10 }}>Cada oportunidade entra no comercial que tem esse distrito e esse concelho na identidade. Distrito sem concelhos escolhidos fica inteiro. Lead de marketing continua marketing, mesmo depois de o SDR qualificar.</div>
          {prospect?.bloco1?.narrativa && <p style={{ margin: '0 0 12px', fontSize: 13, color: PCV3.fg2, lineHeight: 1.6 }}>{prospect.bloco1.narrativa}</p>}
          {(m.ops || []).length === 0
            ? <div style={{ fontSize: 12, color: PCV3.fg3 }}>Nenhuma oportunidade nova no território desta gestora.</div>
            : <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead><tr>{['Cliente', 'Território', 'Origem', 'Contacto', 'BANT', 'Estado', 'O que se passa', 'Argumento'].map(h => <th key={h} style={pcv3Th}>{h}</th>)}</tr></thead>
                <tbody>
                  {m.ops.map((r, i) => (
                    <tr key={i} style={{ borderTop: `1px solid ${PCV3.border}`, verticalAlign: 'top' }}>
                      <td style={{ padding: '8px' }}><span style={pcv3Click} onClick={() => r.cliente && setSelectedCliente(r.cliente)}>{r.cliente}</span></td>
                      <td style={{ padding: '8px', fontSize: 12, color: PCV3.fg2 }}>{r.territorio || '—'}</td>
                      <td style={{ padding: '8px', fontSize: 11, fontWeight: 700, color: r.origem === 'marketing' ? PCV3.blue : PCV3.amber }}>{r.origem_label}</td>
                      <td style={{ padding: '8px', fontSize: 12, color: PCV3.fg2 }}>{r.contacto || '—'}</td>
                      <td style={{ padding: '8px', fontSize: 12 }}>{r.bant}/4</td>
                      <td style={{ padding: '8px', fontSize: 12 }}>{PCV3_ESTADO[r.estado] || r.estado}</td>
                      <td style={{ padding: '8px', fontSize: 12, color: PCV3.fg2, lineHeight: 1.45, maxWidth: 220 }}>{r.situacao}</td>
                      <td style={{ padding: '8px', fontSize: 12, color: PCV3.fg1, lineHeight: 1.45, maxWidth: 240 }}>{r.argumento}</td>
                    </tr>
                  ))}
                </tbody>
              </table>}

          {(m.ops_sdr_diretas || []).length > 0 && (
            <div style={{ marginTop: 20, borderTop: `1px solid ${PCV3.border}`, paddingTop: 16 }}>
              <div style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', letterSpacing: '0.1em', color: PCV3.amber, textTransform: 'uppercase', marginBottom: 8 }}>Oportunidades SDR — atribuídas directamente</div>
              {prospect?.bloco_sdr_agencias?.narrativa && <p style={{ margin: '0 0 12px', fontSize: 13, color: PCV3.fg2, lineHeight: 1.6 }}>{prospect.bloco_sdr_agencias.narrativa}</p>}
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead><tr>{['Empresa', 'Contacto', 'Campanha', 'SDR', 'Stage FM', 'Próxima ação'].map(h => <th key={h} style={pcv3Th}>{h}</th>)}</tr></thead>
                <tbody>
                  {m.ops_sdr_diretas.map((op, i) => (
                    <tr key={i} style={{ borderTop: `1px solid ${PCV3.border}`, verticalAlign: 'middle' }}>
                      <td style={{ padding: '8px' }}><span style={pcv3Click} onClick={() => setSdrOpDetail(op)}>{op.empresa}</span></td>
                      <td style={{ padding: '8px', fontSize: 12, color: PCV3.fg2 }}>{op.contacto_nome || '—'}</td>
                      <td style={{ padding: '8px', fontSize: 12, color: PCV3.fg2 }}>
                        {op.campanha}
                        {op.campanha_id && <button onClick={() => setBriefingModal({ campanha: op.campanha, campanha_id: op.campanha_id })}
                          style={{ marginLeft: 8, fontSize: 10, padding: '2px 8px', borderRadius: 4, border: `1px solid ${PCV3.border}`, background: 'transparent', color: PCV3.blue, cursor: 'pointer', fontWeight: 600 }}>Ver briefing</button>}
                      </td>
                      <td style={{ padding: '8px', fontSize: 12, color: PCV3.fg3 }}>{op.sdr_nome}</td>
                      <td style={{ padding: '8px', fontSize: 12, color: PCV3.fg2 }}>{op.stage || '—'}</td>
                      <td style={{ padding: '8px', fontSize: 12 }}>
                        {pcv3Date(op.next_date)
                          ? <span style={{ display: 'inline-block', padding: '2px 8px', borderRadius: 4, background: 'color-mix(in oklch, var(--dgd-primary-500,#61A9FF) 10%, transparent)', color: PCV3.blue, fontFamily: 'var(--dgd-font-mono)', fontSize: 11 }}>{pcv3Date(op.next_date)}</span>
                          : <span style={{ color: PCV3.fg3 }}>—</span>}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </Pcv3Card>
      )}

      {data && (
        <Pcv3Card n={2} color={PCV3.green} title="SPINS DA CARTEIRA — HOJE">
          <div style={{ fontSize: 11, color: PCV3.fg3, marginBottom: 10 }}>Quatro clientes da carteira sem diagnóstico. Isto vem antes das campanhas. Quem faz o SPIN é a gestora.</div>
          {prospect?.bloco2?.narrativa && <p style={{ margin: '0 0 12px', fontSize: 13, color: PCV3.fg2, lineHeight: 1.6 }}>{prospect.bloco2.narrativa}</p>}
          {(m.spins || []).length === 0
            ? <div style={{ fontSize: 12, color: PCV3.fg3 }}>A carteira já tem SPIN, ou não há clientes com volume.</div>
            : <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead><tr>{['Cliente', 'Compra este ano', 'Famílias', 'O que se passa', 'Argumento'].map(h => <th key={h} style={pcv3Th}>{h}</th>)}</tr></thead>
                <tbody>
                  {m.spins.map((r, i) => (
                    <tr key={i} style={{ borderTop: `1px solid ${PCV3.border}`, verticalAlign: 'top' }}>
                      <td style={{ padding: '8px' }}><span style={pcv3Click} onClick={() => setSpinCliente(r)}>{r.cliente}</span></td>
                      <td style={{ padding: '8px', fontSize: 12, whiteSpace: 'nowrap' }}>{pcv3Fmt(r.valor)}</td>
                      <td style={{ padding: '8px', fontSize: 12, color: PCV3.fg2 }}>{(r.familias || []).join(', ') || '—'}</td>
                      <td style={{ padding: '8px', fontSize: 12, color: PCV3.fg2, lineHeight: 1.45, maxWidth: 240 }}>{r.situacao}</td>
                      <td style={{ padding: '8px', fontSize: 12, color: PCV3.fg1, lineHeight: 1.45, maxWidth: 260 }}>{r.argumento}</td>
                    </tr>
                  ))}
                </tbody>
              </table>}
        </Pcv3Card>
      )}

      {data && (
        <Pcv3Card n={3} color={PCV3.amber} title="CAMPANHAS — CLIENTES DA FAMÍLIA">
          {prospect?.bloco3?.narrativa && <p style={{ margin: '0 0 12px', fontSize: 13, color: PCV3.fg2, lineHeight: 1.6 }}>{prospect.bloco3.narrativa}</p>}
          {(m.campanhas || []).length === 0
            ? <div style={{ fontSize: 12, color: PCV3.fg3 }}>Sem campanhas Decal ou Biond activas.</div>
            : (m.campanhas || []).map((c, i) => (
                <div key={i} style={{ borderTop: `1px solid ${PCV3.border}`, paddingTop: 14, marginTop: 14 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'baseline' }}>
                    <div style={{ fontSize: 14, fontWeight: 700, color: PCV3.fg1 }}>{c.campanha}</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                      {c.campanha_id && <button onClick={() => setBriefingModal({ campanha: c.campanha, campanha_id: c.campanha_id })}
                        style={{ fontSize: 11, padding: '3px 10px', borderRadius: 4, border: `1px solid ${PCV3.border}`, background: 'transparent', color: PCV3.blue, cursor: 'pointer', fontWeight: 600 }}>Ver briefing</button>}
                      <div style={{ fontSize: 11, color: PCV3.fg3 }}>{c.marca} · {PCV3_ESTADO[c.estado] || c.estado}</div>
                    </div>
                  </div>
                  {c.familias?.length > 0 && <div style={{ fontSize: 11, color: PCV3.fg3, marginTop: 4 }}>{c.familias.join(' · ')}</div>}
                  {c.situacao && <p style={{ margin: '8px 0 0', fontSize: 12, color: PCV3.fg2, lineHeight: 1.5 }}>{c.situacao}</p>}
                  {c.argumento && <p style={{ margin: '4px 0 8px', fontSize: 12, color: PCV3.fg1, lineHeight: 1.5 }}>{c.argumento}</p>}
                  {!c.familia_ligada
                    ? <div style={{ fontSize: 12, color: PCV3.fg3 }}>A campanha ainda não está ligada a uma família de produto.</div>
                    : (c.clientes || []).length === 0
                      ? <div style={{ fontSize: 12, color: PCV3.fg3 }}>Nenhum cliente desta carteira compra esta família nem tem SPIN dela.</div>
                      : <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: 8 }}>
                          <thead><tr>{['Cliente', 'Entrada', 'Família', 'Valor'].map(h => <th key={h} style={pcv3Th}>{h}</th>)}</tr></thead>
                          <tbody>
                            {c.clientes.map((r, j) => (
                              <tr key={j} style={{ borderTop: `1px solid ${PCV3.border}` }}>
                                <td style={{ padding: '8px' }}><span style={pcv3Click} onClick={() => setSelectedCliente(r.cliente)}>{r.cliente}</span></td>
                                <td style={{ padding: '8px', fontSize: 12, color: r.via === 'spin' ? PCV3.green : PCV3.fg2 }}>{PCV3_VIA[r.via] || r.via}</td>
                                <td style={{ padding: '8px', fontSize: 12, color: PCV3.fg2 }}>{(r.familias || []).join(', ')}</td>
                                <td style={{ padding: '8px', fontSize: 12, whiteSpace: 'nowrap' }}>{pcv3Fmt(r.valor)}</td>
                              </tr>
                            ))}
                          </tbody>
                        </table>}
                </div>
              ))}
        </Pcv3Card>
      )}

      {prospect?.bloco4 && (
        <Pcv3Card n={4} color={PCV3.amber} title="ACÇÕES DO DIA">
          {(prospect.bloco4.acoes_prioritarias || []).map(a => (
            <div key={a.n} style={{ padding: '8px 0', borderTop: `1px solid ${PCV3.border}`, fontSize: 13, color: PCV3.fg2 }}>
              <strong style={{ color: PCV3.fg1 }}>{a.cliente}</strong>
              <span style={{ marginLeft: 8, fontSize: 10, textTransform: 'uppercase', color: PCV3.fg3 }}>{a.tipo} · {a.quando}</span>
              <div>{a.acao}</div>
            </div>
          ))}
          {prospect.bloco4.conclusao && <p style={{ margin: '12px 0 0', fontSize: 13, color: PCV3.fg2 }}>{prospect.bloco4.conclusao}</p>}
        </Pcv3Card>
      )}
    </div>
  );
}

window.ScreenProspectCarteiraV3 = ScreenProspectCarteiraV3;