// AOV Tracker (spec 2026-07-21) — tabela expansível no padrão da Performance por Afiliado
// (AffiliateMonitorTable): top 10 por receita + busca server-side (q debounced no App).
// Linha = afiliado (AOV · Receita · Pedidos · % Refund · Gorduras); chevron expande →
// sub-linhas por produto com as MESMAS colunas. Gordura por produto é RATEADA pela
// participação na receita (nota no expandido) — não é medida por produto.

const ATK_PALETTE = ['#FD7119', '#303880', '#1F9D6B', '#8A5BD6', '#2C9CC4', '#E0922B', '#D8453B', '#16315C'];
const ATK_COLS = [['aov', 'AOV'], ['revenue', 'Receita'], ['orders', 'Pedidos'], ['refundRate', '% Refund'], ['gordura', 'Gorduras']];

const AovTracker = ({ data, query, setQuery, searching }) => {
  const [open, setOpen] = React.useState(() => new Set());
  const [sortKey, setSortKey] = React.useState('revenue');
  const [dir, setDir] = React.useState(-1);
  const rows = (data && data.rows) || [];
  const sortBy = (k) => k === sortKey ? setDir(-dir) : (setSortKey(k), setDir(-1));
  const list = React.useMemo(() =>
    rows.slice().sort((a, b) => sortKey === 'name'
      ? a.name.localeCompare(b.name) * (-dir)
      : (((a[sortKey] || 0) - (b[sortKey] || 0)) * dir)),
    [rows, sortKey, dir]);
  const toggle = (name) => setOpen(prev => {
    const n = new Set(prev); if (n.has(name)) n.delete(name); else n.add(name); return n;
  });

  const ind = (k) => sortKey === k ? (dir < 0 ? ' ▾' : ' ▴') : '';
  const th = (k, label, left) => (
    <th key={k} onClick={() => sortBy(k)} style={{ position: left ? 'sticky' : 'static', left: left ? 0 : 'auto', zIndex: left ? 2 : 1, background: '#fff',
      textAlign: left ? 'left' : 'right', font: '600 11px/1 var(--font-sans)', letterSpacing: '.03em', textTransform: 'uppercase',
      color: 'var(--fg-3)', padding: '13px 14px', borderBottom: '1px solid var(--border-2)', whiteSpace: 'nowrap', cursor: 'pointer', userSelect: 'none' }}>
      {label}{ind(k)}</th>
  );
  const td = { padding: '11px 14px', borderBottom: '1px solid var(--border-1)', textAlign: 'right', whiteSpace: 'nowrap', font: 'var(--text-body-sm)', fontFamily: 'var(--font-num)', fontVariantNumeric: 'tabular-nums' };

  return (
    <div style={{ background: '#fff', border: '1px solid var(--border-1)', borderRadius: 'var(--r-lg)', boxShadow: 'var(--shadow-sm)', overflow: 'hidden' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 18px', borderBottom: '1px solid var(--border-1)', gap: 16 }}>
        <div>
          <div style={{ font: '600 10px/1 var(--font-sans)', letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>AOV Tracker</div>
          <div style={{ font: 'var(--text-h3)', color: 'var(--fg-1)', marginTop: 4 }}>AOV por afiliado &amp; produto</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, border: '1px solid var(--border-2)', borderRadius: 'var(--r-md)', padding: '9px 12px', width: 260 }}>
          <Icon name="search" size={15} color="var(--fg-3)" />
          <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Buscar afiliado…"
            style={{ border: 0, outline: 0, font: 'var(--text-body-sm)', color: 'var(--fg-1)', flex: 1, background: 'transparent' }} />
          {searching && <Spinner size={14} />}
        </div>
      </div>
      <div style={{ overflowX: 'auto' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 860 }}>
          <thead><tr>
            {th('name', 'Afiliado', true)}
            {ATK_COLS.map(([k, l]) => th(k, l))}
            <th style={{ width: 44, borderBottom: '1px solid var(--border-2)', background: '#fff' }} />
          </tr></thead>
          <tbody>
            {list.map((a, i) => {
              const rh = refundHealth(a.refundRate || 0);
              const isOpen = open.has(a.name);
              const prods = a.produtos || [];
              return (
                <React.Fragment key={a.name}>
                  <tr onClick={() => toggle(a.name)} style={{ cursor: 'pointer', background: '#fff' }}
                    onMouseEnter={e => e.currentTarget.style.background = 'var(--gray-50)'}
                    onMouseLeave={e => e.currentTarget.style.background = '#fff'}>
                    <td style={{ position: 'sticky', left: 0, zIndex: 1, background: 'inherit', padding: '10px 14px', whiteSpace: 'nowrap' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                        <span style={{ font: '700 11px/1 var(--font-mono)', color: 'var(--fg-4)', width: 18 }}>{String(i + 1).padStart(2, '0')}</span>
                        <div style={{ width: 32, height: 32, borderRadius: 9, background: ATK_PALETTE[i % ATK_PALETTE.length], color: '#fff', font: '800 11px/1 var(--font-sans)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>{initials(a.name)}</div>
                        <span style={{ font: 'var(--text-h4)', color: 'var(--fg-1)' }}
                          onClick={e => { e.stopPropagation(); gotoAffiliate({ platform: 'buygoods', name: a.name }); }}
                          title="Abrir a página do afiliado"
                          onMouseEnter={e => e.currentTarget.style.textDecoration = 'underline'}
                          onMouseLeave={e => e.currentTarget.style.textDecoration = 'none'}>
                          {a.name}
                        </span>
                      </div>
                    </td>
                    <td style={{ ...td, font: '700 13px/1 var(--font-num)', color: 'var(--fg-1)' }} className="fenix-num">{USD(a.aov || 0)}</td>
                    <td style={td} className="fenix-num">{USDk(a.revenue || 0)}</td>
                    <td style={td} className="fenix-num">{NUM(a.orders || 0)}</td>
                    <td style={{ ...td, color: rh.color, fontWeight: 700 }} className="fenix-num">{PCT(a.refundRate || 0)}</td>
                    <td style={td} className="fenix-num">{USDk(a.gordura || 0)}</td>
                    <td style={{ ...td, textAlign: 'center' }}>
                      <Icon name="chevronDown" size={16} color="var(--fg-3)"
                        style={{ transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform .18s' }} />
                    </td>
                  </tr>
                  {isOpen && prods.map(p => {
                    const ph = refundHealth(p.refundRate || 0);
                    return (
                      <tr key={a.name + '·' + p.name} style={{ background: 'var(--gray-50)' }}>
                        <td style={{ position: 'sticky', left: 0, zIndex: 1, background: 'var(--gray-50)', padding: '8px 14px 8px 58px', whiteSpace: 'nowrap' }}>
                          <span style={{ font: '600 12.5px/1.2 var(--font-sans)', color: 'var(--fg-2)', cursor: 'pointer' }}
                            onClick={() => gotoProduct(p.name)} title="Abrir a página do produto"
                            onMouseEnter={e => e.currentTarget.style.textDecoration = 'underline'}
                            onMouseLeave={e => e.currentTarget.style.textDecoration = 'none'}>
                            {p.name}<Icon name="chevron" size={11} color="var(--fg-3)" style={{ marginLeft: 4, verticalAlign: '-1px' }} />
                          </span>
                        </td>
                        <td style={{ ...td, padding: '8px 14px' }} className="fenix-num">{USD(p.aov || 0)}</td>
                        <td style={{ ...td, padding: '8px 14px' }} className="fenix-num">{USDk(p.revenue || 0)}</td>
                        <td style={{ ...td, padding: '8px 14px' }} className="fenix-num">{NUM(p.orders || 0)}</td>
                        <td style={{ ...td, padding: '8px 14px', color: ph.color, fontWeight: 700 }} className="fenix-num">{PCT(p.refundRate || 0)}</td>
                        <td style={{ ...td, padding: '8px 14px' }} className="fenix-num">{USDk(p.gordura || 0)}</td>
                        <td style={{ borderBottom: '1px solid var(--border-1)' }} />
                      </tr>
                    );
                  })}
                  {isOpen && (
                    <tr style={{ background: 'var(--gray-50)' }}>
                      <td colSpan={7} style={{ padding: '6px 14px 10px 58px', borderBottom: '1px solid var(--border-1)', font: '500 10.5px/1.4 var(--font-sans)', color: 'var(--fg-4)' }}>
                        Gordura por produto rateada pela participação na receita do afiliado — não é medida por produto.
                      </td>
                    </tr>
                  )}
                </React.Fragment>
              );
            })}
            {!list.length && (
              <tr><td colSpan={7} style={{ padding: '22px 18px', font: 'var(--text-body-sm)', color: 'var(--fg-3)' }}>
                Nenhum afiliado com venda no período{query ? ' para essa busca' : ''}.</td></tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

Object.assign(window, { AovTracker });