/* screen_comercial_daily_briefing_carteira.jsx
   Daily Briefing Carteira — consumíveis. Expõe window.ScreenDailyBriefingCarteira. */

// ── Helpers (prefixo bc_ para evitar colisão de scope global com bp.jsx) ─────
const bcFmtK = v => {
  const n = Number(v) || 0;
  if (Math.abs(n) >= 1000) return (n / 1000).toFixed(1).replace('.', ',') + 'k';
  return n.toFixed(0);
};
const bcFmtEur = v => `${bcFmtK(v)}€`;
const gColor = { G1: 'var(--dgd-green-700,#1F8A52)', G2: 'var(--dgd-red-700,#B53B3B)', G3: 'var(--dgd-fg-3)', G4: 'var(--dgd-primary-500,#61A9FF)' };
const corMap = { pos: 'var(--dgd-green-700,#1F8A52)', neg: 'var(--dgd-red-700,#B53B3B)', amber: 'var(--dgd-pumpkin-500,#FF9A40)', muted: 'var(--dgd-fg-3)' };
const tendColor = t => {
  if (!t) return 'var(--dgd-fg-3)';
  const s = t.toLowerCase();
  if (s.includes('crescer') || s.includes('subir') || s.includes('estável')) return 'var(--dgd-green-700,#1F8A52)';
  if (s.includes('cair') || s.includes('risco')) return 'var(--dgd-red-700,#B53B3B)';
  return 'var(--dgd-fg-3)';
};

// ── Badge numerado (headers dos blocos) ───────────────────────────────────────
const BlocoBadge = ({ n, color = 'var(--dgd-primary-500,#61A9FF)' }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    width: 20, height: 20, borderRadius: 4,
    background: `color-mix(in oklch, ${color} 20%, transparent)`,
    color, fontSize: 11, fontWeight: 700, marginRight: 8, flexShrink: 0,
  }}>{n}</span>
);

// ── Badge de acção numerada ────────────────────────────────────────────────────
const acaoBadgeColor = ['var(--dgd-green-700,#1F8A52)', 'var(--dgd-primary-500,#61A9FF)', 'var(--dgd-pumpkin-500,#FF9A40)', 'var(--dgd-red-700,#B53B3B)'];
const AcaoBadge = ({ n }) => {
  const color = acaoBadgeColor[(n - 1) % acaoBadgeColor.length] || 'var(--dgd-primary-500,#61A9FF)';
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: 22, height: 22, borderRadius: '50%',
      background: `color-mix(in oklch, ${color} 20%, transparent)`,
      color, fontSize: 11, fontWeight: 700, flexShrink: 0,
    }}>{n}</span>
  );
};

// ── Hero ──────────────────────────────────────────────────────────────────────
const BriefCarteiraHero = ({ vendedorId, date, onRegenerate, loading, brief, userName }) => {
  const firstName = (userName || '').split(' ')[0] || '';
  const titulo = brief?.hero?.titulo || 'carteira actualizada para hoje.';
  const subtitulo = brief?.hero?.subtitulo || null;
  return (
    <div style={{ background: 'var(--dgd-bg-surface)', borderRadius: 10, padding: '24px 28px', marginBottom: 24, boxShadow: 'var(--dgd-shadow-card)' }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', color: 'var(--dgd-fg-3)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 6 }}>
            COMERCIAL · CONSUMÍVEIS · CARTEIRA
          </div>
          <h1 style={{ margin: 0, fontSize: 24, fontWeight: 700, fontFamily: 'var(--font-display,Montserrat,sans-serif)', color: 'var(--dgd-fg-1)', lineHeight: 1.2, letterSpacing: '-0.01em' }}>
            {firstName ? `${firstName}, ` : ''}{titulo}
          </h1>
          {subtitulo && (
            <p style={{ margin: '8px 0 0', fontSize: 13, color: 'var(--dgd-fg-2)', lineHeight: 1.6 }}>{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: 'var(--dgd-primary-500,#61A9FF)' }}>
            ⚡ DIGI · AGENTE AI DIGIDELTA
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6, flexShrink: 0 }}>
          <button onClick={onRegenerate} disabled={loading}
            style={{ padding: '8px 16px', fontSize: 12, borderRadius: 6, border: '1px solid var(--dgd-border-1)',
              background: 'var(--dgd-bg-app)', color: 'var(--dgd-fg-2)',
              cursor: loading ? 'not-allowed' : 'pointer', opacity: loading ? 0.5 : 1 }}>
            {loading ? 'A gerar…' : 'Regenerar'}
          </button>
          <div style={{ fontSize: 11, color: 'var(--dgd-fg-3)' }}>{date}</div>
        </div>
      </div>
    </div>
  );
};

// ── KPI Cards ─────────────────────────────────────────────────────────────────
const BriefCarteiraKPIs = ({ metricas }) => {
  if (!metricas) return null;
  const { mes_corrente, ytd, carteira, spin } = metricas;
  const cards = [
    {
      label: `Mês ${mes_corrente?.mes || ''} · Faturado`,
      value: bcFmtEur(mes_corrente?.faturado),
      sub: `${mes_corrente?.pct_tempo || 0}% do tempo · obj ${bcFmtEur(mes_corrente?.objetivo_bp)}`,
      color: 'var(--dgd-fg-1)',
    },
    {
      label: 'YTD vs BP',
      value: `${(ytd?.gap || 0) >= 0 ? '+' : ''}${bcFmtEur(ytd?.gap)}`,
      sub: `${bcFmtEur(ytd?.faturado)} faturados · ${ytd?.pct_bp || 0}% do acumulado`,
      color: (ytd?.gap || 0) >= 0 ? 'var(--dgd-green-700,#1F8A52)' : 'var(--dgd-red-700,#B53B3B)',
    },
    {
      label: 'Clientes Ativos',
      value: carteira?.ativos || 0,
      sub: `G1: ${carteira?.g1 || 0} · G2: ${carteira?.g2 || 0} · G3: ${carteira?.g3 || 0}`,
      color: 'var(--dgd-fg-1)',
    },
    {
      label: 'Clientes em Risco G2',
      value: carteira?.g2 || 0,
      sub: 'objetivo ≤10',
      color: (carteira?.g2 || 0) > 10 ? 'var(--dgd-red-700,#B53B3B)' : 'var(--dgd-green-700,#1F8A52)',
    },
    {
      label: 'Famílias / Cliente',
      value: carteira?.familias_por_cliente || '—',
      sub: 'objetivo ≥2,5',
      color: (carteira?.familias_por_cliente || 0) >= 2.5 ? 'var(--dgd-green-700,#1F8A52)' : 'var(--dgd-pumpkin-500,#FF9A40)',
    },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 12, marginBottom: 24 }}>
      {cards.map((c, i) => (
        <div key={i} style={{ background: 'var(--dgd-bg-surface)', border: '1px solid var(--dgd-border-1)', borderRadius: 8, padding: '14px 16px' }}>
          <div style={{ fontSize: 10, color: 'var(--dgd-fg-3)', fontFamily: 'var(--dgd-font-mono)', letterSpacing: '0.06em', marginBottom: 6, textTransform: 'uppercase' }}>{c.label}</div>
          <div style={{ fontSize: 22, fontWeight: 700, color: c.color, fontFamily: 'var(--font-display,Montserrat,sans-serif)' }}>{c.value}</div>
          <div style={{ fontSize: 11, color: 'var(--dgd-fg-3)', marginTop: 4 }}>{c.sub}</div>
        </div>
      ))}
    </div>
  );
};

// ── Bloco 1 — Carteira ────────────────────────────────────────────────────────
const BriefCarteiraBloco1 = ({ bloco1 }) => {
  if (!bloco1) return null;
  return (
    <div style={{ background: 'var(--dgd-bg-surface)', border: '1px solid var(--dgd-border-1)', borderRadius: 8, padding: '20px 24px', marginBottom: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 12 }}>
        <BlocoBadge n={1} color="var(--dgd-primary-500,#61A9FF)" />
        <span style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', color: 'var(--dgd-fg-3)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>ESTADO DA CARTEIRA</span>
      </div>
      {bloco1.narrativa && <p style={{ margin: '0 0 16px', fontSize: 13, color: 'var(--dgd-fg-2)', lineHeight: 1.6 }}>{bloco1.narrativa}</p>}
      {bloco1.grupos?.length > 0 && (
        <>
          <div style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', color: 'var(--dgd-fg-3)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>QUADRO AUXILIAR — OS {bloco1.grupos.length} GRUPOS DA CARTEIRA</div>
          <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 16 }}>
            <thead>
              <tr style={{ borderBottom: '1px solid var(--dgd-border-1)' }}>
                {['Grupo', 'Clientes', 'Vendas YTD', 'Valor em Jogo', 'Tendência', 'Acção Semana'].map(h => (
                  <th key={h} style={{ textAlign: 'left', padding: '6px 8px', fontSize: 10, color: 'var(--dgd-fg-3)', fontFamily: 'var(--dgd-font-mono)', fontWeight: 600, textTransform: 'uppercase' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {bloco1.grupos.map(g => (
                <tr key={g.g} style={{ borderBottom: '1px solid var(--dgd-border-1)' }}>
                  <td style={{ padding: '8px', fontSize: 12 }}>
                    <span style={{ display: 'inline-block', padding: '2px 8px', borderRadius: 4, background: `color-mix(in oklch, ${gColor[g.g] || 'var(--dgd-fg-3)'} 15%, transparent)`, color: gColor[g.g] || 'var(--dgd-fg-3)', fontWeight: 700, fontSize: 11 }}>{g.g}</span>
                    <span style={{ marginLeft: 8, color: 'var(--dgd-fg-2)', fontSize: 11 }}>{g.label}</span>
                  </td>
                  <td style={{ padding: '8px', fontSize: 12, color: 'var(--dgd-fg-1)', fontWeight: 600 }}>{g.clientes}</td>
                  <td style={{ padding: '8px', fontSize: 12, color: 'var(--dgd-fg-2)' }}>{bcFmtEur(g.vendas_ytd)}</td>
                  <td style={{ padding: '8px', fontSize: 12, color: g.valor_em_jogo ? (g.g === 'G2' ? 'var(--dgd-red-700,#B53B3B)' : g.g === 'G4' ? 'var(--dgd-primary-500,#61A9FF)' : 'var(--dgd-pumpkin-500,#FF9A40)') : 'var(--dgd-fg-3)', fontWeight: g.valor_em_jogo ? 600 : 400 }}>
                    {g.valor_em_jogo ? bcFmtEur(g.valor_em_jogo) : '—'}
                  </td>
                  <td style={{ padding: '8px', fontSize: 12, color: tendColor(g.tendencia), fontStyle: 'italic' }}>{g.tendencia}</td>
                  <td style={{ padding: '8px', fontSize: 12, color: 'var(--dgd-fg-2)', maxWidth: 220 }}>{g.acao_semana}</td>
                </tr>
              ))}
              {bloco1.carteira_total && (
                <tr style={{ borderTop: '2px solid var(--dgd-border-1)', background: 'color-mix(in oklch, var(--dgd-primary-500,#61A9FF) 4%, transparent)' }}>
                  <td style={{ padding: '8px', fontSize: 12, fontWeight: 700, color: 'var(--dgd-fg-1)' }} colSpan={2}>Carteira</td>
                  <td style={{ padding: '8px', fontSize: 12, fontWeight: 700, color: 'var(--dgd-fg-1)' }}>{bcFmtEur(bloco1.carteira_total.vendas_ytd)}</td>
                  <td style={{ padding: '8px', fontSize: 12, fontWeight: 700, color: 'var(--dgd-red-700,#B53B3B)' }} colSpan={3}>
                    {bloco1.carteira_total.resumo}
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </>
      )}
      {bloco1.acoes?.length > 0 && (
        <div style={{ marginBottom: 16 }}>
          {bloco1.acoes.map(a => (
            <div key={a.n} style={{ display: 'flex', gap: 10, marginBottom: 8, alignItems: 'flex-start' }}>
              <AcaoBadge n={a.n} />
              <span style={{ fontSize: 13, color: 'var(--dgd-fg-2)', lineHeight: 1.5 }}>{a.texto}</span>
            </div>
          ))}
        </div>
      )}
      {bloco1.posicao_objetivos?.length > 0 && (
        <>
          <div style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', color: 'var(--dgd-fg-3)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>QUADRO AUXILIAR — POSIÇÃO VS. OBJETIVOS</div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ borderBottom: '1px solid var(--dgd-border-1)' }}>
                {['Horizonte', 'Objetivo', 'Realizado', 'Previsão', 'Gap', 'Leitura'].map(h => (
                  <th key={h} style={{ textAlign: 'left', padding: '6px 8px', fontSize: 10, color: 'var(--dgd-fg-3)', fontFamily: 'var(--dgd-font-mono)', fontWeight: 600, textTransform: 'uppercase' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {bloco1.posicao_objetivos.map((p, i) => (
                <tr key={i} style={{ borderBottom: '1px solid var(--dgd-border-1)' }}>
                  <td style={{ padding: '8px', fontSize: 12, color: 'var(--dgd-fg-1)', fontWeight: 600 }}>{p.horizonte}</td>
                  <td style={{ padding: '8px', fontSize: 12, color: 'var(--dgd-fg-3)' }}>{bcFmtEur(p.objetivo)}</td>
                  <td style={{ padding: '8px', fontSize: 12, color: 'var(--dgd-fg-1)', fontWeight: 600 }}>{bcFmtEur(p.realizado)}</td>
                  <td style={{ padding: '8px', fontSize: 12, color: 'var(--dgd-primary-500,#61A9FF)' }}>{p.previsao ? bcFmtEur(p.previsao) : '—'}</td>
                  <td style={{ padding: '8px', fontSize: 12, color: (p.gap || 0) >= 0 ? 'var(--dgd-green-700,#1F8A52)' : 'var(--dgd-red-700,#B53B3B)', fontWeight: 700 }}>{(p.gap || 0) >= 0 ? '+' : ''}{bcFmtEur(p.gap)}</td>
                  <td style={{ padding: '8px', fontSize: 12, color: 'var(--dgd-fg-3)' }}>{p.leitura}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </>
      )}
    </div>
  );
};

// ── Bloco 2 — Indicadores ─────────────────────────────────────────────────────
const BriefCarteiraBloco2 = ({ bloco2 }) => {
  if (!bloco2) return null;
  return (
    <div style={{ background: 'var(--dgd-bg-surface)', border: '1px solid var(--dgd-border-1)', borderRadius: 8, padding: '20px 24px', marginBottom: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 12 }}>
        <BlocoBadge n={2} color="var(--dgd-pumpkin-500,#FF9A40)" />
        <span style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', color: 'var(--dgd-fg-3)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>INDICADORES DE CARTEIRA</span>
      </div>
      {bloco2.narrativa && <p style={{ margin: '0 0 16px', fontSize: 13, color: 'var(--dgd-fg-2)', lineHeight: 1.6 }}>{bloco2.narrativa}</p>}
      {bloco2.indicadores?.length > 0 && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 10, marginBottom: 16 }}>
          {bloco2.indicadores.map((ind, i) => (
            <div key={i} style={{ padding: '12px 14px', background: 'var(--dgd-bg-app)', borderRadius: 6, border: '1px solid var(--dgd-border-1)' }}>
              <div style={{ fontSize: 10, color: 'var(--dgd-fg-3)', fontFamily: 'var(--dgd-font-mono)', textTransform: 'uppercase', marginBottom: 4 }}>{ind.label}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{ fontSize: 20, fontWeight: 700, color: corMap[ind.cor] || 'var(--dgd-fg-1)' }}>{ind.atual}</span>
                <span style={{ fontSize: 11, color: 'var(--dgd-fg-3)' }}>{ind.obj}</span>
              </div>
              {ind.leitura && <div style={{ fontSize: 11, color: 'var(--dgd-fg-3)', marginTop: 4 }}>{ind.leitura}</div>}
            </div>
          ))}
        </div>
      )}
      {bloco2.acoes?.length > 0 && (
        <div>
          {bloco2.acoes.map((a, i) => (
            <div key={a.k || i} style={{ display: 'flex', gap: 10, marginBottom: 8, alignItems: 'flex-start' }}>
              <AcaoBadge n={i + 1} />
              <span style={{ fontSize: 13, color: 'var(--dgd-fg-2)', lineHeight: 1.5 }}>
                <b style={{ color: 'var(--dgd-fg-1)' }}>{a.k?.toUpperCase()}.</b> {a.texto}
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// ── Bloco 3 — Encomendas + G2 top5 + Regra ───────────────────────────────────
const BriefCarteiraBloco3 = ({ bloco3 }) => {
  if (!bloco3) return null;
  return (
    <div style={{ background: 'var(--dgd-bg-surface)', border: '1px solid var(--dgd-border-1)', borderRadius: 8, padding: '20px 24px', marginBottom: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 12 }}>
        <BlocoBadge n={3} color="var(--dgd-red-700,#B53B3B)" />
        <span style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', color: 'var(--dgd-fg-3)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>ENCOMENDAS &amp; RECUPERAÇÃO</span>
      </div>
      {bloco3.intro && <p style={{ margin: '0 0 16px', fontSize: 13, color: 'var(--dgd-fg-2)', lineHeight: 1.6 }}>{bloco3.intro}</p>}
      {bloco3.encomendas?.length > 0 && (
        <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 20 }}>
          <thead>
            <tr style={{ borderBottom: '1px solid var(--dgd-border-1)' }}>
              {['', 'Cliente', 'Grupo', 'Valor', 'Estado', 'Coaching'].map(h => (
                <th key={h} style={{ textAlign: 'left', padding: '6px 8px', fontSize: 10, color: 'var(--dgd-fg-3)', fontFamily: 'var(--dgd-font-mono)', fontWeight: 600, textTransform: 'uppercase' }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {bloco3.encomendas.map((e, i) => (
              <tr key={i} style={{ borderBottom: '1px solid var(--dgd-border-1)' }}>
                <td style={{ padding: '8px', fontSize: 16, color: e.tipo === 'star' ? 'var(--dgd-pumpkin-500,#FF9A40)' : 'var(--dgd-green-700,#1F8A52)' }}>{e.tipo === 'star' ? '★' : '✓'}</td>
                <td style={{ padding: '8px', fontSize: 12, color: 'var(--dgd-fg-1)', fontWeight: 500 }}>{e.cliente}</td>
                <td style={{ padding: '8px' }}>
                  <span style={{ padding: '2px 6px', borderRadius: 3, background: `color-mix(in oklch, ${gColor[e.grupo] || 'var(--dgd-fg-3)'} 15%, transparent)`, color: gColor[e.grupo] || 'var(--dgd-fg-3)', fontSize: 10, fontWeight: 700 }}>{e.grupo}</span>
                </td>
                <td style={{ padding: '8px', fontSize: 12, color: e.tipo === 'star' ? 'var(--dgd-pumpkin-500,#FF9A40)' : 'var(--dgd-fg-1)', fontWeight: 600 }}>{bcFmtEur(e.valor)}</td>
                <td style={{ padding: '8px' }}>
                  <span style={{ padding: '2px 6px', borderRadius: 3, fontSize: 10, fontWeight: 600,
                    background: e.estado === 'confirmada' ? 'color-mix(in oklch, var(--dgd-green-700,#1F8A52) 15%, transparent)' : 'color-mix(in oklch, var(--dgd-pumpkin-500,#FF9A40) 15%, transparent)',
                    color: e.estado === 'confirmada' ? 'var(--dgd-green-700,#1F8A52)' : 'var(--dgd-pumpkin-500,#FF9A40)' }}>
                    {e.estado === 'confirmada' ? '✓ Confirmada' : '★ Potencial'}
                  </span>
                </td>
                <td style={{ padding: '8px', fontSize: 11, color: 'var(--dgd-fg-3)', maxWidth: 260 }}>{e.coaching}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
      {bloco3.g2_top5?.length > 0 && (
        <div style={{ marginBottom: 20 }}>
          <div style={{ fontSize: 11, color: 'var(--dgd-red-700,#B53B3B)', fontWeight: 700, fontFamily: 'var(--dgd-font-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 10 }}>G2 — Recuperação Urgente</div>
          {bloco3.g2_top5.map((c, i) => (
            <div key={i} style={{ padding: '10px 12px', background: 'color-mix(in oklch, var(--dgd-red-700,#B53B3B) 5%, transparent)', borderRadius: 6, border: '1px solid color-mix(in oklch, var(--dgd-red-700,#B53B3B) 20%, transparent)', marginBottom: 6 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--dgd-fg-1)' }}>{c.cliente}</span>
                <span style={{ fontSize: 11, color: 'var(--dgd-red-700,#B53B3B)', fontWeight: 600 }}>{c.dias} dias · {bcFmtEur(c.valor_12m)}/ano</span>
              </div>
              <div style={{ fontSize: 12, color: 'var(--dgd-fg-3)' }}><b style={{ color: 'var(--dgd-fg-2)' }}>Motivo:</b> {c.motivo}</div>
              <div style={{ fontSize: 12, color: 'var(--dgd-fg-2)', marginTop: 2 }}><b>Acção:</b> {c.acao} — <span style={{ color: 'var(--dgd-pumpkin-500,#FF9A40)' }}>{c.quando}</span></div>
            </div>
          ))}
        </div>
      )}
      {bloco3.regra_do_dia && (
        <div style={{ padding: '14px 18px', background: 'color-mix(in oklch, var(--dgd-primary-500,#61A9FF) 6%, transparent)', border: '1px solid color-mix(in oklch, var(--dgd-primary-500,#61A9FF) 25%, transparent)', borderRadius: 8 }}>
          <div style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', color: 'var(--dgd-primary-500,#61A9FF)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 6 }}>REGRA DO DIA</div>
          <div style={{ fontSize: 13, color: 'var(--dgd-fg-1)', lineHeight: 1.6 }}>{bloco3.regra_do_dia}</div>
        </div>
      )}
    </div>
  );
};

// ── Skeleton ──────────────────────────────────────────────────────────────────
const BriefCarteiraSkeleton = () => (
  <div style={{ padding: '28px 32px' }}>
    {[1, 2, 3].map(i => (
      <div key={i} style={{ height: 80, background: 'var(--dgd-bg-surface)', borderRadius: 8, marginBottom: 16, animation: 'pulse 1.5s infinite' }} />
    ))}
  </div>
);

// ── Main Screen ───────────────────────────────────────────────────────────────
const ScreenDailyBriefingCarteira = ({ vendedorId, onNav, userName }) => {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);

  const load = React.useCallback((force = false) => {
    setLoading(true);
    setError(null);
    const url = `/api/comercial/brief-carteira/${encodeURIComponent(vendedorId)}${force ? '?force=true' : ''}`;
    fetch(url)
      .then(r => r.ok ? r.json() : r.json().then(e => Promise.reject(e.error || 'Erro desconhecido')))
      .then(d => { setData(d); setLoading(false); })
      .catch(e => { setError(String(e)); setLoading(false); });
  }, [vendedorId]);

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

  if (loading) return <BriefCarteiraSkeleton />;
  if (error) return (
    <div style={{ padding: '40px 32px', textAlign: 'center' }}>
      <div style={{ fontSize: 13, color: 'var(--dgd-red-700,#B53B3B)', marginBottom: 12 }}>Erro: {error}</div>
      <button className="btn btn-primary" onClick={() => load()}>Tentar novamente</button>
    </div>
  );
  if (!data) return null;

  const { brief, metricas, date } = data;
  return (
    <div className="scrollbar" style={{ height: '100%', overflowY: 'auto', padding: '28px 32px 80px' }}>
      <BriefCarteiraHero vendedorId={vendedorId} date={date} onRegenerate={() => load(true)} loading={loading} brief={brief} userName={userName} />
      <BriefCarteiraKPIs metricas={metricas} />
      <BriefCarteiraBloco1 bloco1={brief?.bloco1} />
      <BriefCarteiraBloco2 bloco2={brief?.bloco2} />
      <BriefCarteiraBloco3 bloco3={brief?.bloco3} />
      {data.cached && (
        <div style={{ textAlign: 'right', fontSize: 11, color: 'var(--dgd-fg-3)', marginTop: 8 }}>
          Cache de {date} · <span style={{ cursor: 'pointer', color: 'var(--dgd-primary-500,#61A9FF)' }} onClick={() => load(true)}>Regenerar</span>
        </div>
      )}
    </div>
  );
};

window.ScreenDailyBriefingCarteira = ScreenDailyBriefingCarteira;