// assets/screen_commerce_overview.jsx
function ScreenCommerceOverview({ go }) {
  const [window_, setWindow] = React.useState('30d');

  // sparkline data (last 24h or 30d): just use the 30d series
  return (
    <div className="page">
      <div className="page-head">
        <h1>Commerce overview</h1>
        <span className="page-sub">{KPI.active_stores} stores · {KPI.merchants_distinct} merchants · GMV all-time</span>
        <div className="page-actions">
          <div className="segmented">
            <button className={window_ === '7d' ? 'active' : ''} onClick={() => setWindow('7d')}>7d</button>
            <button className={window_ === '30d' ? 'active' : ''} onClick={() => setWindow('30d')}>30d</button>
            <button className={window_ === 'all' ? 'active' : ''} onClick={() => setWindow('all')}>all-time</button>
          </div>
          <button className="btn"><Icon name="download" size={12} /> Export</button>
        </div>
      </div>

      {/* KPI cards */}
      <div className="grid cols-4" style={{ marginBottom: 14 }}>
        <KpiCard label="Total revenue" value={fmtMoneyCompact(KPI.total_revenue_cents)} delta={12.4}
          icon="cost" sparkData={TIMESERIES.revenue_30d_cents.map(v => v / 100)} sparkColor="var(--success)" />
        <KpiCard label="MRR" value={fmtMoneyCompact(KPI.mrr_cents)} delta={8.2}
          icon="trend" sparkData={TIMESERIES.new_subs_30d.map((_, i) => KPI.mrr_cents / 100 * (1 + i / 30))} sparkColor="var(--accent)" />
        <KpiCard label="Active stores" value={KPI.active_stores} delta={4.1}
          icon="package" sparkData={TIMESERIES.new_stores_30d} sparkColor="var(--info)" />
        <KpiCard label="Total orders" value={KPI.total_orders.toLocaleString()} delta={6.7}
          deltaLabel={`· ${Math.round(KPI.fulfilled_orders / KPI.total_orders * 100)}% fulfilled`}
          icon="check2" sparkData={TIMESERIES.orders_30d} sparkColor="var(--chart-2)" />
      </div>

      {/* Charts row */}
      <div className="grid" style={{ gridTemplateColumns: '2fr 1fr', gap: 12, marginBottom: 14 }}>
        <div className="card">
          <div className="card-head">
            <h3>Revenue · last 30 days</h3>
            <span className="sub">USD · all stores</span>
            <div className="actions" style={{ display: 'flex', gap: 12 }}>
              <span style={{ fontSize: 11, color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: 4 }}>
                <span style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--success)' }} /> daily revenue
              </span>
              <span style={{ fontSize: 11, color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: 4 }}>
                <span style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--chart-2)' }} /> orders
              </span>
            </div>
          </div>
          <div className="card-body">
            <LineChart series={[
              { name: 'revenue', color: 'var(--success)', data: TIMESERIES.revenue_30d_cents.map(v => Math.round(v / 100)) },
            ]} labels={TIMESERIES.labels_30d} height={220} kind="area" yFmt={v => '$' + (v / 1000).toFixed(0) + 'k'} />
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Platform mix</h3><span className="sub">stores by platform</span></div>
          <div className="card-body" style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <Donut size={130} thickness={22}
              segments={PLATFORM_BREAKDOWN.map(p => ({ value: p.value, color: p.color }))}
              centerLabel={KPI.active_stores} centerSub="stores" />
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
              {PLATFORM_BREAKDOWN.map(p => (
                <div key={p.label} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
                  <span style={{ width: 10, height: 10, borderRadius: 3, background: p.color }} />
                  <span style={{ textTransform: 'capitalize' }}>{p.label}</span>
                  <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums' }}>{p.value}</span>
                  <span className="dim mono fs-11" style={{ width: 40, textAlign: 'right' }}>{fmtMoneyCompact(p.revenue_cents)}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: '1fr 1fr 1fr', gap: 12, marginBottom: 14 }}>
        <div className="card">
          <div className="card-head"><h3>Daily orders</h3><span className="sub">30d</span></div>
          <div className="card-body">
            <StackedBars data={TIMESERIES.orders_30d.map(v => ({ orders: v }))} labels={TIMESERIES.labels_30d}
              keys={['orders']} colors={['var(--chart-2)']} height={160} />
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>New stores</h3><span className="sub">30d signups</span></div>
          <div className="card-body">
            <StackedBars data={TIMESERIES.new_stores_30d.map(v => ({ stores: v }))} labels={TIMESERIES.labels_30d}
              keys={['stores']} colors={['var(--info)']} height={160} />
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Plan distribution</h3><span className="sub">paid stores</span></div>
          <div className="card-body">
            <HBarChart data={PLAN_BREAKDOWN.map(p => ({ label: p.label, value: p.value }))} maxBars={4} color="var(--accent)" />
          </div>
        </div>
      </div>

      {/* Top stores */}
      <div className="grid cols-2">
        <div className="card">
          <div className="card-head">
            <h3>Top stores by revenue</h3>
            <span className="sub">all-time</span>
            <div className="actions"><a href="#/stores" className="btn xs ghost">All stores <Icon name="arrowR" size={11} /></a></div>
          </div>
          <div className="card-body flush">
            <table className="tbl">
              <tbody>
                {TOP_STORES.slice(0, 10).map(s => (
                  <tr key={s.id} className="clickable" onClick={() => go('/stores/' + s.id)}>
                    <td><span style={{ color: 'var(--text-primary)' }}>{s.name}</span><br/><span className="dim mono fs-11">{s.store_domain}</span></td>
                    <td><Badge kind="neutral"><span style={{ width: 6, height: 6, background: s.platform_color, borderRadius: '50%' }} />{s.platform}</Badge></td>
                    <td className="num"><Mono>{s.total_orders.toLocaleString()}</Mono><br/><span className="dim fs-11 mono">{(s.fulfill_rate*100).toFixed(0)}% fulfill</span></td>
                    <td className="num"><Mono style={{ color: 'var(--success)', fontWeight: 600 }}>{fmtMoneyCompact(s.revenue_cents)}</Mono></td>
                    <td><Icon name="chevron" size={12} className="dim" /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Subscriptions</h3>
            <span className="sub">{KPI.subs_active} active · {fmtMoneyCompact(KPI.mrr_cents)} MRR</span>
          </div>
          <div className="card-body flush">
            <table className="tbl">
              <thead><tr><th>Store</th><th>Plan</th><th>Status</th><th>Renews</th><th className="num">Monthly</th></tr></thead>
              <tbody>
                {STORES.filter(s => s.subscription_status).slice(0, 10).map(s => (
                  <tr key={s.id} className="clickable" onClick={() => go('/stores/' + s.id)}>
                    <td>{s.name}</td>
                    <td><Badge kind={s.plan === 'max' ? 'accent' : s.plan === 'pro' ? 'info' : 'neutral'}>{s.plan}</Badge></td>
                    <td><Badge kind={s.subscription_status === 'active' ? 'success' : s.subscription_status === 'past_due' ? 'warning' : 'danger'} dot>{s.subscription_status}</Badge></td>
                    <td className="dim"><Mono>{fmtDate(s.period_end)}</Mono></td>
                    <td className="num"><Mono>{fmtMoney(s.plan_price_cents)}</Mono></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenCommerceOverview });