{% extends "base.html" %}
{% block title %}Compare - Scenario Result Viewer{% endblock %}

{% block breadcrumb %}
<nav class="flex text-sm text-gray-500" aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2">
    <li><a href="/" class="hover:text-blue-600">Sessions</a></li>
    <li><span class="mx-1">/</span></li>
    <li class="text-gray-800 font-medium">Compare</li>
  </ol>
</nav>
{% endblock %}

{% macro outcome_badge(r) %}
  {% if r is none %}<span class="text-gray-300">not run</span>
  {% elif r.outcome == "pass" %}<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">PASS</span>
  {% elif r.outcome == "fail" %}<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">FAIL</span>
  {% elif r.outcome == "error" %}<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">ERROR</span>
  {% else %}<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">N/A</span>{% endif %}
{% endmacro %}

{% macro pct(value) %}{% if value is none %}-{% else %}{{ "%.0f" | format(value * 100) }}%{% endif %}{% endmacro %}

{% block content %}
{% if oo_styles %}<style>{{ oo_styles | safe }}</style>{% endif %}

<h1 class="text-2xl font-bold text-gray-800 mb-1">Compare runs</h1>
<p class="text-sm text-gray-500 mb-4">Cases are matched by what they ran (their sweep overrides, else the ODD values they were drawn at), not by their position. The oldest session picked is the baseline.</p>

<form method="get" action="/compare" class="bg-white rounded-lg shadow p-4 mb-6" id="compare-form">
  <div class="text-sm font-medium text-gray-700 mb-2">Sessions{% if selected %} of the same scenarios{% endif %}</div>
  <div class="max-h-56 overflow-y-auto border border-gray-200 rounded">
    <table class="min-w-full text-sm">
      {% for ref, s in offered %}
      <tr class="border-b border-gray-100 hover:bg-gray-50">
        <td class="px-3 py-1 w-8"><input type="checkbox" name="s" value="{{ ref }}" {% if ref in selected %}checked{% endif %}></td>
        <td class="px-3 py-1 font-mono whitespace-nowrap">{{ s.date }} {{ s.time }}</td>
        <td class="px-3 py-1 text-gray-500">{{ s.session_type }}</td>
        <td class="px-3 py-1 text-gray-700 truncate max-w-md" title="{{ s.scenario_name }}">{{ s.scenario_name.split(',')[0].split('#')[0] }}</td>
        <td class="px-3 py-1 text-right whitespace-nowrap {% if s.passed_count == s.total_count %}text-green-700{% else %}text-red-700{% endif %}">{{ s.passed_count }}/{{ s.total_count }}</td>
      </tr>
      {% endfor %}
    </table>
  </div>
  <div class="flex flex-wrap items-end gap-4 mt-3">
    {% if attributes %}
    <label class="text-sm text-gray-700">Columns
      <select name="x" class="block mt-1 rounded border border-gray-300 px-2 py-1 text-sm">
        {% for a in attributes %}<option value="{{ a }}" {% if comparison and comparison.x == a %}selected{% endif %}>{{ a }}</option>{% endfor %}
      </select>
    </label>
    <label class="text-sm text-gray-700">Rows
      <select name="y" class="block mt-1 rounded border border-gray-300 px-2 py-1 text-sm">
        {% for a in attributes %}<option value="{{ a }}" {% if comparison and comparison.y == a %}selected{% endif %}>{{ a }}</option>{% endfor %}
      </select>
    </label>
    {% endif %}
    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700">Compare</button>
    <span class="text-xs text-gray-400">Pick two or more.</span>
  </div>
</form>

{% if comparison %}
{% set last = comparison.sessions | length - 1 %}
<!-- Summary -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6" id="compare-summary">
  {% for ref in comparison.sessions %}
  <div class="bg-white rounded-lg shadow p-3">
    <div class="text-xs text-gray-500 font-mono">{{ ref }}{% if loop.first %} (baseline){% endif %}</div>
    <div class="text-2xl font-bold {% if comparison.totals[loop.index0][0] == comparison.totals[loop.index0][1] %}text-green-600{% else %}text-gray-800{% endif %}">{{ pct(comparison.rate(loop.index0)) }}</div>
    <div class="text-xs text-gray-500">{{ comparison.totals[loop.index0][0] }}/{{ comparison.totals[loop.index0][1] }} passed</div>
  </div>
  {% endfor %}
  <div class="bg-white rounded-lg shadow p-3">
    <div class="text-xs text-gray-500">First to last run of each case</div>
    <div class="text-sm mt-1"><span class="font-bold {% if comparison.count('regression') %}text-red-600{% else %}text-gray-400{% endif %}" id="regressions">{{ comparison.count('regression') }} regression(s)</span></div>
    <div class="text-sm"><span class="font-bold {% if comparison.count('fixed') %}text-green-600{% else %}text-gray-400{% endif %}">{{ comparison.count('fixed') }} fixed</span>,
      {{ comparison.count('flaky') }} flaky, {{ comparison.count('new') }} new, {{ comparison.count('gone') }} gone</div>
  </div>
</div>

<!-- Per ODD cell -->
{% if comparison.x and comparison.cells %}
<div class="mb-6">
  <h2 class="text-lg font-semibold text-gray-700 mb-2">Pass rate per ODD cell</h2>
  <p class="text-xs text-gray-500 mb-2">The buckets each case was drawn in. Each cell shows the pass rate of every session (baseline first); red: lower in the latest, green: higher.</p>
  <div class="bg-white rounded-lg shadow p-4 overflow-x-auto">
    <table class="text-sm cmp-grid" id="cell-grid">
      <thead>
        <tr>
          <th class="px-2 py-1 text-xs text-gray-500 text-left">{{ comparison.y or "" }} \ {{ comparison.x }}</th>
          {% for bx in comparison.x_labels %}<th class="px-2 py-1 text-xs font-mono text-gray-600">{{ bx }}</th>{% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for by in comparison.y_labels %}
        <tr>
          <th class="px-2 py-1 text-xs font-mono text-gray-600 text-left">{{ by }}</th>
          {% for bx in comparison.x_labels %}
          {% set cell = comparison.cells.get((bx, by)) %}
          {% if cell %}
          {% set d = cell.delta %}
          <td class="px-2 py-1 border border-gray-100 text-center align-top {% if d is not none and d < 0 %}cmp-worse{% elif d is not none and d > 0 %}cmp-better{% endif %}" data-delta="{{ d if d is not none else '' }}">
            {% for t in cell.tallies %}
            <div class="font-mono text-xs {% if loop.first %}text-gray-500{% else %}text-gray-800{% endif %}">{% if t[1] %}{{ t[0] }}/{{ t[1] }}{% else %}-{% endif %}</div>
            {% endfor %}
          </td>
          {% else %}
          <td class="px-2 py-1 border border-gray-100 bg-gray-50"></td>
          {% endif %}
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}

<!-- openodd's matrices, side by side -->
{% if matrices %}
<details class="mb-6">
  <summary class="cursor-pointer text-lg font-semibold text-gray-700">Coverage matrix of each session</summary>
  <div class="grid gap-4 mt-2" style="grid-template-columns: repeat({{ [matrices | length, 2] | min }}, minmax(0, 1fr));">
    {% for ref, html in matrices %}
    <div class="bg-white rounded-lg shadow p-3 overflow-x-auto">
      <div class="text-xs font-mono text-gray-500 mb-1"><a class="text-blue-600" href="/session/{{ ref }}/odd">{{ ref }}</a></div>
      {% if html %}{{ html | safe }}{% else %}<p class="text-sm text-gray-500">No coverage files.</p>{% endif %}
    </div>
    {% endfor %}
  </div>
</details>
{% endif %}

<!-- Per case -->
<div class="mb-6">
  <div class="flex items-center gap-3 mb-2">
    <h2 class="text-lg font-semibold text-gray-700">Cases</h2>
    <label class="text-sm text-gray-600"><input type="checkbox" id="changed-only"> changed only</label>
  </div>
  <div class="bg-white rounded-lg shadow overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200 text-sm" id="case-table">
      <thead class="bg-gray-50">
        <tr>
          <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Change</th>
          <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Case</th>
          {% for ref in comparison.sessions %}<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 font-mono">{{ ref.split('/', 1)[1] }}</th>{% endfor %}
          {% for key in comparison.metrics %}<th class="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase whitespace-nowrap">Δ {{ metric_names[key][0] }}</th>{% endfor %}
          <th class="px-3 py-2"></th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200">
        {% for c in comparison.cases %}
        {% set change = c.change() %}
        <tr class="cmp-{{ change }}" data-change="{{ change }}">
          <td class="px-3 py-2 whitespace-nowrap">
            {% if change == "regression" %}<span class="font-bold text-red-700">pass → fail</span>
            {% elif change == "fixed" %}<span class="font-bold text-green-700">fail → pass</span>
            {% elif change == "flaky" %}<span class="text-amber-700">flaky</span>
            {% else %}<span class="text-gray-400">{{ change }}</span>{% endif %}
          </td>
          <td class="px-3 py-2">
            <div class="whitespace-nowrap">{{ c.first.label }}</div>
            <div class="text-xs text-gray-500">{% for name, bucket in c.first.buckets.items() %}{% if name in (comparison.x, comparison.y) %}<span class="font-mono mr-2">{{ name.split('.')[-1] }} {{ bucket }}</span>{% endif %}{% endfor %}</div>
          </td>
          {% for r in c.runs %}
          <td class="px-3 py-2 whitespace-nowrap">
            {% if r %}<a href="/session/{{ comparison.sessions[loop.index0] }}/{{ r.index }}#recording" title="#{{ r.index }}: {{ r.message }}">{{ outcome_badge(r) }}</a>{% else %}{{ outcome_badge(none) }}{% endif %}
          </td>
          {% endfor %}
          {% for key in comparison.metrics %}
          {% set d = c.delta(key) %}
          {% set better = metric_names[key][1] %}
          <td class="px-3 py-2 text-right font-mono {% if c.significant(key) and better is not none and ((d > 0) == better) %}text-green-700 font-semibold{% elif c.significant(key) and better is not none %}text-red-700 font-semibold{% elif c.significant(key) %}text-gray-900 font-semibold{% else %}text-gray-400{% endif %}">{% if d is none %}<span class="text-gray-300">-</span>{% else %}{{ "%+.2f" | format(d) }}{% endif %}</td>
          {% endfor %}
          <td class="px-3 py-2 whitespace-nowrap">
            {% set ns = namespace(q=[]) %}
            {% for r in c.runs %}{% if r %}{% set ns.q = ns.q + ["run=" ~ (comparison.sessions[loop.index0] ~ "/" ~ r.index) | urlencode] %}{% endif %}{% endfor %}
            {% if ns.q | length > 1 %}<a class="text-blue-600 hover:text-blue-800 text-xs" href="/compare/runs?{{ [ns.q[0], ns.q[-1]] | join('&') }}">side by side</a>{% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}
{% endblock %}

{% block extra_scripts %}
{% if oo_script %}<script>{{ oo_script | safe }}</script>{% endif %}
<script>
  (function () {
    var box = document.getElementById('changed-only');
    if (!box) return;
    box.addEventListener('change', function () {
      document.querySelectorAll('#case-table tbody tr').forEach(function (row) {
        row.hidden = box.checked && row.dataset.change === 'same';
      });
    });
  })();
</script>
{% endblock %}