// payment.jsx — Checkout flow for mentor sessions, evaluations, and plan changes
// Also includes the Admin Dashboard (insights + payouts).

const { useState: useStateP, useEffect: useEffectP } = React;
const { Card, Chip, DisplayHeading } = window.LAUNCH_SCREENS_1;

// ────────────────────────────────────────────────────────
// Pricing catalog — what can be purchased
// ────────────────────────────────────────────────────────
const PRICING = {
  'mentor-jay':   { label: '1:1 SESSION · JAY BRUNSWICK', sub: '60 min coaching · $100/hr', price: 100, kind: 'session' },
  'mentor-pg':    { label: '1:1 SESSION · PG BANKER',     sub: '60 min coaching · $100/hr', price: 100, kind: 'session' },
  'quick-score':  { label: 'QUICK SCORE EVALUATION',      sub: '5-category rubric · score /50 · 40+ unlocks rewards', price: 11, kind: 'eval' },
  'full-review':  { label: 'IN-DEPTH EVALUATION',          sub: 'Full written breakdown + revision notes · 5 days', price: 40, kind: 'eval' },
  'subscription': { label: 'LAUNCH ORBIT · MEMBERSHIP',    sub: 'Update card on file · renews monthly', price: 99, kind: 'plan' },
  'sub-basic':    { label: 'BASIC MEMBERSHIP',             sub: 'Full Feed access + 1 free Quick review/mo · 30 days', price: 9.99,  kind: 'sub', plan: 'basic' },
  'sub-vip':      { label: 'VIP MEMBERSHIP',               sub: '2 free In-Depth reviews + 1 coach class/mo · 30 days', price: 19.99, kind: 'sub', plan: 'vip' },
};

// ────────────────────────────────────────────────────────
// PaymentScreen — checkout / pay for services
// ────────────────────────────────────────────────────────
function PaymentScreen({ theme, item = 'mentor-jay', bookingId = null, onBack, onSuccess }) {
  // Known catalog items resolve instantly. For a coach session booked with a
  // coach added in Supabase ('mentor-<uuid>'), build the product from the
  // coaches table so the label/price are right.
  const isMentorItem = typeof item === 'string' && item.indexOf('mentor-') === 0;
  const [product, setProduct] = useStateP(
    PRICING[item] || (isMentorItem
      ? { label: '1:1 SESSION', sub: '60 min coaching', price: 100, kind: 'session' }
      : PRICING['mentor-jay'])
  );
  useEffectP(() => {
    if (PRICING[item] || !isMentorItem) return;
    let alive = true;
    const apply = (c) => {
      if (c && alive) setProduct({
        label: '1:1 SESSION · ' + String(c.name).toUpperCase(),
        sub: '60 min coaching · $' + (c.rate || 100) + '/hr',
        price: c.rate || 100, kind: 'session',
      });
    };
    // Try the in-memory cache first, then a fresh fetch.
    const cached = window.LAUNCH_USER.coachByItem && window.LAUNCH_USER.coachByItem(item);
    if (cached) { apply(cached); return; }
    if (window.LAUNCH_USER.fetchCoaches) {
      window.LAUNCH_USER.fetchCoaches().then(() => apply(
        window.LAUNCH_USER.coachByItem && window.LAUNCH_USER.coachByItem(item)
      ));
    }
    return () => { alive = false; };
  }, [item]);
  const [method, setMethod] = useStateP('card');
  const [card, setCard] = useStateP({ num: '4242 4242 4242 4242', exp: '08/28', cvc: '824', name: 'Maya Stokes' });
  const [tip, setTip] = useStateP(0);
  const [processing, setProcessing] = useStateP(false);
  const [payErr, setPayErr] = useStateP(null);

  const subtotal = product.price;
  const total = subtotal + tip;

  const pay = async () => {
    setProcessing(true); setPayErr(null);
    // Subscription → activate the 30-day plan period (in Supabase / locally).
    if (product.kind === 'sub' && product.plan && window.LAUNCH_USER.subscribe) {
      const r = await window.LAUNCH_USER.subscribe(product.plan);
      setProcessing(false);
      if (r && r.ok) { onSuccess && onSuccess(product, total); }
      else { setPayErr((r && r.error) || 'Could not activate the plan.'); }
      return;
    }
    // Live mode → real Stripe Checkout (redirects to Stripe and back).
    if (window.LAUNCH_USER.isConfigured()) {
      const res = await window.LAUNCH_USER.startCheckout({ item, bookingId });
      if (res && res.error) { setProcessing(false); setPayErr(res.error); return; }
      // Covered fully by account credit → no Stripe redirect; it's already done.
      if (res && res.done) { setProcessing(false); onSuccess && onSuccess(product, total); return; }
      return; // leaving the page for Stripe
    }
    // Demo mode → simulated charge.
    setTimeout(() => { setProcessing(false); onSuccess && onSuccess(product, total); }, 1400);
  };

  return (
    <div style={{ paddingBottom: 130, position: 'relative' }}>
      {/* Top bar */}
      <div style={{
        paddingTop: 58, paddingBottom: 8, paddingLeft: theme.pad, paddingRight: theme.pad,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <button onClick={onBack} style={{
          width: 38, height: 38, borderRadius: 12,
          background: theme.surface, border: `1px solid ${theme.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M9 2L4 7l5 5" stroke={theme.text} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <div style={{
          padding: '6px 10px', borderRadius: 99,
          background: theme.surface2, color: theme.muted,
          fontFamily: theme.fontMono, fontSize: 10, letterSpacing: 1, fontWeight: 700,
          display: 'flex', alignItems: 'center', gap: 6,
        }}>🔒 SECURE · STRIPE</div>
      </div>

      <div style={{ padding: `4px ${theme.pad}px 0` }}>
        <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.accent, letterSpacing: 1, fontWeight: 700 }}>★ CHECKOUT</div>
        <DisplayHeading theme={theme} size={32}>CONFIRM<br/>& PAY</DisplayHeading>
      </div>

      {/* Order summary */}
      <div style={{ padding: `${theme.gap + 4}px ${theme.pad}px 0` }}>
        <Card theme={theme} style={{ padding: 16 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: theme.fontDisplay, fontSize: 18, color: theme.text, letterSpacing: 0.3, textTransform: 'uppercase', lineHeight: 1.1 }}>
                {product.label}
              </div>
              <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 0.5, fontWeight: 600, marginTop: 6 }}>
                {product.sub.toUpperCase()}
              </div>
            </div>
            <div style={{ fontFamily: theme.fontDisplay, fontSize: 30, color: theme.accent, letterSpacing: -0.5, lineHeight: 1 }}>
              ${Number(product.price).toFixed(2)}
            </div>
          </div>
        </Card>
      </div>

      {/* Payment method */}
      <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
        <div style={{ fontFamily: theme.fontMono, fontSize: 11, color: theme.muted, letterSpacing: 1, fontWeight: 600, marginBottom: 10 }}>PAYMENT METHOD</div>
        <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
          {[
            { id: 'card', l: 'CARD' },
            { id: 'apple', l: 'APPLE PAY' },
            { id: 'paypal', l: 'PAYPAL' },
          ].map(m => (
            <button key={m.id} onClick={() => setMethod(m.id)} style={{
              flex: 1, padding: '11px', borderRadius: 12, cursor: 'pointer',
              background: method === m.id ? theme.text : 'transparent',
              color: method === m.id ? theme.bg : theme.text,
              border: method === m.id ? 'none' : `1px solid ${theme.border}`,
              fontFamily: theme.fontMono, fontSize: 11, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase',
            }}>{m.l}</button>
          ))}
        </div>

        {method === 'card' && (
          <Card theme={theme} style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
            <input value={card.num} onChange={e => setCard({ ...card, num: e.target.value })}
              placeholder="Card number"
              style={{ padding: '12px 14px', borderRadius: 10, border: `1px solid ${theme.border}`, fontFamily: theme.fontMono, fontSize: 14, outline: 'none', letterSpacing: 1 }} />
            <div style={{ display: 'flex', gap: 10 }}>
              <input value={card.exp} onChange={e => setCard({ ...card, exp: e.target.value })}
                placeholder="MM/YY" style={{ flex: 1, padding: '12px 14px', borderRadius: 10, border: `1px solid ${theme.border}`, fontFamily: theme.fontMono, fontSize: 14, outline: 'none' }} />
              <input value={card.cvc} onChange={e => setCard({ ...card, cvc: e.target.value })}
                placeholder="CVC" style={{ flex: 1, padding: '12px 14px', borderRadius: 10, border: `1px solid ${theme.border}`, fontFamily: theme.fontMono, fontSize: 14, outline: 'none' }} />
            </div>
            <input value={card.name} onChange={e => setCard({ ...card, name: e.target.value })}
              placeholder="Name on card"
              style={{ padding: '12px 14px', borderRadius: 10, border: `1px solid ${theme.border}`, fontFamily: theme.fontBody, fontSize: 14, outline: 'none' }} />
          </Card>
        )}
        {method === 'apple' && (
          <Card theme={theme} style={{ padding: 18, textAlign: 'center' }}>
            <div style={{ fontFamily: theme.fontDisplay, fontSize: 22, color: theme.text, letterSpacing: 0.3 }}> Pay</div>
            <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 0.8, marginTop: 6, fontWeight: 700 }}>FACE ID READY · TAP CONFIRM</div>
          </Card>
        )}
        {method === 'paypal' && (
          <Card theme={theme} style={{ padding: 18, textAlign: 'center' }}>
            <div style={{ fontFamily: theme.fontDisplay, fontSize: 20, color: '#003087', letterSpacing: 0.5 }}>Pay<span style={{ color: '#0070BA' }}>Pal</span></div>
            <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 0.8, marginTop: 6, fontWeight: 700 }}>YOU'LL BE REDIRECTED TO PAYPAL</div>
          </Card>
        )}
      </div>

      {/* Tip for mentor */}
      {product.kind === 'session' && (
        <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
          <div style={{ fontFamily: theme.fontMono, fontSize: 11, color: theme.muted, letterSpacing: 1, fontWeight: 600, marginBottom: 10 }}>
            ADD A TIP · 100% TO YOUR MENTOR
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            {[0, 10, 20, 30].map(amt => (
              <button key={amt} onClick={() => setTip(amt)} style={{
                flex: 1, padding: '12px', borderRadius: 12, cursor: 'pointer',
                background: tip === amt ? theme.accent : 'transparent',
                color: tip === amt ? theme.onAccent : theme.text,
                border: tip === amt ? 'none' : `1px solid ${theme.border}`,
                fontFamily: theme.fontDisplay, fontSize: 14, letterSpacing: 0.5,
              }}>{amt === 0 ? 'NONE' : `$${amt}`}</button>
            ))}
          </div>
        </div>
      )}

      {/* Total breakdown */}
      <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
        <Card theme={theme} style={{ padding: 16 }}>
          {[
            { l: 'Subtotal',   v: `$${Number(subtotal).toFixed(2)}` },
            { l: 'Platform fee', v: 'Included' },
            tip > 0 && { l: 'Tip',  v: `$${Number(tip).toFixed(2)}` },
          ].filter(Boolean).map((r, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
              <span style={{ fontFamily: theme.fontBody, fontSize: 13, color: theme.muted }}>{r.l}</span>
              <span style={{ fontFamily: theme.fontMono, fontSize: 13, color: theme.text, fontWeight: 600 }}>{r.v}</span>
            </div>
          ))}
          <div style={{ height: 1, background: theme.border, margin: '10px 0' }} />
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontFamily: theme.fontMono, fontSize: 11, color: theme.muted, letterSpacing: 1, fontWeight: 700 }}>TOTAL DUE</span>
            <span style={{ fontFamily: theme.fontDisplay, fontSize: 28, color: theme.accent, letterSpacing: -0.5, lineHeight: 1 }}>
              ${Number(total).toFixed(2)}
            </span>
          </div>
        </Card>
      </div>

      {/* Pay button */}
      <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
        <button onClick={pay} disabled={processing} style={{
          width: '100%', padding: '18px', borderRadius: 14,
          background: processing ? theme.surface2 : theme.accent,
          color: processing ? theme.faint : theme.onAccent,
          border: 'none', cursor: processing ? 'wait' : 'pointer',
          fontFamily: theme.fontDisplay, fontSize: 16, letterSpacing: 1, textTransform: 'uppercase',
        }}>
          {processing ? '✦ PROCESSING…' : `PAY $${Number(total).toFixed(2)} ↗`}
        </button>
        {payErr && (
          <div style={{
            marginTop: 10, fontFamily: theme.fontMono, fontSize: 10, color: theme.accent,
            letterSpacing: 0.5, textAlign: 'center', fontWeight: 700,
          }}>⚠ {payErr}</div>
        )}
        <div style={{
          marginTop: 10, fontFamily: theme.fontMono, fontSize: 9, color: theme.muted,
          letterSpacing: 0.5, textAlign: 'center', fontWeight: 600,
        }}>
          BY CONFIRMING YOU AGREE TO LAUNCH'S TERMS · CANCEL UP TO 24H BEFORE SESSION FOR FULL REFUND
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────
// AdminDashboard — insights + payout management
// ────────────────────────────────────────────────────────
const ADMIN_INSIGHTS = {
  mtdRevenue: 48720,
  pendingPayout: 12340,
  totalUsers: 2487,
  activeSubs: 1124,
  evalsCompleted: 287,
  sessionsBooked: 142,
  revenueByService: [
    { l: 'Subscriptions',     v: 24800, pct: 51 },
    { l: '1:1 Sessions',      v: 14200, pct: 29 },
    { l: 'A&R Panel',         v: 4470,  pct: 9 },
    { l: 'In-Depth Evals',    v: 3240,  pct: 7 },
    { l: 'Quick Scores',      v: 2010,  pct: 4 },
  ],
  transactions: [
    { id: 'tx-2487', user: 'kai.park',    service: 'A&R Panel',       amt: 149, date: 'TODAY · 2:14 PM',  status: 'completed' },
    { id: 'tx-2486', user: 'sasha.vee',   service: '1:1 PG Banker',   amt: 100, date: 'TODAY · 1:30 PM',  status: 'completed' },
    { id: 'tx-2485', user: 'maya.sounds', service: 'In-Depth Eval',  amt: 40,  date: 'TODAY · 11:42 AM', status: 'completed' },
    { id: 'tx-2484', user: 'theo.m',      service: 'Quick Score',     amt: 11,  date: 'YESTERDAY',        status: 'completed' },
    { id: 'tx-2483', user: 'isla.loop',   service: 'Orbit subscription', amt: 99, date: 'YESTERDAY',     status: 'completed' },
    { id: 'tx-2482', user: 'jordan.ek',   service: '1:1 Jay Brunswick', amt: 100, date: 'MAY 20',         status: 'refunded' },
    { id: 'tx-2481', user: 'nova.b',      service: 'Stratosphere',    amt: 1000,date: 'MAY 19',           status: 'completed' },
  ],
  payouts: [
    { l: 'Stripe → Operating', amt: 36380, status: 'AVAILABLE NOW' },
    { l: 'Mentor escrow · Jay',   amt: 6420,  status: 'HOLDING · CLEARS FRI' },
    { l: 'Mentor escrow · PG',    amt: 5920,  status: 'HOLDING · CLEARS FRI' },
  ],
};

function AdminDashboard({ theme, onBack }) {
  const [tab, setTab] = useStateP('overview'); // overview | transactions | payouts
  const a = ADMIN_INSIGHTS;

  const fmt = (n) => '$' + n.toLocaleString();

  return (
    <div style={{ paddingBottom: 110 }}>
      {/* Top bar */}
      <div style={{
        paddingTop: 58, paddingBottom: 8, paddingLeft: theme.pad, paddingRight: theme.pad,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <button onClick={onBack} style={{
          width: 38, height: 38, borderRadius: 12,
          background: theme.surface, border: `1px solid ${theme.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M9 2L4 7l5 5" stroke={theme.text} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <div style={{
          padding: '6px 10px', borderRadius: 99,
          background: theme.accent, color: theme.onAccent,
          fontFamily: theme.fontMono, fontSize: 10, letterSpacing: 1, fontWeight: 700,
        }}>★ ADMIN · LAUNCH HQ</div>
      </div>

      <div style={{ padding: `4px ${theme.pad}px 0` }}>
        <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.accent, letterSpacing: 1, fontWeight: 700 }}>MAY 2026 · MTD</div>
        <DisplayHeading theme={theme} size={32}>MISSION<br/>CONTROL</DisplayHeading>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 6, padding: `${theme.gap}px ${theme.pad}px 0` }}>
        {[
          { id: 'overview', l: 'INSIGHTS' },
          { id: 'transactions', l: 'TRANSACTIONS' },
          { id: 'payouts', l: 'PAYOUTS' },
        ].map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            flex: 1, padding: '10px 8px', borderRadius: 99, cursor: 'pointer',
            border: 'none',
            background: tab === t.id ? theme.text : 'transparent',
            color: tab === t.id ? theme.bg : theme.text,
            boxShadow: tab === t.id ? 'none' : `inset 0 0 0 1px ${theme.border}`,
            fontFamily: theme.fontMono, fontSize: 10, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase',
          }}>{t.l}</button>
        ))}
      </div>

      {tab === 'overview' && (
        <>
          {/* KPI hero */}
          <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
            <Card theme={theme} style={{ padding: 0, overflow: 'hidden', position: 'relative' }}>
              <div style={{
                position: 'absolute', inset: 0,
                backgroundImage: 'url(assets/deep-field.png)',
                backgroundSize: 'cover', backgroundPosition: 'center', opacity: 0.35,
              }} />
              <div style={{
                position: 'absolute', inset: 0,
                background: `linear-gradient(135deg, ${theme.accent}55 0%, rgba(10,10,10,0.7) 100%)`,
              }} />
              <div style={{ position: 'relative', padding: 18, color: '#fff' }}>
                <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.accent, letterSpacing: 1, fontWeight: 700 }}>
                  ★ MONTH-TO-DATE REVENUE
                </div>
                <div style={{ fontFamily: theme.fontDisplay, fontSize: 56, color: '#fff', lineHeight: 1, letterSpacing: -1, marginTop: 8 }}>
                  {fmt(a.mtdRevenue)}
                </div>
                <div style={{ fontFamily: theme.fontMono, fontSize: 11, color: '#22C55E', letterSpacing: 0.5, fontWeight: 700, marginTop: 8 }}>
                  ↗ +18% VS LAST MONTH
                </div>
                <div style={{ marginTop: 12, padding: '10px 12px', borderRadius: 10, background: 'rgba(0,0,0,0.45)', border: '1px solid rgba(255,255,255,0.12)' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                    <div>
                      <div style={{ fontFamily: theme.fontMono, fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: 1, fontWeight: 700 }}>
                        AVAILABLE TO PAYOUT
                      </div>
                      <div style={{ fontFamily: theme.fontDisplay, fontSize: 24, color: '#fff', lineHeight: 1, marginTop: 4, letterSpacing: -0.4 }}>
                        {fmt(a.pendingPayout)}
                      </div>
                    </div>
                    <button onClick={() => setTab('payouts')} style={{
                      background: theme.accent, color: theme.onAccent, border: 'none',
                      padding: '10px 14px', borderRadius: 99, cursor: 'pointer',
                      fontFamily: theme.fontMono, fontSize: 10, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase',
                    }}>WITHDRAW →</button>
                  </div>
                </div>
              </div>
            </Card>
          </div>

          {/* KPI grid */}
          <div style={{
            padding: `${theme.gap + 6}px ${theme.pad}px 0`,
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8,
          }}>
            {[
              { n: a.totalUsers.toLocaleString(), l: 'TOTAL USERS', d: '+124 THIS WEEK' },
              { n: a.activeSubs.toLocaleString(), l: 'ACTIVE SUBS',  d: '45% CONVERSION' },
              { n: a.evalsCompleted,              l: 'EVALUATIONS',  d: 'AVG SCORE 32/50' },
              { n: a.sessionsBooked,              l: 'SESSIONS BOOKED', d: '94% SHOW RATE' },
            ].map((s, i) => (
              <Card key={i} theme={theme} style={{ padding: 14 }}>
                <div style={{ fontFamily: theme.fontDisplay, fontSize: 28, color: theme.text, lineHeight: 1, letterSpacing: -0.3 }}>{s.n}</div>
                <div style={{ fontFamily: theme.fontMono, fontSize: 9, color: theme.muted, letterSpacing: 0.8, fontWeight: 700, marginTop: 6 }}>{s.l}</div>
                <div style={{ fontFamily: theme.fontMono, fontSize: 9, color: theme.accent, letterSpacing: 0.5, fontWeight: 700, marginTop: 4 }}>{s.d}</div>
              </Card>
            ))}
          </div>

          {/* Revenue breakdown */}
          <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
            <div style={{ fontFamily: theme.fontMono, fontSize: 11, color: theme.muted, letterSpacing: 1, fontWeight: 600, marginBottom: 10 }}>
              REVENUE BY SERVICE
            </div>
            <Card theme={theme} style={{ padding: 14 }}>
              {a.revenueByService.map((r, i) => (
                <div key={i} style={{ marginBottom: i < a.revenueByService.length - 1 ? 12 : 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                    <span style={{ fontFamily: theme.fontBody, fontSize: 13, color: theme.text, fontWeight: 600 }}>{r.l}</span>
                    <span style={{ fontFamily: theme.fontMono, fontSize: 12, color: theme.text, fontWeight: 700 }}>{fmt(r.v)} · {r.pct}%</span>
                  </div>
                  <div style={{ height: 5, borderRadius: 99, background: theme.surface2, overflow: 'hidden' }}>
                    <div style={{ width: `${r.pct}%`, height: '100%', background: theme.accent, borderRadius: 99 }} />
                  </div>
                </div>
              ))}
            </Card>
          </div>
        </>
      )}

      {tab === 'transactions' && (
        <div style={{ padding: `${theme.gap + 4}px ${theme.pad}px 0` }}>
          <div style={{ fontFamily: theme.fontMono, fontSize: 11, color: theme.muted, letterSpacing: 1, fontWeight: 600, marginBottom: 10 }}>
            RECENT TRANSACTIONS · {a.transactions.length}
          </div>
          <Card theme={theme} style={{ padding: 4 }}>
            {a.transactions.map((t, i) => (
              <div key={t.id} style={{
                padding: 12, display: 'flex', alignItems: 'center', gap: 12,
                borderBottom: i < a.transactions.length - 1 ? `1px solid ${theme.border}` : 'none',
              }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: theme.fontBody, fontSize: 14, color: theme.text, fontWeight: 600 }}>{t.user}</div>
                  <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 0.5, marginTop: 2, fontWeight: 600 }}>
                    {t.service.toUpperCase()} · {t.date}
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{
                    fontFamily: theme.fontDisplay, fontSize: 18,
                    color: t.status === 'refunded' ? '#EF4444' : theme.text,
                    lineHeight: 1, letterSpacing: -0.2,
                    textDecoration: t.status === 'refunded' ? 'line-through' : 'none',
                  }}>${t.amt}</div>
                  <div style={{
                    fontFamily: theme.fontMono, fontSize: 8, fontWeight: 700, letterSpacing: 0.8,
                    color: t.status === 'refunded' ? '#EF4444' : '#22C55E', marginTop: 3,
                  }}>{t.status === 'refunded' ? '↻ REFUNDED' : '✓ COMPLETED'}</div>
                </div>
              </div>
            ))}
          </Card>
        </div>
      )}

      {tab === 'payouts' && (
        <>
          <div style={{ padding: `${theme.gap + 4}px ${theme.pad}px 0` }}>
            <Card theme={theme} style={{ padding: 16, borderColor: theme.accent }}>
              <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.accent, letterSpacing: 1, fontWeight: 700 }}>
                ★ AVAILABLE TO WITHDRAW
              </div>
              <div style={{ fontFamily: theme.fontDisplay, fontSize: 48, color: theme.accent, lineHeight: 1, letterSpacing: -1, marginTop: 8 }}>
                {fmt(a.pendingPayout)}
              </div>
              <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 0.5, fontWeight: 600, marginTop: 6 }}>
                NET OF MENTOR ESCROW · STRIPE FEES INCLUDED
              </div>
              <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
                <button style={{
                  flex: 2, padding: '14px', borderRadius: 12,
                  background: theme.accent, color: theme.onAccent, border: 'none',
                  fontFamily: theme.fontDisplay, fontSize: 14, letterSpacing: 1,
                  cursor: 'pointer', textTransform: 'uppercase',
                }}>WITHDRAW TO BANK ↗</button>
                <button style={{
                  flex: 1, padding: '14px', borderRadius: 12,
                  background: 'transparent', color: theme.text, border: `1px solid ${theme.border}`,
                  fontFamily: theme.fontMono, fontSize: 11, fontWeight: 700, letterSpacing: 1,
                  cursor: 'pointer', textTransform: 'uppercase',
                }}>HISTORY</button>
              </div>
            </Card>
          </div>

          <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
            <div style={{ fontFamily: theme.fontMono, fontSize: 11, color: theme.muted, letterSpacing: 1, fontWeight: 600, marginBottom: 10 }}>
              FUND BREAKDOWN
            </div>
            <Card theme={theme} style={{ padding: 4 }}>
              {a.payouts.map((p, i) => (
                <div key={i} style={{
                  padding: 14, display: 'flex', alignItems: 'center', gap: 12,
                  borderBottom: i < a.payouts.length - 1 ? `1px solid ${theme.border}` : 'none',
                }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: theme.fontBody, fontSize: 14, color: theme.text, fontWeight: 600 }}>{p.l}</div>
                    <div style={{
                      fontFamily: theme.fontMono, fontSize: 9, letterSpacing: 0.8, fontWeight: 700, marginTop: 3,
                      color: p.status.includes('AVAILABLE') ? '#22C55E' : theme.muted,
                    }}>{p.status}</div>
                  </div>
                  <div style={{ fontFamily: theme.fontDisplay, fontSize: 20, color: theme.text, letterSpacing: -0.3, lineHeight: 1 }}>
                    {fmt(p.amt)}
                  </div>
                </div>
              ))}
            </Card>
          </div>

          <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
            <Card theme={theme} style={{ padding: 14 }}>
              <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 1, fontWeight: 700, marginBottom: 8 }}>
                CONNECTED ACCOUNT
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 10, background: theme.surface2,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18,
                }}>🏦</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: theme.fontBody, fontSize: 14, color: theme.text, fontWeight: 600 }}>Chase Business ····8472</div>
                  <div style={{ fontFamily: theme.fontMono, fontSize: 9, color: theme.muted, letterSpacing: 0.5, fontWeight: 600 }}>STRIPE CONNECT · VERIFIED</div>
                </div>
                <button style={{
                  background: 'transparent', color: theme.text, border: `1px solid ${theme.border}`,
                  padding: '7px 10px', borderRadius: 99, cursor: 'pointer',
                  fontFamily: theme.fontMono, fontSize: 9, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase',
                }}>CHANGE</button>
              </div>
            </Card>
          </div>
        </>
      )}
    </div>
  );
}

window.LAUNCH_PAYMENT = { PaymentScreen, AdminDashboard, PRICING };