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

  const totalCost = COST_DAILY.series.reduce((s, m) => s + m.data.reduce((a, b) => a + b, 0), 0);
  const totalSessions = SESSIONS.length;
  const avgPerSession = totalCost / totalSessions;
  const top = COST_BY_MERCHANT[0];

  // Histogram of cost per session
  const histBuckets = [0, 0.25, 0.5, 1, 2, 4, 8, 16, 32];
  const hist = histBuckets.map((b, i) => ({
    label: i === histBuckets.length - 1 ? `$${b}+` : `$${b}-${histBuckets[i+1]}`,
    value: SESSIONS.filter(s => s.cost >= b && (i === histBuckets.length-1 || s.cost < histBuckets[i+1])).length,
  }));

  // Anomalies: merchant spend > 3× personal avg
  const merchantAvgs = COST_BY_MERCHANT.map(m => ({ ...m, avg: m.spend / Math.max(m.sessions, 1) }));
  const anomalies = COST_BY_SESSION.filter(s => {
    const m = merchantAvgs.find(mm => mm.merchant === s.merchant);
    return m && s.cost > 3 * m.avg;
  }).slice(0, 6);

  return (
    <div className="page">
      <div className="page-head">
        <h1>Cost &amp; usage</h1>
        <span className="page-sub">all models · AWS Bedrock</span>
        <div className="page-actions">
          <div className="segmented">
            <button className={window_ === '24h' ? 'active' : ''} onClick={() => setWindow('24h')}>24h</button>
            <button className={window_ === '7d' ? 'active' : ''} onClick={() => setWindow('7d')}>7d</button>
            <button className={window_ === '30d' ? 'active' : ''} onClick={() => setWindow('30d')}>30d</button>
          </div>
          <button className="btn"><Icon name="download" size={12} /> Export</button>
        </div>
      </div>

      <div className="grid cols-4" style={{ marginBottom: 16 }}>
        <KpiCard label="Total cost (24h)" value={`$${DASHBOARD.kpi.total_cost.value}`} delta={18.6} icon="zap" sparkData={timeSeries(24, 5, 3)} />
        <KpiCard label="Total cost (7d)" value={`$${(totalCost / 30 * 7).toFixed(0)}`} delta={12.4} icon="cost" sparkData={timeSeries(7, 130, 30)} sparkColor="var(--chart-2)" />
        <KpiCard label="Total cost (30d)" value={`$${totalCost.toFixed(0)}`} delta={42.1} icon="cost" sparkData={COST_DAILY.series[0].data} sparkColor="var(--chart-1)" />
        <KpiCard label="Avg / session" value={`$${avgPerSession.toFixed(2)}`} delta={-3.2} icon="trend" sparkData={timeSeries(30, 0.5, 0.2)} sparkColor="var(--chart-3)" />
      </div>

      <div className="grid" style={{ gridTemplateColumns: '2fr 1fr', gap: 12, marginBottom: 16 }}>
        <div className="card">
          <div className="card-head">
            <h3>Daily cost trend</h3>
            <span className="sub">30d · stacked by model</span>
            <div className="actions" style={{ display: 'flex', gap: 12 }}>
              {COST_DAILY.series.map(s => (
                <span key={s.name} style={{ fontSize: 11, color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: 4 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 2, background: s.color }} /> {s.name}
                </span>
              ))}
            </div>
          </div>
          <div className="card-body">
            <StackedBars data={COST_DAILY.labels.map((_, i) => {
              const o = {}; COST_DAILY.series.forEach(s => o[s.name] = s.data[i]); return o;
            })} labels={COST_DAILY.labels} keys={COST_DAILY.series.map(s => s.name)}
              colors={COST_DAILY.series.map(s => s.color)} height={220} yFmt={v => '$' + Math.round(v)} />
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Model split (30d)</h3></div>
          <div className="card-body" style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <Donut size={130} thickness={20}
              segments={COST_DAILY.series.map(s => ({ value: s.data.reduce((a,b)=>a+b,0), color: s.color }))}
              centerLabel={`$${totalCost.toFixed(0)}`} centerSub="30d total" />
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {COST_DAILY.series.map(s => {
                const v = s.data.reduce((a,b)=>a+b,0);
                return (
                  <div key={s.name} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
                    <span style={{ width: 10, height: 10, borderRadius: 3, background: s.color }} />
                    <span>{s.name}</span>
                    <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums' }}>${v.toFixed(0)}</span>
                    <span className="dim mono fs-11" style={{ width: 36, textAlign: 'right' }}>{(v / totalCost * 100).toFixed(0)}%</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: '1.2fr 1fr', gap: 12, marginBottom: 16 }}>
        <div className="card">
          <div className="card-head"><h3>Top 20 merchants by spend</h3><span className="sub">30d</span></div>
          <div className="card-body">
            <HBarChart data={COST_BY_MERCHANT.slice(0, 20).map(m => ({ label: m.merchant.split('@')[0], value: m.spend }))}
              maxBars={20} valueFmt={v => '$' + v.toFixed(2)} color="var(--chart-1)" />
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Cost-per-session distribution</h3><span className="sub">30d · {totalSessions} sessions</span></div>
          <div className="card-body">
            <HBarChart data={hist} valueFmt={v => v.toLocaleString()} maxBars={9} color="var(--chart-2)" />
          </div>
        </div>
      </div>

      {/* Anomalies */}
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head">
          <h3><Icon name="alert" size={13} style={{ verticalAlign: 'text-bottom', color: 'var(--warning)' }} /> Spend anomalies</h3>
          <span className="sub">session cost &gt; 3× merchant avg · 7d</span>
        </div>
        <div className="card-body flush">
          <table className="tbl">
            <thead><tr>
              <th>Session</th>
              <th>Merchant</th>
              <th>Project</th>
              <th className="num">Cost</th>
              <th className="num">Merchant avg</th>
              <th className="num">Ratio</th>
              <th>Reason</th>
              <th style={{ width: 28 }}></th>
            </tr></thead>
            <tbody>
              {anomalies.map(s => {
                const m = merchantAvgs.find(mm => mm.merchant === s.merchant);
                const ratio = s.cost / (m?.avg || 1);
                return (
                  <tr key={s.id} className="clickable fp-suspect-row" onClick={() => go('/sessions/' + s.id)}>
                    <td className="id">{shortId(s.id)}</td>
                    <td className="dim2"><Mono>{s.merchant.split('@')[0]}</Mono></td>
                    <td>{s.project_name}</td>
                    <td className="num text-danger"><Mono style={{ fontWeight: 600 }}>${s.cost.toFixed(2)}</Mono></td>
                    <td className="num dim"><Mono>${m?.avg.toFixed(2)}</Mono></td>
                    <td className="num"><Badge kind="warning">×{ratio.toFixed(1)}</Badge></td>
                    <td className="dim2 fs-12">{s.loop_detected ? 'hook FP loop' : s.duration > 1200 ? 'long-running session' : 'high tool-call count'}</td>
                    <td><Icon name="chevron" size={12} className="dim" /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      <div className="grid cols-2">
        <div className="card">
          <div className="card-head">
            <h3>Top 20 expensive sessions</h3>
            <span className="sub">cost desc · 30d</span>
            <div className="actions"><a href="#/sessions" className="btn xs ghost">All sessions <Icon name="arrowR" size={11} /></a></div>
          </div>
          <div className="card-body flush">
            <table className="tbl">
              <thead><tr><th>Session</th><th>Project</th><th>Merchant</th><th className="num">Cost</th><th>Model</th></tr></thead>
              <tbody>
                {COST_BY_SESSION.slice(0, 20).map(s => (
                  <tr key={s.id} className="clickable" onClick={() => go('/sessions/' + s.id)}>
                    <td className="id">{shortId(s.id)}</td>
                    <td className="dim2">{s.project_name}</td>
                    <td className="dim"><Mono>{s.merchant.split('@')[0]}</Mono></td>
                    <td className="num text-danger"><Mono>${s.cost.toFixed(2)}</Mono></td>
                    <td className="dim"><Mono>{s.model}</Mono></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Top 20 spending merchants</h3>
            <span className="sub">spend desc · 30d</span>
          </div>
          <div className="card-body flush">
            <table className="tbl">
              <thead><tr><th>Merchant</th><th className="num">Sessions</th><th className="num">Total</th><th className="num">Avg</th></tr></thead>
              <tbody>
                {COST_BY_MERCHANT.slice(0, 20).map(m => (
                  <tr key={m.merchant}>
                    <td><Mono>{m.merchant}</Mono></td>
                    <td className="num"><Mono>{m.sessions}</Mono></td>
                    <td className="num"><Mono className="text-accent" style={{ fontWeight: 600 }}>${m.spend.toFixed(2)}</Mono></td>
                    <td className="num dim"><Mono>${(m.spend / Math.max(m.sessions, 1)).toFixed(2)}</Mono></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenCost });