/* global React, Icon */

// ─── S11 Analytics ────────────────────────────────────
function S11_Analytics() {
  const tokenSeries = [42, 58, 71, 49, 88, 124, 96, 118, 142, 89, 156, 132, 178, 148];
  const days = ["Apr 18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "May 1"];
  const max = Math.max(...tokenSeries);

  const tools = [
    { name: "Bash", count: 412, pct: 32, color: "var(--c-bash)" },
    { name: "Read", count: 298, pct: 23, color: "var(--c-read)" },
    { name: "Edit", count: 241, pct: 19, color: "var(--c-edit)" },
    { name: "Glob", count: 142, pct: 11, color: "var(--c-glob)" },
    { name: "Task", count: 98,  pct: 8,  color: "var(--c-task)" },
    { name: "WebFetch", count: 64, pct: 5, color: "var(--c-web)" },
    { name: "Other", count: 28, pct: 2, color: "var(--ink-3)" },
  ];

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">workspace / <span>analytics</span></div>
          <h1>Analytics</h1>
          <p>Last 14 days · 4 projects · 38 sessions · 1.62M tokens · est. $32.41</p>
        </div>
        <div className="actions">
          <button className="btn"><Icon name="filter" size={12}/> All projects</button>
          <button className="btn"><Icon name="clock" size={12}/> 14d</button>
          <button className="btn"><Icon name="download" size={12}/> Export CSV</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginBottom: 14 }}>
        <div className="stat"><div className="stat-label">Tokens / 14d</div><div className="stat-value">1.62<span className="unit">M</span></div><div className="stat-delta up">↑ 24% vs prior 14d</div></div>
        <div className="stat"><div className="stat-label">Cost / 14d</div><div className="stat-value">$32.41</div><div className="stat-delta">avg $2.31 / day</div></div>
        <div className="stat"><div className="stat-label">Sessions</div><div className="stat-value">38</div><div className="stat-delta">avg 01:14:08 each</div></div>
        <div className="stat"><div className="stat-label">Task completion</div><div className="stat-value">87<span className="unit">%</span></div><div className="stat-delta up">↑ 4pt</div></div>
      </div>

      {/* Token chart */}
      <div className="card" style={{ marginBottom: 14 }}>
        <div className="card-head">
          <h3><Icon name="chart" size={12}/> Token usage · daily</h3>
          <div style={{ display: "flex", gap: 6 }}>
            <span className="pill"><span className="swatch" style={{ background: "var(--accent)" }}/>tokens</span>
            <span className="pill"><span className="swatch" style={{ background: "var(--info)" }}/>cost</span>
          </div>
        </div>
        <div className="card-body">
          <div style={{ position: "relative", height: 160 }}>
            <svg viewBox="0 0 800 160" preserveAspectRatio="none" style={{ width: "100%", height: "100%" }}>
              {[0, 0.25, 0.5, 0.75, 1].map(y => (
                <line key={y} x1="0" x2="800" y1={20 + y * 120} y2={20 + y * 120} stroke="#20262d" strokeWidth="1"/>
              ))}
              {tokenSeries.map((v, i) => {
                const x = (i / (tokenSeries.length - 1)) * 760 + 20;
                const h = (v / max) * 110;
                return <rect key={i} x={x - 14} y={140 - h} width="28" height={h} fill={i === tokenSeries.length - 1 ? "#d97757" : "#2b323a"} rx="2"/>;
              })}
              <path d={`M ${tokenSeries.map((v, i) => `${(i / (tokenSeries.length - 1)) * 760 + 20} ${140 - (v / max) * 110 - 6}`).join(" L ")}`}
                fill="none" stroke="#6ba3d6" strokeWidth="1.5" strokeDasharray="3 3"/>
            </svg>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--ink-3)", fontFamily: "var(--font-mono)", marginTop: 6 }}>
            {days.map(d => <span key={d}>{d}</span>)}
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr", gap: 14 }}>
        {/* Tool distribution */}
        <div className="card">
          <div className="card-head"><h3>Tool call distribution</h3><span className="meta">1,283 calls</span></div>
          <div className="card-body">
            <div style={{ display: "flex", height: 8, borderRadius: 4, overflow: "hidden", marginBottom: 14 }}>
              {tools.map(t => <span key={t.name} style={{ width: `${t.pct}%`, background: t.color }}/>)}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {tools.map(t => (
                <div key={t.name} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto auto", gap: 10, alignItems: "center", fontSize: 12 }}>
                  <span style={{ width: 10, height: 10, borderRadius: 2, background: t.color }}/>
                  <span style={{ fontWeight: 500 }}>{t.name}</span>
                  <span className="mono" style={{ color: "var(--ink-2)" }}>{t.count}</span>
                  <span className="mono" style={{ color: "var(--ink-3)", width: 40, textAlign: "right" }}>{t.pct}%</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Top agents */}
        <div className="card">
          <div className="card-head"><h3>Top agents</h3><span className="meta">by sessions</span></div>
          <div className="card-body" style={{ padding: 0 }}>
            {[
              { name: "general", sessions: 22, tokens: "812k", cost: "$16.20", efficiency: "high" },
              { name: "code-reviewer", sessions: 9, tokens: "284k", cost: "$5.68", efficiency: "high" },
              { name: "test-runner", sessions: 4, tokens: "198k", cost: "$3.96", efficiency: "med" },
              { name: "doc-writer", sessions: 3, tokens: "62k", cost: "$0.42", efficiency: "high" },
            ].map((a, i) => (
              <div key={a.name} style={{ padding: "10px 14px", borderTop: i ? "1px solid var(--border-soft)" : "none", display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ width: 8, height: 8, borderRadius: 2, background: ["#d97757", "#6ba3d6", "#7fb685", "#e0a458"][i] }}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 500, fontSize: 12.5 }}>{a.name}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{a.sessions} sess · {a.tokens} · {a.cost}</div>
                </div>
                {a.efficiency === "high" ? <span className="pill ok"><span className="swatch"/>efficient</span> : <span className="pill warn"><span className="swatch"/>review</span>}
              </div>
            ))}
          </div>
        </div>

        {/* Plan health */}
        <div className="card">
          <div className="card-head"><h3>Plan health</h3><span className="meta">deviation rate</span></div>
          <div className="card-body">
            <div style={{ fontSize: 32, fontWeight: 600, fontFamily: "var(--font-mono)", color: "var(--ok)" }}>8.4<span style={{ fontSize: 14, color: "var(--ink-3)" }}>%</span></div>
            <div style={{ fontSize: 11, color: "var(--ink-3)", marginBottom: 14 }}>↓ 3.2pt vs prior 14d</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {[
                { k: "Plans created", v: "31" },
                { k: "Plans revised", v: "12" },
                { k: "Total deviations", v: "26" },
                { k: "Avg steps / plan", v: "6.4" },
                { k: "Tasks unfinished", v: "5" },
              ].map(r => (
                <div key={r.k} style={{ display: "flex", justifyContent: "space-between", fontSize: 12, paddingBottom: 4, borderBottom: "1px dashed var(--border)" }}>
                  <span style={{ color: "var(--ink-2)" }}>{r.k}</span>
                  <span className="mono">{r.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Per project */}
      <div className="card" style={{ marginTop: 14 }}>
        <div className="card-head"><h3>Per project</h3><span className="meta">14d</span></div>
        <div className="card-body flush">
          <table className="tbl">
            <thead><tr><th>Project</th><th>Sessions</th><th>Tokens</th><th>Cost</th><th>Avg duration</th><th>Completion</th><th>Top agent</th><th>Trend</th></tr></thead>
            <tbody>
              {[
                { n: "ccm-web", s: 18, t: "892k", c: "$17.84", d: "01:24:11", comp: 92, agent: "general", trend: fakeSpark2(14, 4) },
                { n: "atlas-api", s: 11, t: "412k", c: "$8.24", d: "00:58:42", comp: 84, agent: "code-reviewer", trend: fakeSpark2(14, 9) },
                { n: "marketing-site", s: 6, t: "208k", c: "$4.16", d: "00:42:18", comp: 78, agent: "general", trend: fakeSpark2(14, 12) },
                { n: "design-tokens", s: 3, t: "108k", c: "$2.17", d: "00:31:00", comp: 100, agent: "doc-writer", trend: fakeSpark2(14, 17) },
              ].map(p => (
                <tr key={p.n}>
                  <td><span style={{ fontWeight: 500 }}>{p.n}</span></td>
                  <td className="mono">{p.s}</td>
                  <td className="mono">{p.t}</td>
                  <td className="mono">{p.c}</td>
                  <td className="mono">{p.d}</td>
                  <td><div style={{ display: "flex", alignItems: "center", gap: 8 }}><div className="bar" style={{ width: 80 }}><i style={{ width: `${p.comp}%`, background: p.comp > 85 ? "var(--ok)" : "var(--warn)" }}/></div><span className="mono" style={{ fontSize: 11 }}>{p.comp}%</span></div></td>
                  <td><span className="mono" style={{ fontSize: 11 }}>{p.agent}</span></td>
                  <td><div className="spark accent" style={{ width: 70 }}>{p.trend.map((v, i) => <span key={i} className="b" style={{ height: `${v * 100}%` }}/>)}</div></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function fakeSpark2(n, seed) {
  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;
}

// ─── S12 CCM Config ───────────────────────────────────
function S12_CCMConfig() {
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">system / <span>ccm config</span></div>
          <h1>CCM config</h1>
          <p>Server :7421 · uptime 2d 14h · sqlite 1.2 MB · v0.4.2</p>
        </div>
        <div className="actions">
          <button className="btn"><Icon name="refresh" size={12}/> Restart server</button>
          <button className="btn primary">Save</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <div className="card">
          <div className="card-head"><h3><Icon name="server" size={12}/> Server</h3><span className="pill ok"><span className="swatch"/>healthy</span></div>
          <div className="card-body" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div className="field"><label>Port</label><input className="input mono" defaultValue="7421"/></div>
            <div className="field"><label>Bind</label><div className="input" style={{ display: "flex", justifyContent: "space-between" }}>127.0.0.1 (local) <Icon name="chevd" size={11}/></div></div>
            <div className="field"><label>Logging level</label>
              <div style={{ display: "flex", gap: 4, background: "var(--bg-1)", border: "1px solid var(--border-strong)", borderRadius: "var(--r-2)", padding: 2 }}>
                <button className="btn sm ghost" style={{ flex: 1, justifyContent: "center" }}>minimal</button>
                <button className="btn sm primary" style={{ flex: 1, justifyContent: "center" }}>standard</button>
                <button className="btn sm ghost" style={{ flex: 1, justifyContent: "center" }}>full</button>
              </div>
              <span className="hint">standard: tool calls + plan snapshots, no tool I/O bodies</span>
            </div>
            <div className="field"><label>Data retention</label><div className="input" style={{ display: "flex", justifyContent: "space-between" }}>30 days <Icon name="chevd" size={11}/></div></div>
            <div className="field" style={{ gridColumn: "span 2" }}><label>SQLite path</label><input className="input mono" defaultValue="~/.ccm/ccm.db"/></div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3><Icon name="hook" size={12}/> Hook installer</h3><span className="meta">writes settings.json</span></div>
          <div className="card-body" style={{ padding: 0 }}>
            {[
              { name: "Global", path: "~/.claude/settings.json", state: "installed", hooks: 3 },
              { name: "ccm-web", path: ".claude/settings.json", state: "installed", hooks: 2 },
              { name: "atlas-api", path: ".claude/settings.json", state: "installed", hooks: 1 },
              { name: "marketing-site", path: ".claude/settings.json", state: "missing", hooks: 0 },
              { name: "design-tokens", path: ".claude/settings.json", state: "missing", hooks: 0 },
            ].map((s, i) => (
              <div key={s.name} style={{ padding: "10px 14px", borderTop: i ? "1px solid var(--border-soft)" : "none", display: "flex", alignItems: "center", gap: 10 }}>
                <Icon name="folder" size={12}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 500, fontSize: 12.5 }}>{s.name}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{s.path}</div>
                </div>
                {s.state === "installed"
                  ? <><span className="pill ok"><span className="swatch"/>{s.hooks} hooks</span><button className="btn sm">Uninstall</button></>
                  : <><span className="pill"><span className="swatch"/>not installed</span><button className="btn sm primary">Install</button></>}
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Storage</h3><span className="meta">sqlite</span></div>
          <div className="card-body">
            <div style={{ display: "flex", height: 8, borderRadius: 4, overflow: "hidden", marginBottom: 12 }}>
              <span style={{ width: "48%", background: "var(--accent)" }}/>
              <span style={{ width: "22%", background: "var(--info)" }}/>
              <span style={{ width: "18%", background: "var(--ok)" }}/>
              <span style={{ width: "8%", background: "var(--warn)" }}/>
              <span style={{ width: "4%", background: "var(--ink-3)" }}/>
            </div>
            {[
              ["events", "576 KB", "var(--accent)"],
              ["tool_calls", "264 KB", "var(--info)"],
              ["plan_snapshots", "216 KB", "var(--ok)"],
              ["sessions", "96 KB", "var(--warn)"],
              ["meta", "48 KB", "var(--ink-3)"],
            ].map(([k, v, c]) => (
              <div key={k} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 10, alignItems: "center", fontSize: 12, padding: "4px 0" }}>
                <span style={{ width: 8, height: 8, borderRadius: 2, background: c }}/>
                <span className="mono" style={{ color: "var(--ink-2)" }}>{k}</span>
                <span className="mono">{v}</span>
              </div>
            ))}
            <div style={{ display: "flex", gap: 6, marginTop: 12 }}>
              <button className="btn sm"><Icon name="download" size={11}/> Backup</button>
              <button className="btn sm danger"><Icon name="trash" size={11}/> Vacuum old</button>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Version</h3><span className="meta">v0.4.2</span></div>
          <div className="card-body">
            <dl className="kv">
              <dt>installed</dt><dd>v0.4.2 · 3 days ago</dd>
              <dt>latest</dt><dd>v0.4.3 <span className="pill warn"><span className="swatch"/>update available</span></dd>
              <dt>changelog</dt><dd><span className="link">v0.4.3 · fix: SSE backpressure</span></dd>
              <dt>node</dt><dd className="mono">bun 1.1.34</dd>
              <dt>license</dt><dd>MIT</dd>
            </dl>
            <div style={{ display: "flex", gap: 6, marginTop: 14 }}>
              <button className="btn primary"><Icon name="download" size={11}/> Update to v0.4.3</button>
              <button className="btn"><Icon name="ext" size={11}/> Release notes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.S11_Analytics = S11_Analytics;
window.S12_CCMConfig = S12_CCMConfig;