// JFJ Affiliate Portal — Pipeline, Commissions, Leaderboard, Assets, Announcements, Link gen, Admin

const { useState: useStateB, useMemo: useMemoB } = React;
const { Icon, fmtMoney, fmtPct, fmtPctRaw, Pill, EntityChip, StagePill, KPI, Card, Button, Sparkline, StageBar } = window;

// ============== PIPELINE ==============
const Pipeline = ({ pipelineView, onViewChange }) => {
  const { REFERRALS, ENTITIES, PIPELINE_STAGES } = window.JFJ;
  const [entityFilter, setEntityFilter] = useStateB('all');
  const [stalledOnly, setStalledOnly] = useStateB(false);

  const filtered = REFERRALS.filter(r => {
    if (entityFilter !== 'all' && r.entity !== entityFilter) return false;
    if (stalledOnly && !r.stalled) return false;
    return true;
  });

  const totals = {
    live: filtered.filter(r => r.stage !== 'won').length,
    won: filtered.filter(r => r.stage === 'won').length,
    stalled: filtered.filter(r => r.stalled).length,
    pendingValue: filtered.filter(r => r.stage !== 'won').reduce((a, r) => a + r.potential, 0),
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs"><span>Pipeline</span></div>
          <h1>Pipeline</h1>
          <p className="mt-12">All referrals across all JFJ entities. Stalled deals need follow-up — they're flagged.</p>
        </div>
        <div className="page-actions">
          <div className="role-toggle">
            <button className={pipelineView === 'card' ? 'active' : ''} onClick={() => onViewChange('card')}>
              <Icon.Card size={12} /> Cards
            </button>
            <button className={pipelineView === 'table' ? 'active' : ''} onClick={() => onViewChange('table')}>
              <Icon.Table size={12} /> Table
            </button>
          </div>
          <Button variant="secondary" leading={<Icon.Send size={14} />}>Export</Button>
        </div>
      </div>

      {/* KPI strip */}
      <div className="kpi-row mb-24">
        <KPI label="Live referrals" value={totals.live} sub="across all entities" />
        <KPI label="Closed won" value={totals.won} sub="all-time" accent="var(--accent)" />
        <KPI label="Pending payout" value={fmtMoney(totals.pendingValue)} sub="if all close" />
        <KPI label="Stalled" value={totals.stalled} sub="needs your follow-up" accent={totals.stalled > 0 ? 'var(--warn)' : undefined} />
      </div>

      {/* Filter row */}
      <div className="row middle gap-8 mb-16" style={{ flexWrap: 'wrap' }}>
        <div className="muted size-12 mono" style={{ marginRight: 4 }}>FILTER</div>
        <button className={`btn btn-${entityFilter === 'all' ? 'secondary' : 'ghost'} btn-sm`} onClick={() => setEntityFilter('all')}>All entities · {REFERRALS.length}</button>
        {ENTITIES.map(e => (
          <button key={e.id} className={`btn btn-${entityFilter === e.id ? 'secondary' : 'ghost'} btn-sm`} onClick={() => setEntityFilter(e.id)}>
            <span style={{ width: 6, height: 6, borderRadius: 2, background: e.color, marginRight: 6 }} />
            {e.short} · {REFERRALS.filter(r => r.entity === e.id).length}
          </button>
        ))}
        <div style={{ width: 1, height: 20, background: 'var(--line)', margin: '0 4px' }} />
        <button className={`btn btn-${stalledOnly ? 'secondary' : 'ghost'} btn-sm`} onClick={() => setStalledOnly(!stalledOnly)}>
          <Icon.Alert size={12} /> Stalled only
        </button>
      </div>

      {pipelineView === 'card' ? (
        <PipelineCards referrals={filtered} stages={PIPELINE_STAGES} />
      ) : (
        <PipelineTable referrals={filtered} />
      )}
    </div>
  );
};

const PipelineCards = ({ referrals, stages }) => (
  <div className="pipe-board">
    {stages.map(s => {
      const refs = referrals.filter(r => r.stage === s.id);
      const isWon = s.id === 'won';
      return (
        <div key={s.id} className="pipe-col">
          <div className="pipe-col-head">
            {isWon && <Icon.Check size={14} />}
            <span>{s.short}</span>
            <span className="pipe-col-count">{refs.length}</span>
          </div>
          <div className="pipe-col-list">
            {refs.length === 0 && <div className="muted size-12" style={{ padding: '20px 4px', textAlign: 'center' }}>—</div>}
            {refs.map(r => {
              const ent = window.JFJ.ENTITY_BY_ID[r.entity];
              return (
                <div key={r.id} className={`pipe-card ${r.stalled ? 'stalled' : ''}`}>
                  <div className="row middle between">
                    <EntityChip entity={ent} />
                    {r.stalled && <Icon.Alert size={12} />}
                  </div>
                  <div className="pipe-card-name">{r.name}</div>
                  <div className="pipe-card-co">{r.company}</div>
                  <div className="pipe-card-foot">
                    <span>{r.days}d</span>
                    <span style={{ color: isWon ? 'var(--accent)' : 'var(--ink-2)' }}>{fmtMoney(r.potential)}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      );
    })}
  </div>
);

const PipelineTable = ({ referrals }) => (
  <Card pad={false}>
    <table className="tbl">
      <thead>
        <tr>
          <th>ID</th>
          <th>Lead</th>
          <th>Entity</th>
          <th>Stage</th>
          <th>Progress</th>
          <th>Source</th>
          <th>Days</th>
          <th className="right">Potential</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {referrals.map(r => {
          const ent = window.JFJ.ENTITY_BY_ID[r.entity];
          const stage = window.JFJ.STAGE_BY_ID[r.stage];
          return (
            <tr key={r.id}>
              <td className="num muted">{r.id}</td>
              <td>
                <div style={{ fontWeight: 500 }}>{r.name}</div>
                <div className="muted size-12">{r.company}</div>
              </td>
              <td><EntityChip entity={ent} /></td>
              <td><StagePill stage={stage} won={r.stage === 'won'} /></td>
              <td style={{ width: 140 }}><StageBar currentStageId={r.stage} won={r.stage === 'won'} stalled={r.stalled} /></td>
              <td className="muted size-12 mono">{r.source}</td>
              <td className="num">
                {r.days}d
                {r.stalled && <span className="tag warn" style={{ marginLeft: 6 }}>Stalled</span>}
              </td>
              <td className="right num" style={{ color: r.stage === 'won' ? 'var(--accent)' : 'var(--ink)', fontWeight: r.stage === 'won' ? 600 : 400 }}>
                {fmtMoney(r.potential)}
              </td>
              <td>
                <Button variant="ghost" size="sm">Follow up</Button>
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  </Card>
);

// ============== COMMISSIONS ==============
const Commissions = () => {
  const { REFERRALS, ENTITIES, ME } = window.JFJ;
  const won = REFERRALS.filter(r => r.stage === 'won');
  const pending = REFERRALS.filter(r => r.stage !== 'won');

  const earnedThisMonth = 12480;
  const lifetime = 38240;
  const nextPayout = 7540;

  // Synthetic monthly history
  const history = [
    { month: 'Dec', earned: 4200 },
    { month: 'Jan', earned: 5850 },
    { month: 'Feb', earned: 7100 },
    { month: 'Mar', earned: 8420 },
    { month: 'Apr', earned: 9300 },
    { month: 'May', earned: 12480 },
  ];
  const max = Math.max(...history.map(h => h.earned));

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs"><span>Commissions</span></div>
          <h1>Commissions</h1>
          <p className="mt-12">Live commission data across all entities. Payouts go out the 15th of every month via ACH.</p>
        </div>
        <Button variant="secondary" leading={<Icon.Settings size={14} />}>Payout settings</Button>
      </div>

      <div className="kpi-row mb-24">
        <KPI label="Earned this month" value={fmtMoney(earnedThisMonth)} delta={0.34} sub="vs. April" accent="var(--accent)" />
        <KPI label="Pending (next payout)" value={fmtMoney(nextPayout)} sub="May 15 · ACH" />
        <KPI label="Lifetime earned" value={fmtMoney(lifetime)} sub="since Mar 2026" />
        <KPI label="Avg deal size" value={fmtMoney(2731)} sub={`across ${won.length} closed`} />
      </div>

      <div className="grid grid-12-8">
        <Card title="Earnings · last 6 months" pad>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 18, height: 180, padding: '12px 4px' }}>
            {history.map((h, i) => (
              <div key={h.month} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                <div className="tabular size-12" style={{ color: i === history.length - 1 ? 'var(--accent)' : 'var(--ink-3)', fontWeight: i === history.length - 1 ? 600 : 400 }}>
                  {fmtMoney(h.earned)}
                </div>
                <div style={{
                  width: '100%', maxWidth: 56,
                  height: `${(h.earned / max) * 130}px`,
                  background: i === history.length - 1 ? 'var(--accent)' : 'var(--surface-3)',
                  borderRadius: '4px 4px 0 0',
                }} />
                <div className="muted size-12">{h.month}</div>
              </div>
            ))}
          </div>
        </Card>

        <Card title="Earnings by entity" pad>
          <div className="col gap-12">
            {ENTITIES.map(e => {
              const eWon = won.filter(r => r.entity === e.id);
              const total = eWon.reduce((a, r) => a + r.potential, 0);
              const pct = total / lifetime;
              return (
                <div key={e.id}>
                  <div className="row middle between mb-8">
                    <EntityChip entity={e} size="md" />
                    <div className="tabular size-13 weight-5">{fmtMoney(total)}</div>
                  </div>
                  <div className="lb-bar" style={{ width: '100%' }}>
                    <div style={{ width: `${pct * 100}%`, background: e.color }} />
                  </div>
                  <div className="row middle between mt-8 muted size-12 tabular">
                    <span>{eWon.length} closed</span>
                    <span>{(pct * 100).toFixed(0)}%</span>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
      </div>

      <Card title="Commission ledger" pad={false} className="mt-24">
        <table className="tbl">
          <thead>
            <tr>
              <th>Date</th>
              <th>Referral</th>
              <th>Entity</th>
              <th>Status</th>
              <th>Type</th>
              <th className="right">Amount</th>
            </tr>
          </thead>
          <tbody>
            {[
              ...won.map(r => ({ ...r, status: 'Paid', date: 'May 1' })),
              ...pending.slice(0, 5).map(r => ({ ...r, status: r.stage === 'invoice' ? 'Pending invoice' : 'Projected', date: '—' })),
            ].slice(0, 10).map((r, i) => {
              const ent = window.JFJ.ENTITY_BY_ID[r.entity];
              return (
                <tr key={i}>
                  <td className="num muted">{r.date}</td>
                  <td>{r.name}</td>
                  <td><EntityChip entity={ent} /></td>
                  <td>
                    {r.status === 'Paid' && <span className="tag pos">Paid</span>}
                    {r.status === 'Pending invoice' && <span className="tag warn">Pending invoice</span>}
                    {r.status === 'Projected' && <span className="tag">Projected</span>}
                  </td>
                  <td className="muted size-12 mono">{ent.payoutModel}</td>
                  <td className="right num" style={{ fontWeight: r.status === 'Paid' ? 600 : 400, color: r.status === 'Paid' ? 'var(--accent)' : 'var(--ink-2)' }}>
                    {r.status === 'Projected' ? fmtMoney(r.potential, { sign: false }) : fmtMoney(r.potential)}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </Card>
    </div>
  );
};

// ============== LEADERBOARD ==============
const Leaderboard = () => {
  const { LEADERBOARD, CONTESTS } = window.JFJ;
  const max = LEADERBOARD[0].gmv;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs"><span>Leaderboard & Contests</span></div>
          <h1>Leaderboard</h1>
          <p className="mt-12">Top affiliates this month by gross merchandise volume across all JFJ entities.</p>
        </div>
        <div className="row gap-8">
          <div className="role-toggle">
            <button className="active">May 2026</button>
            <button>All-time</button>
          </div>
        </div>
      </div>

      {/* Contests */}
      <div className="grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 24 }}>
        {CONTESTS.map(c => {
          const ent = c.entity ? window.JFJ.ENTITY_BY_ID[c.entity] : null;
          return (
            <div key={c.id} className="card" style={{ padding: 18 }}>
              <div className="row middle between mb-12">
                {ent ? <EntityChip entity={ent} /> : <span className="tag pos">All entities</span>}
                <span className="muted size-12 mono">ENDS · {c.endsIn}</span>
              </div>
              <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.01em' }}>{c.title}</div>
              <div className="muted size-12 mt-12">Prize</div>
              <div className="size-13 weight-6 mb-12">{c.prize}</div>
              <div className="divider" style={{ margin: '12px 0' }} />
              <div className="row middle between">
                <div>
                  <div className="muted size-12">Your rank</div>
                  <div className="size-14 weight-6 tabular">{c.myRank ? `#${c.myRank}` : '—'}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div className="muted size-12">Leader</div>
                  <div className="size-13 weight-5">{c.leaderRank}</div>
                  <div className="muted size-12 tabular">{c.leaderValue}</div>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <Card title="Top affiliates · May 2026" pad={false}>
        <div style={{ padding: '6px 16px', borderBottom: '1px solid var(--line)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '32px 1fr 120px 120px 120px', gap: 12, padding: '6px 0', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 500 }}>
            <div>#</div>
            <div>Affiliate</div>
            <div style={{ textAlign: 'right' }}>Deals</div>
            <div></div>
            <div style={{ textAlign: 'right' }}>GMV</div>
          </div>
        </div>
        {LEADERBOARD.map(r => (
          <div key={r.rank} className={`lb-row ${r.you ? 'you' : ''}`} style={{ display: 'grid', gridTemplateColumns: '32px 1fr 120px 120px 120px', gap: 12 }}>
            <div className={`lb-rank ${r.rank <= 3 ? 'top' : ''} ${r.rank === 2 ? 'r2' : ''} ${r.rank === 3 ? 'r3' : ''}`}>{r.rank}</div>
            <div className="lb-name">
              <div className="avatar" style={{ width: 30, height: 30, fontSize: 11, background: r.you ? 'var(--accent)' : 'var(--surface-3)', color: r.you ? 'var(--ink-on-accent)' : 'var(--ink-2)' }}>
                {r.name.split(' ').map(n => n[0]).slice(-2).join('').replace('—', '')}
              </div>
              <div className="col">
                <div style={{ fontWeight: 500, fontSize: 13 }}>{r.name}</div>
                <div className="lb-handle">{r.handle}</div>
              </div>
            </div>
            <div className="num" style={{ textAlign: 'right' }}>{r.deals}</div>
            <div className="lb-bar" style={{ width: '100%' }}><div style={{ width: `${(r.gmv / max) * 100}%` }} /></div>
            <div className="lb-gmv">{fmtMoney(r.gmv)}</div>
          </div>
        ))}
      </Card>
    </div>
  );
};

// ============== ASSETS ==============
const AssetsLibrary = () => {
  const { ASSETS, ENTITIES } = window.JFJ;
  const [kindFilter, setKindFilter] = useStateB('All');
  const [entityFilter, setEntityFilter] = useStateB('all');

  const kinds = ['All', 'SMS', 'Email', 'Script', 'Form', 'Deck'];
  const filtered = ASSETS.filter(a => {
    if (kindFilter !== 'All' && a.kind !== kindFilter) return false;
    if (entityFilter !== 'all' && a.entity !== entityFilter) return false;
    return true;
  });

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs"><span>Marketing assets</span></div>
          <h1>Assets library</h1>
          <p className="mt-12">Pre-approved messages, scripts, decks, and forms. Copy, paste, send. All compliance-checked.</p>
        </div>
        <Button variant="secondary" leading={<Icon.Plus size={14} />}>Request asset</Button>
      </div>

      <div className="row middle gap-8 mb-16" style={{ flexWrap: 'wrap' }}>
        <div className="muted size-12 mono" style={{ marginRight: 4 }}>TYPE</div>
        {kinds.map(k => (
          <button key={k} className={`btn btn-${kindFilter === k ? 'secondary' : 'ghost'} btn-sm`} onClick={() => setKindFilter(k)}>{k}</button>
        ))}
        <div style={{ width: 1, height: 20, background: 'var(--line)', margin: '0 4px' }} />
        <div className="muted size-12 mono" style={{ marginRight: 4 }}>ENTITY</div>
        <button className={`btn btn-${entityFilter === 'all' ? 'secondary' : 'ghost'} btn-sm`} onClick={() => setEntityFilter('all')}>All</button>
        {ENTITIES.map(e => (
          <button key={e.id} className={`btn btn-${entityFilter === e.id ? 'secondary' : 'ghost'} btn-sm`} onClick={() => setEntityFilter(e.id)}>
            <span style={{ width: 6, height: 6, borderRadius: 2, background: e.color, marginRight: 6 }} />
            {e.short}
          </button>
        ))}
      </div>

      <div className="grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        {filtered.map(a => {
          const ent = window.JFJ.ENTITY_BY_ID[a.entity];
          return (
            <div key={a.id} className="asset-card">
              <div className="row middle between">
                <div className="row gap-10 middle">
                  <span className="asset-kind">{a.kind}</span>
                  <span className="muted size-12">·</span>
                  <EntityChip entity={ent} />
                </div>
                <button className="icon-btn"><Icon.Copy size={14} /></button>
              </div>
              <div className="asset-title">{a.title}</div>
              <div className="asset-copy">{a.copy}</div>
              <div className="asset-foot">
                <span>Used {a.uses}× by team</span>
                <Button variant="ghost" size="sm" trailing={<Icon.Chevron size={12} />}>Open</Button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ============== ANNOUNCEMENTS ==============
const Announcements = () => {
  const { ANNOUNCEMENTS } = window.JFJ;
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs"><span>Communications</span></div>
          <h1>Announcements</h1>
          <p className="mt-12">Updates from JFJ HQ — comp plan changes, new offers, training drops, office hours.</p>
        </div>
        <Button variant="secondary" leading={<Icon.Bell size={14} />}>Notification settings</Button>
      </div>

      <Card pad={false}>
        {ANNOUNCEMENTS.map(a => (
          <div key={a.id} className={`ann-row ${a.priority}`}>
            <div className="ann-icon">
              {a.priority === 'high' ? <Icon.Bolt size={16} /> : <Icon.Megaphone size={16} />}
            </div>
            <div className="col" style={{ flex: 1 }}>
              <div className="row middle gap-8 mb-8">
                <span className="ann-title" style={{ marginBottom: 0 }}>{a.title}</span>
                {a.priority === 'high' && <span className="tag pos">Important</span>}
              </div>
              <div className="ann-meta">{a.from.toUpperCase()} · {a.ts}</div>
              <div className="ann-body">{a.body}</div>
            </div>
          </div>
        ))}
      </Card>
    </div>
  );
};

// ============== LINK GENERATOR ==============
const LinkGen = () => {
  const { ENTITIES } = window.JFJ;
  const [eid, setEid] = useStateB(ENTITIES.find(e => e.certified)?.id || ENTITIES[0].id);
  const [campaign, setCampaign] = useStateB('');
  const [copied, setCopied] = useStateB(false);

  const entity = window.JFJ.ENTITY_BY_ID[eid];
  const url = `jfj.aff/${entity.id}/ryanm${campaign ? '?c=' + campaign : ''}`;

  const copy = () => {
    if (navigator.clipboard) navigator.clipboard.writeText('https://' + url).catch(() => {});
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };

  return (
    <div className="page" style={{ maxWidth: 880 }}>
      <div className="page-head">
        <div>
          <div className="crumbs"><span>Affiliate link generator</span></div>
          <h1>Generate referral link</h1>
          <p className="mt-12">Pick an entity, optionally tag a campaign, and grab a trackable link to share. Every click and conversion routes back to your account.</p>
        </div>
      </div>

      <Card pad>
        <div className="col gap-20">
          <div>
            <div className="muted size-12 mono mb-8">SELECT ENTITY</div>
            <div className="grid grid-2" style={{ gap: 8 }}>
              {ENTITIES.map(e => (
                <button
                  key={e.id}
                  onClick={() => e.certified && setEid(e.id)}
                  disabled={!e.certified}
                  className="row middle gap-12"
                  style={{
                    padding: '12px 14px', borderRadius: 8,
                    border: `1px solid ${eid === e.id ? 'var(--accent)' : 'var(--line)'}`,
                    background: eid === e.id ? 'var(--accent-soft)' : 'var(--surface)',
                    color: 'var(--ink)',
                    fontFamily: 'inherit', textAlign: 'left',
                    opacity: e.certified ? 1 : 0.5,
                    cursor: e.certified ? 'pointer' : 'not-allowed',
                  }}
                >
                  <span style={{ width: 10, height: 10, borderRadius: 3, background: e.color }} />
                  <div className="col" style={{ flex: 1 }}>
                    <div className="size-13 weight-6">{e.name}</div>
                    <div className="muted size-12">{e.payoutModel}</div>
                  </div>
                  {!e.certified && <span className="tag warn">Locked</span>}
                  {e.certified && eid === e.id && <Icon.Check size={16} />}
                </button>
              ))}
            </div>
          </div>

          <div>
            <div className="muted size-12 mono mb-8">CAMPAIGN TAG (OPTIONAL)</div>
            <input
              value={campaign}
              onChange={(ev) => setCampaign(ev.target.value.replace(/[^a-z0-9-]/gi, '').toLowerCase())}
              placeholder="e.g. linkedin-may, podcast-ep14"
              style={{
                width: '100%', height: 38, padding: '0 14px',
                background: 'var(--surface-2)', border: '1px solid var(--line)',
                borderRadius: 7, fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink)',
                outline: 'none',
              }}
            />
            <div className="muted size-12 mt-8">Track how each channel performs. Shows up as the source on your pipeline.</div>
          </div>

          <div>
            <div className="muted size-12 mono mb-8">YOUR LINK</div>
            <div className="link-display">
              <Icon.Link size={16} />
              <span className="link-url">https://{url}</span>
              <Button variant={copied ? 'primary' : 'secondary'} size="sm" onClick={copy} leading={copied ? <Icon.Check size={12} /> : <Icon.Copy size={12} />}>
                {copied ? 'Copied' : 'Copy'}
              </Button>
            </div>
          </div>

          <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
            <Button variant="secondary" leading={<Icon.Mail size={14} />}>Open in email</Button>
            <Button variant="secondary" leading={<Icon.Phone size={14} />}>Open in SMS</Button>
            <Button variant="secondary" leading={<Icon.Send size={14} />}>QR code</Button>
            <Button variant="secondary" leading={<Icon.Folder size={14} />}>Browse assets</Button>
          </div>
        </div>
      </Card>

      <Card title="Recent link activity" pad={false} className="mt-24">
        <table className="tbl">
          <thead>
            <tr>
              <th>Link</th><th>Clicks (7d)</th><th>Conversions</th><th>Value</th><th></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="mono size-12">jfj.aff/trusts/ryanm</td>
              <td className="num">142</td>
              <td className="num">7</td>
              <td className="num">{fmtMoney(29400)}</td>
              <td className="right"><Button variant="ghost" size="sm">Stats</Button></td>
            </tr>
            <tr>
              <td className="mono size-12">jfj.aff/tax/ryanm?c=podcast-ep14</td>
              <td className="num">88</td>
              <td className="num">3</td>
              <td className="num">{fmtMoney(8550)}</td>
              <td className="right"><Button variant="ghost" size="sm">Stats</Button></td>
            </tr>
            <tr>
              <td className="mono size-12">jfj.aff/trusts/ryanm?c=linkedin-may</td>
              <td className="num">61</td>
              <td className="num">2</td>
              <td className="num">{fmtMoney(8400)}</td>
              <td className="right"><Button variant="ghost" size="sm">Stats</Button></td>
            </tr>
          </tbody>
        </table>
      </Card>
    </div>
  );
};

// ============== ADMIN VIEW ==============
const AdminView = () => {
  const { ENTITIES, REFERRALS, LEADERBOARD } = window.JFJ;
  const totalAffiliates = 247;
  const activeAffiliates = 184;
  const totalGMV = 1842400;
  const totalPaid = 168320;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">
            <span style={{ color: 'var(--accent)' }}>HQ</span>
            <Icon.Chevron size={12} />
            <span>Overview</span>
          </div>
          <h1>JFJ Affiliate Program · HQ</h1>
          <p className="mt-12">All affiliates, all entities, one operating console.</p>
        </div>
        <div className="row gap-8">
          <Button variant="secondary" leading={<Icon.Plus size={14} />}>New contest</Button>
          <Button variant="primary" leading={<Icon.Megaphone size={14} />}>Send announcement</Button>
        </div>
      </div>

      <div className="kpi-row mb-24">
        <KPI label="Active affiliates" value={activeAffiliates} sub={`of ${totalAffiliates} total`} delta={0.18} accent="var(--accent)" />
        <KPI label="Program GMV · MTD" value={fmtMoney(totalGMV)} delta={0.27} sub="vs. Apr" />
        <KPI label="Paid out · MTD" value={fmtMoney(totalPaid)} sub="next batch May 15" />
        <KPI label="Avg. time to first deal" value="11d" sub="from certification" mono={false} />
      </div>

      <div className="grid grid-12-8">
        <Card title="Entity performance" pad={false}>
          <table className="tbl">
            <thead>
              <tr>
                <th>Entity</th><th>Affiliates</th><th>Live deals</th><th>Won (MTD)</th><th>Avg cycle</th><th className="right">GMV (MTD)</th>
              </tr>
            </thead>
            <tbody>
              {ENTITIES.map(e => {
                const liveCount = REFERRALS.filter(r => r.entity === e.id && r.stage !== 'won').length;
                const wonCount = REFERRALS.filter(r => r.entity === e.id && r.stage === 'won').length;
                const gmv = wonCount * e.avgCommission * 4;
                return (
                  <tr key={e.id}>
                    <td>
                      <div className="row gap-10 middle">
                        <span style={{ width: 8, height: 8, borderRadius: 2, background: e.color }} />
                        <span style={{ fontWeight: 500 }}>{e.name}</span>
                      </div>
                    </td>
                    <td className="num">{Math.floor(20 + Math.random() * 60)}</td>
                    <td className="num">{liveCount * 4}</td>
                    <td className="num">{wonCount * 3}</td>
                    <td className="muted">{e.avgDealCycle}</td>
                    <td className="right num">{fmtMoney(gmv)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>

        <Card title="Top affiliates" pad={false}>
          {LEADERBOARD.slice(0, 6).map(r => (
            <div key={r.rank} className="lb-row" style={{ display: 'grid', gridTemplateColumns: '32px 1fr 120px' }}>
              <div className={`lb-rank ${r.rank <= 3 ? 'top' : ''} ${r.rank === 2 ? 'r2' : ''} ${r.rank === 3 ? 'r3' : ''}`}>{r.rank}</div>
              <div className="lb-name">
                <div className="col">
                  <div style={{ fontWeight: 500, fontSize: 13 }}>{r.name}</div>
                  <div className="lb-handle">{r.handle}</div>
                </div>
              </div>
              <div className="lb-gmv">{fmtMoney(r.gmv)}</div>
            </div>
          ))}
        </Card>
      </div>

      <div className="grid grid-2 mt-24">
        <Card title="Funnel · all affiliates · MTD" pad>
          <div className="col gap-12">
            {[
              { label: 'Lead Captured', value: 1842, pct: 1.0 },
              { label: 'Appointment Set', value: 1104, pct: 0.60 },
              { label: 'Appointment Showed', value: 794, pct: 0.43 },
              { label: 'Proposal Sent', value: 478, pct: 0.26 },
              { label: 'Invoice Sent', value: 312, pct: 0.17 },
              { label: 'Closed Won', value: 248, pct: 0.13 },
            ].map((s, i) => (
              <div key={i}>
                <div className="row middle between mb-8">
                  <span className="size-13">{s.label}</span>
                  <span className="tabular size-13 muted">{s.value.toLocaleString()} · {(s.pct * 100).toFixed(0)}%</span>
                </div>
                <div className="lb-bar" style={{ width: '100%' }}>
                  <div style={{ width: `${s.pct * 100}%`, background: i === 5 ? 'var(--accent)' : 'var(--ink-2)' }} />
                </div>
              </div>
            ))}
          </div>
        </Card>

        <Card title="Things needing your attention" pad={false}>
          <div>
            {[
              { icon: <Icon.Alert size={14} />, label: '12 affiliates not certified for any entity', sub: 'Joined >14d ago' },
              { icon: <Icon.Clock size={14} />, label: '8 deals stalled >30 days', sub: 'Across Trusts and Tax' },
              { icon: <Icon.Cash size={14} />, label: 'May payout batch ready · $168k', sub: 'Approve by May 14' },
              { icon: <Icon.Bolt size={14} />, label: '3 contests ending this week', sub: 'Spring Sprint ends in 6d' },
            ].map((it, i) => (
              <div key={i} className="row middle gap-12" style={{ padding: '14px 18px', borderTop: i ? '1px solid var(--line-2)' : 'none' }}>
                <div style={{ width: 28, height: 28, borderRadius: 7, background: 'var(--surface-2)', color: 'var(--ink-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  {it.icon}
                </div>
                <div className="col" style={{ flex: 1 }}>
                  <div className="size-13 weight-5">{it.label}</div>
                  <div className="muted size-12">{it.sub}</div>
                </div>
                <Button variant="ghost" size="sm" trailing={<Icon.Chevron size={12} />}>Open</Button>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
};

Object.assign(window, { Pipeline, Commissions, Leaderboard, AssetsLibrary, Announcements, LinkGen, AdminView });