/* global React, Icon */

// ─── S03 Timeline / Replay ─────────────────────────────
function S03_Timeline() {
  const markers = [
    { t: 0.05, kind: "task", label: "task: scaffold" },
    { t: 0.18, kind: "task", label: "task: scrubber" },
    { t: 0.32, kind: "warn", label: "deviation" },
    { t: 0.47, kind: "plan", label: "plan rev 2" },
    { t: 0.61, kind: "task", label: "task: replay" },
    { t: 0.74, kind: "warn", label: "concern" },
    { t: 0.88, kind: "task", label: "task: tests" },
  ];
  const tokenCurve = Array.from({ length: 80 }, (_, i) => {
    const x = i / 79;
    return 0.05 + Math.min(1, x * 1.2 + Math.sin(x * 8) * 0.05);
  });

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">sessions / s_6f22 / <span>replay</span></div>
          <h1>Timeline · ccm-web (01:48:22)</h1>
          <p>Retrospective view · 187.4k tokens · 8/8 tasks · 2 deviations</p>
        </div>
        <div className="actions">
          <button className="btn"><Icon name="download" size={12}/> Export JSON</button>
          <button className="btn"><Icon name="copy" size={12}/> Share</button>
          <button className="btn primary"><Icon name="plan" size={12}/> Open plan</button>
        </div>
      </div>

      {/* Replay player */}
      <div className="card" style={{ marginBottom: 14 }}>
        <div className="card-head">
          <h3><Icon name="timeline" size={12}/> Replay</h3>
          <span className="meta mono">t = 00:42:18 / 01:48:22</span>
        </div>
        <div className="card-body">
          {/* Token curve */}
          <div style={{ position: "relative", height: 80, marginBottom: 6 }}>
            <svg viewBox="0 0 800 80" preserveAspectRatio="none" style={{ width: "100%", height: "100%" }}>
              <defs>
                <linearGradient id="tg" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="#d97757" stopOpacity=".4"/>
                  <stop offset="1" stopColor="#d97757" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <path d={`M 0 80 ${tokenCurve.map((v, i) => `L ${(i / 79) * 800} ${80 - v * 76}`).join(" ")} L 800 80 Z`} fill="url(#tg)"/>
              <path d={`M 0 ${80 - tokenCurve[0] * 76} ${tokenCurve.map((v, i) => `L ${(i / 79) * 800} ${80 - v * 76}`).join(" ")}`} fill="none" stroke="#d97757" strokeWidth="1.4"/>
              <line x1="320" x2="320" y1="0" y2="80" stroke="#f4f6f8" strokeWidth="1.5" strokeDasharray="2 2"/>
            </svg>
            <div style={{ position: "absolute", top: 4, left: 8, fontSize: 10, color: "var(--ink-3)", fontFamily: "var(--font-mono)" }}>tokens · cumulative</div>
          </div>
          {/* Track */}
          <div style={{ position: "relative", height: 36, background: "var(--bg-1)", border: "1px solid var(--border)", borderRadius: 4, marginBottom: 8 }}>
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, var(--accent-soft) 0%, var(--accent-soft) 39%, transparent 39%)" }}/>
            {markers.map((m, i) => (
              <div key={i} style={{ position: "absolute", left: `${m.t * 100}%`, top: 0, bottom: 0, width: 2,
                background: m.kind === "warn" ? "var(--warn)" : m.kind === "plan" ? "var(--info)" : "var(--accent)" }}>
                <div style={{ position: "absolute", top: -16, left: -2, fontSize: 9, color: "var(--ink-3)", fontFamily: "var(--font-mono)", whiteSpace: "nowrap", transform: "translateX(-50%)" }}>
                  {m.label}
                </div>
              </div>
            ))}
            {/* Playhead */}
            <div style={{ position: "absolute", left: "39%", top: -4, bottom: -4, width: 2, background: "var(--ink-0)" }}>
              <div style={{ position: "absolute", left: -5, top: -5, width: 12, height: 12, borderRadius: 6, background: "var(--ink-0)" }}/>
            </div>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--ink-3)", fontFamily: "var(--font-mono)" }}>
            <span>00:00</span><span>00:30</span><span>01:00</span><span>01:30</span><span>01:48</span>
          </div>
          {/* Controls */}
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 14 }}>
            <button className="btn icon"><Icon name="chev" size={14} className="" /></button>
            <button className="btn primary"><Icon name="play" size={11}/> Play</button>
            <button className="btn icon"><Icon name="chev" size={14}/></button>
            <span className="mono" style={{ fontSize: 11, color: "var(--ink-2)" }}>1.0×</span>
            <div style={{ flex: 1 }}/>
            <span className="pill"><span className="swatch" style={{ background: "var(--accent)" }}/>task start</span>
            <span className="pill"><span className="swatch" style={{ background: "var(--info)" }}/>plan snapshot</span>
            <span className="pill"><span className="swatch" style={{ background: "var(--warn)" }}/>deviation</span>
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 14 }}>
        {/* Snapshot at playhead */}
        <div className="card">
          <div className="card-head">
            <h3><Icon name="eye" size={12}/> State at t = 00:42:18</h3>
            <span className="meta mono">event_id 4128</span>
          </div>
          <div className="card-body">
            <dl className="kv" style={{ marginBottom: 12 }}>
              <dt>active task</dt><dd>Wire SSE → replay store</dd>
              <dt>plan step</dt><dd>4 of 7 · "Replay scrubber primitive"</dd>
              <dt>tokens used</dt><dd className="mono">82.4k <span style={{ color: "var(--ink-3)" }}>(44%)</span></dd>
              <dt>last tool</dt><dd><span className="tool-tag bash"><span className="swatch"/>Bash</span> bun test src/timeline</dd>
              <dt>working dir</dt><dd className="mono" style={{ fontSize: 11 }}>~/projects/ccm-web</dd>
            </dl>
            <div style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: ".06em", marginBottom: 6 }}>Recent context (3)</div>
            <div className="code">
<span className="p">{`14:42:11 `}</span>{`Edit(src/timeline/replay.tsx) `}<span className="c">{`+42 −8`}</span>{`
`}<span className="p">{`14:42:08 `}</span>{`Read(src/timeline/store.ts)
`}<span className="p">{`14:41:59 `}</span><span className="n">{`Plan deviation`}</span>{`: unscheduled refactor`}
            </div>
          </div>
        </div>

        {/* Deviations list */}
        <div className="card">
          <div className="card-head">
            <h3><Icon name="warn" size={12}/> Deviations & concerns <span className="pill warn"><span className="swatch"/>2</span></h3>
            <span className="meta">click to seek</span>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            {[
              { t: "00:34:42", kind: "deviation", title: "Unscheduled refactor of useReplay()", note: "Plan called for inline impl; refactored into hook instead. +18% tokens." },
              { t: "01:19:08", kind: "concern", title: "Test skipped: persists playhead", note: "marked test.skip — flagged by user as concern." },
            ].map((d, i) => (
              <div key={i} style={{ padding: "12px 14px", borderTop: i ? "1px solid var(--border-soft)" : "none", display: "flex", gap: 12 }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)", flex: "none", width: 60 }}>{d.t}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 3 }}>
                    {d.kind === "deviation"
                      ? <span className="pill warn"><span className="swatch"/>deviation</span>
                      : <span className="pill err"><span className="swatch"/>concern</span>}
                    <span style={{ fontWeight: 500, fontSize: 12.5 }}>{d.title}</span>
                  </div>
                  <div style={{ fontSize: 11.5, color: "var(--ink-2)", lineHeight: 1.5 }}>{d.note}</div>
                </div>
                <Icon name="chev" size={12} className="" />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── S04 Task Board ────────────────────────────────────
function S04_TaskBoard() {
  const cols = [
    { id: "pending", label: "Pending", count: 4, color: "var(--ink-3)" },
    { id: "active", label: "In progress", count: 3, color: "var(--accent)" },
    { id: "blocked", label: "Blocked", count: 2, color: "var(--warn)" },
    { id: "done", label: "Done", count: 14, color: "var(--ok)" },
  ];
  const tasks = {
    pending: [
      { title: "Add deviation markers to timeline track", session: "s_8af3", project: "ccm-web", tools: 0, dur: "—" },
      { title: "Implement export-to-JSON for sessions", session: "s_8af3", project: "ccm-web", tools: 0, dur: "—" },
      { title: "Document hook fail-safe pattern", session: "s_7ec1", project: "atlas-api", tools: 0, dur: "—" },
      { title: "Migrate skill frontmatter to v2", session: "s_7ec1", project: "atlas-api", tools: 0, dur: "—" },
    ],
    active: [
      { title: "Implement replay scrubber primitive", session: "s_8af3", project: "ccm-web", tools: 23, dur: "06:12", deviation: true },
      { title: "Refresh token rotation flow", session: "s_7ec1", project: "atlas-api", tools: 14, dur: "08:42" },
      { title: "Wire SSE → replay store", session: "s_8af3", project: "ccm-web", tools: 8, dur: "02:33" },
    ],
    blocked: [
      { title: "Persist playhead via localStorage", session: "s_8af3", project: "ccm-web", tools: 2, dur: "00:48", note: "needs design review" },
      { title: "Drop legacy /v1/auth endpoint", session: "s_71a0", project: "marketing-site", tools: 0, dur: "—", note: "blocked: external API consumers" },
    ],
    done: [
      { title: "Scaffold replay route", session: "s_8af3", project: "ccm-web", tools: 6, dur: "03:11" },
      { title: "Extract scrubber primitive", session: "s_8af3", project: "ccm-web", tools: 11, dur: "04:42" },
      { title: "Add session export API", session: "s_6f22", project: "ccm-web", tools: 18, dur: "12:08" },
    ],
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">workspace / <span>tasks</span></div>
          <h1>Task board</h1>
          <p>Cross-session view · 23 tasks across 4 projects</p>
        </div>
        <div className="actions">
          <button className="btn"><Icon name="filter" size={12}/> Project: all</button>
          <button className="btn"><Icon name="tag" size={12}/> Group by session</button>
          <button className="btn primary"><Icon name="plus" size={12}/> New task</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        {cols.map(col => (
          <div key={col.id} style={{ background: "var(--bg-2)", border: "1px solid var(--border)", borderRadius: "var(--r-3)", overflow: "hidden", display: "flex", flexDirection: "column" }}>
            <div style={{ padding: "10px 12px", borderBottom: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ width: 8, height: 8, borderRadius: 2, background: col.color }}/>
                <span style={{ fontWeight: 600, fontSize: 12 }}>{col.label}</span>
                <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>{col.count}</span>
              </div>
              <Icon name="plus" size={12} className=""/>
            </div>
            <div style={{ padding: 8, display: "flex", flexDirection: "column", gap: 6, minHeight: 240 }}>
              {tasks[col.id].map((t, i) => (
                <div key={i} style={{
                  background: "var(--bg-3)",
                  border: t.deviation ? "1px solid var(--accent-line)" : "1px solid var(--border)",
                  borderRadius: "var(--r-2)",
                  padding: "10px 11px",
                  cursor: "pointer",
                  position: "relative"
                }}>
                  <div style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-0)", lineHeight: 1.35, marginBottom: 8 }}>{t.title}</div>
                  <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }}>
                    <span className="mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>{t.project}</span>
                    <span style={{ color: "var(--ink-4)" }}>·</span>
                    <span className="mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>{t.session}</span>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <div style={{ display: "flex", gap: 4 }}>
                      {t.tools > 0 && <span className="pill"><Icon name="bolt" size={9}/>{t.tools}</span>}
                      {t.deviation && <span className="pill warn"><span className="swatch"/>dev</span>}
                    </div>
                    <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{t.dur}</span>
                  </div>
                  {t.note && <div style={{ marginTop: 6, paddingTop: 6, borderTop: "1px dashed var(--border)", fontSize: 10.5, color: "var(--err)" }}>{t.note}</div>}
                </div>
              ))}
              {tasks[col.id].length < 4 && col.id === "done" && (
                <button className="btn sm ghost" style={{ justifyContent: "center", marginTop: 4 }}>+ 11 more done</button>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.S03_Timeline = S03_Timeline;
window.S04_TaskBoard = S04_TaskBoard;