/* global React, Icon, Shell */
const { useState: useS1 } = React;

// ─── helpers ────────────────────────────────────────────
const Spark = ({ data, accent }) => (
  <div className={`spark ${accent ? "accent" : ""}`}>
    {data.map((v, i) => <span key={i} className="b" style={{ height: `${v * 100}%` }}/>)}
  </div>
);

const fakeSpark = (n = 24, seed = 1) => {
  const out = []; let x = seed;
  for (let i = 0; i < n; i++) { x = (x * 9301 + 49297) % 233280; out.push(0.2 + (x / 233280) * 0.8); }
  return out;
};

// ─── S01 Dashboard ──────────────────────────────────────
function S01_Dashboard() {
  const sessions = [
    { id: "s_8af3", name: "ccm-web", branch: "feat/timeline-replay", status: "live", tokens: 42180, cost: 0.84, tasks: { total: 6, done: 3, active: 1 }, agent: "general", duration: "00:24:11", lastEvent: "Bash(bun test)", ago: "2s" },
    { id: "s_7ec1", name: "atlas-api", branch: "fix/auth-refresh", status: "live", tokens: 18920, cost: 0.31, tasks: { total: 4, done: 2, active: 1 }, agent: "code-reviewer", duration: "00:08:42", lastEvent: "Read(src/auth/refresh.ts)", ago: "12s" },
    { id: "s_71a0", name: "marketing-site", branch: "main", status: "blocked", tokens: 9410, cost: 0.18, tasks: { total: 3, done: 1, active: 0 }, agent: "general", duration: "01:12:03", lastEvent: "ExitPlanMode", ago: "4m" },
  ];
  const recent = [
    { id: "s_6f22", name: "ccm-web", duration: "01:48:22", tokens: 187420, cost: 3.71, tasks: "8/8", deviation: "low", end: "today, 14:02" },
    { id: "s_6e14", name: "atlas-api", duration: "00:42:11", tokens: 64200, cost: 1.18, tasks: "4/5", deviation: "med", end: "today, 11:28" },
    { id: "s_6d09", name: "atlas-api", duration: "00:31:00", tokens: 38900, cost: 0.72, tasks: "3/3", deviation: "low", end: "yesterday, 18:55" },
    { id: "s_6c77", name: "ccm-web", duration: "02:14:50", tokens: 241800, cost: 4.82, tasks: "6/9", deviation: "high", end: "yesterday, 16:10" },
    { id: "s_6b21", name: "design-tokens", duration: "00:18:42", tokens: 22400, cost: 0.41, tasks: "2/2", deviation: "low", end: "yesterday, 09:33" },
  ];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">workspace / <span>dashboard</span></div>
          <h1>Dashboard</h1>
          <p>3 sessions live. 148.2k tokens spent today across 4 projects.</p>
        </div>
        <div className="actions">
          <button className="btn"><Icon name="filter" size={12}/> All projects</button>
          <button className="btn"><Icon name="refresh" size={12}/></button>
          <button className="btn primary"><Icon name="plus" size={12}/> New session</button>
        </div>
      </div>

      {/* Stat strip */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 10, marginBottom: 18 }}>
        <div className="stat">
          <div className="stat-label">Live sessions</div>
          <div className="stat-value">3<span className="unit">of 5 today</span></div>
          <div className="stat-delta"><span className="pill live"><span className="swatch"/> streaming</span></div>
        </div>
        <div className="stat">
          <div className="stat-label">Tokens today</div>
          <div className="stat-value">148.2<span className="unit">k</span></div>
          <div className="stat-delta up">↑ 12% vs 7-day avg</div>
        </div>
        <div className="stat">
          <div className="stat-label">Estimated cost</div>
          <div className="stat-value">$2.81</div>
          <div className="stat-delta down">↓ $0.42 vs yesterday</div>
        </div>
        <div className="stat">
          <div className="stat-label">Tasks completed</div>
          <div className="stat-value">14<span className="unit">/ 18</span></div>
          <div className="stat-delta">3 in progress · 1 blocked</div>
        </div>
        <div className="stat">
          <div className="stat-label">Avg deviation</div>
          <div className="stat-value">8<span className="unit">%</span></div>
          <div className="stat-delta warn">2 sessions over 15%</div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 14 }}>
        {/* Live sessions */}
        <div className="card">
          <div className="card-head">
            <h3><Icon name="activity" size={12}/> Live sessions <span className="pill live"><span className="swatch"/> 3</span></h3>
            <span className="meta">streaming over SSE · :7421/events</span>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            {sessions.map((s, i) => (
              <div key={s.id} style={{
                display: "grid",
                gridTemplateColumns: "auto 1fr auto",
                gap: 14,
                padding: "12px 14px",
                borderTop: i ? "1px solid var(--border-soft)" : "none",
                alignItems: "center"
              }}>
                <div style={{ width: 36, height: 36, borderRadius: 6, background: "var(--bg-3)", border: "1px solid var(--border)", display: "grid", placeItems: "center", color: "var(--accent)" }}>
                  <Icon name="terminal" size={16}/>
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 2 }}>
                    <span style={{ fontWeight: 600, fontSize: 13 }}>{s.name}</span>
                    <span className="mono" style={{ color: "var(--ink-3)", fontSize: 11 }}>·</span>
                    <span className="mono" style={{ color: "var(--ink-2)", fontSize: 11 }}>{s.branch}</span>
                    {s.status === "live" ? <span className="pill live"><span className="swatch"/>live</span> : <span className="pill warn"><span className="swatch"/>blocked</span>}
                    <span className="pill" style={{ borderColor: "var(--accent-line)", background: "var(--accent-soft)", color: "var(--accent)", marginLeft: "auto" }}>
                      <Icon name="globe" size={9}/> {i % 2 === 0 ? "anthropic-direct" : "bedrock-prod"}
                    </span>
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 11.5, color: "var(--ink-2)" }}>
                    <span className="mono">{s.id}</span>
                    <span style={{ color: "var(--ink-4)" }}>›</span>
                    <span>{s.lastEvent}</span>
                    <span style={{ color: "var(--ink-3)" }}>· {s.ago} ago</span>
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 8 }}>
                    <div style={{ flex: 1, maxWidth: 220 }}>
                      <div className="bar"><i style={{ width: `${(s.tasks.done / s.tasks.total) * 100}%` }}/></div>
                      <div style={{ fontSize: 10.5, color: "var(--ink-3)", marginTop: 3, fontFamily: "var(--font-mono)" }}>{s.tasks.done}/{s.tasks.total} tasks · {s.tasks.active} active</div>
                    </div>
                    <Spark data={fakeSpark(20, i + 4)} accent/>
                  </div>
                </div>
                <div style={{ textAlign: "right", display: "flex", flexDirection: "column", gap: 4, alignItems: "flex-end" }}>
                  <div className="mono" style={{ fontSize: 16, fontWeight: 600 }}>{(s.tokens / 1000).toFixed(1)}k</div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>${s.cost.toFixed(2)} · {s.duration}</div>
                  <button className="btn sm">Open <Icon name="chev" size={11}/></button>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Today */}
        <div className="card">
          <div className="card-head">
            <h3><Icon name="chart" size={12}/> Today's activity</h3>
            <span className="meta">UTC+7 · 06:00–18:00</span>
          </div>
          <div className="card-body">
            <div style={{ display: "flex", alignItems: "flex-end", gap: 3, height: 90, marginBottom: 10 }}>
              {fakeSpark(48, 7).map((v, i) => (
                <div key={i} style={{ flex: 1, height: `${v * 100}%`, background: i > 38 ? "var(--accent)" : "var(--bg-4)", borderRadius: 1 }}/>
              ))}
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--ink-3)", fontFamily: "var(--font-mono)", marginBottom: 14 }}>
              <span>06:00</span><span>09:00</span><span>12:00</span><span>15:00</span><span>now</span>
            </div>
            <dl className="kv">
              <dt>peak hour</dt><dd>14:00 · 38.4k tokens</dd>
              <dt>top tool</dt><dd><span className="tool-tag bash"><span className="swatch"/>Bash</span> 142 calls</dd>
              <dt>top agent</dt><dd>general · 4 sessions</dd>
              <dt>longest run</dt><dd className="mono">02:14:50 (ccm-web)</dd>
            </dl>
          </div>
        </div>
      </div>

      {/* Recent */}
      <div className="card" style={{ marginTop: 14 }}>
        <div className="card-head">
          <h3><Icon name="clock" size={12}/> Recent sessions</h3>
          <div style={{ display: "flex", gap: 6 }}>
            <button className="btn sm ghost"><Icon name="filter" size={11}/> Filter</button>
            <button className="btn sm ghost"><Icon name="download" size={11}/> Export</button>
          </div>
        </div>
        <div className="card-body flush">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 90 }}>Session</th>
                <th>Project</th>
                <th>Duration</th>
                <th>Tokens</th>
                <th>Cost</th>
                <th>Tasks</th>
                <th>Deviation</th>
                <th>Ended</th>
                <th style={{ width: 40 }}></th>
              </tr>
            </thead>
            <tbody>
              {recent.map(r => (
                <tr key={r.id}>
                  <td className="mono" style={{ color: "var(--ink-2)" }}>{r.id}</td>
                  <td><span style={{ fontWeight: 500 }}>{r.name}</span></td>
                  <td className="mono">{r.duration}</td>
                  <td className="mono">{(r.tokens / 1000).toFixed(1)}k</td>
                  <td className="mono">${r.cost.toFixed(2)}</td>
                  <td className="mono">{r.tasks}</td>
                  <td>
                    {r.deviation === "low" && <span className="pill ok"><span className="swatch"/>low</span>}
                    {r.deviation === "med" && <span className="pill warn"><span className="swatch"/>medium</span>}
                    {r.deviation === "high" && <span className="pill err"><span className="swatch"/>high</span>}
                  </td>
                  <td style={{ color: "var(--ink-3)" }}>{r.end}</td>
                  <td><Icon name="chev" size={12}/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

window.S01_Dashboard = S01_Dashboard;