// WiseTokens — Dashboard
function Dashboard({ onNav, filled = true }) {
  if (!filled) {
    return (
      <div className="page">
        <div className="page-h">
          <div>
            <h1>Welcome to WiseTokens</h1>
            <div className="sub">Make your first API request in under 60 seconds. Use any OpenAI-compatible client.</div>
          </div>
          <div className="page-actions">
            <button className="btn" onClick={() => onNav('docs')}><Icon name="book" size={14}/> Docs</button>
            <button className="btn primary" onClick={() => onNav('playground')}><Icon name="play" size={14}/> Try playground</button>
          </div>
        </div>
        <div className="grid grid-3">
          {[
            { icon: 'key', title: 'Create an API key', body: 'Generate a key scoped to the models and rate limits you need.', cta: 'Create key', to: 'keys' },
            { icon: 'wallet', title: 'Add credit', body: 'Start with $1 free trial. Top up via Stripe, PayPal, or USDT.', cta: 'Add credit', to: 'billing' },
            { icon: 'code', title: 'Make your first call', body: 'Drop-in compatible with OpenAI SDKs — just swap the base URL.', cta: 'Quickstart', to: 'playground' },
          ].map((c, i) => (
            <div key={i} className="card">
              <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--accent-bg)', color: 'var(--accent)', display: 'grid', placeItems: 'center', marginBottom: 16 }}>
                <Icon name={c.icon} size={18}/>
              </div>
              <h3 style={{ margin: '0 0 6px', fontSize: 15, fontWeight: 500 }}>{c.title}</h3>
              <p style={{ margin: '0 0 14px', fontSize: 12.5, color: 'var(--ink-2)' }}>{c.body}</p>
              <button className="btn" onClick={() => onNav(c.to)}>{c.cta} <Icon name="arrow-right" size={13}/></button>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 24 }} className="empty">
          <h3>No requests yet</h3>
          <p>Your usage chart and recent request log will appear here as soon as traffic starts flowing.</p>
          <button className="btn primary" onClick={() => onNav('playground')}>Open playground</button>
        </div>
      </div>
    );
  }

  const last7 = WT.USAGE_SERIES.slice(-7);
  const totalReq = WT.USAGE_SERIES.reduce((s,d) => s+d.requests, 0);
  const totalTok = WT.USAGE_SERIES.reduce((s,d) => s+d.tokens, 0);
  const totalCost = WT.USAGE_SERIES.reduce((s,d) => s+d.cost, 0);

  const stats = [
    { label: 'Requests · 30d', v: WT.fmt.num(totalReq), delta: 12.4, spark: WT.USAGE_SERIES.map(d => d.requests) },
    { label: 'Tokens processed', v: WT.fmt.compact(totalTok), delta: 18.2, spark: WT.USAGE_SERIES.map(d => d.tokens) },
    { label: 'Spend · 30d', v: WT.fmt.money(totalCost), delta: 8.1, spark: WT.USAGE_SERIES.map(d => d.cost) },
    { label: 'Avg. latency', v: '384ms', delta: -4.2, spark: [420,410,395,402,388,392,384] },
  ];

  // Top models (by tokens) — synthetic
  const topModels = [
    { id: 'deepseek-v3.1', share: 38, tokens: 8.2e6, cost: 24.1 },
    { id: 'qwen3-turbo', share: 27, tokens: 5.8e6, cost: 4.1 },
    { id: 'deepseek-coder', share: 14, tokens: 3.0e6, cost: 1.8 },
    { id: 'glm-4.6', share: 11, tokens: 2.4e6, cost: 4.8 },
    { id: 'qwen3-max', share: 10, tokens: 2.1e6, cost: 4.0 },
  ];

  const regions = [
    { name: 'United States', pct: 41, color: 'var(--accent)' },
    { name: 'India', pct: 22, color: 'oklch(0.68 0.14 150)' },
    { name: 'Brazil', pct: 14, color: 'oklch(0.62 0.18 265)' },
    { name: 'Germany', pct: 11, color: 'oklch(0.7 0.15 30)' },
    { name: 'Indonesia', pct: 7, color: 'oklch(0.68 0.16 320)' },
    { name: 'Other', pct: 5, color: 'var(--ink-3)' },
  ];

  const savingsVsOAI = 4.2; // multiplier

  return (
    <div className="page">
      <div className="page-h">
        <div>
          <h1>Dashboard</h1>
          <div className="sub">Overview of traffic, cost, and model routing across your keys.</div>
        </div>
        <div className="page-actions">
          <div className="seg" style={{ marginRight: 6 }}>
            {['24h', '7d', '30d', '90d'].map(t => (
              <button key={t} className={t === '30d' ? 'active' : ''}>{t}</button>
            ))}
          </div>
          <button className="btn"><Icon name="download" size={13}/> Export</button>
          <button className="btn primary" onClick={() => onNav('playground')}><Icon name="play" size={13}/> Playground</button>
        </div>
      </div>

      {/* Stat cards */}
      <div className="grid grid-4" style={{ marginBottom: 18 }}>
        {stats.map(s => (
          <div key={s.label} className="card">
            <div className="card-h" style={{ marginBottom: 8 }}><h3>{s.label}</h3></div>
            <div className="stat">
              <div className="v">{s.v}</div>
              <div className="d">
                <span className={s.delta >= 0 ? 'delta-up' : 'delta-dn'}>
                  <Icon name={s.delta >= 0 ? 'arrow-up' : 'arrow-dn'} size={10}/> {WT.fmt.pct(s.delta)}
                </span>
                <span>vs. prev 30d</span>
              </div>
            </div>
            <div style={{ marginTop: 14 }}>
              <Sparkline data={s.spark} height={38}/>
            </div>
          </div>
        ))}
      </div>

      {/* Savings callout */}
      <div className="card" style={{ marginBottom: 18, padding: '18px 24px', display: 'flex', alignItems: 'center', gap: 24, background: 'var(--accent-bg)', border: '1px solid color-mix(in oklch, var(--accent) 30%, transparent)' }}>
        <div style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--accent)', color: 'var(--accent-ink)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
          <Icon name="bolt" size={22}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink)' }}>You saved <span className="mono">{WT.fmt.money(totalCost * savingsVsOAI - totalCost)}</span> this month vs. GPT-4o equivalent.</div>
          <div style={{ fontSize: 12.5, color: 'var(--ink-2)', marginTop: 2 }}>Routing prioritized DeepSeek V3.1 and Qwen 3 Turbo for cost-optimal completions on 92% of your traffic.</div>
        </div>
        <button className="btn" onClick={() => onNav('routing')}>Tune routing <Icon name="arrow-right" size={12}/></button>
      </div>

      {/* Charts row */}
      <div className="grid grid-sidebar" style={{ marginBottom: 18 }}>
        <div className="card">
          <div className="card-h">
            <h3>Requests by provider · last 30d</h3>
            <div className="seg">
              <button className="active">Requests</button>
              <button>Tokens</button>
              <button>Cost</button>
            </div>
          </div>
          <StackedBars
            labels={WT.USAGE_SERIES.map(d => WT.fmt.date(d.date))}
            series={[
              { name: 'DeepSeek', data: WT.USAGE_SERIES.map(d => Math.floor(d.requests*0.48)) },
              { name: 'Qwen', data: WT.USAGE_SERIES.map(d => Math.floor(d.requests*0.32)) },
              { name: 'GLM', data: WT.USAGE_SERIES.map(d => Math.floor(d.requests*0.14)) },
              { name: 'Other', data: WT.USAGE_SERIES.map(d => Math.floor(d.requests*0.06)) },
            ]}
            colors={[WT.PROVIDER_COLORS.DeepSeek, WT.PROVIDER_COLORS.Qwen, WT.PROVIDER_COLORS.GLM, 'var(--ink-3)']}
            height={180}
          />
          <div style={{ display: 'flex', gap: 16, marginTop: 14, flexWrap: 'wrap', fontSize: 12 }}>
            {['DeepSeek','Qwen','GLM','Other'].map((p, i) => (
              <div key={p} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <div style={{ width: 10, height: 10, borderRadius: 2, background: [WT.PROVIDER_COLORS.DeepSeek, WT.PROVIDER_COLORS.Qwen, WT.PROVIDER_COLORS.GLM, 'var(--ink-3)'][i] }}/>
                <span>{p}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-h"><h3>Traffic by region</h3></div>
          <RegionBar regions={regions}/>
        </div>
      </div>

      {/* Top models + recent requests */}
      <div className="grid grid-sidebar">
        <div className="card" style={{ padding: 0 }}>
          <div style={{ padding: '18px 20px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <h3 style={{ margin: 0, fontSize: 13, fontWeight: 500, letterSpacing: '0.02em', textTransform: 'uppercase', color: 'var(--ink-2)' }}>Recent requests</h3>
            <button className="btn sm" onClick={() => onNav('logs')}>View all <Icon name="arrow-right" size={11}/></button>
          </div>
          <div style={{ overflowX: 'auto' }}>
            <table className="table">
              <thead>
                <tr>
                  <th>Time</th><th>Model</th><th>Key</th><th className="right">Tokens (in/out)</th><th className="right">Latency</th><th className="right">Cost</th><th>Status</th>
                </tr>
              </thead>
              <tbody>
                {WT.RECENT.slice(0, 8).map(r => {
                  const m = WT.MODELS.find(x => x.id === r.model);
                  return (
                    <tr key={r.id}>
                      <td className="num dim">{WT.fmt.time(r.ts)}</td>
                      <td>
                        <span className="prov">
                          <span className="prov-dot" style={{ background: WT.PROVIDER_COLORS[r.provider] }}/>
                          {m.name}
                        </span>
                      </td>
                      <td className="dim">{r.key}</td>
                      <td className="num right tabular">{WT.fmt.num(r.inTok)} / {WT.fmt.num(r.outTok)}</td>
                      <td className="num right tabular dim">{WT.fmt.ms(r.latency)}</td>
                      <td className="num right tabular">${r.cost.toFixed(4)}</td>
                      <td>
                        <span className={'badge ' + (r.status === 200 ? 'ok' : r.status === 429 ? 'warn' : 'err')}>{r.status}</span>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        <div className="card">
          <div className="card-h"><h3>Top models by usage</h3></div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {topModels.map(tm => {
              const m = WT.MODELS.find(x => x.id === tm.id);
              return (
                <div key={tm.id}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, marginBottom: 4 }}>
                    <span className="prov">
                      <span className="prov-dot" style={{ background: WT.PROVIDER_COLORS[m.provider] }}/>
                      {m.name}
                    </span>
                    <span className="mono tabular dim">{tm.share}%</span>
                  </div>
                  <div style={{ height: 4, background: 'var(--bg-sunken)', borderRadius: 2, overflow: 'hidden' }}>
                    <div style={{ width: `${tm.share * 2.6}%`, height: '100%', background: WT.PROVIDER_COLORS[m.provider], opacity: 0.85 }}/>
                  </div>
                  <div style={{ display: 'flex', gap: 10, marginTop: 4, fontSize: 11, color: 'var(--ink-3)' }}>
                    <span className="mono">{WT.fmt.compact(tm.tokens)} tok</span>
                    <span className="mono">${tm.cost.toFixed(2)}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });