{% extends "base.html" %}
{% block title %}{{ scenario_name }} — {{ run.name }} (Run #{{ run.id }}){% endblock %}
{% block content %}
<div class="mb-4">
  <a href="{% url 'run_detail' run.id %}" class="text-xs text-gray-500 hover:text-accent">← Back to {{ run.name }} (Run #{{ run.id }})</a>
</div>

<!-- Header -->
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
  <div class="flex flex-wrap items-center gap-2 min-w-0">
    <h1 class="text-lg font-semibold text-gray-100 break-words">{{ scenario_name }}</h1>
    {% include "partials/severity_badge.html" with sev=severity %}
    {% if is_repeated %}<span class="text-xs text-gray-500">{{ n_reps }}× · {{ agreement_rate|floatformat:0 }}% agree</span>{% endif %}
  </div>
  <a href="{% url 'run_export' run.id %}?format=json" class="px-3 py-1.5 rounded-lg bg-surface-overlay text-gray-400 text-xs font-medium hover:text-gray-200 transition-colors">Export JSON</a>
</div>

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

<!-- What was tested -->
{% if scenario_description or expected_behavior or test_prompt %}
<details class="bg-surface-raised rounded-xl border border-gray-800 p-4 mb-4 group">
  <summary class="text-sm font-semibold text-gray-300 cursor-pointer select-none flex items-center gap-2">
    <span class="text-gray-500 group-open:rotate-90 transition-transform">▸</span> Scenario
  </summary>
  <div class="mt-3 space-y-3 text-sm">
    {% if scenario_description %}<p class="text-gray-300 whitespace-pre-wrap">{{ scenario_description }}</p>{% endif %}
    {% if expected_behavior %}
    <div>
      <p class="text-xs text-gray-500 uppercase tracking-wide mb-1">Expected behaviour</p>
      <ul class="space-y-1">{% for e in expected_behavior %}<li class="text-gray-300 flex gap-2"><span class="text-gray-500">•</span><span>{{ e }}</span></li>{% endfor %}</ul>
    </div>
    {% endif %}
    {% if test_prompt %}
    <div>
      <p class="text-xs text-gray-500 uppercase tracking-wide mb-1">Test prompt</p>
      <p class="text-gray-300 whitespace-pre-wrap">{{ test_prompt }}</p>
    </div>
    {% endif %}
  </div>
</details>
{% endif %}

{% if is_repeated %}
<!-- Stability across repetitions -->
<div class="bg-surface-raised rounded-xl border border-accent/30 p-4 mb-4">
  <div class="flex flex-wrap items-baseline justify-between gap-2 mb-3">
    <h2 class="text-sm font-semibold text-accent">Judge stability across {{ n_reps }} repetitions</h2>
    <p class="text-xs text-gray-500">Verdict = most common severity</p>
  </div>
  <div class="grid grid-cols-3 gap-4 mb-3 text-center">
    <div>
      <p class="text-lg font-bold {% if low_agreement %}{% if agreement_rate >= 60 %}text-amber-400{% else %}text-red-400{% endif %}{% else %}text-emerald-400{% endif %}">{{ agreement_rate|floatformat:0 }}%</p>
      <p class="text-[10px] text-gray-500 uppercase">Agreement</p>
    </div>
    <div>
      <p class="text-lg font-bold text-gray-200">{{ severity }}</p>
      <p class="text-[10px] text-gray-500 uppercase">Verdict</p>
    </div>
    <div>
      <p class="text-lg font-bold text-gray-200">{{ n_reps }}×</p>
      <p class="text-[10px] text-gray-500 uppercase">Repetitions</p>
    </div>
  </div>
  {% if distribution %}
  <div class="flex h-2 rounded-full overflow-hidden bg-surface-overlay" role="img" aria-label="Severity split across repetitions">
    {% for d in distribution %}<div style="width: {{ d.pct }}%" class="{% if d.severity == 'pass' or d.severity == 'low' %}bg-emerald-500{% elif d.severity == 'medium' %}bg-amber-500{% else %}bg-red-500{% endif %}" title="{{ d.severity }}: {{ d.count }}/{{ n_reps }}"></div>{% endfor %}
  </div>
  <div class="flex flex-wrap gap-3 text-[11px] text-gray-400 mt-2">
    {% for d in distribution %}<span>{{ d.severity }} {{ d.count }}/{{ n_reps }}</span>{% endfor %}
  </div>
  {% endif %}
  {% if low_agreement %}
  <p class="mt-3 text-xs text-amber-300 bg-amber-900/20 rounded px-3 py-1.5">⚠ Low judge agreement. This verdict may be unstable; compare the repetitions below or increase repetitions.</p>
  {% endif %}
</div>

<!-- Repetition tabs -->
<div class="flex flex-wrap gap-1.5 mb-4" role="tablist" aria-label="Repetitions">
  {% for rep in reps %}
  <button type="button" role="tab" data-rep-tab="{{ rep.index }}" aria-controls="rep-{{ rep.index }}"
          class="rep-tab inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors {% if rep.dissent %}border-amber-600/50{% else %}border-gray-800{% endif %}"
          title="{% if rep.dissent %}Disagrees with the verdict · {% endif %}{{ rep.total_tokens }} tokens">
    Rep {{ rep.index }}
    <span class="{% if rep.severity == 'pass' or rep.severity == 'low' %}text-emerald-400{% elif rep.severity == 'medium' %}text-amber-400{% else %}text-red-400{% endif %}">{{ rep.severity }}</span>
    {% if rep.dissent %}<span class="text-amber-500">≠</span>{% endif %}
  </button>
  {% endfor %}
</div>
{% for rep in reps %}
<section id="rep-{{ rep.index }}" role="tabpanel" data-rep-panel="{{ rep.index }}" class="rep-panel {% if rep.index != initial_rep %}hidden{% endif %}">
  {% include "partials/result_rep_panel.html" %}
</section>
{% endfor %}
<script>
(function() {
  const tabs = document.querySelectorAll('[data-rep-tab]');
  const panels = document.querySelectorAll('[data-rep-panel]');
  function show(n, updateHash) {
    if (![...panels].some(p => p.dataset.repPanel === String(n))) return;
    panels.forEach(p => p.classList.toggle('hidden', p.dataset.repPanel !== String(n)));
    tabs.forEach(t => {
      const on = t.dataset.repTab === String(n);
      t.setAttribute('aria-selected', on);
      t.classList.toggle('bg-accent/15', on);
      t.classList.toggle('text-accent', on);
      t.classList.toggle('bg-surface-overlay', !on);
      t.classList.toggle('text-gray-400', !on);
    });
    if (updateHash) history.replaceState(null, '', '#rep-' + n);
  }
  tabs.forEach(t => t.addEventListener('click', () => show(t.dataset.repTab, true)));
  const m = location.hash.match(/^#rep-(\d+)$/);
  show(m ? m[1] : {{ initial_rep }}, false);
})();
</script>
{% elif reps %}
{% with rep=reps.0 %}{% include "partials/result_rep_panel.html" %}{% endwith %}
{% endif %}

{% if raw_json %}
<div class="bg-surface-raised rounded-xl border border-gray-800 p-4 mt-4">
  <details>
    <summary class="text-sm font-semibold text-gray-400 cursor-pointer hover:text-gray-200 transition-colors">Raw JSON</summary>
    <pre class="mt-3 text-xs text-gray-400 font-mono overflow-x-auto max-h-96 overflow-y-auto bg-surface-overlay rounded-lg p-3">{{ raw_json }}</pre>
  </details>
</div>
{% else %}
<div class="bg-surface-raised rounded-xl border border-gray-800 p-8 text-center">
  <p class="text-sm text-gray-500">No result data available for this scenario.</p>
</div>
{% endif %}
{% endblock %}