// CPA Pago vs Autorizado table (item 2) + AOV por Plataforma card (item ✓).

// ---- CPA reconciliation table ------------------------------------------
const CpaTable = ({ rows, onSelect }) => {
  // delta = paid − authorized. Positive = over the authorized cap (red).
  const data = rows.map(a=>{
    const over = a.cpaPaid - a.cpaAuthorized;
    const pct = a.cpaAuthorized ? over / a.cpaAuthorized * 100 : 0;
    return { ...a, over, pct };
  }).sort((x,y)=>y.pct-x.pct);

  const breaches = data.filter(d=>d.over > 0).length;
  const totalAuth = data.reduce((s,d)=>s+d.cpaAuthorized,0);
  const totalPaid = data.reduce((s,d)=>s+d.cpaPaid,0);
  const totalPct = totalAuth ? (totalPaid-totalAuth)/totalAuth*100 : 0;

  return (
    <div style={cp.wrap}>
      <div style={cp.head}>
        <div>
          <div style={cp.eye}>Conciliação · CPA</div>
          <div style={cp.title}>CPA Pago vs. Autorizado</div>
        </div>
        <div style={cp.headRight}>
          <span style={{...cp.budgetChip, ...(totalPct>0?cp.chipOver:cp.chipOk)}}>
            <Icon name={totalPct>0?'arrowUp':'arrowDown'} size={12}/>
            {SIGN(totalPct)} no agregado
          </span>
          <span style={cp.breachChip}>{breaches} acima do teto</span>
        </div>
      </div>
      <div style={cp.scroll}>
        <table style={cp.table}>
          <thead><tr>
            <th style={{...cp.th, ...cp.thLeft, paddingLeft:22}}>Afiliado</th>
            <th style={cp.th}>CPA Autorizado</th>
            <th style={cp.th}>CPA Pago</th>
            <th style={cp.th}>Δ Valor</th>
            <th style={{...cp.th, paddingRight:22}}>Δ % vs. autorizado</th>
          </tr></thead>
          <tbody>
            {data.map(d=>{
              const over = d.over > 0;
              return (
                <tr key={d.platform + '·' + d.name} style={cp.tr} onClick={()=>onSelect&&onSelect(d)}
                  onMouseEnter={e=>e.currentTarget.style.background='var(--gray-50)'}
                  onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                  <td style={{...cp.td, ...cp.tdLeft, paddingLeft:22}}>
                    <div style={cp.aff}>
                      <div style={{...cp.av, background:d.avatar}}>{initials(d.name)}</div>
                      <div>
                        <div style={cp.name}>{d.name}</div>
                        <div style={cp.idline}>
                          <span style={cp.id}>{d.id}</span>
                          <span style={cp.rate}>{USD(d.cpaRatePaid)}/venda</span>
                        </div>
                      </div>
                    </div>
                  </td>
                  <td style={cp.td} className="fenix-num">{USD(d.cpaAuthorized)}</td>
                  <td style={{...cp.td, fontWeight:700, color:over?'var(--negative)':'var(--fg-1)'}} className="fenix-num">{USD(d.cpaPaid)}</td>
                  <td style={{...cp.td, color:over?'var(--negative)':'var(--positive)'}} className="fenix-num">
                    {over?'+':'−'}{USD(Math.abs(d.over))}
                  </td>
                  <td style={{...cp.td, paddingRight:22}}>
                    <span style={{...cp.pctChip, ...(over?cp.chipOver:cp.chipOk)}}>
                      <Icon name={over?'arrowUp':'arrowDown'} size={11}/>
                      {SIGN(d.pct)}
                    </span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// ---- AOV por plataforma (with M/M variation) ---------------------------
const AovByPlatform = ({ rows }) => {
  // Peso = ordens FE (checkouts): Σ(aov×feO)/ΣfeO reconstitui (ΣFE+ΣBE)×(1−7%)/ΣfeO exato
  // (specs 2026-07-10/2026-07-17 — os aov de entrada já são líquidos; sem fator extra aqui).
  const agg = (set) => {
    const w = (a) => a.feOrders ?? a.orders;
    const feo = set.reduce((s,a)=>s+w(a),0) || 1;
    const aov = set.reduce((s,a)=>s+a.aov*w(a),0) / feo;
    const dlt = set.reduce((s,a)=>s+a.aovDelta*w(a),0) / feo;
    return { aov, dlt };
  };
  const groups = Object.values(PLATFORM).map(p=>({
    key:p.key, label:p.label, color:p.color,
    ...agg(rows.filter(a=>a.platform===p.key)),
  })).filter(g=>g.aov>0);
  const all = agg(rows);

  return (
    <div style={cp.aovCard}>
      <div style={cp.head} className="aov-head">
        <div>
          <div style={cp.eye}>Ticket médio</div>
          <div style={cp.title}>AOV por Plataforma</div>
        </div>
      </div>
      <div style={cp.aovHero}>
        <span style={cp.aovHeroLab}>AOV médio · geral</span>
        <div style={cp.aovHeroRow}>
          <span style={cp.aovHeroVal} className="fenix-num">{USD(all.aov)}</span>
          <span style={{...cp.mm, color:all.dlt>=0?'var(--positive)':'var(--negative)', background:all.dlt>=0?'var(--positive-bg)':'var(--negative-bg)'}}>
            <Icon name={all.dlt>=0?'arrowUp':'arrowDown'} size={12}/>{SIGN(all.dlt)} M/M
          </span>
        </div>
      </div>
      <div style={cp.aovList}>
        {groups.map(g=>(
          <div key={g.key} style={cp.aovRow}>
            <span style={cp.aovName}><span style={{...cp.dot, background:g.color}}/>{g.label}</span>
            <span style={cp.aovVal} className="fenix-num">{USD(g.aov)}</span>
            <span style={{...cp.mmSm, color:g.dlt>=0?'var(--positive)':'var(--negative)'}}>
              {g.dlt>=0?'▲':'▼'} {Math.abs(g.dlt).toLocaleString('pt-BR',{minimumFractionDigits:1,maximumFractionDigits:1})}%
            </span>
          </div>
        ))}
      </div>
    </div>
  );
};

const cp = {
  wrap:{ background:'#fff', border:'1px solid var(--border-1)', borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-sm)', overflow:'hidden' },
  head:{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', padding:'18px 22px', borderBottom:'1px solid var(--border-1)', gap:14, flexWrap:'wrap' },
  eye:{ font:'var(--text-label)', letterSpacing:'.05em', textTransform:'uppercase', color:'var(--fg-3)' },
  title:{ font:'var(--text-h3)', color:'var(--fg-1)', marginTop:4 },
  headRight:{ display:'flex', alignItems:'center', gap:9, flexWrap:'wrap' },
  budgetChip:{ display:'inline-flex', alignItems:'center', gap:5, font:'700 11.5px/1 var(--font-mono)', padding:'7px 11px', borderRadius:'var(--r-pill)' },
  breachChip:{ font:'600 11px/1 var(--font-mono)', color:'var(--fg-2)', background:'var(--bg-sunken)', padding:'7px 11px', borderRadius:'var(--r-pill)', whiteSpace:'nowrap' },
  chipOver:{ color:'var(--negative)', background:'var(--negative-bg)' },
  chipOk:{ color:'var(--positive)', background:'var(--positive-bg)' },
  scroll:{ maxHeight:430, overflowY:'auto', overflowX:'auto' },
  table:{ width:'100%', borderCollapse:'collapse', minWidth:620 },
  th:{ font:'700 10.5px/1 var(--font-sans)', letterSpacing:'.04em', textTransform:'uppercase', color:'var(--fg-3)',
    padding:'12px 14px', background:'var(--bg-sunken)', borderBottom:'1px solid var(--border-2)', whiteSpace:'nowrap',
    textAlign:'right', position:'sticky', top:0, zIndex:2 },
  thLeft:{ textAlign:'left' },
  tr:{ cursor:'pointer', transition:'background .12s' },
  td:{ padding:'11px 14px', borderBottom:'1px solid var(--border-1)', font:'var(--text-mono-sm)', color:'var(--fg-1)', textAlign:'right', whiteSpace:'nowrap' },
  tdLeft:{ textAlign:'left' },
  aff:{ display:'flex', alignItems:'center', gap:11 },
  av:{ width:32, height:32, borderRadius:'50%', color:'#F6E9E0', font:'700 11px/1 var(--font-sans)', display:'flex', alignItems:'center', justifyContent:'center', flex:'none' },
  name:{ font:'700 12.5px/1.1 var(--font-mono)', color:'var(--fg-1)' },
  idline:{ display:'flex', alignItems:'center', gap:8, marginTop:4 },
  id:{ font:'10.5px/1 var(--font-mono)', color:'var(--fg-4)' },
  rate:{ font:'10.5px/1 var(--font-mono)', color:'var(--fg-3)' },
  pctChip:{ display:'inline-flex', alignItems:'center', gap:4, font:'700 11.5px/1 var(--font-mono)', padding:'5px 10px', borderRadius:'var(--r-pill)' },

  aovCard:{ background:'#fff', border:'1px solid var(--border-1)', borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-sm)', overflow:'hidden', display:'flex', flexDirection:'column' },
  aovHero:{ background:'var(--fenix-navy)', margin:'18px 18px 0', borderRadius:'var(--r-md)', padding:'16px 18px' },
  aovHeroLab:{ font:'var(--text-label)', letterSpacing:'.06em', textTransform:'uppercase', color:'#FFA866' },
  aovHeroRow:{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:12, marginTop:9, flexWrap:'wrap' },
  aovHeroVal:{ font:'800 30px/1 var(--font-num)', color:'#F6E9E0', letterSpacing:'-.01em', fontVariantNumeric:'tabular-nums' },
  mm:{ display:'inline-flex', alignItems:'center', gap:4, font:'700 11.5px/1 var(--font-mono)', padding:'5px 9px', borderRadius:'var(--r-pill)' },
  aovList:{ display:'flex', flexDirection:'column', padding:'8px 18px 18px' },
  aovRow:{ display:'flex', alignItems:'center', gap:12, padding:'13px 2px', borderBottom:'1px solid var(--border-1)' },
  dot:{ width:9, height:9, borderRadius:'50%', flex:'none' },
  aovName:{ display:'inline-flex', alignItems:'center', gap:9, font:'var(--text-body-sm)', fontWeight:600, color:'var(--fg-1)', flex:1 },
  aovVal:{ font:'800 15px/1 var(--font-mono)', color:'var(--fg-1)' },
  mmSm:{ font:'700 11.5px/1 var(--font-mono)', width:66, textAlign:'right' },
};

Object.assign(window, { CpaTable, AovByPlatform });