{% extends "_base.html" %}
{% block title %}Active run — yt-shorts-trends{% endblock %}
{% block content %}

{% if active %}

<h2>Active run</h2>

<div class="run-meta">
  <span class="meta-key muted">Mode:</span> <code>{{ active.mode }}</code>
  <span class="sep muted">&middot;</span>
  <span class="meta-key muted">Started:</span> <code>{{ active.started_at }}</code>
  <span class="sep muted">&middot;</span>
  <span class="meta-key muted">Run ID:</span> <code>{{ active.run_id }}</code>
</div>

<div id="status-banner" class="status-banner status-streaming" role="status" aria-live="polite">
  <span class="spinner" aria-hidden="true">&bull;</span>
  Streaming output&hellip;
</div>

<pre id="log" class="log-pane" aria-live="polite"></pre>

<script>
(function () {
  var logEl = document.getElementById('log');
  var bannerEl = document.getElementById('status-banner');
  var placeholder = document.createElement('span');
  placeholder.className = 'log-line';
  placeholder.style.color = 'var(--text-muted)';
  placeholder.textContent = '(no output yet — subprocess starting…)\n';
  logEl.appendChild(placeholder);
  var firstLine = true;

  function appendLine(stream, line) {
    if (firstLine) { logEl.removeChild(placeholder); firstLine = false; }
    var atBottom = (logEl.scrollTop + logEl.clientHeight >= logEl.scrollHeight - 4);
    var span = document.createElement('span');
    span.className = 'log-line' + (stream === 'stderr' ? ' log-stderr' : ' log-stdout');
    span.setAttribute('data-stream', stream);
    span.appendChild(document.createTextNode(line + '\n'));
    logEl.appendChild(span);
    if (atBottom) { logEl.scrollTop = logEl.scrollHeight; }
  }

  var es = new EventSource('/runs/active/stream');
  es.onmessage = function (ev) {
    try {
      var d = JSON.parse(ev.data);
      appendLine(d.stream, d.line);
    } catch (e) { /* ignore malformed frame */ }
  };
  es.addEventListener('complete', function (ev) {
    es.close();
    var d = {};
    try { d = JSON.parse(ev.data); } catch (e) {}
    if (d && d.reason === 'no_active_run') {
      window.location.href = '/runs/active';
      return;
    }
    if (d && d.reason === 'no_output') {
      bannerEl.className = 'status-banner status-warn';
      bannerEl.textContent = 'Run complete — no videos matched filters. See log above for details.';
      return;
    }
    if (d && d.exit_code === 0 && d.run_id) {
      bannerEl.className = 'status-banner status-success';
      bannerEl.innerHTML = 'Run complete — <a href="/runs/' + encodeURIComponent(d.run_id) + '">View run</a>';
    } else {
      bannerEl.className = 'status-banner status-failure';
      var code = (d && typeof d.exit_code !== 'undefined') ? d.exit_code : '?';
      bannerEl.textContent = 'Run failed (exit ' + code + ') — see log above for details.';
    }
  });
  es.onerror = function () {
    es.close();
    bannerEl.className = 'status-banner status-failure';
    bannerEl.textContent = 'Stream disconnected — refresh to check run status.';
  };
})();
</script>

{% else %}

<div class="empty">
  <h2>No run in progress</h2>
  <p>Start a <a href="/runs/new">query run</a> or
     <a href="/channel/new">channel analysis</a>.</p>
</div>

{% endif %}

{% endblock %}