/* global React, Icon */

// ─── S05 Plan Viewer ──────────────────────────────────
function S05_PlanViewer() {
  const versions = [
    { v: "v3", t: "14:18:42", note: "current · added test step", active: true },
    { v: "v2", t: "13:42:18", note: "split scrubber into hook" },
    { v: "v1", t: "13:02:11", note: "initial plan" },
  ];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">sessions / s_8af3 / <span>plan</span></div>
          <h1>Plan · implement-timeline-replay</h1>
          <p>3 versions · last snapshot 6m ago · 2 deviations recorded</p>
        </div>
        <div className="actions">
          <button className="btn"><Icon name="copy" size={12}/> Copy markdown</button>
          <button className="btn"><Icon name="ext" size={12}/> Diff v2 ↔ v3</button>
          <button className="btn primary"><Icon name="edit" size={12}/> Edit</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "180px 1fr 280px", gap: 14 }}>
        {/* Versions */}
        <div className="card">
          <div className="card-head"><h3>Versions</h3></div>
          <div className="card-body" style={{ padding: 0 }}>
            {versions.map((v, i) => (
              <div key={v.v} style={{
                padding: "10px 12px",
                borderTop: i ? "1px solid var(--border-soft)" : "none",
                background: v.active ? "var(--bg-3)" : "transparent",
                borderLeft: v.active ? "2px solid var(--accent)" : "2px solid transparent",
                cursor: "pointer"
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span className="mono" style={{ fontWeight: 600, fontSize: 12 }}>{v.v}</span>
                  <span className="mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>{v.t}</span>
                </div>
                <div style={{ fontSize: 11, color: "var(--ink-2)", marginTop: 3 }}>{v.note}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Plan markdown */}
        <div className="card">
          <div className="card-head">
            <h3><Icon name="plan" size={12}/> Plan v3 <span className="pill accent"><span className="swatch"/>active</span></h3>
            <span className="meta mono">SHA 4f8a · 7 steps</span>
          </div>
          <div className="card-body" style={{ padding: "18px 22px", fontSize: 13, lineHeight: 1.6, color: "var(--ink-1)" }}>
            <h2 style={{ fontSize: 15, margin: "0 0 4px", color: "var(--ink-0)" }}>Implement timeline replay</h2>
            <p style={{ color: "var(--ink-2)", margin: "0 0 16px", fontSize: 12 }}>Add a retrospective replay view to session detail. Scrub timeline, see token accumulation, surface deviations.</p>

            <ol style={{ paddingLeft: 18, margin: 0 }}>
              {[
                { t: "Scaffold /sessions/[id]/replay route", state: "done" },
                { t: "Extract scrubber primitive into <Scrubber>", state: "done" },
                { t: "Build cumulative-tokens curve component", state: "done" },
                { t: "Implement replay scrubber primitive", state: "active", note: "in progress · 06:12" },
                { t: "Wire SSE → replay store", state: "active", note: "started 02:33 ago" },
                { t: "Persist playhead via localStorage", state: "blocked", note: "blocked: design review" },
                { t: "Add tests for scrubber + store", state: "todo" },
              ].map((s, i) => (
                <li key={i} style={{ marginBottom: 10 }}>
                  <span style={{
                    display: "inline-flex", alignItems: "center", gap: 8,
                    color: s.state === "done" ? "var(--ink-3)" : "var(--ink-0)",
                    textDecoration: s.state === "done" ? "line-through" : "none"
                  }}>
                    {s.state === "done" && <span className="pill ok" style={{ padding: "0 5px" }}><Icon name="check" size={9}/></span>}
                    {s.state === "active" && <span className="pill live"><span className="swatch"/></span>}
                    {s.state === "blocked" && <span className="pill warn"><span className="swatch"/>blocked</span>}
                    {s.state === "todo" && <span className="pill"><span className="swatch"/></span>}
                    {s.t}
                  </span>
                  {s.note && <div style={{ marginLeft: 24, fontSize: 11, color: "var(--ink-3)", marginTop: 2 }}>{s.note}</div>}
                </li>
              ))}
            </ol>

            <h3 style={{ fontSize: 12, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: ".08em", margin: "20px 0 8px" }}>Acceptance</h3>
            <ul style={{ paddingLeft: 18, margin: 0, fontSize: 12.5, color: "var(--ink-1)" }}>
              <li>Replay route loads any closed session by id.</li>
              <li>Scrubbing snaps to event boundaries; playhead persists across reload.</li>
              <li>Deviations show as warning markers on the track.</li>
            </ul>
          </div>
        </div>

        {/* Deviations rail */}
        <div className="card">
          <div className="card-head"><h3><Icon name="warn" size={12}/> Deviations</h3><span className="meta">on this plan</span></div>
          <div className="card-body" style={{ padding: 0 }}>
            {[
              { t: "00:34", planned: "inline scrubber impl", actual: "extracted as hook + primitive", reason: "reusability for live + replay" },
              { t: "01:19", planned: "test: persists playhead", actual: "test.skip", reason: "needs storage mock; deferred" },
            ].map((d, i) => (
              <div key={i} style={{ padding: "12px 14px", borderTop: i ? "1px solid var(--border-soft)" : "none" }}>
                <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", marginBottom: 6 }}>t = {d.t}</div>
                <div style={{ fontSize: 11.5, marginBottom: 4 }}><span style={{ color: "var(--ink-3)" }}>planned: </span>{d.planned}</div>
                <div style={{ fontSize: 11.5, marginBottom: 4 }}><span style={{ color: "var(--warn)" }}>actual: </span>{d.actual}</div>
                <div style={{ fontSize: 11, color: "var(--ink-2)", paddingTop: 6, borderTop: "1px dashed var(--border)" }}>{d.reason}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── S06 Hooks ────────────────────────────────────────
function S06_Hooks() {
  const [confirmRemove, setConfirmRemove] = React.useState(null);
  const [previewOpen, setPreviewOpen] = React.useState(true);
  const [previewScope, setPreviewScope] = React.useState("global");
  const hooks = [
    { name: "trace-tool-use", scope: "global", event: "PostToolUse", matcher: "*", action: "HTTP", tier: "tracing", target: "http://localhost:7421/ingest", enabled: true, status: "ok", last: "2s ago", lastAbs: "14:24:09" },
    { name: "snapshot-plan", scope: "global", event: "ExitPlanMode", matcher: "*", action: "HTTP", tier: "tracing", target: "http://localhost:7421/plan", enabled: true, status: "ok", last: "1m ago", lastAbs: "14:23:11" },
    { name: "block-prod-writes", scope: "project", event: "PreToolUse", matcher: "Edit|Write", action: "script", tier: "critical", target: ".claude/hooks/guard.sh", enabled: true, status: "ok", last: "12s ago", lastAbs: "14:23:59" },
    { name: "log-bash", scope: "project", event: "PreToolUse", matcher: "Bash", action: "HTTP", tier: "tracing", target: "http://localhost:7421/bash", enabled: true, status: "warn", last: "4s ago", lastAbs: "14:24:07" },
    { name: "session-end-export", scope: "global", event: "Stop", matcher: "*", action: "script", tier: "inline", target: "~/.claude/hooks/export.sh", enabled: false, status: "off", last: "2h ago", lastAbs: "12:14:02" },
    { name: "redact-secrets", scope: "global", event: "PreToolUse", matcher: "Bash", action: "inline", tier: "critical", target: "(inline)", enabled: true, status: "ok", last: "4s ago", lastAbs: "14:24:07" },
  ];
  const outOfSync = true;
  const tierPill = (t) => {
    if (t === "critical") return <span className="pill err"><Icon name="shield" size={9}/>critical</span>;
    if (t === "tracing") return <span className="pill info"><span className="swatch"/>tracing</span>;
    return <span className="pill"><span className="swatch"/>inline</span>;
  };
  const actionPill = (a) => {
    if (a === "HTTP") return <span className="pill"><Icon name="globe" size={9}/>HTTP</span>;
    if (a === "script") return <span className="pill"><Icon name="terminal" size={9}/>script</span>;
    return <span className="pill"><Icon name="bolt" size={9}/>inline</span>;
  };
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">manager / <span>hooks</span></div>
          <h1>Hooks</h1>
          <p>5 active · 3 global · 2 in ccm-web · server-down failsafe enabled for all HTTP hooks</p>
        </div>
        <div className="actions">
          <button className="btn"><Icon name="ext" size={12}/> View settings.json</button>
          <button className="btn primary"><Icon name="plus" size={12}/> New hook</button>
        </div>
      </div>

      {/* Sync status banner */}
      {outOfSync ? (
        <div style={{
          display: "flex", alignItems: "center", gap: 12,
          padding: "10px 14px", marginBottom: 12,
          background: "var(--warn-soft)", border: "1px solid #4a3a1f",
          borderRadius: "var(--r-3)"
        }}>
          <Icon name="warn" size={14} className=""/>
          <div style={{ flex: 1, fontSize: 12 }}>
            <b style={{ color: "var(--warn)" }}>Out of sync</b>
            <span style={{ color: "var(--ink-1)" }}> — <span className="mono">~/.claude/settings.json</span> was edited outside CCM. SQLite shows <span className="mono">redact-secrets</span> enabled but settings.json doesn't contain it.</span>
          </div>
          <button className="btn sm"><Icon name="eye" size={11}/> View diff</button>
          <button className="btn sm primary"><Icon name="refresh" size={11}/> Sync now</button>
        </div>
      ) : (
        <div style={{
          display: "flex", alignItems: "center", gap: 8,
          padding: "6px 12px", marginBottom: 12,
          background: "var(--ok-soft)", border: "1px solid #2a4a2c",
          borderRadius: "var(--r-3)", fontSize: 11.5, color: "var(--ok)"
        }}>
          <Icon name="check" size={12}/>
          <span>In sync with settings.json · last reconciled 8s ago</span>
        </div>
      )}

      <div style={{ display: "grid", gridTemplateColumns: "1fr 380px", gap: 14 }}>
        {/* List */}
        <div className="card">
          <div className="card-head">
            <h3>Installed hooks <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)", fontWeight: 400, marginLeft: 4 }}>{hooks.length}</span></h3>
            <div style={{ display: "flex", gap: 6 }}>
              <span className="pill">scope: all</span>
              <span className="pill">tier: all</span>
              <span className="pill">event: all</span>
            </div>
          </div>
          <div className="card-body flush">
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{ width: 36 }}></th>
                  <th>Hook</th>
                  <th>Event · matcher</th>
                  <th>Action</th>
                  <th>Tier</th>
                  <th>Scope</th>
                  <th>Last triggered</th>
                  <th style={{ width: 60 }}></th>
                </tr>
              </thead>
              <tbody>
                {hooks.map((h, i) => (
                  <tr key={i} style={{ opacity: h.enabled ? 1 : 0.55 }}>
                    <td><span className={`toggle ${h.enabled ? "on" : ""}`}/></td>
                    <td>
                      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                        <span style={{ fontWeight: 500 }}>{h.name}</span>
                        {h.status === "warn" && <span className="pill warn"><span className="swatch"/>slow</span>}
                      </div>
                      {h.action === "script" ? (
                        <div className="mono link" style={{ fontSize: 10.5, marginTop: 2, display: "inline-flex", alignItems: "center", gap: 4 }}>
                          <Icon name="ext" size={10}/>{h.target}
                        </div>
                      ) : (
                        <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)", marginTop: 2 }}>{h.target}</div>
                      )}
                    </td>
                    <td>
                      <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                        <span className="pill info" style={{ alignSelf: "flex-start" }}><span className="swatch"/>{h.event}</span>
                        <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{h.matcher}</span>
                      </div>
                    </td>
                    <td>{actionPill(h.action)}</td>
                    <td>{tierPill(h.tier)}</td>
                    <td><span className="mono" style={{ fontSize: 11 }}>{h.scope}</span></td>
                    <td>
                      <div className="mono" style={{ fontSize: 11 }}>{h.last}</div>
                      <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>{h.lastAbs}</div>
                    </td>
                    <td>
                      <div style={{ display: "flex", gap: 4, justifyContent: "flex-end" }}>
                        <Icon name="edit" size={12}/>
                        <span onClick={() => setConfirmRemove(h)} style={{ cursor: "pointer", color: "var(--err)" }}>
                          <Icon name="trash" size={12}/>
                        </span>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Builder */}
        <div className="card">
          <div className="card-head">
            <h3><Icon name="hook" size={12}/> Edit · log-bash</h3>
            <span className="pill warn"><span className="swatch"/>unsaved</span>
          </div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div className="field">
              <label>Name</label>
              <input className="input mono" defaultValue="log-bash"/>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
              <div className="field">
                <label>Event</label>
                <div className="input" style={{ display: "flex", justifyContent: "space-between" }}>PreToolUse <Icon name="chevd" size={11}/></div>
                <span className="hint">Fired before any tool invocation</span>
              </div>
              <div className="field">
                <label>Scope</label>
                <div className="input" style={{ display: "flex", justifyContent: "space-between" }}>project · ccm-web <Icon name="chevd" size={11}/></div>
              </div>
            </div>
            <div className="field">
              <label>Matcher <span style={{ color: "var(--ink-3)" }}>regex</span></label>
              <input className="input mono" defaultValue="Bash"/>
            </div>
            <div className="field">
              <label>Action</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 primary" style={{ flex: 1, justifyContent: "center" }}>HTTP</button>
                <button className="btn sm ghost" style={{ flex: 1, justifyContent: "center" }}>Script</button>
                <button className="btn sm ghost" style={{ flex: 1, justifyContent: "center" }}>Inline</button>
              </div>
            </div>
            <div className="field">
              <label>URL</label>
              <input className="input mono" defaultValue="http://localhost:7421/bash"/>
              <span className="hint">2s timeout · failsafe: skip on error</span>
            </div>
            <div className="field">
              <label>Preview · settings.json</label>
              <div className="code">
{`"PreToolUse": [
  {
    "matcher": `}<span className="s">"Bash"</span>{`,
    "hooks": [{
      "type": `}<span className="s">"command"</span>{`,
      "command": `}<span className="s">"curl -s -m 2 \\
        -X POST localhost:7421/bash"</span>{`
    }]
  }
]`}
              </div>
            </div>
            <div style={{ display: "flex", gap: 6, marginTop: 4 }}>
              <button className="btn ghost"><Icon name="bolt" size={11}/> Test</button>
              <div style={{ flex: 1 }}/>
              <button className="btn">Cancel</button>
              <button className="btn primary">Save</button>
            </div>
          </div>
        </div>
      </div>

      {/* settings.json preview — collapsible */}
      <div className="card" style={{ marginTop: 14 }}>
        <div className="card-head" style={{ cursor: "pointer" }} onClick={() => setPreviewOpen(!previewOpen)}>
          <h3>
            <Icon name={previewOpen ? "chevd" : "chev"} size={12}/>
            settings.json · hooks section
            {outOfSync && <span className="pill warn"><span className="swatch"/>diverged</span>}
          </h3>
          <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
            <div style={{ display: "flex", gap: 2, background: "var(--bg-1)", border: "1px solid var(--border-strong)", borderRadius: "var(--r-2)", padding: 2 }}>
              <button onClick={(e) => { e.stopPropagation(); setPreviewScope("global"); }} className={`btn sm ${previewScope === "global" ? "primary" : "ghost"}`} style={{ padding: "3px 10px", fontSize: 10.5 }}>Global</button>
              <button onClick={(e) => { e.stopPropagation(); setPreviewScope("project"); }} className={`btn sm ${previewScope === "project" ? "primary" : "ghost"}`} style={{ padding: "3px 10px", fontSize: 10.5 }}>Project</button>
            </div>
            <span className="meta mono" style={{ fontSize: 10 }}>{previewScope === "global" ? "~/.claude/settings.json" : ".claude/settings.json"}</span>
            <span className="pill"><Icon name="eye" size={9}/>readonly</span>
          </div>
        </div>
        {previewOpen && (
          <div className="card-body" style={{ padding: 14 }}>
            <div className="code">
{`{
  `}<span className="k">"hooks"</span>{`: {
    `}<span className="k">"PreToolUse"</span>{`: [
      {
        `}<span className="k">"matcher"</span>{`: `}<span className="s">"Bash"</span>{`,
        `}<span className="k">"hooks"</span>{`: [
          { `}<span className="k">"type"</span>{`: `}<span className="s">"command"</span>{`, `}<span className="k">"command"</span>{`: `}<span className="s">"curl -s -m 2 -X POST localhost:7421/bash"</span>{` }
        ]
      }
    ],
    `}<span className="k">"PostToolUse"</span>{`: [
      {
        `}<span className="k">"matcher"</span>{`: `}<span className="s">"*"</span>{`,
        `}<span className="k">"hooks"</span>{`: [
          { `}<span className="k">"type"</span>{`: `}<span className="s">"command"</span>{`, `}<span className="k">"command"</span>{`: `}<span className="s">"curl -s -m 2 -X POST localhost:7421/ingest"</span>{` }
        ]
      }
    ],
    `}<span className="k">"ExitPlanMode"</span>{`: [
      {
        `}<span className="k">"matcher"</span>{`: `}<span className="s">"*"</span>{`,
        `}<span className="k">"hooks"</span>{`: [
          { `}<span className="k">"type"</span>{`: `}<span className="s">"command"</span>{`, `}<span className="k">"command"</span>{`: `}<span className="s">"curl -s -m 2 -X POST localhost:7421/plan"</span>{` }
        ]
      }
    ]
  }
}`}
            </div>
            <div style={{ display: "flex", gap: 6, marginTop: 10, alignItems: "center" }}>
              <span style={{ fontSize: 11, color: "var(--ink-3)" }}>Updates live as you toggle hooks · restart Claude Code to apply</span>
              <div style={{ flex: 1 }}/>
              <button className="btn sm"><Icon name="copy" size={11}/> Copy</button>
              <button className="btn sm"><Icon name="ext" size={11}/> Open in editor</button>
            </div>
          </div>
        )}
      </div>

      {/* Remove confirm dialog */}
      {confirmRemove && (
        <div style={{
          position: "fixed", inset: 0, background: "rgba(0,0,0,.55)",
          display: "grid", placeItems: "center", zIndex: 100, padding: 20
        }}>
          <div style={{
            background: "var(--bg-2)",
            border: "1px solid var(--border-strong)",
            borderRadius: "var(--r-3)",
            width: 460, boxShadow: "var(--sh-2)"
          }}>
            <div style={{ padding: "14px 16px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 10 }}>
              <Icon name="warn" size={14} className=""/>
              <h3 style={{ margin: 0, fontSize: 13, fontWeight: 600 }}>Remove hook?</h3>
            </div>
            <div style={{ padding: 16, fontSize: 12.5, lineHeight: 1.55, color: "var(--ink-1)" }}>
              <p style={{ margin: 0 }}>
                Remove <span className="mono" style={{ color: "var(--ink-0)", fontWeight: 600 }}>{confirmRemove.name}</span> from <span className="mono">{confirmRemove.scope}</span> settings.json?
              </p>
              <ul style={{ margin: "10px 0 0", paddingLeft: 18, fontSize: 12, color: "var(--ink-2)" }}>
                <li>Row deleted from <span className="mono">hook_instances</span> table.</li>
                <li>Entry removed from <span className="mono">{confirmRemove.scope === "global" ? "~/.claude/settings.json" : ".claude/settings.json"}</span>.</li>
                {confirmRemove.action === "script" && (
                  <li>Script file at <span className="mono">{confirmRemove.target}</span> will <b style={{ color: "var(--ink-0)" }}>not</b> be deleted — you can re-add later.</li>
                )}
              </ul>
              <div style={{ marginTop: 12, padding: "8px 10px", background: "var(--info-soft)", border: "1px solid #1f3a4a", borderRadius: 4, fontSize: 11.5, color: "var(--info)" }}>
                Restart Claude Code session for changes to take effect.
              </div>
            </div>
            <div style={{ padding: "10px 16px", borderTop: "1px solid var(--border)", display: "flex", gap: 6, justifyContent: "flex-end" }}>
              <button className="btn" onClick={() => setConfirmRemove(null)}>Cancel</button>
              <button className="btn danger" onClick={() => setConfirmRemove(null)}><Icon name="trash" size={11}/> Remove hook</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.S05_PlanViewer = S05_PlanViewer;
window.S06_Hooks = S06_Hooks;