{% extends "base.html" %}
{% block title %}Runs{% endblock %}
{% block content %}

<div class="page-header">
  <h1>Recent Runs</h1>
  <span class="live-badge">● live</span>
  <span class="page-header-actions">
    <input type="text" id="run-search" class="search-input" placeholder="filter by name…" oninput="filterRuns(this.value)">
    <button class="btn-clear-all"
            hx-post="/runs/clear"
            hx-confirm="Delete ALL runs? This cannot be undone."
            hx-target="#runs-container"
            hx-swap="outerHTML">clear all</button>
  </span>
</div>

{% if versions %}
<div class="version-filter">
  <span class="version-filter-label mono dimmed">version</span>
  <a href="/" class="version-chip {% if not current_version %}version-chip-active{% endif %}">all</a>
  {% for v in versions %}
  <a href="/?version={{ v }}" class="version-chip mono {% if current_version == v %}version-chip-active{% endif %}">{{ v }}</a>
  {% endfor %}
</div>
{% endif %}

{% include "_runs_container.html" %}

<div id="compare-bar" class="compare-bar hidden">
  <a id="compare-link" class="compare-bar-btn" href="#">Compare selected →</a>
</div>

<script>
(function() {
  var _anomalyTimers = {};

  function renderAnomalies(badge, runId, anomalies) {
    var tip = document.getElementById('anomaly-tooltip-' + runId);
    var row = badge.closest('tr');
    if (!tip || !row) return;
    if (!anomalies.length) {
      row.classList.remove('run-row-warning');
      badge.className = 'badge badge-running';
      badge.textContent = 'running';
      tip.innerHTML = '';
      return;
    }
    row.classList.add('run-row-warning');
    badge.className = 'badge badge-warning';
    badge.textContent = '⚠ watch';
    var html = '';
    anomalies.forEach(function(a) {
      var cls = a.severity === 'danger' ? 'anomaly-tooltip-danger' : 'anomaly-tooltip-warn';
      html += '<div class="anomaly-tooltip-msg ' + cls + '">' + a.message + '</div>';
    });
    tip.innerHTML = html;
  }

  function checkAnomalies(runId) {
    fetch('/anomalies/' + runId)
      .then(function(r) { return r.json(); })
      .then(function(anomalies) {
        var badge = document.querySelector('[data-anomaly-poll="true"][data-run-id="' + runId + '"]');
        if (badge) renderAnomalies(badge, runId, anomalies);
      })
      .catch(function() {});
  }

  function pollAnomalies() {
    document.querySelectorAll('[data-anomaly-poll="true"]').forEach(function(badge) {
      var runId = badge.dataset.runId;
      if (_anomalyTimers[runId]) return;
      _anomalyTimers[runId] = setInterval(function() { checkAnomalies(runId); }, 5000);
      checkAnomalies(runId);
    });
  }

  pollAnomalies();

  document.body.addEventListener('htmx:afterSwap', function() {
    var currentIds = new Set();
    document.querySelectorAll('[data-anomaly-poll="true"]').forEach(function(b) {
      currentIds.add(b.dataset.runId);
    });
    Object.keys(_anomalyTimers).forEach(function(id) {
      if (!currentIds.has(id)) {
        clearInterval(_anomalyTimers[id]);
        delete _anomalyTimers[id];
      }
    });
    pollAnomalies();
  });
})();
</script>

<script>
(function() {
  // Compare selections survive the 5s auto-refresh: keep the source of truth
  // in this Set and re-apply it to the freshly swapped-in checkboxes.
  var _selected = new Set();

  function updateCompareBar() {
    var bar = document.getElementById('compare-bar');
    var link = document.getElementById('compare-link');
    var ids = Array.from(_selected);

    if (ids.length === 2) {
      bar.classList.remove('hidden');
      link.href = '/compare?a=' + ids[0] + '&b=' + ids[1];
      link.textContent = 'Compare selected →';
      link.classList.remove('disabled');
    } else {
      link.href = '#';
      link.classList.add('disabled');
      if (ids.length === 0) {
        bar.classList.add('hidden');
      } else if (ids.length === 1) {
        bar.classList.remove('hidden');
        link.textContent = 'Select 1 more run';
      } else {
        bar.classList.remove('hidden');
        link.textContent = 'Pick exactly 2 to compare';
      }
    }
  }

  document.addEventListener('change', function(e) {
    if (e.target.classList.contains('run-check')) {
      if (e.target.checked) {
        _selected.add(e.target.dataset.id);
      } else {
        _selected.delete(e.target.dataset.id);
      }
      updateCompareBar();
    }
  });

  document.body.addEventListener('htmx:afterSwap', function() {
    // Re-apply selection state, dropping ids whose rows no longer exist.
    var present = new Set();
    document.querySelectorAll('.run-check').forEach(function(cb) {
      if (_selected.has(cb.dataset.id)) cb.checked = true;
      present.add(cb.dataset.id);
    });
    _selected.forEach(function(id) {
      if (!present.has(id)) _selected.delete(id);
    });
    updateCompareBar();
    var searchInput = document.getElementById('run-search');
    if (searchInput && searchInput.value) {
      filterRuns(searchInput.value);
    }
  });
})();

function filterRuns(query) {
  var rows = document.querySelectorAll('.run-row');
  var q = query.toLowerCase();
  rows.forEach(function(row) {
    var name = row.cells[2] ? row.cells[2].textContent.toLowerCase() : '';
    row.style.display = (!q || name.includes(q)) ? '' : 'none';
  });
  if (q) {
    document.querySelectorAll('.date-group-header').forEach(function(h) {
      h.style.display = '';
    });
  }
}
</script>

{% endblock %}