{% extends "base.html" %}
{% from "_macros.html" import pass_rate_badge, best_badge, best_badge_dual, score_view_toggle, agent_chip, model_chip, run_status %}
{% block title %}Runs · SForge{% endblock %}
{% block content %}

<div class="flex items-center justify-between mb-6">
  <div>
    <h1 class="text-2xl font-bold tracking-tight text-slate-900">Runs</h1>
    <p class="text-sm text-slate-500 mt-0.5">{{ total_runs }} task(s) across {{ groups|length }} run(s)</p>
  </div>
  <div class="flex gap-2 text-xs items-center">
    {% if any_rescaled %}{{ score_view_toggle() }}{% endif %}
    <button id="compare-runs-btn" type="button" disabled
            class="px-3 py-1.5 rounded-lg border border-indigo-200 bg-indigo-50 text-indigo-600 hover:bg-indigo-100 transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
      Compare runs (<span id="compare-runs-count">0</span>)
    </button>
    <button id="expand-all-runs" type="button"
            class="px-3 py-1.5 rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 hover:border-slate-300 transition-all">Expand all</button>
    <button id="collapse-all-runs" type="button"
            class="px-3 py-1.5 rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 hover:border-slate-300 transition-all">Collapse all</button>
  </div>
</div>

{% if model_options %}
<div class="card p-3 mb-4 flex items-center gap-3 flex-wrap text-xs">
  <span class="font-semibold text-slate-600">Compare run groups</span>
  <span class="text-slate-400">— same experiment across machines merged by run prefix (avg@N · ELO)</span>
  <div class="flex items-center gap-2 flex-wrap ml-1">
    {% for opt in model_options %}
    <label class="flex items-center gap-1.5 px-2 py-1 rounded-lg border border-slate-200 bg-slate-50/40 cursor-pointer select-none hover:border-indigo-300">
      <input type="checkbox" class="model-compare-check rounded border-slate-300" value="{{ opt.model }}">
      <span class="font-mono">{{ opt.model }}</span>
      <span class="text-[10px] text-slate-400">×{{ opt.machine_count }}</span>
    </label>
    {% endfor %}
  </div>
  <button id="compare-models-btn" type="button" disabled
          class="ml-auto px-3 py-1.5 rounded-lg border border-indigo-300 bg-indigo-600 text-white hover:bg-indigo-500 transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
    Compare groups (<span id="compare-models-count">0</span>)
  </button>
</div>
{% endif %}

{% if not groups %}
<div class="card p-12 text-center text-slate-400">
  No runs found under <span class="font-mono text-slate-500">{{ runs_dir }}</span>
</div>
{% endif %}

{% for group in groups %}
<details class="run-group card mb-4 overflow-hidden" data-run-id="{{ group.run_id }}" {% if loop.index <= 3 %}open{% endif %}>
  <summary class="cursor-pointer px-6 py-4 hover:bg-slate-50/50 flex items-center justify-between select-none transition-colors">
    <div class="flex items-center gap-3">
      <input type="checkbox" class="run-compare-check rounded border-slate-300 shrink-0" value="{{ group.run_id }}"
             onclick="event.stopPropagation()" title="Select for comparison">
      <span class="text-base font-semibold tracking-tight font-mono select-text">{{ group.run_id }}</span>
      <button type="button" onclick="event.stopPropagation();navigator.clipboard.writeText('{{ group.run_id }}')" title="Copy run ID"
              class="text-slate-400 hover:text-slate-600 transition-colors p-0.5">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg>
      </button>
      <span class="text-xs text-slate-400 font-mono">{{ group.date_label }}</span>
      <a href="/run/{{ group.run_id }}" onclick="event.stopPropagation()"
         class="text-[11px] text-indigo-500 hover:underline shrink-0" title="View all tasks chart">charts ↗</a>
      <span class="text-xs text-slate-500 font-medium">{{ group.done_count }}<span class="text-slate-400">/{{ group.total_count }}</span> done</span>
    </div>
  </summary>
  <div class="overflow-x-auto border-t border-slate-100">
    <table class="w-full text-sm">
      <thead>
        <tr class="text-[11px] text-slate-400 text-left">
          <th class="px-6 py-2.5 font-medium">Task</th>
          <th class="px-4 py-2.5 font-medium">Agent</th>
          <th class="px-4 py-2.5 font-medium">Model</th>
          <th class="px-4 py-2.5 font-medium text-right">Best</th>
          <th class="px-4 py-2.5 font-medium text-right">Rounds</th>
          <th class="px-4 py-2.5 font-medium text-right">Runtime</th>
          <th class="px-4 py-2.5 font-medium">Status</th>
        </tr>
      </thead>
      <tbody>
        {% for row in group.task_rows %}
        {% set r = row.run %}
        <tr class="border-t border-slate-50 cursor-pointer"
            onclick="window.location='/run/{{ r.run_id }}/{{ r.task }}'">
          <td class="px-6 py-3">
            <a href="/task/{{ r.task }}" onclick="event.stopPropagation()"
               class="text-sm font-medium text-slate-800 hover:text-indigo-600 transition-colors">{{ r.task }}</a>
          </td>
          <td class="px-4 py-3">{{ agent_chip(r.agent) }}</td>
          <td class="px-4 py-3">{{ model_chip(r.model) }}</td>
          <td class="px-4 py-3 text-right">{{ best_badge_dual(r) }}</td>
          <td class="px-4 py-3 text-right font-mono text-xs text-slate-600">{{ r.total_rounds }}</td>
          <td class="px-4 py-3 text-right font-mono text-xs text-slate-400">{{ format_duration(r.runtime_seconds) }}</td>
          <td class="px-4 py-3">{{ run_status(r) }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</details>
{% endfor %}

<script>
(function () {
  const stateKey = "sforge.visualizer.index.state.v1";
  const groups = Array.from(document.querySelectorAll(".run-group[data-run-id]"));
  const expandAll = document.getElementById("expand-all-runs");
  const collapseAll = document.getElementById("collapse-all-runs");
  let restored = false;

  function readState() {
    try {
      return JSON.parse(sessionStorage.getItem(stateKey) || "{}");
    } catch (_) {
      return {};
    }
  }

  function writeState(extra) {
    const openRunIds = groups
      .filter(group => group.open)
      .map(group => group.dataset.runId);
    const state = {
      openRunIds,
      scrollY: window.scrollY,
      updatedAt: Date.now(),
      ...(extra || {}),
    };
    sessionStorage.setItem(stateKey, JSON.stringify(state));
  }

  function restoreState() {
    const state = readState();
    if (Array.isArray(state.openRunIds)) {
      const openSet = new Set(state.openRunIds);
      groups.forEach(group => {
        group.open = openSet.has(group.dataset.runId);
      });
    }
    if (typeof state.scrollY === "number") {
      requestAnimationFrame(() => window.scrollTo(0, state.scrollY));
    }
    restored = true;
  }

  groups.forEach(group => {
    group.addEventListener("toggle", () => {
      if (restored) writeState();
    });
  });

  expandAll?.addEventListener("click", () => {
    groups.forEach(group => { group.open = true; });
    writeState();
  });

  collapseAll?.addEventListener("click", () => {
    groups.forEach(group => { group.open = false; });
    writeState();
  });

  document.addEventListener("click", event => {
    if (!(event.target instanceof Element)) return;
    const link = event.target.closest("a[href]");
    const row = event.target.closest("tr[onclick]");
    if (link || row) writeState();
  }, true);

  window.addEventListener("pagehide", () => writeState());
  restoreState();
})();

// Compare-runs entry: collect checked run IDs and route to /compare-runs
(function () {
  const checks = document.querySelectorAll(".run-compare-check");
  const btn = document.getElementById("compare-runs-btn");
  const counter = document.getElementById("compare-runs-count");
  if (!btn) return;

  function refresh() {
    const selected = Array.from(checks).filter(c => c.checked);
    counter.textContent = selected.length;
    btn.disabled = selected.length < 2;
  }
  checks.forEach(c => c.addEventListener("change", refresh));
  btn.addEventListener("click", () => {
    const ids = Array.from(checks).filter(c => c.checked).map(c => c.value);
    if (ids.length < 2) return;
    const qs = ids.map(id => "runs=" + encodeURIComponent(id)).join("&");
    window.location = "/compare-runs?" + qs;
  });
  refresh();
})();

// Compare-models entry: collect checked models and route to /compare-runs?models=
(function () {
  const checks = document.querySelectorAll(".model-compare-check");
  const btn = document.getElementById("compare-models-btn");
  const counter = document.getElementById("compare-models-count");
  if (!btn) return;

  function refresh() {
    const selected = Array.from(checks).filter(c => c.checked);
    counter.textContent = selected.length;
    btn.disabled = selected.length < 2;
  }
  checks.forEach(c => c.addEventListener("change", refresh));
  btn.addEventListener("click", () => {
    const ms = Array.from(checks).filter(c => c.checked).map(c => c.value);
    if (ms.length < 2) return;
    const qs = ms.map(m => "models=" + encodeURIComponent(m)).join("&");
    window.location = "/compare-runs?" + qs;
  });
  refresh();
})();
</script>

{% endblock %}