function PageRevenue() {
  const [range, setRange] = React.useState("30d");
  const rangeDays = {"7d":7,"30d":30,"90d":60}[range];
  const slice = REVENUE_SERIES.slice(-rangeDays);
  const total = slice.reduce((a,d)=>a+d.v,0);
  const [txFilter, setTxFilter] = React.useState("all");
  const tx = TRANSACTIONS.filter(t => txFilter==="all" || t.type===txFilter).slice(0,20);

  return (
    <>
      <div className="page-header">
        <div><h1>Revenue</h1><div className="sub">Across Stripe, Apple IAP, and Google Play · USD</div></div>
        <div className="actions">
          <div className="seg">
            {["7d","30d","90d"].map(s=><button key={s} data-active={range===s} onClick={()=>setRange(s)}>{s}</button>)}
          </div>
          <button className="btn sm"><Icon.download size={12}/> Export</button>
        </div>
      </div>

      <div className="kpi-grid">
        <KPI label="MRR"           value={money(KPIS.mrr)}          delta={KPIS.mrrDelta}      spark={REVENUE_SERIES.slice(-30)} sparkColor="var(--accent)"/>
        <KPI label="ARR"           value={KPIS.mrr ? money(KPIS.mrr*12) : "—"} delta={null}/>
        <KPI label="Revenue today" value={money(KPIS.revToday)}     delta={KPIS.revTodayDelta}/>
        <KPI label="Total revenue" value={money(KPIS.totalRevenue)} delta={null}/>
        <KPI label="Active subs"   value={compact(KPIS.activeSubs)} delta={null}/>
        <KPI label="Refund rate"   value={KPIS.refundRate ? String(KPIS.refundRate) : "—"} unit={KPIS.refundRate ? "%" : ""} delta={null}/>
      </div>

      <div style={{display:"grid", gridTemplateColumns:"2fr 1fr", gap:16, marginBottom:16}}>
        <div className="card">
          <div className="card-header"><h3>Gross revenue · {range}</h3><div className="sub">{money(total)} total</div></div>
          <div className="card-body"><LineChart data={slice} color="var(--accent)" valueLabel={v=>"$"+compact(v)}/></div>
        </div>
        <div className="card">
          <div className="card-header"><h3>Revenue mix</h3><div className="sub">MRR breakdown</div></div>
          <div className="card-body" style={{display:"flex", gap:16, alignItems:"center"}}>
            <Donut size={130} stroke={20} centerValue={money(KPIS.mrr) || "—"} centerLabel="MRR"
              segments={PLAN_DIST.map(p=>({value:p.revenue, color:p.color}))}/>
            <div className="bd" style={{flex:1}}>
              {PLAN_DIST.slice(1).map((p,i)=>(
                <div key={i} className="bd-row">
                  <div className="sw" style={{"--c":p.color}}/>
                  <div className="name">{p.plan} subs</div>
                  <div className="v">{money(p.revenue)}</div>
                  <div className="p">{KPIS.mrr > 0 ? (p.revenue/KPIS.mrr*100).toFixed(0)+"%" : "—"}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:16, marginBottom:16}}>
        <div className="card">
          <div className="card-header"><h3>By provider</h3></div>
          <div className="card-body">
            <EmptyState icon="money" message="No provider data yet" sub="Revenue breakdown by Apple IAP, Google Play, and Stripe will appear here"/>
          </div>
        </div>
        <div className="card">
          <div className="card-header"><h3>Unit economics</h3></div>
          <div className="card-body">
            <div className="inline-stat" style={{flexDirection:"column", gap:14, display:"flex"}}>
              <div><div className="l">ARPU</div><div className="v">{money(KPIS.arpu)}</div></div>
              <div><div className="l">LTV (blended)</div><div className="v">{money(KPIS.ltv)}</div></div>
              <div><div className="l">Payback period</div><div className="v">—</div></div>
              <div><div className="l">Net revenue retention</div><div className="v">—</div></div>
            </div>
          </div>
        </div>
        <div className="card">
          <div className="card-header"><h3>Refunds & disputes</h3></div>
          <div className="card-body">
            <div className="inline-stat" style={{flexDirection:"column", gap:14, display:"flex"}}>
              <div><div className="l">Refunds (30d)</div><div className="v">—</div></div>
              <div><div className="l">Chargebacks</div><div className="v">—</div></div>
              <div><div className="l">Refund rate</div><div className="v">{KPIS.refundRate ? KPIS.refundRate+"%" : "—"}</div></div>
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-header">
          <h3>Transactions</h3>
          <div className="spacer"/>
          <div className="seg">
            {["all","subscription","purchase","refund","gift"].map(t=>(
              <button key={t} data-active={txFilter===t} onClick={()=>setTxFilter(t)} style={{textTransform:"capitalize"}}>{t}</button>
            ))}
          </div>
        </div>
        <div className="table-wrap">
          <table className="tbl">
            <thead><tr><th>Date</th><th>User</th><th>Type</th><th>Item</th><th>Provider</th><th>Status</th><th style={{textAlign:"right"}}>Amount</th><th></th></tr></thead>
            <tbody>
              {tx.length === 0 && <tr><td colSpan={8}><EmptyState icon="money" message="No transactions yet" sub="Transactions will appear once users make purchases"/></td></tr>}
              {tx.map(t=>(
                <tr key={t.id}>
                  <td className="muted">{fmtDate(t.date)}</td>
                  <td><UserCell user={t.user}/></td>
                  <td>{t.type==="refund" ? <span className="badge red">Refund</span> :
                      t.type==="subscription" ? <span className="badge plum">Subscription</span> :
                      t.type==="purchase" ? <span className="badge accent">Purchase</span> :
                      t.type==="gift" ? <span className="badge blue">Gift</span> :
                      <span className="badge">Adjustment</span>}</td>
                  <td>{t.item}</td>
                  <td className="muted">{t.provider}</td>
                  <td>{t.status==="paid" ? <span className="badge green"><Icon.check size={10}/> Paid</span> : t.status==="refunded" ? <span className="badge red">Refunded</span> : <span className="badge amber">Failed</span>}</td>
                  <td className="num" style={{color: t.amount<0?"var(--red)":undefined, fontWeight:500}}>{money(t.amount)}</td>
                  <td><button className="btn ghost icon sm"><Icon.more size={14}/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

window.PageRevenue = PageRevenue;