{% 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 runs %}
<div id="runs-container"
     hx-get="/"
     hx-trigger="every 5s"
     hx-select="#runs-container"
     hx-swap="outerHTML">
{% for group in runs|groupby('date_label') %}
<div class="date-group">
  <div class="date-group-header"><span class="bracket-label"><span class="code">[ {{ group.grouper|upper }} ]</span></span></div>
  <table class="run-table">
    <thead>
      <tr>
         <th class="th-check"></th>
        <th>Run ID</th>
        <th>Function</th>
        <th>Started</th>
        <th>Duration</th>
        <th>Spans</th>
        <th>Status</th>
        <th class="th-delete"></th>
      </tr>
    </thead>
    <tbody>
      {% for run in group.list %}
      <tr class="run-row">
        <td class="td-check" onclick="event.stopPropagation()">
          <input type="checkbox" class="run-check" data-id="{{ run.id }}">
        </td>
        <td class="mono dimmed" onclick="window.location='/run/{{ run.id }}'">{{ run.id[:8] }}…</td>
        <td class="mono" onclick="window.location='/run/{{ run.id }}'">{{ run.name }}</td>
        <td class="dimmed" onclick="window.location='/run/{{ run.id }}'">{{ run.started_at.strftime('%H:%M:%S') }}</td>
        <td class="mono" onclick="window.location='/run/{{ run.id }}'">{{ run.duration_ms }}ms</td>
        <td class="dimmed" onclick="window.location='/run/{{ run.id }}'">{{ run.span_count }}</td>
        <td onclick="window.location='/run/{{ run.id }}'">
          {% if run.status == 'ok' %}
            <span class="badge badge-ok">ok</span>
          {% elif run.status == 'error' %}
            <span class="badge badge-error">error</span>
          {% else %}
            <span class="badge badge-running">running</span>
          {% endif %}
        </td>
        <td class="td-delete" onclick="event.stopPropagation()">
          <button class="btn-delete"
                  hx-delete="/runs/{{ run.id }}"
                  hx-confirm="Delete this run?"
                  hx-target="#runs-container"
                  hx-swap="outerHTML">×</button>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endfor %}
</div>

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

<script>
(function() {
  function updateCompareBar() {
    var checked = document.querySelectorAll('.run-check:checked');
    var bar = document.getElementById('compare-bar');
    var link = document.getElementById('compare-link');

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

  document.addEventListener('change', function(e) {
    if (e.target.classList.contains('run-check')) {
      updateCompareBar();
    }
  });

  document.body.addEventListener('htmx:afterSwap', function() {
    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>

{% else %}
<div class="empty-state">
  <div class="bracket-label" style="margin-bottom:16px"><span class="code">[ GET STARTED ]</span></div>
  <p class="empty-state-msg">No traces yet. Add <span class="mono accent">@trace</span> to any function and run it — your first trace will appear here automatically.</p>
  <pre class="empty-code">from glasspipe import trace

@trace
def my_agent(question):
    return "your answer here"

my_agent("hello")</pre>
  <p class="empty-hint">Then run: <span class="mono">glasspipe dashboard</span></p>
</div>
{% endif %}

{% endblock %}