// Gaveta de diagnóstico por etapa do Teste A/B (spec 2026-07-30). Reusa a moldura de
// painel lateral do KpiDrawer. No Estágio A ela carrega o eixo de devolução e o
// breakdown; os itens do Estágio B (C2−C4, separação do CVR, cascata, cobertura)
// entram como blocos novos aqui, sem mexer no resto.
const abtdPct = (v) => (v == null ? '—' : `${v.toFixed(1)}%`);
const abtdUsd = (v) => (v == null ? '—'
  : `${v >= 0 ? '+' : '−'}$${Math.abs(v).toFixed(2)}`);
const abtdP = (p) => (p == null ? '—' : p < 0.001 ? 'p<0,001' : `p=${p.toFixed(3)}`);
// Vendas é contagem inteira, sem casas — os outros deltas da coluna Δ usam abtPp/abtUsd
// (globais, definidos em AbTest.jsx) ou o abtdUsd local, conforme a unidade da linha.
const abtdInt = (v) => (v == null ? '—' : `${v >= 0 ? '+' : '−'}${Math.abs(v)}`);
// Tom + opacidade do semáforo desta linha, emprestados de ABT_TONE (AbTest.jsx) — nunca
// re-derivados aqui (spec 2026-07-30-feedback-visual).
const abtdTone = (confianca) => ABT_TONE[confianca] || ABT_TONE.inconclusivo;
const abtdMuted = (confianca) => confianca === 'inconclusivo';

// ATENÇÃO: o prop do lado Referência NÃO se chama `ref` — esse nome é reservado pelo
// React (o JSX extrai `ref` para o elemento, nunca entrega em `props`), então
// `{ ref: lref } = props` sempre viria `undefined` e quebraria em `lref.orders`.
// Chama `refEtapa` por fora e `lref` por dentro, como o resto do arquivo já espera.
const AbtStageDrawer = ({ etapa, refEtapa: lref, cur: lcur, onClose }) => {
  if (!etapa) return null;
  // Coluna Δ (spec 2026-07-30-feedback-visual): seta + valor + Δ% por métrica, tom e
  // direção herdados do veredito da etapa. Vendas/CVR/OPP usam `confianca` (eixo de
  // lucro); as duas linhas de devolução usam `confiancaDev`, que já chega do backend com
  // o sinal invertido — devolver menos é sempre a cor boa, mesmo aqui na gaveta.
  const deltaVendas = lcur.orders - lref.orders;
  const linhas = [
    { rot: 'Vendas',           a: lref.orders,   b: lcur.orders,
      delta: <AbtDelta value={abtdInt(deltaVendas)} delta={deltaVendas}
               pct={abtDeltaPct(deltaVendas, lref.orders)}
               tone={abtdTone(etapa.confianca)} muted={abtdMuted(etapa.confianca)} /> },
    { rot: 'CVR',              a: abtdPct(lref.cvr),      b: abtdPct(lcur.cvr),
      delta: <AbtDelta value={abtPp(etapa.deltaCvrPp)} delta={etapa.deltaCvrPp}
               pct={abtDeltaPct(etapa.deltaCvrPp, lref.cvr)}
               tone={abtdTone(etapa.confianca)} muted={abtdMuted(etapa.confianca)} /> },
    { rot: 'Reembolso + CGBK (taxa)', a: abtdPct(lref.devRate),  b: abtdPct(lcur.devRate),
      delta: <AbtDelta value={abtPp(etapa.deltaDevRatePp)} delta={etapa.deltaDevRatePp}
               pct={abtDeltaPct(etapa.deltaDevRatePp, lref.devRate)}
               tone={abtdTone(etapa.confiancaDev)} muted={abtdMuted(etapa.confiancaDev)} /> },
    { rot: 'Reemb+CGBK/lead',   a: `$${lref.devLead.toFixed(2)}`, b: `$${lcur.devLead.toFixed(2)}`,
      delta: <AbtDelta value={abtdUsd(etapa.deltaDevLead)} delta={etapa.deltaDevLead}
               pct={abtDeltaPct(etapa.deltaDevLead, lref.devLead)}
               tone={abtdTone(etapa.confiancaDev)} muted={abtdMuted(etapa.confiancaDev)} /> },
    { rot: 'OPP/lead',         a: `$${lref.oppLead.toFixed(2)}`, b: `$${lcur.oppLead.toFixed(2)}`,
      delta: <AbtDelta value={abtdUsd(etapa.deltaOppLead)} delta={etapa.deltaOppLead}
               pct={etapa.deltaOppLeadPct}
               tone={abtdTone(etapa.confianca)} muted={abtdMuted(etapa.confianca)} /> },
  ];
  return (
    <div style={abtd.backdrop} onClick={onClose}>
      <aside style={abtd.painel} onClick={(e) => e.stopPropagation()}>
        <header style={abtd.head}>
          <div>
            <div style={abtd.eye}>Diagnóstico da etapa</div>
            <div style={abtd.titulo}>{etapa.label}</div>
          </div>
          <button style={abtd.fechar} onClick={onClose} aria-label="Fechar">×</button>
        </header>

        <table style={abtd.tabela}>
          <thead>
            <tr><th style={abtd.th}></th><th style={abtd.th}>Referência</th><th style={abtd.th}>Analisado</th><th style={abtd.th}>Δ</th></tr>
          </thead>
          <tbody>
            {linhas.map((l) => (
              <tr key={l.rot}>
                <td style={abtd.tdRot}>{l.rot}</td>
                <td style={abtd.tdNum} className="fenix-num">{l.a}</td>
                <td style={abtd.tdNum} className="fenix-num">{l.b}</td>
                <td style={abtd.tdNum} className="fenix-num">{l.delta}</td>
              </tr>
            ))}
          </tbody>
        </table>

        <div style={abtd.bloco}>
          <div style={abtd.eye}>Reembolso + CGBK</div>
          <div style={abtd.txt}>
            {abtdPct(lref.devRate)} → <b>{abtdPct(lcur.devRate)}</b>{' '}
            ({abtdUsd(etapa.deltaDevLead)}/lead) · {abtdP(etapa.zTestDev.pValue)}
          </div>
          {/* Composição: as duas parcelas que ENTRAM na métrica, e o cancelamento como
              contexto declarado do lado de fora. Mostrar o excluído é o que permite
              conferir esta tela contra o resto do dashboard, que soma os três. */}
          <div style={abtd.txtFraco}>
            referência: {lref.refunds} reembolso(s) + {lref.chargebacks} chargeback(s)
            {' '}= <b>{lref.devolucoes}</b>
            <span style={abtd.fora}> · {lref.cancelamentos} cancelamento(s) fora da conta</span>
          </div>
          <div style={abtd.txtFraco}>
            analisado: {lcur.refunds} reembolso(s) + {lcur.chargebacks} chargeback(s)
            {' '}= <b>{lcur.devolucoes}</b>
            <span style={abtd.fora}> · {lcur.cancelamentos} cancelamento(s) fora da conta</span>
          </div>
        </div>

        {lcur.porCohort.some((c) => c.devRateHerdada) && (
          <div style={abtd.aviso}>
            Algum cohort tem menos de 10 pedidos e herdou a taxa de devolução da etapa —
            a taxa própria dele seria ruído amplificado em dólares.
          </div>
        )}
      </aside>
    </div>
  );
};

const abtd = {
  backdrop: { position: 'fixed', inset: 0, background: 'rgba(1,27,54,.34)', zIndex: 90 },
  painel: { position: 'absolute', top: 0, right: 0, bottom: 0, width: 'min(440px, 92vw)',
            background: 'var(--bg-surface)', borderLeft: '1px solid var(--border-1)',
            padding: '20px 22px', overflowY: 'auto' },
  head: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 },
  eye: { font: '700 9px/1 var(--font-sans)', letterSpacing: '.14em',
         textTransform: 'uppercase', color: 'var(--fg-3)' },
  titulo: { font: '800 17px/1.2 var(--font-display)', color: 'var(--fg-1)', marginTop: 6 },
  fechar: { border: 0, background: 'transparent', font: '400 22px/1 var(--font-sans)',
            color: 'var(--fg-3)', cursor: 'pointer', padding: 0 },
  tabela: { width: '100%', borderCollapse: 'collapse', marginBottom: 16 },
  th: { font: '700 9px/1 var(--font-sans)', letterSpacing: '.08em', textTransform: 'uppercase',
        color: 'var(--fg-3)', textAlign: 'right', padding: '6px 6px', borderBottom: '1px solid var(--border-1)' },
  tdRot: { font: '500 11px/1.4 var(--font-sans)', color: 'var(--fg-2)', padding: '6px 6px' },
  tdNum: { font: '600 11px/1.4 var(--font-mono)', color: 'var(--fg-1)', textAlign: 'right',
           padding: '6px 6px', borderBottom: '1px solid var(--gray-100)', fontVariantNumeric: 'tabular-nums' },
  bloco: { background: 'var(--bg-sunken)', borderRadius: 8, padding: '11px 13px', marginBottom: 12 },
  txt: { font: '500 12px/1.5 var(--font-sans)', color: 'var(--fg-1)', marginTop: 6 },
  txtFraco: { font: '500 10.5px/1.5 var(--font-sans)', color: 'var(--fg-3)', marginTop: 3 },
  // Cancelamento é contexto, não parcela: fica mais apagado que o resto da linha
  // para o olho não somá-lo ao total por engano.
  fora: { color: 'var(--fg-4)' },
  aviso: { border: '1px solid var(--warning)', background: 'var(--warning-bg)', borderRadius: 8,
           padding: '9px 11px', font: '500 11px/1.5 var(--font-sans)', color: 'var(--fg-2)' },
};

window.AbtStageDrawer = AbtStageDrawer;