package webui

// renderScenario renders the "6. Scenario" page: scenarios/*.json files
// found on any mounted removable media (e.g. the blackbox USB stick),
// each runnable with one click. A run is enqueued as a normal Task
// (target "scenario") — progress/logs live in Tasks like every other SAT
// pack, no separate live-output UI needed here.
//
// See audit/internal/platform/scenario.go for the scenario file format and
// scenarios/README.md for the drop-a-file-on-the-USB-stick workflow this
// page is built around.
func renderScenario(opts HandlerOptions) string {
	return `<p style="color:var(--muted);font-size:13px;margin-bottom:16px">
  Scripted, ad-hoc test scenarios — commands plus background samplers (IPMI
  sensors, nvidia-smi, ...), described in a small JSON file instead of a
  hardcoded test. Drop a <code>&lt;name&gt;.json</code> file under
  <code>scenarios/</code> on a removable drive (e.g. the same USB stick
  already plugged in for blackbox) and it shows up below — no rebuild
  needed. Runs are enqueued like any other task; watch progress in
  <a href="/tasks">Tasks</a>.
</p>

<div class="card">
  <div class="card-head">
    <span>Scenarios found on removable media</span>
    <button class="btn btn-sm btn-secondary" type="button" onclick="scenarioRefresh()">&#8635; Refresh</button>
  </div>
  <div class="card-body">
    <div id="scenario-list"><p style="color:var(--muted);font-size:13px">Loading...</p></div>
  </div>
</div>

<script>
function scenarioRefresh() {
  const list = document.getElementById('scenario-list');
  list.innerHTML = '<p style="color:var(--muted);font-size:13px">Loading...</p>';
  fetch('/api/scenario/list')
    .then(r => r.json())
    .then(files => {
      if (!files || !files.length) {
        list.innerHTML = '<p style="color:var(--muted);font-size:13px">No scenarios/*.json found on any mounted removable media.</p>';
        return;
      }
      let html = '<table class="table"><thead><tr><th>Name</th><th>Found on</th><th></th></tr></thead><tbody>';
      for (const f of files) {
        html += '<tr><td>' + escapeHTML(f.name) + '</td><td style="color:var(--muted);font-size:12px">' + escapeHTML(f.device) + '</td>'
          + '<td><button class="btn btn-sm btn-primary" onclick="scenarioRun(' + JSON.stringify(f.name) + ', this)">&#9654; Run</button></td></tr>';
      }
      html += '</tbody></table>';
      list.innerHTML = html;
    })
    .catch(err => {
      list.innerHTML = '<p style="color:var(--crit-fg)">Failed to list scenarios: ' + escapeHTML(String(err)) + '</p>';
    });
}

function escapeHTML(s) {
  const div = document.createElement('div');
  div.textContent = s;
  return div.innerHTML;
}

function scenarioRun(name, btn) {
  btn.disabled = true;
  btn.textContent = 'Starting...';
  fetch('/api/scenario/run', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({name: name})
  })
    .then(r => {
      if (!r.ok) return r.text().then(t => { throw new Error(t || r.statusText); });
      return r.json();
    })
    .then(() => { window.location.href = '/tasks'; })
    .catch(err => {
      btn.disabled = false;
      btn.textContent = 'Run';
      alert('Failed to start scenario: ' + err.message);
    });
}

scenarioRefresh();
</script>`
}