// ScrollJob v2 — Affiliate-portal admin (separate Django app)
// Fraud queue · CPA reconciliation · partner statements.

// Affiliate admin uses the same AdminFrame chrome but with an "Affiliate
// portal" context badge in the breadcrumb area to signal it's a separate
// app from the main /admin.

function AffiliateFrame({ active, sub, children }) {
  const AF = window.AdminFrame;
  return (
    <AF active={active} breadcrumbs={['Admin', 'Affiliate portal', sub]}>
      <div style={{
        marginBottom: 18, padding: '10px 14px',
        background: V2.primarySoft, border: `1px solid ${V2.primaryRing}`,
        borderRadius: V2.rMd, display: 'flex', alignItems: 'center', gap: 10,
        fontSize: 12.5, color: V2.primaryInk,
      }}>
        <Icon name="lightning" size={14} color={V2.primary} />
        You're viewing the <strong>Affiliate portal</strong> — separate Django service handling
        partner conversions, fraud and finance reconciliation. Changes here don't affect /admin.
      </div>
      {children}
    </AF>
  );
}

// ─── 1) FRAUD QUEUE ─────────────────────────────────────────────────────
function V2AdminFraudQueueScreen() {
  const items = [
    {
      id: 'CV-4218', score: 0.94, tone: 'danger',
      partner: 'Click Magnet UK', payout: '£14.00', clickAt: '4 min ago',
      flags: ['IP velocity: 24 conversions in 5 minutes', 'User-agent rotation across 8 strings', 'No prior referrer history', 'Datacenter ASN'],
      job: 'Care Assistant — Lavender House',
      utm: 'cpc · clickmagnet-uk · care-bristol-aug',
    },
    {
      id: 'CV-4217', score: 0.82, tone: 'danger',
      partner: 'JobsAroundUK', payout: '£9.50', clickAt: '12 min ago',
      flags: ['Conversion timestamp before click timestamp', '0ms time-on-page', 'Headless browser fingerprint'],
      job: 'Warehouse Operative — Bridgewater',
      utm: 'cpc · jobsarounduk · logistics-mw',
    },
    {
      id: 'CV-4214', score: 0.62, tone: 'warn',
      partner: 'NursingJobs.eu', payout: '£18.00', clickAt: '38 min ago',
      flags: ['VPN exit node', 'New partner (8 days old)'],
      job: 'Registered Nurse — St. Margaret\u2019s',
      utm: 'cpc · nursingjobs-eu · band5',
    },
    {
      id: 'CV-4198', score: 0.51, tone: 'warn',
      partner: 'TechRecruitsHQ', payout: '£12.00', clickAt: '2 hours ago',
      flags: ['Conversion outside business hours', 'Mismatched timezone vs IP location'],
      job: 'Python Engineer — Monzo',
      utm: 'cpc · techrecruits · backend-pro',
    },
  ];
  return (
    <AffiliateFrame active="moderation" sub="Fraud queue">
      <header style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 22, flexWrap: 'wrap', gap: 12,
      }}>
        <div>
          <h1 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
            Conversion fraud queue
          </h1>
          <p style={{ margin: 0, fontSize: 13.5, color: V2.muted }}>
            42 flagged conversions · scored by ML heuristics · auto-hold over score 0.60
          </p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <V2Button variant="secondary" size="sm" icon="sliders">Heuristic rules</V2Button>
          <V2Button variant="primary" size="sm" icon="check">Approve all under 0.50</V2Button>
        </div>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 22 }}>
        <V2Stat label="Auto-blocked · 24h"   value="186" sub="98.4% confirmed fraud" icon="shield" />
        <V2Stat label="Pending review"        value="42"  icon="eye" />
        <V2Stat label="Manual overrides · 24h" value="3"   sub="2 approved · 1 rejected" icon="sliders" />
        <V2Stat label="Saved payout · 30d"    value="£1,842" delta="vs. unfiltered" deltaTone="success" icon="money" />
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 6, borderBottom: `1px solid ${V2.line}`, marginBottom: 14 }}>
        {[['Pending', 42, true], ['Confirmed fraud', 184], ['Manually approved', 28], ['All', 254]].map(([t, n, on]) => (
          <a key={t} style={{
            padding: '10px 14px',
            borderBottom: `2px solid ${on ? V2.primary : 'transparent'}`,
            color: on ? V2.primary : V2.muted, fontWeight: on ? 700 : 500, fontSize: 13,
            marginBottom: -1, textDecoration: 'none',
          }}>{t} <span style={{ color: V2.faint, fontSize: 11 }}>{n}</span></a>
        ))}
      </div>

      {/* Bulk-action bar */}
      <div style={{
        background: V2.ink, color: '#fff', padding: '10px 18px',
        borderRadius: V2.rMd, marginBottom: 12, display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <span style={{ fontSize: 13, fontWeight: 600 }}>2 conversions selected</span>
        <span style={{ flex: 1 }} />
        <button style={smallDarkBtn(V2.success)}>Approve & pay</button>
        <button style={smallDarkBtn(V2.danger, true)}>Reject as fraud</button>
        <button style={smallDarkBtn(V2.primary)}>Override (manual)</button>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map((it) => <FraudCard key={it.id} it={it} />)}
      </div>
    </AffiliateFrame>
  );
}

function smallDarkBtn(color, ghost) {
  return {
    padding: '5px 10px', borderRadius: 6,
    background: ghost ? 'transparent' : color,
    color: ghost ? '#CFD4DC' : '#fff',
    border: ghost ? '1px solid rgba(255,255,255,0.15)' : 'none',
    fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: V2.font,
  };
}

function FraudCard({ it }) {
  const risky = it.tone === 'danger';
  return (
    <article style={{
      background: '#fff',
      border: `1px solid ${risky ? V2.dangerLine : V2.warnLine}`,
      borderRadius: V2.rLg, padding: 18,
      boxShadow: V2.shadowSm,
    }}>
      <header style={{
        display: 'grid', gridTemplateColumns: '1fr auto', gap: 14, marginBottom: 12, alignItems: 'flex-start',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
          <input type="checkbox" style={{ accentColor: V2.primary, width: 16, height: 16 }} />
          <span style={{ fontFamily: V2.fontMono, fontSize: 12, color: V2.muted, fontWeight: 600 }}>{it.id}</span>
          <V2Badge tone={it.tone} size="md">
            ⚠ Risk score <strong style={{ marginLeft: 4 }}>{it.score.toFixed(2)}</strong>
          </V2Badge>
          <V2Badge tone="neutral" size="sm">{it.partner}</V2Badge>
          <span style={{ fontSize: 12.5, color: V2.muted }}>· {it.clickAt}</span>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 18, fontWeight: 800, color: V2.ink, letterSpacing: '-0.02em' }}>{it.payout}</div>
          <div style={{ fontSize: 11.5, color: V2.muted }}>CPA payout</div>
        </div>
      </header>

      <div style={{
        padding: 12, background: V2.bgAlt, borderRadius: V2.rMd, marginBottom: 12,
        display: 'flex', flexDirection: 'column', gap: 4, fontSize: 13,
      }}>
        <div style={{ color: V2.text }}>
          <strong style={{ color: V2.ink }}>Job:</strong> {it.job}
        </div>
        <div style={{ color: V2.muted, fontFamily: V2.fontMono, fontSize: 11.5 }}>
          utm: {it.utm}
        </div>
      </div>

      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 14 }}>
        {it.flags.map((f) => (
          <V2Badge key={f} tone={risky ? 'danger' : 'warn'} size="sm">⚠ {f}</V2Badge>
        ))}
      </div>

      <footer style={{
        paddingTop: 12, borderTop: `1px solid ${V2.lineSoft}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, flexWrap: 'wrap',
      }}>
        <a style={{ color: V2.primary, fontSize: 12.5, fontWeight: 600, textDecoration: 'none' }}>
          Open conversion trace →
        </a>
        <div style={{ display: 'flex', gap: 8 }}>
          <V2Button variant="destructive" size="sm" icon="x">Reject as fraud</V2Button>
          <V2Button variant="secondary" size="sm" icon="sliders">Override (manual)…</V2Button>
          <V2Button variant="primary" size="sm" icon="check">Approve & pay</V2Button>
        </div>
      </footer>
    </article>
  );
}

// ─── 2) RECONCILIATION ──────────────────────────────────────────────────
function V2AdminReconciliationScreen() {
  const disputes = [
    { id: 'CV-4108', partner: 'Indeed UK',     payout: '£14.00', state: 'partner-reported',
      reason: 'Click attribution mismatch — partner says conversion belongs to them',
      decision: null, financeApproval: false },
    { id: 'CV-4099', partner: 'Click Magnet UK',payout: '£12.50', state: 'auto-rejected',
      reason: 'Auto-blocked for IP velocity; partner appealing with cookie chain',
      decision: 'pending', financeApproval: false },
    { id: 'CV-4087', partner: 'NursingJobs.eu',payout: '£18.00', state: 'partner-reported',
      reason: 'Partner attributed click 22 days ago; cookie window 14 days. Edge case.',
      decision: null, financeApproval: false },
    { id: 'CV-4054', partner: 'TechRecruitsHQ',payout: '£12.00', state: 'reconciled',
      reason: 'Mismatched timezone resolved — candidate confirmed click source',
      decision: 'approved', financeApproval: true },
  ];
  return (
    <AffiliateFrame active="moderation" sub="CPA reconciliation">
      <header style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 22, flexWrap: 'wrap', gap: 12,
      }}>
        <div>
          <h1 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
            CPA reconciliation
          </h1>
          <p style={{ margin: 0, fontSize: 13.5, color: V2.muted }}>
            April 2026 cycle · 142 disputed conversions · 24 awaiting finance approval
          </p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <V2Button variant="secondary" size="sm" icon="document">Partner statement preview</V2Button>
          <V2Button variant="primary" size="sm" iconRight="arrow-right">Lock cycle & approve</V2Button>
        </div>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 22 }}>
        <V2Stat label="Cycle"             value="April 2026" sub="Closes 30 Apr 23:59 UTC" icon="clock" />
        <V2Stat label="Disputed"          value="142" delta="−18% vs Mar" icon="eye" />
        <V2Stat label="Net adjustment"    value="−£2,418" sub="Approved reductions" deltaTone="danger" icon="money" />
        <V2Stat label="Finance approval"   value="24 pending" icon="shield" />
      </div>

      {/* Cycle controls */}
      <section style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
        padding: 18, marginBottom: 14,
        display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
      }}>
        <span style={{ fontSize: 13, color: V2.text }}><strong style={{ color: V2.ink }}>Cycle:</strong></span>
        <select defaultValue="2026-04" style={{
          padding: '8px 11px', border: `1px solid ${V2.line}`, borderRadius: 8,
          fontSize: 13, color: V2.ink, background: '#fff', fontFamily: V2.font, outline: 'none',
        }}>
          <option value="2026-04">April 2026 (current)</option>
          <option value="2026-03">March 2026</option>
          <option value="2026-02">February 2026</option>
        </select>
        <span style={{ marginLeft: 10, fontSize: 13, color: V2.text }}><strong style={{ color: V2.ink }}>Partner:</strong></span>
        <select defaultValue="all" style={{
          padding: '8px 11px', border: `1px solid ${V2.line}`, borderRadius: 8,
          fontSize: 13, color: V2.ink, background: '#fff', fontFamily: V2.font, outline: 'none',
        }}>
          <option value="all">All partners (18)</option>
          <option>Indeed UK</option>
          <option>Click Magnet UK</option>
          <option>NursingJobs.eu</option>
        </select>
        <span style={{ flex: 1 }} />
        <span style={{
          padding: '4px 10px', background: V2.warnBg, color: V2.warn,
          border: `1px solid ${V2.warnLine}`, borderRadius: 999,
          fontSize: 12, fontWeight: 700,
        }}>Cycle closes in 14 days</span>
      </section>

      {/* Disputes list */}
      <div style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, overflow: 'hidden',
      }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: V2.bgAlt, borderBottom: `1px solid ${V2.line}` }}>
              {['ID', 'Partner', 'Payout', 'State', 'Reason', 'Decision', 'Finance', ''].map((h) => (
                <th key={h} style={{
                  textAlign: 'left', padding: '12px 14px', color: V2.muted,
                  fontWeight: 700, fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.06em', whiteSpace: 'nowrap',
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {disputes.map((d, i) => (
              <tr key={d.id} style={{
                borderBottom: i < disputes.length - 1 ? `1px solid ${V2.lineSoft}` : 'none',
              }}>
                <td style={{ padding: '14px', fontFamily: V2.fontMono, fontSize: 11.5, color: V2.text }}>{d.id}</td>
                <td style={{ padding: '14px', color: V2.ink, fontWeight: 600 }}>{d.partner}</td>
                <td style={{ padding: '14px', fontWeight: 700, color: V2.ink, fontVariantNumeric: 'tabular-nums' }}>{d.payout}</td>
                <td style={{ padding: '14px' }}>
                  <V2Badge size="sm" tone={
                    d.state === 'reconciled' ? 'success' :
                    d.state === 'auto-rejected' ? 'danger' : 'warn'
                  }>{d.state}</V2Badge>
                </td>
                <td style={{ padding: '14px', color: V2.text, fontSize: 12.5, maxWidth: 360 }}>{d.reason}</td>
                <td style={{ padding: '14px' }}>
                  {d.decision === 'approved' ? <V2Badge tone="success" size="sm" icon="check">Approved</V2Badge>
                    : d.decision === 'pending'  ? <V2Badge tone="warn"    size="sm">Pending appeal</V2Badge>
                    : <V2Button variant="secondary" size="sm">Decide…</V2Button>}
                </td>
                <td style={{ padding: '14px' }}>
                  {d.financeApproval
                    ? <V2Badge tone="success" size="sm" icon="check">Approved</V2Badge>
                    : <V2Badge tone="neutral" size="sm">Awaiting</V2Badge>}
                </td>
                <td style={{ padding: '14px' }}>
                  <a style={{ color: V2.primary, fontWeight: 600, fontSize: 12.5, textDecoration: 'none' }}>Trace →</a>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{
          padding: '14px 22px', borderTop: `1px solid ${V2.line}`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13, color: V2.muted,
        }}>
          <span>Showing 4 of 142 disputes</span>
          <V2Button variant="ghost" size="sm" iconRight="arrow-right">View all</V2Button>
        </div>
      </div>

      {/* Finance approval flow */}
      <section style={{
        marginTop: 22, background: V2.primarySoft, border: `1px solid ${V2.primaryRing}`,
        borderRadius: V2.rLg, padding: 22,
      }}>
        <header style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
          <span style={{
            width: 40, height: 40, borderRadius: 10, background: '#fff',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="shield" size={20} color={V2.primary} />
          </span>
          <div>
            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: V2.primaryInk, letterSpacing: '-0.01em' }}>
              Finance approval needed
            </h3>
            <p style={{ margin: '4px 0 0', fontSize: 12.5, color: V2.text, lineHeight: 1.55 }}>
              24 decisions worth <strong>£842.00</strong> require finance sign-off before April cycle locks.
            </p>
          </div>
          <span style={{ flex: 1 }} />
          <V2Button variant="primary" size="sm" iconRight="arrow-right">Send to finance</V2Button>
        </header>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {[
            { who: 'You · Olha D.',     when: 'Now',         what: 'Reconcile + decide disputes',  state: 'active' },
            { who: 'Finance · Mariia K.',when: 'Next',       what: 'Approve adjustments & sign-off', state: 'next' },
            { who: 'Auto',              when: '30 Apr 23:59', what: 'Lock cycle, issue statements', state: 'pending' },
          ].map((s, i, arr) => (
            <div key={i} style={{
              background: '#fff', border: `1px solid ${s.state === 'active' ? V2.primary : V2.line}`,
              borderRadius: V2.rMd, padding: 14, position: 'relative',
            }}>
              <div style={{ fontSize: 10.5, fontWeight: 700, color: V2.muted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>
                Step {i + 1} · {s.state === 'active' ? 'In progress' : s.state === 'next' ? 'Up next' : 'Pending'}
              </div>
              <div style={{ fontSize: 13, fontWeight: 700, color: V2.ink }}>{s.what}</div>
              <div style={{ fontSize: 12, color: V2.muted, marginTop: 4 }}>{s.who} · {s.when}</div>
            </div>
          ))}
        </div>
      </section>
    </AffiliateFrame>
  );
}

// ─── 3) PARTNER STATEMENTS ──────────────────────────────────────────────
function V2AdminPartnerStatementsScreen() {
  const partners = [
    { name: 'Indeed UK',         total: 18420, conversions: 1842, fraud: 38,  approved: 1804, payout: '£18,420.00', state: 'ready' },
    { name: 'Click Magnet UK',   total: 4218,  conversions: 612,  fraud: 184, approved: 428,  payout: '£4,218.00',  state: 'flagged', flag: '38% fraud rate · attention needed' },
    { name: 'NursingJobs.eu',    total: 12480, conversions: 962,  fraud: 12,  approved: 950,  payout: '£12,480.00', state: 'ready' },
    { name: 'TechRecruitsHQ',    total: 8214,  conversions: 482,  fraud: 18,  approved: 464,  payout: '£8,214.00',  state: 'ready' },
    { name: 'Reed.co.uk',         total: 6128,  conversions: 318,  fraud: 8,   approved: 310,  payout: '£6,128.00',  state: 'ready' },
    { name: 'JobsAroundUK',      total: 2412,  conversions: 218,  fraud: 86,  approved: 132,  payout: '£2,412.00',  state: 'flagged', flag: '39% fraud rate · third strike' },
  ];
  return (
    <AffiliateFrame active="moderation" sub="Partner statements">
      <header style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 22, flexWrap: 'wrap', gap: 12,
      }}>
        <div>
          <h1 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
            Partner statements — April 2026
          </h1>
          <p style={{ margin: 0, fontSize: 13.5, color: V2.muted }}>
            18 partners · £51,872.00 in approved payouts · cycle closes 30 Apr · auto-emails statements on lock
          </p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <V2Button variant="secondary" size="sm" icon="document">Export CSV</V2Button>
          <V2Button variant="secondary" size="sm" icon="document">Export PDF (all)</V2Button>
          <V2Button variant="primary" size="sm" icon="mail">Send statements</V2Button>
        </div>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 22 }}>
        <V2Stat label="Total payout"            value="£51,872" delta="+12% vs Mar" icon="money" />
        <V2Stat label="Net of fraud"            value="£49,454" sub="£2,418 withheld" icon="shield" />
        <V2Stat label="Approved conversions"    value="4,088"   delta="+18%" icon="check" />
        <V2Stat label="Effective CPA"            value="£12.10"  sub="Across all partners" icon="target" />
      </div>

      {/* Statements table */}
      <div style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, overflow: 'hidden',
        marginBottom: 22,
      }}>
        <header style={{
          padding: '14px 22px', borderBottom: `1px solid ${V2.line}`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}>
          <h2 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: V2.ink }}>Per-partner totals</h2>
          <div style={{ display: 'flex', gap: 6 }}>
            {[['All', 18, true], ['Ready', 14], ['Flagged', 4]].map(([t, n, on]) => (
              <button key={t} style={{
                padding: '6px 12px', borderRadius: 6, fontSize: 12, fontWeight: 600,
                border: `1px solid ${on ? V2.ink : V2.line}`,
                background: on ? V2.ink : '#fff', color: on ? '#fff' : V2.text,
                cursor: 'pointer', fontFamily: V2.font,
                display: 'inline-flex', alignItems: 'center', gap: 5,
              }}>{t} <span style={{ fontSize: 11, opacity: 0.7 }}>{n}</span></button>
            ))}
          </div>
        </header>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: V2.bgAlt, borderBottom: `1px solid ${V2.line}` }}>
              {['Partner', 'Conversions', 'Fraud', 'Approved', 'Net payout', 'Status', ''].map((h) => (
                <th key={h} style={{
                  textAlign: 'left', padding: '12px 14px', color: V2.muted,
                  fontWeight: 700, fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.06em', whiteSpace: 'nowrap',
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {partners.map((p, i) => {
              const fraudPct = (p.fraud / p.conversions) * 100;
              return (
                <tr key={p.name} style={{
                  borderBottom: i < partners.length - 1 ? `1px solid ${V2.lineSoft}` : 'none',
                  background: p.state === 'flagged' ? V2.dangerBg + '50' : '#fff',
                }}>
                  <td style={{ padding: '14px' }}>
                    <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>{p.name}</a>
                    {p.flag && (
                      <div style={{ fontSize: 11, color: V2.danger, marginTop: 3, fontWeight: 600 }}>
                        ⚠ {p.flag}
                      </div>
                    )}
                  </td>
                  <td style={{ padding: '14px', color: V2.ink, fontVariantNumeric: 'tabular-nums' }}>{p.conversions.toLocaleString()}</td>
                  <td style={{ padding: '14px', fontVariantNumeric: 'tabular-nums' }}>
                    <span style={{ color: fraudPct > 20 ? V2.danger : V2.muted, fontWeight: 600 }}>
                      {p.fraud} ({fraudPct.toFixed(0)}%)
                    </span>
                  </td>
                  <td style={{ padding: '14px', color: V2.ink, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{p.approved.toLocaleString()}</td>
                  <td style={{ padding: '14px', fontWeight: 700, color: V2.ink, fontVariantNumeric: 'tabular-nums' }}>{p.payout}</td>
                  <td style={{ padding: '14px' }}>
                    {p.state === 'ready'
                      ? <V2Badge tone="success" size="sm" icon="check">Ready to send</V2Badge>
                      : <V2Badge tone="danger" size="sm">Flagged · review</V2Badge>}
                  </td>
                  <td style={{ padding: '14px' }}>
                    <div style={{ display: 'flex', gap: 6 }}>
                      <V2Button variant="ghost" size="sm" icon="eye">Preview</V2Button>
                      <V2Button variant="ghost" size="sm" icon="document">PDF</V2Button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {/* Statement preview card */}
      <section style={{
        background: '#fff', border: `2px solid ${V2.primaryRing}`, borderRadius: V2.rLg,
        padding: 28, boxShadow: V2.shadow,
      }}>
        <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20, flexWrap: 'wrap', gap: 14 }}>
          <div>
            <div style={{
              display: 'inline-flex', padding: '3px 9px', borderRadius: 6,
              background: V2.primarySoft, color: V2.primaryInk,
              fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
              marginBottom: 8,
            }}>Statement preview · Indeed UK</div>
            <h2 style={{ margin: 0, fontSize: 22, fontWeight: 800, color: V2.ink, letterSpacing: '-0.02em' }}>
              ScrollJob × Indeed UK — April 2026
            </h2>
            <div style={{ fontSize: 13, color: V2.muted, marginTop: 4 }}>
              Sent monthly · Statement #ST-2604-IN-UK · invoiced on lock
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 11.5, color: V2.muted, fontWeight: 600 }}>Net payout</div>
            <div style={{ fontSize: 28, fontWeight: 800, color: V2.ink, letterSpacing: '-0.02em' }}>£18,420.00</div>
          </div>
        </header>

        <div style={{
          padding: 16, background: V2.bgAlt, borderRadius: V2.rMd, marginBottom: 16,
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, fontSize: 13,
        }}>
          {[
            ['Conversions',  '1,842'],
            ['Fraud (auto)', '38'],
            ['Approved',     '1,804'],
            ['CPA rate',     '£10.21'],
          ].map(([k, v]) => (
            <div key={k}>
              <div style={{ fontSize: 11, color: V2.muted, fontWeight: 600 }}>{k}</div>
              <div style={{ fontSize: 16, fontWeight: 700, color: V2.ink, marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>{v}</div>
            </div>
          ))}
        </div>

        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5, marginBottom: 16 }}>
          <thead>
            <tr style={{ borderBottom: `1px solid ${V2.line}` }}>
              {['Line item', 'Quantity', 'Rate', 'Subtotal'].map((h) => (
                <th key={h} style={{ textAlign: 'left', padding: '8px 12px', color: V2.muted, fontWeight: 700, fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {[
              ['CPA · Care assistant',    '624',  '£10.00', '£6,240.00'],
              ['CPA · Driver & logistics', '418',  '£8.00',  '£3,344.00'],
              ['CPA · Healthcare other',  '218',  '£14.00', '£3,052.00'],
              ['CPA · Tech',              '186',  '£18.00', '£3,348.00'],
              ['CPA · General',           '358',  '£7.00',  '£2,506.00'],
              ['Auto-detected fraud',     '−38',  '—',      '£0.00'],
            ].map((row, i) => (
              <tr key={i} style={{ borderBottom: `1px solid ${V2.lineSoft}` }}>
                {row.map((v, j) => (
                  <td key={j} style={{
                    padding: '8px 12px',
                    fontWeight: j === 3 ? 700 : 500,
                    color: j === 0 ? V2.ink : V2.text,
                    textAlign: j === 0 ? 'left' : j === 3 ? 'right' : 'left',
                    fontVariantNumeric: 'tabular-nums',
                  }}>{v}</td>
                ))}
              </tr>
            ))}
            <tr>
              <td colSpan={3} style={{ padding: '14px 12px 8px', textAlign: 'right', fontWeight: 700, color: V2.ink }}>Total</td>
              <td style={{ padding: '14px 12px 8px', textAlign: 'right', fontWeight: 800, color: V2.ink, fontSize: 16, fontVariantNumeric: 'tabular-nums' }}>£18,420.00</td>
            </tr>
          </tbody>
        </table>

        <footer style={{
          paddingTop: 14, borderTop: `1px solid ${V2.line}`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap',
        }}>
          <div style={{ fontSize: 12, color: V2.muted, maxWidth: 480, lineHeight: 1.5 }}>
            Payment via SEPA · IBAN on file. Invoice issued automatically on cycle lock. Disputes accepted within 14 days of statement date.
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <V2Button variant="secondary" size="sm" icon="document">Download PDF</V2Button>
            <V2Button variant="primary" size="sm" icon="mail">Send to partner</V2Button>
          </div>
        </footer>
      </section>
    </AffiliateFrame>
  );
}

Object.assign(window, {
  V2AdminFraudQueueScreen, V2AdminReconciliationScreen, V2AdminPartnerStatementsScreen,
});