/* screen_comercial_daily_briefing_gestor.jsx
   Daily Briefing para Gestores de Equipa — canal Equipamentos e Consumíveis.
   Expõe window.ScreenDailyBriefingGestor. */

// ── Helpers ───────────────────────────────────────────────────────────────────
const bg_fmtK = v => {
  const n = Number(v) || 0;
  if (Math.abs(n) >= 1000000) return (n / 1000000).toFixed(1).replace('.', ',') + 'M';
  if (Math.abs(n) >= 1000)    return (n / 1000).toFixed(0) + 'k';
  return n.toFixed(0);
};
const bg_fmtEur = v => `${bg_fmtK(v)}€`;
const bg_fmtPct = v => `${Math.round(Number(v) || 0)}%`;
const bg_corValor = v => {
  const n = Number(v) || 0;
  if (n > 0) return 'var(--dgd-green-700,#1F8A52)';
  if (n < 0) return 'var(--dgd-red-700,#B53B3B)';
  return 'var(--dgd-fg-2)';
};
const bg_sinaisCore = {
  ok:      { color: 'var(--dgd-green-700,#1F8A52)', bg: 'color-mix(in oklch, var(--dgd-green-700,#1F8A52) 15%, transparent)', label: 'OK' },
  atencao: { color: 'var(--dgd-pumpkin-500,#FF9A40)', bg: 'color-mix(in oklch, var(--dgd-pumpkin-500,#FF9A40) 15%, transparent)', label: 'Atenção' },
  critico: { color: 'var(--dgd-red-700,#B53B3B)', bg: 'color-mix(in oklch, var(--dgd-red-700,#B53B3B) 15%, transparent)', label: 'Crítico' },
};
const bg_urgCore = {
  fire:   { color: 'var(--dgd-red-700,#B53B3B)',     label: '★' },
  warn:   { color: 'var(--dgd-pumpkin-500,#FF9A40)', label: '⚠' },
  normal: { color: 'var(--dgd-primary-500,#61A9FF)', label: '·' },
};

// ── Sub-componentes comuns ────────────────────────────────────────────────────
const BgBlocoBadge = ({ n }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    width: 22, height: 22, borderRadius: 6,
    background: 'color-mix(in oklch, var(--dgd-primary-500,#61A9FF) 18%, transparent)',
    color: 'var(--dgd-primary-500,#61A9FF)',
    fontSize: 12, fontWeight: 700, marginRight: 8, flexShrink: 0,
  }}>{n}</span>
);

const BgAcaoBadge = ({ n }) => {
  const colors = ['var(--dgd-green-700,#1F8A52)', 'var(--dgd-primary-500,#61A9FF)', 'var(--dgd-pumpkin-500,#FF9A40)', 'var(--dgd-red-700,#B53B3B)'];
  const c = colors[(n - 1) % colors.length];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: 22, height: 22, borderRadius: '50%',
      background: `color-mix(in oklch, ${c} 18%, transparent)`,
      color: c, fontSize: 11, fontWeight: 700, flexShrink: 0,
    }}>{n}</span>
  );
};

const BgLetraBadge = ({ l }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    width: 22, height: 22, borderRadius: '50%',
    background: 'color-mix(in oklch, var(--dgd-primary-500,#61A9FF) 18%, transparent)',
    color: 'var(--dgd-primary-500,#61A9FF)',
    fontSize: 11, fontWeight: 700, flexShrink: 0,
  }}>{l}</span>
);

const BgSinalPill = ({ sinal }) => {
  const s = bg_sinaisCore[sinal] || bg_sinaisCore.ok;
  return (
    <span style={{
      display: 'inline-block', fontSize: 10, fontWeight: 700, letterSpacing: '0.06em',
      textTransform: 'uppercase', padding: '3px 9px', borderRadius: 999,
      color: s.color, background: s.bg,
    }}>{s.label}</span>
  );
};

// ── Hero ──────────────────────────────────────────────────────────────────────
const BgHero = ({ canal, date, onRegenerate, loading, userName, managerName }) => {
  const firstName = (managerName || userName || '').split(' ')[0] || '';
  const canalLabel = canal === 'equipamentos' ? 'EQUIPAMENTOS' : 'CONSUMÍVEIS';
  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 · GESTOR · {canalLabel}
          </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}, ` : ''}briefing da equipa para hoje.
          </h1>
          <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 · GESTOR 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 BgKpiCard = ({ label, value, color, note }) => (
  <div style={{ background: 'var(--dgd-bg-surface)', border: '1px solid var(--dgd-border-1)', borderRadius: 12,
    boxShadow: 'var(--dgd-shadow-card)', padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 4 }}>
    <div style={{ fontSize: 10, letterSpacing: '0.13em', textTransform: 'uppercase', color: 'var(--dgd-fg-3)', fontWeight: 600, fontFamily: 'var(--dgd-font-mono)' }}>
      {label}
    </div>
    <div style={{ fontSize: 22, fontWeight: 700, color: color || 'var(--dgd-fg-1)', fontFamily: 'var(--dgd-font-mono)' }}>
      {value}
    </div>
    {note && <div style={{ fontSize: 11.5, color: 'var(--dgd-fg-3)', fontFamily: 'var(--font-body,Inter,sans-serif)' }}>{note}</div>}
  </div>
);

const BgKPIs = ({ metricas, canal }) => {
  if (!metricas) return null;
  const kpis = canal === 'equipamentos' ? [
    { label: 'YTD Faturado', value: bg_fmtEur(metricas.ytd_equipa), color: 'var(--dgd-fg-1)' },
    { label: 'YTD vs. BP', value: bg_fmtEur(metricas.desvio_ytd), color: bg_corValor(metricas.desvio_ytd),
      note: `BP acumulado: ${bg_fmtEur(metricas.bp_ytd_equipa)}` },
    { label: 'Prev. Nominal', value: bg_fmtEur(metricas.pipeline_nominal), color: 'var(--dgd-fg-1)',
      note: 'pipeline aberto mês/seguinte' },
    { label: 'Prev. Credível', value: bg_fmtEur(metricas.pipeline_credivel), color: 'var(--dgd-fg-1)',
      note: `win rate ${bg_fmtPct(metricas.win_rate_pct)}` },
    { label: 'Win Rate', value: bg_fmtPct(metricas.win_rate_pct),
      color: metricas.win_rate_pct >= 20 ? 'var(--dgd-green-700,#1F8A52)' : 'var(--dgd-pumpkin-500,#FF9A40)' },
  ] : [
    { label: 'YTD Faturado', value: bg_fmtEur(metricas.ytd_equipa), color: 'var(--dgd-fg-1)' },
    { label: 'YTD vs. BP', value: bg_fmtEur(metricas.desvio_ytd), color: bg_corValor(metricas.desvio_ytd),
      note: `BP acumulado: ${bg_fmtEur(metricas.bp_ytd_equipa)}` },
    { label: 'Clientes G2', value: String(metricas.g2_count),
      color: metricas.g2_count > 5 ? 'var(--dgd-pumpkin-500,#FF9A40)' : 'var(--dgd-fg-1)',
      note: 'em risco (60-90 dias)' },
    { label: 'Clientes G3', value: String(metricas.g3_count),
      color: metricas.g3_count > 3 ? 'var(--dgd-red-700,#B53B3B)' : 'var(--dgd-fg-1)',
      note: 'inativos (>90 dias)' },
    { label: 'RPC Confirmado', value: bg_fmtEur(metricas.rpc_confirmado), color: 'var(--dgd-fg-1)',
      note: `estimado: ${bg_fmtEur(metricas.rpc_potencial)}` },
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(185px,1fr))', gap: 12, marginBottom: 20 }}>
      {kpis.map((k, i) => <BgKpiCard key={i} {...k} />)}
    </div>
  );
};

// ── Bloco 1 ───────────────────────────────────────────────────────────────────
const BgBloco1 = ({ bloco1, canal }) => {
  if (!bloco1) return null;
  const cardStyle = { background: 'var(--dgd-bg-surface)', border: '1px solid var(--dgd-border-1)', borderRadius: 12, boxShadow: 'var(--dgd-shadow-card)', overflow: 'hidden', marginBottom: 16 };
  const headStyle = { display: 'flex', alignItems: 'center', padding: '14px 18px 0' };
  const bodyStyle = { fontFamily: 'var(--font-body,Inter,sans-serif)', padding: '12px 18px 14px', fontSize: 13.5, lineHeight: 1.65 };
  return (
    <div style={cardStyle}>
      <div style={headStyle}><BgBlocoBadge n="1" /><span style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--dgd-fg-3)', fontWeight: 600, fontFamily: 'var(--dgd-font-mono)' }}>Resumo — posição da equipa e acções</span></div>
      <div style={bodyStyle}>
        {(bloco1.narrativa || '').split('\n').filter(Boolean).map((p, i) => (
          <p key={i} style={{ margin: '0 0 10px', width: '100%' }}>{p}</p>
        ))}
        {bloco1.acoes?.length > 0 && (
          <div style={{ display: 'grid', gap: 10, margin: '8px 0 12px' }}>
            {bloco1.acoes.map((a, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <BgAcaoBadge n={a.num || i + 1} />
                <span><strong style={{ fontWeight: 600 }}>{a.titulo}.</strong> {a.detalhe}</span>
              </div>
            ))}
          </div>
        )}
        {canal === 'equipamentos' && bloco1.tabela_posicao?.length > 0 && (
          <>
            <div style={{ fontSize: 10, letterSpacing: '0.13em', textTransform: 'uppercase', color: 'var(--dgd-fg-3)', margin: '10px 0 6px', fontWeight: 600, fontFamily: 'var(--dgd-font-mono)' }}>Quadro auxiliar — posição nominal vs. credível</div>
            <div style={{ overflowX: 'auto' }}>
              <table style={{ borderCollapse: 'collapse', width: '100%', fontFamily: 'var(--dgd-font-mono)', fontSize: 12.5 }}>
                <thead>
                  <tr style={{ borderBottom: '1px solid var(--dgd-border-1)' }}>
                    {['Horizonte','Objetivo','Realizado','Prev. Nominal','Prev. Credível','Gap','Leitura'].map(h => (
                      <th key={h} style={{ padding: '7px 10px', textAlign: h === 'Horizonte' || h === 'Leitura' ? 'left' : 'right', fontSize: 10.5, fontWeight: 600, color: 'var(--dgd-fg-3)', whiteSpace: 'nowrap' }}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {bloco1.tabela_posicao.map((row, i) => (
                    <tr key={i} style={{ borderBottom: i < bloco1.tabela_posicao.length - 1 ? '1px solid var(--dgd-border-soft,var(--dgd-border-1))' : 'none' }}>
                      <td style={{ padding: '8px 10px', fontWeight: 600 }}>{row.horizonte}</td>
                      <td style={{ padding: '8px 10px', textAlign: 'right' }}>{row.objetivo != null ? bg_fmtEur(row.objetivo) : '—'}</td>
                      <td style={{ padding: '8px 10px', textAlign: 'right' }}>{row.realizado != null ? bg_fmtEur(row.realizado) : '—'}</td>
                      <td style={{ padding: '8px 10px', textAlign: 'right', color: 'var(--dgd-primary-500,#61A9FF)' }}>{row.prev_nominal != null ? bg_fmtEur(row.prev_nominal) : '—'}</td>
                      <td style={{ padding: '8px 10px', textAlign: 'right' }}>{row.prev_credivel != null ? bg_fmtEur(row.prev_credivel) : '—'}</td>
                      <td style={{ padding: '8px 10px', textAlign: 'right', color: bg_corValor(row.gap) }}>{row.gap != null ? bg_fmtEur(row.gap) : '—'}</td>
                      <td style={{ padding: '8px 10px', textAlign: 'left', fontFamily: 'var(--font-body,Inter,sans-serif)', fontSize: 12, color: 'var(--dgd-fg-2)', minWidth: 200, lineHeight: 1.4 }}>{row.leitura}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

// ── Bloco 2 ───────────────────────────────────────────────────────────────────
const BgBloco2 = ({ bloco2, canal }) => {
  if (!bloco2) return null;
  const cardStyle = { background: 'var(--dgd-bg-surface)', border: '1px solid var(--dgd-border-1)', borderRadius: 12, boxShadow: 'var(--dgd-shadow-card)', overflow: 'hidden', marginBottom: 16 };
  const bodyStyle = { fontFamily: 'var(--font-body,Inter,sans-serif)', padding: '12px 18px 14px', fontSize: 13.5, lineHeight: 1.65 };

  const colsEq = ['Comercial','Obj. YTD','Vendas','Desvio','Cobertura','OPs criadas','Win Rate','Rating','Sinal'];
  const colsCons = ['Comercial','Obj. YTD','Vendas','Desvio','G2','G3','RPC Pot.','Sinal'];

  return (
    <div style={cardStyle}>
      <div style={{ display: 'flex', alignItems: 'center', padding: '14px 18px 0' }}>
        <BgBlocoBadge n="2" />
        <span style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--dgd-fg-3)', fontWeight: 600, fontFamily: 'var(--dgd-font-mono)' }}>
          {canal === 'equipamentos' ? 'Pipeline da equipa — análise por comercial' : 'Carteira da equipa — análise por comercial'}
        </span>
      </div>
      <div style={bodyStyle}>
        {bloco2.narrativa && <p style={{ margin: '0 0 12px', width: '100%' }}>{bloco2.narrativa}</p>}
      </div>
      {bloco2.por_comercial?.length > 0 && (
        <div style={{ overflowX: 'auto', padding: '0 10px 14px' }}>
          <table style={{ borderCollapse: 'collapse', width: '100%', fontFamily: 'var(--dgd-font-mono)', fontSize: 12.5 }}>
            <thead>
              <tr style={{ borderBottom: '1px solid var(--dgd-border-1)' }}>
                {(canal === 'equipamentos' ? colsEq : colsCons).map(h => (
                  <th key={h} style={{ padding: '7px 10px', textAlign: h === 'Comercial' || h === 'Sinal' ? 'left' : 'right', fontSize: 10.5, fontWeight: 600, color: 'var(--dgd-fg-3)', whiteSpace: 'nowrap' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {bloco2.por_comercial.map((m, i) => (
                <tr key={i} style={{ borderBottom: i < bloco2.por_comercial.length - 1 ? '1px solid var(--dgd-border-soft,var(--dgd-border-1))' : 'none' }}>
                  <td style={{ padding: '8px 10px', fontWeight: 600 }}>{m.comercial}</td>
                  <td style={{ padding: '8px 10px', textAlign: 'right' }}>{bg_fmtEur(m.bp_ytd)}</td>
                  <td style={{ padding: '8px 10px', textAlign: 'right' }}>{bg_fmtEur(m.ytd)}</td>
                  <td style={{ padding: '8px 10px', textAlign: 'right', color: bg_corValor(m.desvio) }}>{bg_fmtEur(m.desvio)}</td>
                  {canal === 'equipamentos' ? (
                    <>
                      <td style={{ padding: '8px 10px', textAlign: 'right' }}>{m.cobertura || '—'}</td>
                      <td style={{ padding: '8px 10px', textAlign: 'right' }}>{m.ops_criadas_recentes ?? '—'}</td>
                      <td style={{ padding: '8px 10px', textAlign: 'right' }}>{bg_fmtPct(m.win_rate_pct)}</td>
                      <td style={{ padding: '8px 10px', textAlign: 'right' }}>{bg_fmtPct(m.rating_pct)}</td>
                    </>
                  ) : (
                    <>
                      <td style={{ padding: '8px 10px', textAlign: 'right', color: m.g2_count > 3 ? 'var(--dgd-pumpkin-500,#FF9A40)' : 'var(--dgd-fg-1)' }}>{m.g2_count ?? 0}</td>
                      <td style={{ padding: '8px 10px', textAlign: 'right', color: m.g3_count > 2 ? 'var(--dgd-red-700,#B53B3B)' : 'var(--dgd-fg-1)' }}>{m.g3_count ?? 0}</td>
                      <td style={{ padding: '8px 10px', textAlign: 'right' }}>{bg_fmtEur(m.rpc_potencial)}</td>
                    </>
                  )}
                  <td style={{ padding: '8px 10px', textAlign: 'left' }}><BgSinalPill sinal={m.sinal} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
      {bloco2.acoes_gestao?.length > 0 && (
        <div style={{ fontFamily: 'var(--font-body,Inter,sans-serif)', padding: '0 18px 14px' }}>
          <div style={{ fontSize: 10, letterSpacing: '0.13em', textTransform: 'uppercase', color: 'var(--dgd-fg-3)', margin: '4px 0 8px', fontWeight: 600, fontFamily: 'var(--dgd-font-mono)' }}>Necessidades de melhoria</div>
          <div style={{ display: 'grid', gap: 10 }}>
            {bloco2.acoes_gestao.map((a, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13.5, lineHeight: 1.6 }}>
                <BgLetraBadge l={a.letra || String.fromCharCode(97 + i)} />
                <span><strong style={{ fontWeight: 600 }}>{a.titulo}:</strong> {a.detalhe}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

// ── Bloco 3 ───────────────────────────────────────────────────────────────────
const BgBloco3 = ({ bloco3, canal }) => {
  if (!bloco3) return null;
  const cardStyle = { background: 'var(--dgd-bg-surface)', border: '1px solid var(--dgd-border-1)', borderRadius: 12, boxShadow: 'var(--dgd-shadow-card)', overflow: 'hidden', marginBottom: 16 };
  const bodyStyle = { fontFamily: 'var(--font-body,Inter,sans-serif)', padding: '12px 18px 14px', fontSize: 13.5, lineHeight: 1.65 };

  return (
    <div style={cardStyle}>
      <div style={{ display: 'flex', alignItems: 'center', padding: '14px 18px 0' }}>
        <BgBlocoBadge n="3" />
        <span style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--dgd-fg-3)', fontWeight: 600, fontFamily: 'var(--dgd-font-mono)' }}>
          {canal === 'equipamentos' ? 'OPs críticas — onde o gestor intervém' : 'Clientes prioritários — intervenção do gestor'}
        </span>
      </div>

      {canal === 'equipamentos' && bloco3.ops_criticas?.length > 0 && (
        <div style={{ overflowX: 'auto', padding: '12px 10px 4px' }}>
          <table style={{ borderCollapse: 'collapse', width: '100%', fontFamily: 'var(--dgd-font-mono)', fontSize: 12.5 }}>
            <thead>
              <tr style={{ borderBottom: '1px solid var(--dgd-border-1)' }}>
                {['','Comercial','Cliente / OP','Valor','Fase','Fecho','Risco','Intervenção do gestor','Prazo'].map((h, i) => (
                  <th key={i} style={{ padding: '7px 10px', textAlign: i === 0 || i === 7 ? 'left' : i < 3 ? 'left' : 'right', fontSize: 10.5, fontWeight: 600, color: 'var(--dgd-fg-3)', whiteSpace: 'nowrap' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {bloco3.ops_criticas.map((op, i) => {
                const riscoColor = op.risco === 'alto' ? 'var(--dgd-red-700,#B53B3B)' : op.risco === 'medio' ? 'var(--dgd-pumpkin-500,#FF9A40)' : 'var(--dgd-green-700,#1F8A52)';
                return (
                  <tr key={i} style={{ borderBottom: i < bloco3.ops_criticas.length - 1 ? '1px solid var(--dgd-border-soft,var(--dgd-border-1))' : 'none' }}>
                    <td style={{ padding: '8px 10px', color: 'var(--dgd-red-700,#B53B3B)', fontSize: 15 }}>{op.estrela ? '★' : '⚠'}</td>
                    <td style={{ padding: '8px 10px', fontWeight: 600 }}>{op.comercial}</td>
                    <td style={{ padding: '8px 10px' }}>{op.cliente}</td>
                    <td style={{ padding: '8px 10px', textAlign: 'right', fontWeight: 600 }}>{bg_fmtEur(op.valor)}</td>
                    <td style={{ padding: '8px 10px', textAlign: 'right' }}>{op.stage}</td>
                    <td style={{ padding: '8px 10px', textAlign: 'right' }}>{op.fecho_mes}</td>
                    <td style={{ padding: '8px 10px', textAlign: 'right', color: riscoColor }}>{op.risco}</td>
                    <td style={{ padding: '8px 10px', fontFamily: 'var(--font-body,Inter,sans-serif)', fontSize: 12, color: 'var(--dgd-fg-2)', minWidth: 200, lineHeight: 1.45 }}>{op.intervencao}</td>
                    <td style={{ padding: '8px 10px', textAlign: 'right', whiteSpace: 'nowrap' }}>{op.prazo}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {canal !== 'equipamentos' && bloco3.clientes_prioritarios?.length > 0 && (
        <div style={{ overflowX: 'auto', padding: '12px 10px 4px' }}>
          <table style={{ borderCollapse: 'collapse', width: '100%', fontFamily: 'var(--dgd-font-mono)', fontSize: 12.5 }}>
            <thead>
              <tr style={{ borderBottom: '1px solid var(--dgd-border-1)' }}>
                {['Urg.','Cliente','Comercial','Dias s/ compra','Valor Hist.','Acção sugerida'].map((h, i) => (
                  <th key={i} style={{ padding: '7px 10px', textAlign: i === 0 || i === 1 || i === 2 || i === 5 ? 'left' : 'right', fontSize: 10.5, fontWeight: 600, color: 'var(--dgd-fg-3)', whiteSpace: 'nowrap' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {bloco3.clientes_prioritarios.map((c, i) => {
                const u = bg_urgCore[c.urgencia] || bg_urgCore.normal;
                return (
                  <tr key={i} style={{ borderBottom: i < bloco3.clientes_prioritarios.length - 1 ? '1px solid var(--dgd-border-soft,var(--dgd-border-1))' : 'none' }}>
                    <td style={{ padding: '8px 10px', color: u.color, fontWeight: 700, fontSize: 15 }}>{u.label}</td>
                    <td style={{ padding: '8px 10px', fontWeight: 600 }}>{c.cliente}</td>
                    <td style={{ padding: '8px 10px' }}>{c.comercial}</td>
                    <td style={{ padding: '8px 10px', textAlign: 'right' }}>{c.dias_sem_compra} dias</td>
                    <td style={{ padding: '8px 10px', textAlign: 'right' }}>{bg_fmtEur(c.valor_historico)}</td>
                    <td style={{ padding: '8px 10px', fontFamily: 'var(--font-body,Inter,sans-serif)', fontSize: 12, color: 'var(--dgd-fg-2)', minWidth: 200, lineHeight: 1.45 }}>{c.acao_sugerida}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      <div style={bodyStyle}>
        {bloco3.coaching_agenda?.length > 0 && (
          <>
            <div style={{ fontSize: 10, letterSpacing: '0.13em', textTransform: 'uppercase', color: 'var(--dgd-fg-3)', margin: '4px 0 8px', fontWeight: 600, fontFamily: 'var(--dgd-font-mono)' }}>Agenda de coaching — hoje (3 × 20 min)</div>
            <div style={{ display: 'grid', gap: 10, marginBottom: 14 }}>
              {bloco3.coaching_agenda.map((s, i) => (
                <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <BgAcaoBadge n={s.num || i + 1} />
                  <span><strong style={{ fontWeight: 600 }}>{s.comercial}:</strong> {s.foco}</span>
                </div>
              ))}
            </div>
          </>
        )}
        {bloco3.regra_do_gestor && (
          <div style={{ background: 'color-mix(in oklch, var(--dgd-red-700,#B53B3B) 8%, transparent)', border: '1px solid var(--dgd-border-1)', borderRadius: 10, padding: '10px 14px', fontSize: 13, lineHeight: 1.55 }}>
            <strong style={{ color: 'var(--dgd-red-700,#B53B3B)' }}>Regra do gestor:</strong> {bloco3.regra_do_gestor}
          </div>
        )}
      </div>
    </div>
  );
};

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

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

  const managerId = user?.id;

  const load = React.useCallback((force = false) => {
    if (!managerId) return;
    setLoading(true);
    setError(null);
    const url = `/api/comercial/brief-gestor/today?managerId=${encodeURIComponent(managerId)}${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); });
  }, [managerId]);

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

  if (loading) return <BgSkeleton />;
  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_json, metricas, canal, date, cached } = data;
  const managerName = user?.nome || userName || '';

  return (
    <div className="scrollbar" style={{ height: '100%', overflowY: 'auto', padding: '28px 32px 80px' }}>
      <BgHero canal={canal} date={date} onRegenerate={() => load(true)} loading={loading} userName={userName} managerName={managerName} />
      <BgKPIs metricas={metricas} canal={canal} />
      <BgBloco1 bloco1={brief_json?.bloco1} canal={canal} />
      <BgBloco2 bloco2={brief_json?.bloco2} canal={canal} />
      <BgBloco3 bloco3={brief_json?.bloco3} canal={canal} />
      {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.ScreenDailyBriefingGestor = ScreenDailyBriefingGestor;