/* global React, Icon, RUN_HISTORY */
// Suite Runner modal + Run History screen

const SuiteRunner = () => {
  const cases = [
    { id: "TC-001", name: "User sells single gift, balance updates", state: "done", verdict: "pass", ms: 184 },
    { id: "TC-002", name: "Sell with insufficient inventory returns 409", state: "done", verdict: "pass", ms: 122 },
    { id: "TC-003", name: "Sell unauthenticated returns 401", state: "done", verdict: "fail", ms: 156 },
    { id: "TC-004", name: "Sell with bundled discount applies coupon", state: "running", ms: null },
    { id: "TC-005", name: "Sell idempotency key prevents double charge", state: "queued" },
    { id: "TC-006", name: "Bulk sell processes 50 gifts atomically", state: "queued" },
    { id: "TC-007", name: "Refund flow reverses balance + inventory", state: "queued" },
    { id: "TC-008", name: "Concurrent sells preserve inventory", state: "queued" },
  ];
  const done = cases.filter(c => c.state === "done").length;
  const pct = (done + 0.4) / cases.length * 100;

  return (
    <div className="modal-host">
      <div className="modal-back"/>
      <div className="modal modal--runner">
        <header className="modal__h">
          <div>
            <div className="modal__title"><Icon name="play" size={13} style={{color:'var(--accent)'}}/>Suite Runner — Sell Gift</div>
            <div className="modal__sub muted">8 test cases · staging · stop on first fail</div>
          </div>
          <div className="modal__actions">
            <button className="btn btn--ghost"><Icon name="x" size={12}/></button>
          </div>
        </header>

        <div className="runner__top">
          <div className="runner__stat">
            <span className="muted">Progress</span>
            <span className="runner__big mono">{done}<span className="muted">/{cases.length}</span></span>
          </div>
          <div className="runner__stat">
            <span className="muted">Pass</span>
            <span className="runner__big mono" style={{color:'var(--pass)'}}>2</span>
          </div>
          <div className="runner__stat">
            <span className="muted">Fail</span>
            <span className="runner__big mono" style={{color:'var(--fail)'}}>1</span>
          </div>
          <div className="runner__stat">
            <span className="muted">Elapsed</span>
            <span className="runner__big mono">00:08.4</span>
          </div>
          <div className="runner__stat">
            <span className="muted">ETA</span>
            <span className="runner__big mono">00:24</span>
          </div>
          <div style={{flex:1}}/>
          <label className="check"><input type="checkbox" defaultChecked/><span>Stop on fail</span></label>
          <button className="btn btn--ghost"><Icon name="pause" size={11}/>Pause</button>
          <button className="btn btn--danger"><Icon name="stop" size={11}/>Stop</button>
        </div>

        <div className="runner__bar">
          <div className="runner__bar-pass" style={{width: '25%'}}/>
          <div className="runner__bar-fail" style={{width: '12.5%'}}/>
          <div className="runner__bar-run" style={{width: '12.5%'}}/>
        </div>

        <div className="runner__list">
          {cases.map(c => (
            <div key={c.id} className={"runner-row runner-row--" + (c.state === "done" ? c.verdict : c.state)}>
              <span className="runner-row__icon">
                {c.state === "done" && c.verdict === "pass" && <Icon name="check" size={12}/>}
                {c.state === "done" && c.verdict === "fail" && <Icon name="x" size={12}/>}
                {c.state === "running" && <span className="dot running"/>}
                {c.state === "queued" && <span className="dot idle"/>}
              </span>
              <span className="mono tag-id" style={{minWidth:60, color:'var(--fg-2)'}}>{c.id}</span>
              <span className="runner-row__name">{c.name}</span>
              <div style={{flex:1}}/>
              {c.state === "running" && <span className="muted">step 5/7 · executing pytest…</span>}
              {c.state === "queued" && <span className="muted">queued</span>}
              {c.ms && <span className="muted mono">{c.ms}ms</span>}
              {c.state === "done" && <span className={"status " + c.verdict}>{c.verdict.toUpperCase()}</span>}
            </div>
          ))}
        </div>

        <footer className="modal__f">
          <span className="muted mono">run_id <span style={{color:'var(--fg)'}}>r-batch-441</span> · agent: claude-sonnet-4.5 · env: staging</span>
          <div style={{flex:1}}/>
          <button className="btn btn--ghost">Run in background</button>
          <button className="btn">View live log</button>
        </footer>
      </div>
    </div>
  );
};

const RunHistory = () => {
  const stats = { total: 412, pass: 338, fail: 51, error: 23, avg: 218 };
  return (
    <div className="frame app" data-theme="dark">
      {window.TopBar && <window.TopBar title="QA Runner"/>}
      <div className="page">
        <header className="page__h">
          <div>
            <h1 className="page__title">Run History</h1>
            <div className="muted">All runs across humans and agents · last 30 days</div>
          </div>
          <div style={{flex:1}}/>
          <div className="seg-group">
            <span className="seg">All</span>
            <span className="seg">Human</span>
            <span className="seg">Agent</span>
            <span className="seg seg--active">Today</span>
          </div>
          <button className="btn"><Icon name="filter" size={11}/>Filter</button>
          <button className="btn"><Icon name="download" size={11}/>Export</button>
        </header>

        <div className="stats">
          <div className="stat-card">
            <div className="stat-card__l muted">Total runs</div>
            <div className="stat-card__v mono">{stats.total}</div>
            <div className="stat-card__d muted">+18 today</div>
          </div>
          <div className="stat-card">
            <div className="stat-card__l muted">Pass rate</div>
            <div className="stat-card__v mono" style={{color:'var(--pass)'}}>82.0%</div>
            <div className="stat-card__d muted">{stats.pass} pass / {stats.fail} fail / {stats.error} err</div>
          </div>
          <div className="stat-card">
            <div className="stat-card__l muted">Avg duration</div>
            <div className="stat-card__v mono">{stats.avg}<span className="muted">ms</span></div>
            <div className="stat-card__d muted">p95 = 1,108ms</div>
          </div>
          <div className="stat-card">
            <div className="stat-card__l muted">Agent share</div>
            <div className="stat-card__v mono">61%</div>
            <div className="stat-card__d muted">252 by agents · 160 by humans</div>
          </div>
          <div className="stat-card stat-card--chart">
            <div className="stat-card__l muted">Last 24 hours</div>
            <div className="spark">
              {[8,6,12,9,14,18,22,16,20,25,28,24,18,14,9,7,11,16,22,28,32,26,18,12].map((v,i)=>(
                <span key={i} className="spark__b" style={{height: v*2.4 + '%'}}/>
              ))}
            </div>
          </div>
        </div>

        <div className="run-table">
          <div className="run-table__h">
            <span style={{width:80}}>Verdict</span>
            <span style={{width:90}}>Run ID</span>
            <span style={{width:90}}>TC</span>
            <span>API · path</span>
            <span style={{width:80}}>Status</span>
            <span style={{width:90}}>Duration</span>
            <span style={{width:90}}>Env</span>
            <span style={{width:160}}>Run by</span>
            <span style={{width:80}}>When</span>
            <span style={{width:24}}/>
          </div>
          {RUN_HISTORY.map(r => (
            <div key={r.id} className={"run-row run-row--" + r.verdict}>
              <span style={{width:80}}><span className={"status " + r.verdict}>{r.verdict.toUpperCase()}</span></span>
              <span style={{width:90}} className="mono tag-id" >{r.id}</span>
              <span style={{width:90}} className="mono" style={{width:90, color:'var(--fg)'}}>{r.tc}</span>
              <span><span className="method POST">POST</span> <span className="mono" style={{color:'var(--fg-2)'}}>/gifts/sell</span>{r.note && <span className="muted" style={{marginLeft:10}}>· {r.note}</span>}</span>
              <span style={{width:80}} className="mono" style={{width:80, color: r.status >= 400 ? 'var(--fail)' : r.status >= 200 && r.status < 300 ? 'var(--pass)' : 'var(--fg-3)'}}>{r.status || '—'}</span>
              <span style={{width:90}} className="mono muted">{r.ms}ms</span>
              <span style={{width:90}}><span className="env-pill" style={{height:18, fontSize:10}}><span className="env-pill__dot" style={{background: r.env==='production'?'oklch(0.68 0.20 22)':r.env==='staging'?'oklch(0.78 0.13 230)':'#6c6c78'}}/>{r.env}</span></span>
              <span style={{width:160}} className="mono" style={{width:160, fontSize:11, color: r.by.startsWith('agent') ? 'var(--accent)' : 'var(--fg-2)'}}>{r.by.startsWith('agent') ? '✦ ' : '◇ '}{r.by}</span>
              <span style={{width:80}} className="muted">{r.when}</span>
              <span style={{width:24}}><Icon name="chevronRight" size={11} style={{color:'var(--fg-4)'}}/></span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { SuiteRunner, RunHistory });