{% extends "base.html" %}
{% block title %}Compare — SimpleAudit{% endblock %}
{% block content %}
<h1 class="text-lg font-semibold text-gray-100 mb-6">Compare Runs</h1>

{% if error %}
<div class="mb-4 text-sm text-red-300 bg-red-900/30 rounded-lg px-4 py-2">{{ error }}</div>
{% endif %}

<form method="get" class="max-w-2xl" onsubmit="return submitCompareForm(this)">
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4 mb-6">
    <h2 class="text-sm font-semibold text-gray-300 mb-3">Select completed runs (min 2)</h2>
    {% if runs %}
    <!-- Search filter -->
    <input type="text" id="compare-search" placeholder="Filter by name or set…" oninput="filterCompareRuns(this.value)"
           class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 mb-3">
    <div id="compare-run-list" class="space-y-2 max-h-64 overflow-y-auto">
      {% for run in runs %}
      <label class="flex items-center gap-3 px-3 py-2 rounded-lg bg-surface-overlay/50 cursor-pointer hover:bg-surface-overlay">
        <input type="checkbox" name="runs[]" value="{{ run.id }}" class="accent-[#6c8cff]" {% if run.id in selected_ids %}checked{% endif %}>
        <a href="/runs/{{ run.id }}/" onclick="event.preventDefault()" class="text-sm text-gray-200 hover:text-accent transition-colors">{{ run.name }} <span class="text-gray-500">(#{{ run.id }})</span></a>
        <a href="/scenarios/?set={{ run.scenario_set_version.scenario_set_id }}" onclick="event.preventDefault()" class="text-xs text-gray-500 hover:text-accent transition-colors">{{ run.scenario_set_version.scenario_set.name|default:"—" }}</a>
        <span class="text-xs text-gray-600 ml-auto">{{ run.created_at|date:"M j" }}</span>
      </label>
      {% endfor %}
    </div>
    {% else %}
    <p class="text-sm text-gray-500">No completed runs to compare.</p>
    {% endif %}
  </div>
  <div class="flex items-center gap-3">
    <button type="submit" class="px-4 py-2 rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent-hover">Compare</button>
    {% if result and selected_ids %}
    <button type="button" onclick="copyCompareLink()" class="text-xs text-gray-500 hover:text-accent transition-colors cursor-pointer bg-transparent border-none p-0">Copy shareable link</button>
    <a href="/compare/" class="text-xs text-gray-500 hover:text-red-400 transition-colors">Reset</a>
    {% endif %}
  </div>
</form>

{% if result %}
{% if result.inputs %}
<div id="compare-inputs" class="scroll-mt-4 mt-6 bg-surface-raised rounded-xl border border-gray-800 p-4">
  <h2 class="text-sm font-semibold text-gray-300 mb-3">Input Parameters</h2>
  <div class="overflow-x-auto">
  <table class="w-full text-sm">
    <thead><tr class="border-b border-gray-800">
      <th class="text-left px-3 py-2 text-xs text-gray-500 uppercase">Parameter</th>
      {% for meta in result.run_meta %}{% include "partials/compare_run_header.html" %}{% endfor %}
    </tr></thead>
    <tbody>
      {% for row in result.inputs %}
      <tr class="border-b border-gray-800/50 {% if row.differs %}bg-amber-900/10{% endif %}">
        <td class="px-3 py-2 text-gray-400">{{ row.label }}{% if row.differs %} <span class="text-amber-400 text-xs">≠</span>{% endif %}</td>
        {% for cell in row.cells %}
        <td class="px-3 py-2 text-gray-300">
          {% if cell.url %}<a href="{{ cell.url }}" class="hover:text-accent transition-colors">{{ cell.text }}</a>{% else %}{{ cell.text }}{% endif %}
        </td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
</div>
{% endif %}
<div id="compare-results" class="mt-6 bg-surface-raised rounded-xl border border-gray-800 p-4 scroll-mt-4">
  <div class="flex items-center justify-between flex-wrap gap-2 mb-3">
    <h2 class="text-sm font-semibold text-gray-300">Results{% if result.intersection_count is not None %} <span class="text-gray-500 font-normal">— Comparing {{ result.intersection_count }} common scenarios</span>{% endif %}</h2>
    <button onclick="exportCompareCSV()" class="px-3 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs text-gray-300 hover:text-accent hover:border-accent/50 transition-colors">Export CSV</button>
  </div>
  {% if result.warnings %}
  <div class="mb-3 space-y-1">
    {% for w in result.warnings %}
    <p class="text-xs text-amber-300 bg-amber-900/20 rounded px-3 py-1.5">⚠ {{ w }}</p>
    {% endfor %}
  </div>
  {% endif %}
  {% if result.rows %}
  <div class="overflow-x-auto">
  <table id="compare-results-table" class="w-full text-sm">
    <thead><tr class="border-b border-gray-800">
      <th class="text-left px-3 py-2 text-xs text-gray-500 uppercase">Scenario</th>
      {% for meta in result.run_meta %}{% include "partials/compare_run_header.html" %}{% endfor %}
      <th class="text-left px-3 py-2 text-xs text-gray-500 uppercase" title="How much the runs disagree on this scenario: agreement (mode frequency), entropy (normalized), spread (ordinal std dev), and the most common severity">Fragility</th>
    </tr></thead>
    <tbody>
      {% for row in result.rows %}
      <tr class="border-b border-gray-800/50">
        <td class="px-3 py-2 text-gray-300">{{ row.scenario }}</td>
        {% for val in row.values %}
        <td class="px-3 py-2">
          {% if val == "pass" or val == "low" %}<span class="text-emerald-400">{{ val }}</span>
          {% elif val == "medium" %}<span class="text-amber-400">{{ val }}</span>
          {% elif val == "high" or val == "critical" %}<span class="text-red-400">{{ val }}</span>
          {% else %}<span class="text-gray-500">{{ val|default:"—" }}</span>{% endif %}
        </td>
        {% endfor %}
        <td class="px-3 py-2 text-xs text-gray-400">
          {% if row.fragility %}
            <span title="Mode frequency across runs">{{ row.fragility.agreement|floatformat:0 }}% agree</span>
            <span class="text-gray-600">·</span>
            <span title="Normalized Shannon entropy (0 = unanimous, 1 = maximally mixed)">H {{ row.fragility.entropy|floatformat:2 }}</span>
            <span class="text-gray-600">·</span>
            <span title="Ordinal std dev of severities">σ {{ row.fragility.spread|floatformat:2 }}</span>
            <span class="text-gray-600">·</span>
            <span title="Most common severity">{{ row.fragility.mode }}</span>
          {% else %}<span class="text-gray-600">—</span>{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
  {% else %}
  <p class="text-sm text-gray-500">No comparable scenarios found between selected runs.</p>
  {% endif %}
  <!-- Severity legend -->
  <div class="mt-4 pt-3 border-t border-gray-800/60 flex items-center gap-4 text-xs text-gray-500">
    <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-emerald-400 inline-block"></span> pass / low</span>
    <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-amber-400 inline-block"></span> medium</span>
    <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-red-400 inline-block"></span> high / critical</span>
  </div>
</div>
{% endif %}

<script>
{% if result %}
// Opened from a link (e.g. Compare on the dashboard): jump straight to the comparison.
window.addEventListener('DOMContentLoaded', () => {
  (document.getElementById('compare-inputs') || document.getElementById('compare-results')).scrollIntoView({ behavior: 'smooth', block: 'start' });
});
{% endif %}
function submitCompareForm(form) {
  const checked = Array.from(form.querySelectorAll('input[name="runs[]"]:checked')).map(cb => cb.value);
  if (checked.length < 2) { alert('Select at least 2 runs to compare.'); return false; }
  window.location.href = '/compare/?runs=' + checked.join(',');
  return false;
}
function filterCompareRuns(query) {
  const q = (query || '').toLowerCase();
  document.querySelectorAll('#compare-run-list label').forEach(el => {
    el.style.display = el.textContent.toLowerCase().includes(q) ? '' : 'none';
  });
}
function copyCompareLink() {
  const checked = Array.from(document.querySelectorAll('input[name="runs[]"]:checked')).map(cb => cb.value);
  if (checked.length < 2) return;
  const url = window.location.origin + '/compare/?runs=' + checked.join(',');
  navigator.clipboard.writeText(url).then(() => {
    const btn = document.querySelector('[onclick="copyCompareLink()"]');
    if (btn) { btn.textContent = '✓ Copied!'; setTimeout(() => btn.textContent = 'Copy shareable link', 1500); }
  }).catch(() => { prompt('Copy this link:', url); });
}
function exportCompareCSV() {
  const table = document.getElementById('compare-results-table');
  if (!table) return;
  const rows = Array.from(table.querySelectorAll('tr')).map(tr =>
    Array.from(tr.querySelectorAll('th, td')).map(cell => '"' + cell.textContent.trim().replace(/\s+/g, ' ').replace(/"/g, '""') + '"').join(',')
  );
  const csv = rows.join('\n');
  const blob = new Blob([csv], {type: 'text/csv;charset=utf-8'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'comparison.csv';
  a.click();
  URL.revokeObjectURL(url);
}
</script>
{% endblock %}