/* global React, Icon */
// Agent Workflow — 7-step visualizer + log terminal

const STEPS = [
  { n: 1, name: "Read TC context", tool: "get_tc_context", state: "done", t: "0.3s" },
  { n: 2, name: "Resolve dependencies", tool: "list_test_cases", state: "done", t: "0.4s" },
  { n: 3, name: "Generate Part 2 script", tool: "gen_script", state: "done", t: "1.8s" },
  { n: 4, name: "Apply fixtures + setup", tool: "—", state: "done", t: "0.2s" },
  { n: 5, name: "Execute pytest", tool: "execute_script", state: "running", t: "—" },
  { n: 6, name: "Capture post-state", tool: "—", state: "pending", t: "—" },
  { n: 7, name: "Report result", tool: "report_result", state: "pending", t: "—" },
];

const LOG = [
  { t: "0.000", lvl: "info", txt: "▶ run started · TC-004 · staging · run_id=r-9824" },
  { t: "0.012", lvl: "tool", txt: "→ tool: get_tc_context(tc_id=\"TC-004\")" },
  { t: "0.31",  lvl: "ok",   txt: "✓ TC spec loaded · 4 APIs, 2 fixtures, 2 deps" },
  { t: "0.32",  lvl: "tool", txt: "→ tool: list_test_cases(ids=[TC-018, TC-021])" },
  { t: "0.71",  lvl: "ok",   txt: "✓ deps resolved · TC-018 PASS · TC-021 PASS" },
  { t: "0.74",  lvl: "tool", txt: "→ tool: gen_script(tc_id=\"TC-004\", part=2)" },
  { t: "2.51",  lvl: "ok",   txt: "✓ script generated · 24 lines · model=claude-sonnet-4.5 · 412 tok" },
  { t: "2.55",  lvl: "info", txt: "  fixture: ensure_balance(min_amount=50000)" },
  { t: "2.78",  lvl: "ok",   txt: "  ✓ wallet topped up · u_4421 balance=50000 → 50000" },
  { t: "2.81",  lvl: "info", txt: "  fixture: ensure_gift_stock(gift_id=\"gift_42\", qty=3)" },
  { t: "2.92",  lvl: "ok",   txt: "  ✓ inventory ok · gift_42 stock=128" },
  { t: "2.95",  lvl: "info", txt: "  pre-state captured · balance_before=50000 · inv_before=128" },
  { t: "3.01",  lvl: "tool", txt: "→ tool: execute_script(timeout=30s)" },
  { t: "3.02",  lvl: "exec", txt: "  $ pytest -xvs scripts/TC-004.py::test_sell_with_bundled_discount" },
  { t: "3.18",  lvl: "exec", txt: "  collected 1 item" },
  { t: "3.19",  lvl: "exec", txt: "  scripts/TC-004.py::test_sell_with_bundled_discount " },
  { t: "3.42",  lvl: "exec", txt: "  POST /gifts/sell ··· 200 OK · 184ms" },
  { t: "3.45",  lvl: "wait", txt: "  asserting response shape…" },
];

const AgentWorkflow = () => (
  <div className="frame app" data-theme="dark">
    {window.TopBar && <window.TopBar/>}
    {window.ContextStrip && <window.ContextStrip/>}
    <div className="board">
      {window.Sidebar && <window.Sidebar/>}
      <main className="tc">
        <div className="tc__head">
          <div className="tc__head-top">
            <span className="tag-id mono" style={{fontSize:11.5}}>TC-004</span>
            <span className="status running"><span className="dot running"/>Running · step 5/7</span>
            <span className="tc__head-meta">run <b className="mono">r-9824</b> · started 3.4s ago</span>
            <div style={{flex:1}}/>
            <button className="btn btn--ghost"><Icon name="pause" size={11}/>Pause</button>
            <button className="btn btn--danger"><Icon name="stop" size={11}/>Stop run</button>
          </div>
          <h1 className="tc__title">Agent Workflow · Sell with bundled discount applies coupon</h1>
          <div className="tc__tabs">
            <span className="tab">Spec</span>
            <span className="tab">Script</span>
            <span className="tab tab--active">Workflow</span>
            <span className="tab">History <span className="tab-badge">14</span></span>
            <span className="tab">Dependencies</span>
          </div>
        </div>

        <div className="wf">
          <section className="wf-steps">
            {STEPS.map((s, i) => (
              <div key={s.n} className={"step step--" + s.state}>
                <div className="step__rail">
                  <div className="step__node">
                    {s.state === "done" && <Icon name="check" size={11}/>}
                    {s.state === "running" && <span className="dot running" style={{boxShadow:'none'}}/>}
                    {s.state === "pending" && <span className="step__num">{s.n}</span>}
                  </div>
                  {i < STEPS.length - 1 && <div className="step__line"/>}
                </div>
                <div className="step__body">
                  <div className="step__head">
                    <span className="step__name">{s.name}</span>
                    <span className="muted mono" style={{fontSize:10.5}}>{s.t}</span>
                  </div>
                  <div className="step__meta">
                    <span className="chip mono">{s.tool}</span>
                    {s.state === "running" && <span className="muted">executing pytest subprocess…</span>}
                    {s.state === "done" && s.n === 1 && <span className="muted">loaded full TC spec</span>}
                    {s.state === "done" && s.n === 2 && <span className="muted">TC-018, TC-021 — both pass</span>}
                    {s.state === "done" && s.n === 3 && <span className="muted">claude-sonnet-4.5 · 412 tokens</span>}
                    {s.state === "done" && s.n === 4 && <span className="muted">2 fixtures applied</span>}
                    {s.state === "pending" && <span className="muted">queued</span>}
                  </div>
                </div>
              </div>
            ))}
          </section>

          <section className="terminal">
            <div className="terminal__bar">
              <div className="terminal__dots">
                <span/><span/><span/>
              </div>
              <span className="terminal__title mono">agent.log · TC-004 · run r-9824</span>
              <div style={{flex:1}}/>
              <span className="chip"><span className="dot running"/>streaming</span>
              <button className="btn btn--ghost" style={{height:22}}><Icon name="download" size={11}/></button>
              <button className="btn btn--ghost" style={{height:22}}><Icon name="filter" size={11}/></button>
            </div>
            <div className="terminal__body">
              {LOG.map((l, i) => (
                <div key={i} className={"logln logln--" + l.lvl}>
                  <span className="logln__t mono">{l.t}</span>
                  <span className="logln__lvl mono">{l.lvl}</span>
                  <span className="logln__txt mono">{l.txt}</span>
                </div>
              ))}
              <div className="logln logln--cursor">
                <span className="logln__t mono">3.46</span>
                <span className="logln__lvl mono">···</span>
                <span className="logln__txt mono"><span className="caret"/></span>
              </div>
            </div>
            <div className="terminal__foot">
              <span className="muted mono">18 events · 412 tok in · 1,204 tok out · $0.0083</span>
              <div style={{flex:1}}/>
              <span className="muted mono">tail -f · auto-scroll <span className="kbd">on</span></span>
            </div>
          </section>
        </div>
      </main>
    </div>
  </div>
);

Object.assign(window, { AgentWorkflow });