/* global React, Icon */

// ─── S02 Session Live ──────────────────────────────────────
function S02_SessionLive() {
  const events = [
    { t: "14:24:11", kind: "tool", tool: "bash", text: "Bash(bun test src/timeline)", meta: "running… 2.1s", state: "live" },
    { t: "14:24:08", kind: "task", text: "Task started: implement timeline replay scrubber", state: "active" },
    { t: "14:24:02", kind: "tool", tool: "edit", text: "Edit(src/timeline/replay.tsx)", meta: "+42 −8" },
    { t: "14:23:55", kind: "tool", tool: "read", text: "Read(src/timeline/store.ts)", meta: "184 lines" },
    { t: "14:23:48", kind: "plan", text: "Plan step 4/7 advanced", meta: "wire SSE → store" },
    { t: "14:23:31", kind: "tool", tool: "glob", text: "Glob(**/*.tsx)", meta: "62 matches" },
    { t: "14:23:18", kind: "warn", text: "Plan deviation: unscheduled refactor of useReplay()", meta: "auto-detected" },
    { t: "14:22:54", kind: "tool", tool: "edit", text: "Edit(src/timeline/use-replay.ts)", meta: "+88 −12" },
    { t: "14:22:33", kind: "tool", tool: "bash", text: "Bash(bun typecheck)", meta: "ok · 4.8s" },
    { t: "14:22:11", kind: "task", text: "Task completed: extract scrubber primitive", state: "done" },
  ];
  const tasks = [
    { col: "done", title: "Scaffold replay route", calls: 6 },
    { col: "done", title: "Extract scrubber primitive", calls: 11 },
    { col: "active", title: "Implement timeline replay scrubber", calls: 23, active: true },
    { col: "todo", title: "Wire SSE events to replay store", calls: 0 },
    { col: "todo", title: "Add deviation markers to timeline", calls: 0 },
    { col: "blocked", title: "Persist playhead via localStorage", calls: 2, note: "blocked: needs design review" },
  ];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">sessions / <span>s_8af3 · ccm-web</span></div>
          <h1 style={{ display: "flex", alignItems: "center", gap: 10 }}>
            implement-timeline-replay
            <span className="pill live"><span className="swatch"/>live · 24m</span>
            <span className="pill" style={{ borderColor: "var(--accent-line)", background: "var(--accent-soft)", color: "var(--accent)" }}>
              <span className="swatch" style={{ background: "var(--accent)" }}/>anthropic-direct · sonnet-4-5
            </span>
          </h1>
          <p>feat/timeline-replay · agent <span className="link">general</span> · model claude-sonnet-4-5</p>
        </div>
        <div className="actions">
          <button className="btn"><Icon name="eye" size={12}/> Follow</button>
          <button className="btn"><Icon name="download" size={12}/> Export</button>
          <button className="btn danger"><Icon name="x" size={12}/> Interrupt</button>
        </div>
      </div>

      {/* Top strip */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 10, marginBottom: 14 }}>
        <div className="stat">
          <div className="stat-label">Tokens used</div>
          <div className="stat-value">42.2<span className="unit">k / 200k</span></div>
          <div className="bar" style={{ marginTop: 4 }}><i style={{ width: "21%" }}/></div>
        </div>
        <div className="stat">
          <div className="stat-label">Estimated cost</div>
          <div className="stat-value">$0.84</div>
          <div className="stat-delta">in: 38.1k · out: 4.1k</div>
        </div>
        <div className="stat">
          <div className="stat-label">Active task</div>
          <div className="stat-value" style={{ fontSize: 13, fontFamily: "var(--font-sans)", fontWeight: 500 }}>Implement replay scrubber</div>
          <div className="stat-delta">step 4 of 7 · 6m on this step</div>
        </div>
        <div className="stat">
          <div className="stat-label">Deviation</div>
          <div className="stat-value">12<span className="unit">%</span></div>
          <div className="stat-delta warn">1 unscheduled action</div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 14 }}>
        {/* Task board mini */}
        <div className="card">
          <div className="card-head">
            <h3><Icon name="board" size={12}/> Tasks</h3>
            <span className="meta">6 total · 1 active</span>
          </div>
          <div className="card-body" style={{ padding: 10 }}>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
              {["todo", "active", "blocked", "done"].map(col => {
                const label = { todo: "To do", active: "In progress", blocked: "Blocked", done: "Done" }[col];
                const items = tasks.filter(t => t.col === col);
                return (
                  <div key={col}>
                    <div style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: ".08em", color: "var(--ink-3)", padding: "4px 4px 8px", display: "flex", justifyContent: "space-between" }}>
                      <span>{label}</span><span className="mono">{items.length}</span>
                    </div>
                    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                      {items.map((t, i) => (
                        <div key={i} style={{
                          background: t.active ? "var(--bg-3)" : "var(--bg-2)",
                          border: t.active ? "1px solid var(--accent-line)" : "1px solid var(--border)",
                          borderRadius: "var(--r-2)",
                          padding: "8px 9px",
                          fontSize: 11.5,
                          color: "var(--ink-1)",
                          position: "relative"
                        }}>
                          {t.active && <span style={{ position: "absolute", top: 6, right: 6 }} className="pill live"><span className="swatch"/></span>}
                          <div style={{ marginRight: t.active ? 24 : 0, lineHeight: 1.35 }}>{t.title}</div>
                          <div style={{ marginTop: 6, fontSize: 10, fontFamily: "var(--font-mono)", color: "var(--ink-3)" }}>
                            {t.calls > 0 ? `${t.calls} tool calls` : "—"}
                          </div>
                          {t.note && <div style={{ marginTop: 4, fontSize: 10, color: "var(--err)" }}>{t.note}</div>}
                        </div>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Live feed */}
        <div className="card">
          <div className="card-head">
            <h3><Icon name="activity" size={12}/> Live event feed</h3>
            <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
              <span className="pill"><Icon name="filter" size={10}/> all events</span>
              <span className="meta">SSE · 142 events</span>
            </div>
          </div>
          <div className="card-body" style={{ padding: 0, maxHeight: 340, overflow: "auto" }}>
            {events.map((e, i) => (
              <div key={i} style={{
                display: "grid",
                gridTemplateColumns: "auto auto 1fr auto",
                gap: 12,
                padding: "8px 14px",
                borderTop: i ? "1px solid var(--border-soft)" : "none",
                alignItems: "center",
                background: e.state === "live" ? "var(--accent-soft)" : "transparent"
              }}>
                <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{e.t}</span>
                <span>
                  {e.kind === "tool" && <span className={`tool-tag ${e.tool}`}><span className="swatch"/>{e.tool}</span>}
                  {e.kind === "task" && <span className="pill accent"><Icon name="board" size={9}/>task</span>}
                  {e.kind === "plan" && <span className="pill info"><Icon name="plan" size={9}/>plan</span>}
                  {e.kind === "warn" && <span className="pill warn"><span className="swatch"/>deviation</span>}
                </span>
                <span style={{ fontSize: 12, color: "var(--ink-1)" }}>
                  {e.text}
                  {e.meta && <span style={{ color: "var(--ink-3)", marginLeft: 8, fontFamily: "var(--font-mono)", fontSize: 11 }}>· {e.meta}</span>}
                </span>
                <span>
                  {e.state === "live" && <span className="pill live"><span className="swatch"/></span>}
                  {e.state === "done" && <Icon name="check" size={12} className="" />}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Active tool panel */}
      <div className="card" style={{ marginTop: 14 }}>
        <div className="card-head">
          <h3><Icon name="bolt" size={12}/> Current tool call <span className="pill live"><span className="swatch"/>running</span></h3>
          <span className="meta mono">tool_use_id: tu_01H8XJ…</span>
        </div>
        <div className="card-body" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <div>
            <div style={{ fontSize: 11, color: "var(--ink-3)", marginBottom: 6, textTransform: "uppercase", letterSpacing: ".06em" }}>Input</div>
            <div className="code">
{`{
  `}<span className="k">"command"</span>{`: `}<span className="s">"bun test src/timeline"</span>{`,
  `}<span className="k">"description"</span>{`: `}<span className="s">"run timeline tests"</span>{`,
  `}<span className="k">"timeout"</span>{`: `}<span className="n">120000</span>{`
}`}
            </div>
          </div>
          <div>
            <div style={{ fontSize: 11, color: "var(--ink-3)", marginBottom: 6, textTransform: "uppercase", letterSpacing: ".06em", display: "flex", justifyContent: "space-between" }}>
              <span>Output (streaming)</span>
              <span className="mono" style={{ textTransform: "none", color: "var(--ink-2)" }}>2.14s · 412 lines</span>
            </div>
            <div className="code">
<span className="c">{`bun test v1.1.34
`}</span>
<span className="p">{`src/timeline/replay.test.ts:
`}</span>
<span className="s">{`✓ `}</span>{`mounts replay scrubber
`}<span className="s">{`✓ `}</span>{`seeks to t=0 on init
`}<span className="s">{`✓ `}</span>{`persists playhead to localStorage
`}<span className="n">{`◐ `}</span>{`reacts to SSE event_id ordering ▍`}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.S02_SessionLive = S02_SessionLive;