function PageCredits() {
  return (
    <>
      <div className="page-header">
        <div><h1>Credits & Usage</h1><div className="sub">1 credit = 1 story. Welcome bonus: 3 free credits.</div></div>
        <div className="actions">
          <button className="btn primary sm"><Icon.plus size={12}/> Grant credits</button>
        </div>
      </div>

      <div className="kpi-grid">
        <KPI label="Consumed today"        value={compact(KPIS.creditsConsumed)} delta={KPIS.creditsDelta} spark={CREDITS_SERIES.slice(-14)} sparkColor="var(--amber)"/>
        <KPI label="Consumed this week"    value="—" delta={null}/>
        <KPI label="In circulation"        value="—" delta={null}/>
        <KPI label="Granted by admins (30d)" value="—" delta={null}/>
        <KPI label="Avg per paying user"   value="—" delta={null}/>
        <KPI label="Users at 0 credits"    value="—" delta={null}/>
      </div>

      <div style={{display:"grid", gridTemplateColumns:"2fr 1fr", gap:16, marginBottom:16}}>
        <div className="card">
          <div className="card-header"><h3>Credits consumed · 60d</h3></div>
          <div className="card-body"><BarChart data={CREDITS_SERIES} color="var(--amber)" valueLabel={v=>compact(v)}/></div>
        </div>
        <div className="card">
          <div className="card-header"><h3>What credits are spent on</h3></div>
          <div className="card-body">
            <div className="bd">
              {[["Full story (1 credit)","var(--accent)",68],["Illustrations","var(--plum)",18],["Re-generate page","var(--blue)",9],["Premium voice","var(--green)",5]].map((r,i)=>(
                <div key={i}>
                  <div className="hstack" style={{justifyContent:"space-between", fontSize:12}}>
                    <span style={{fontWeight:500}}>{r[0]}</span>
                    <span className="mono muted">{r[2]}%</span>
                  </div>
                  <div className="bar" style={{marginTop:6}}><span style={{width:r[2]+"%", background:r[1]}}/></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="grid-2">
        <div className="card">
          <div className="card-header"><h3>Top consumers · 30d</h3><div className="spacer"/><button className="btn ghost sm">See all</button></div>
          <div className="table-wrap">
            <table className="tbl">
              <thead><tr><th>User</th><th>Plan</th><th style={{textAlign:"right"}}>Consumed</th><th style={{textAlign:"right"}}>Balance</th></tr></thead>
              <tbody>
                {[...USERS].sort((a,b)=>b.stories-a.stories).slice(0,8).map(u=>(
                  <tr key={u.uid}>
                    <td><UserCell user={u}/></td>
                    <td><PlanBadge plan={u.plan}/></td>
                    <td className="num">{u.stories}</td>
                    <td className="num">{u.plan==="unlimited"?"∞":u.credits}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="card">
          <div className="card-header"><h3>Low-balance at-risk users</h3><div className="sub"> · &lt;2 credits</div></div>
          <div className="table-wrap">
            <table className="tbl">
              <thead><tr><th>User</th><th>Plan</th><th style={{textAlign:"right"}}>Credits</th><th></th></tr></thead>
              <tbody>
                {USERS.filter(u=>u.plan!=="unlimited" && u.credits<2).slice(0,8).map(u=>(
                  <tr key={u.uid}>
                    <td><UserCell user={u}/></td>
                    <td><PlanBadge plan={u.plan}/></td>
                    <td className="num" style={{color: u.credits===0?"var(--red)":undefined}}>{u.credits}</td>
                    <td><button className="btn sm"><Icon.bell size={11}/> Nudge</button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </>
  );
}

function PageSubs() {
  return (
    <>
      <div className="page-header">
        <div><h1>Subscriptions</h1><div className="sub">{KPIS.activeSubs.toLocaleString()} active subscribers</div></div>
      </div>

      <div className="kpi-grid">
        <KPI label="Active subs"    value={compact(KPIS.activeSubs)} delta={null}/>
        <KPI label="New (30d)"      value="—" delta={null}/>
        <KPI label="Churned (30d)"  value="—" delta={null}/>
        <KPI label="Trial → Paid"   value={KPIS.trialConv || "—"} unit={KPIS.trialConv ? "%" : ""} delta={null}/>
        <KPI label="Churn rate"     value={KPIS.churn || "—"} unit={KPIS.churn ? "%" : ""} delta={KPIS.churnDelta}/>
        <KPI label="Avg lifetime"   value="—" unit="" delta={null}/>
      </div>

      <div className="grid-2">
        <div className="card">
          <div className="card-header"><h3>Subscriptions by plan</h3></div>
          <div className="card-body">
            {PLAN_DIST.every(p=>p.users===0)
              ? <EmptyState icon="card" message="No subscribers yet" sub="Subscription breakdown by plan will appear here"/>
              : <div className="bd">
                  {PLAN_DIST.slice(1).map((p,i) => {
                    const maxUsers = Math.max(...PLAN_DIST.map(x=>x.users));
                    return (
                      <div key={i}>
                        <div className="hstack" style={{justifyContent:"space-between", fontSize:12, marginBottom:4}}>
                          <span style={{fontWeight:500}}>{p.plan}</span>
                          <span className="mono muted">{p.users.toLocaleString()} subs · {money(p.revenue)} MRR</span>
                        </div>
                        <div className="bar"><span style={{width:(maxUsers>0?p.users/maxUsers*100:0)+"%", background:p.color}}/></div>
                      </div>
                    );
                  })}
                </div>
            }
          </div>
        </div>
        <div className="card">
          <div className="card-header"><h3>Churn reasons</h3><div className="sub">from exit surveys</div></div>
          <div className="card-body">
            <EmptyState icon="log" message="No survey data yet" sub="Churn reason breakdown will appear once exit survey responses come in"/>
          </div>
        </div>
      </div>

      <div className="card" style={{marginTop:16}}>
        <div className="card-header"><h3>Recent subscription events</h3></div>
        <div className="table-wrap">
          <table className="tbl">
            <thead><tr><th>Date</th><th>User</th><th>Event</th><th>Plan</th><th>Provider</th><th style={{textAlign:"right"}}>MRR Δ</th></tr></thead>
            <tbody>
              {TRANSACTIONS.length === 0 && <tr><td colSpan={6}><EmptyState icon="card" message="No subscription events yet" sub="Events will appear once users subscribe"/></td></tr>}
              {TRANSACTIONS.filter(t=>t.type==="subscription"||t.type==="refund").slice(0,14).map(t=>(
                <tr key={t.id}>
                  <td className="muted">{fmtRelative(t.date)}</td>
                  <td><UserCell user={t.user}/></td>
                  <td>{t.type==="subscription" ? <span className="badge green"><Icon.arrowUp size={10}/> New sub</span> : <span className="badge red">Cancelled</span>}</td>
                  <td>{t.item.split(' ')[0]}</td>
                  <td className="muted">{t.provider}</td>
                  <td className="num" style={{color: t.amount<0?"var(--red)":"var(--green)"}}>{t.amount>0?"+":""}{money(t.amount)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { PageCredits, PageSubs });