// Cascata de 4 termos do Teste A/B (spec 2026-07-30). Da referência ao real, um
// segmento por termo. Paleta validada pelo validador do skill dataviz: todos os
// checks passam (banda de luminosidade, piso de croma, separação CVD, piso de visão
// normal). O contraste do laranja da marca fica em 2,71:1, abaixo de 3:1 — por isso
// o rótulo direto em cada segmento não é enfeite, é o alívio exigido pela régua.
const ABTC_TERMOS = [
  { key: 'efeitoMixCvr',       label: 'mix (quem entrou)', cor: '#5A62C8', grupo: 'mix' },
  { key: 'efeitoMixEstrutura', label: 'mix (estrutura)',   cor: '#2C9CC4', grupo: 'mix' },
  { key: 'efeitoConversao',    label: 'conversão',         cor: '#FD7119', grupo: 'real' },
  { key: 'efeitoDevolucao',    label: 'devolução',         cor: '#8A5BD6', grupo: 'real' },
];

const abtcUsd = (v) => (v == null ? '—'
  : `${v >= 0 ? '+' : '−'}$${Math.abs(v).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`);

const abtcMoney = (v) => `$${(v || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;

const AbtCascata = ({ totals }) => {
  if (!totals || !totals.separacao) return null;
  const sep = totals.separacao;
  const inicio = totals.oppLeadRef;
  const fim = totals.oppLeadCurBruto;

  // Escala compartilhada por âncoras e segmentos: sem isso a altura de um segmento
  // não seria comparável à altura da barra de referência, e a leitura visual mentiria.
  const passos = [];
  let acc = inicio;
  ABTC_TERMOS.forEach((t) => {
    const v = sep[t.key] || 0;
    passos.push({ ...t, valor: v, de: acc, para: acc + v });
    acc += v;
  });
  const teto = Math.max(inicio, fim, ...passos.map((p) => Math.max(p.de, p.para))) || 1;
  const alt = (v) => Math.max(2, Math.round((Math.abs(v) / teto) * 120));
  const base = (p) => Math.round((Math.min(p.de, p.para) / teto) * 120);

  return (
    <div style={abtc.card}>
      <div style={abtc.topo}>
        <div>
          <div style={abtc.eye}>De onde veio a diferença</div>
          <div style={abtc.texto}>
            Os quatro termos somam exatamente a variação observada. Os dois primeiros
            são o público que entrou — você não controla. Os dois últimos são o funil.
          </div>
        </div>
        <div style={abtc.totalBox}>
          <div style={abtc.eye}>Variação real</div>
          <div style={{ ...abtc.totalNum, color: fim >= inicio ? 'var(--positive)' : 'var(--negative)' }}
            className="fenix-num">{abtcUsd(fim - inicio)}</div>
          <div style={abtc.totalSub}>por checkout de front-end</div>
        </div>
      </div>

      <div style={abtc.plot}>
        <div style={abtc.col}>
          <div style={abtc.val}>{abtcMoney(inicio)}</div>
          <div style={{ ...abtc.barra, height: alt(inicio), background: 'var(--gray-300)' }} />
          <div style={abtc.lab}>Referência</div>
        </div>

        {passos.map((p) => (
          <div key={p.key} style={abtc.col}
            title={`${p.label}: ${abtcUsd(p.valor)} por lead`}>
            <div style={{ ...abtc.val, color: p.valor >= 0 ? 'var(--positive)' : 'var(--negative)' }}>
              {abtcUsd(p.valor)}
            </div>
            <div style={{
              ...abtc.barra, height: alt(p.valor), marginBottom: base(p),
              background: p.cor,
              // Textura nos termos de mix: "isso foi culpa minha?" se responde sem legenda.
              backgroundImage: p.grupo === 'mix'
                ? 'repeating-linear-gradient(45deg, rgba(255,255,255,.38) 0 3px, transparent 3px 6px)'
                : 'none',
            }} />
            <div style={abtc.lab}>
              {p.label}
              <div style={abtc.labSub}>{p.grupo === 'mix' ? 'não controlável' : 'controlável'}</div>
            </div>
          </div>
        ))}

        <div style={abtc.col}>
          <div style={abtc.val}>{abtcMoney(fim)}</div>
          <div style={{ ...abtc.barra, height: alt(fim), background: 'var(--fenix-navy)' }} />
          <div style={abtc.lab}>Analisado (real)</div>
        </div>
      </div>

      {/* Equivalente tabular obrigatório: a cascata nunca é a única fonte do número. */}
      <table style={abtc.tabela}>
        <tbody>
          {passos.map((p) => (
            <tr key={p.key}>
              <td style={abtc.tdDot}><span style={{ ...abtc.dot, background: p.cor }} /></td>
              <td style={abtc.tdLab}>{p.label}</td>
              <td style={abtc.tdVal} className="fenix-num">{abtcUsd(p.valor)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

const abtc = {
  card: { background: 'var(--bg-surface)', border: '1px solid var(--border-1)',
          borderRadius: 'var(--r-lg, 12px)', padding: '16px 18px', marginBottom: 16 },
  topo: { display: 'flex', justifyContent: 'space-between', gap: 20, marginBottom: 14 },
  eye: { font: '700 9px/1 var(--font-sans)', letterSpacing: '.14em',
         textTransform: 'uppercase', color: 'var(--fg-3)' },
  texto: { font: '500 12px/1.5 var(--font-sans)', color: 'var(--fg-2)', marginTop: 6, maxWidth: 560 },
  totalBox: { textAlign: 'right', flex: 'none' },
  totalNum: { font: '800 24px/1 var(--font-display)', marginTop: 6 },
  totalSub: { font: '500 10px/1 var(--font-sans)', color: 'var(--fg-3)', marginTop: 5 },
  plot: { display: 'flex', alignItems: 'flex-end', gap: 8, height: 168, marginBottom: 10 },
  col: { flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', height: '100%' },
  val: { font: '700 11px/1 var(--font-mono)', textAlign: 'center', marginBottom: 4,
         color: 'var(--fg-1)', fontVariantNumeric: 'tabular-nums' },
  barra: { borderRadius: '4px 4px 0 0' },
  lab: { font: '600 9.5px/1.3 var(--font-sans)', color: 'var(--fg-2)',
         textAlign: 'center', marginTop: 6 },
  labSub: { font: '500 8.5px/1.2 var(--font-sans)', color: 'var(--fg-4)', marginTop: 2 },
  tabela: { width: '100%', borderCollapse: 'collapse', marginTop: 4 },
  tdDot: { width: 16, padding: '3px 0' },
  dot: { display: 'inline-block', width: 8, height: 8, borderRadius: 2 },
  tdLab: { font: '500 11px/1.4 var(--font-sans)', color: 'var(--fg-2)', padding: '3px 0' },
  tdVal: { font: '700 11px/1.4 var(--font-mono)', color: 'var(--fg-1)',
           textAlign: 'right', fontVariantNumeric: 'tabular-nums' },
};

window.AbtCascata = AbtCascata;