{% extends "base.html" %}
{% block title %}Glean — scanning {{ target }}{% endblock %}
{% block content %}
<h1>Scanning {{ target }}</h1>
<form method="post" action="/scan/{{ scan_id }}/cancel" id="cancel-form"
>
  <button type="submit" class="cancel-btn" id="cancel-btn">Cancel scan</button>
</form>
<div id="watch-root" data-tools="{{ tools_csv }}">
  {# Served as a plain <img>: the animation lives inside the SVG, so it runs
     without script and holds the static mark at rest -- a stalled scan, a
     background tab or reduced-motion all show the logo rather than a
     half-collapsed frame. #}
  <div class="scan-progress">
    <img class="scan-loader" src="/static/glean-loader.svg" alt="" width="72" height="72">
    <ol class="stage-checklist" id="stage-checklist"></ol>
  </div>
  <p class="hint" id="status-line">{% if queued %}Queued — waiting for a free scan slot. This page will update as soon as it starts.{% else %}Starting…{% endif %}</p>
  <ul id="log" class="log"></ul>
</div>

<script>
const root = document.getElementById("watch-root");
const selectedTools = (root.dataset.tools || "").split(",").filter(Boolean);

// Stage boundaries mirror the pipeline's own status-line wording
// (pipeline.py's on_status calls) -- not a separate source of truth,
// just pattern-matched against the text the backend already sends.
// Only stages this scan's own tool selection can actually reach get
// shown, so a passive-only scan never displays a permanently-pending
// "Active probing" line it will never emit a status for.
const stages = [{ id: "passive", label: "Passive discovery", match: /^Searching/ }];
if (selectedTools.includes("dnsx")) {
  stages.push({ id: "dns", label: "DNS resolution (dnsx)", match: /^Resolving/ });
}
if (selectedTools.includes("httpx")) {
  stages.push({ id: "active", label: "Active probing (httpx)", match: /^Probing/ });
}
stages.push({ id: "scoring", label: "Scoring and building the brief", match: /^Scoring/ });

const checklist = document.getElementById("stage-checklist");
stages.forEach(function (stage) {
  const li = document.createElement("li");
  li.id = "stage-" + stage.id;
  li.className = "stage-pending";
  li.textContent = stage.label;
  checklist.appendChild(li);
});

function setStageState(index, state) {
  const li = document.getElementById("stage-" + stages[index].id);
  li.className = "stage-" + state;
}

function advanceToStage(text) {
  const index = stages.findIndex(function (stage) { return stage.match.test(text); });
  if (index === -1) {
    return;
  }
  for (let i = 0; i < index; i++) {
    setStageState(i, "done");
  }
  setStageState(index, "active");
}

function finishAllStages() {
  stages.forEach(function (_, i) { setStageState(i, "done"); });
}

const events = new EventSource("/scan/{{ scan_id }}/events");
const statusLine = document.getElementById("status-line");
const log = document.getElementById("log");

function addEntry(text, cls) {
  const li = document.createElement("li");
  li.textContent = text;
  if (cls) { li.className = cls; }
  log.appendChild(li);
}

events.addEventListener("status", function (e) {
  statusLine.textContent = e.data;
  addEntry(e.data, "status");
  advanceToStage(e.data);
});
events.addEventListener("warning", function (e) {
  addEntry(e.data, "warning");
});
// Cancelling is a real state change that kills running processes, so it
// goes over POST rather than a link. Submitted with fetch so the page can
// stay put and let the SSE stream report the outcome -- a full form POST
// would navigate away and tear down the EventSource mid-cancel, leaving
// the operator with no confirmation that anything actually stopped.
const cancelForm = document.getElementById("cancel-form");
const cancelBtn = document.getElementById("cancel-btn");
cancelForm.addEventListener("submit", function (e) {
  e.preventDefault();
  if (!confirm("Cancel this scan? Any tool still running will be stopped.")) { return; }
  cancelBtn.disabled = true;
  cancelBtn.textContent = "Cancelling…";
  fetch(cancelForm.action, { method: "POST" });
});

events.addEventListener("cancelled", function (e) {
  finishAllStages();
  events.close();
  statusLine.textContent = "Scan cancelled. Any running tool was stopped.";
  addEntry("Scan cancelled by the operator.", "warning");
  cancelBtn.hidden = true;
  window.location = e.data;
});

events.addEventListener("done", function (e) {
  finishAllStages();
  events.close();
  window.location = e.data;
});
// Two completely different things arrive on "error", and telling them apart
// matters. A server-sent `event: error` is a MessageEvent carrying a real
// failure message in `.data`. EventSource *also* fires its own plain Event
// named "error" on any transport hiccup -- and that one has no `.data` at
// all, so the previous single handler rendered "Scan failed: undefined" and
// tore down a stream whose scan was still running perfectly well. The
// browser reconnects on its own (readyState CONNECTING), so a transient
// blip should say nothing and wait.
events.addEventListener("error", function (e) {
  if (typeof e.data === "string" && e.data) {
    events.close();
    statusLine.textContent = "Scan failed: " + e.data;
    statusLine.classList.add("failed");
    addEntry(e.data, "warning");
    return;
  }
  if (events.readyState === EventSource.CLOSED) {
    statusLine.textContent =
      "Lost connection to the server. The scan may still be running — reload to check.";
    statusLine.classList.add("failed");
    return;
  }
  // readyState === CONNECTING: the browser is retrying by itself.
  statusLine.textContent = "Reconnecting…";
});
</script>
{% endblock %}