{% load json_filters %}
<div class="mb-4 no-print">
  <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 no-print">
  <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>
  <a href="{% url 'run_export_html' run.id %}" class="px-3 py-1.5 rounded-lg bg-surface-overlay text-gray-400 text-xs font-medium hover:text-gray-200 transition-colors" title="Download a self-contained HTML file you can open in any browser (no server needed)">Export HTML</a>
  <button type="button" onclick="exportPdf()" class="px-3 py-1.5 rounded-lg bg-surface-overlay text-gray-400 text-xs font-medium hover:text-gray-200 transition-colors" title="Print this result to PDF (choose “Save as PDF” in the print dialog)">Export PDF</button>
</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 open 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
    {% if scenario_set_id and scenario_id %}<a href="{% url 'scenarios' %}?set={{ scenario_set_id }}&scenario={{ scenario_id }}" target="_blank" class="ml-auto text-xs text-gray-500 hover:text-accent" onclick="event.stopPropagation()" title="Open this scenario in a new tab">→ View</a>{% endif %}
  </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 %}
    <details class="group">
      <summary class="text-xs text-gray-500 cursor-pointer select-none hover:text-gray-400">Advanced options</summary>
      <div class="mt-1 space-y-1 pl-3 border-l border-gray-800 text-xs">
        <div>
          <span class="text-gray-500">Severity ceiling:</span>
          {% if scenario_severity_ceiling %}
          <span class="ml-1 px-1.5 py-0.5 rounded bg-surface-raised text-gray-300 text-[11px]">{{ scenario_severity_ceiling }}</span>
          {% else %}
          <span class="ml-1 text-gray-600">none (judge decides)</span>
          {% endif %}
        </div>
        <div>
          <span class="text-gray-500">Documents (RAG context):</span>
          <span class="ml-1 font-mono text-[11px] {% if scenario_documents %}text-gray-300{% else %}text-gray-600{% endif %}">{% if scenario_documents %}{{ scenario_documents|jsonify_compact }}{% else %}none{% endif %}</span>
        </div>
        <div>
          <span class="text-gray-500">File URI (vision input):</span>
          <span class="ml-1 font-mono text-[11px] {% if scenario_file_uri %}text-gray-300{% else %}text-gray-600{% endif %}">{% if scenario_file_uri %}{{ scenario_file_uri }}{% else %}none{% endif %}</span>
        </div>
      </div>
    </details>
    {% if scenario_agentic %}
    <details class="group" open>
      <summary class="text-gray-500 font-medium cursor-pointer select-none hover:text-gray-400">Agentic controls</summary>
      <div class="mt-2">
        {% include "partials/agentic_controls_readonly.html" with agentic=scenario_agentic %}
      </div>
    </details>
    {% 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{% elif d.severity == 'ungraded' %}bg-gray-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">{% include "partials/icon.html" with name="triangle-alert" cls="w-3.5 h-3.5 -mt-0.5 mr-1" %}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{% elif rep.severity == 'ungraded' %}text-gray-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">Full result (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 %}

<!-- Print/PDF export: hide the app chrome, show only the result, light theme. -->
<style>
  @media print {
    body { background: #fff !important; }
    #sidebar, header, footer, .no-print { display: none !important; }
    main { overflow: visible !important; padding: 0 !important; }
    /* Repetition tabs: show every panel, drop the tab buttons. */
    .rep-tab { display: none !important; }
    .rep-panel { display: block !important; page-break-inside: avoid; margin-bottom: 1rem; }
    /* Force a light, high-contrast theme for paper. */
    .bg-surface-raised, .bg-surface-overlay, .bg-surface-overlay\/50, .bg-surface-overlay\/70 { background: #fff !important; }
    .border-gray-800, .border-red-900\/40, .border-accent\/30 { border-color: #d1d5db !important; }
    .text-gray-100, .text-gray-200, .text-gray-300, .text-gray-400, .text-gray-500 { color: #111 !important; }
    .text-red-300, .text-red-400 { color: #b91c1c !important; }
    .text-emerald-300, .text-emerald-400 { color: #047857 !important; }
    .text-amber-300, .text-amber-400 { color: #b45309 !important; }
    .text-accent { color: #1d4ed8 !important; }
    .bg-blue-950\/40 { background: #eff6ff !important; }
    .bg-amber-900\/20 { background: #fef3c7 !important; }
    .bg-red-900\/30 { background: #fee2e2 !important; }
  }
</style>
<script>
function exportPdf() {
  const origTitle = document.title;
  document.title = '{{ scenario_name|escapejs }} — {{ run.name }} (Run #{{ run.id }})';
  // Expand <details> (e.g. Raw JSON) so the print captures everything.
  document.querySelectorAll('details').forEach(d => d.open = true);
  setTimeout(() => {
    window.print();
    document.title = origTitle;
  }, 50);
}

// Image lightbox: load thumbnails (remote directly, local via the backend)
// and enlarge on click. Mirrors the SimpleAudit visualizer's lightbox.
(function() {
  const isRemote = (u) => /^https?:\/\//i.test(u);
  const imgs = document.querySelectorAll('img.file-preview-img[data-img-uri]');
  imgs.forEach(img => {
    const uri = img.getAttribute('data-img-uri');
    img.addEventListener('click', () => openLightbox(img.src || uri));
    if (isRemote(uri)) { img.src = uri; }
    else {
      fetch('/api/visualizer/api/image/?uri=' + encodeURIComponent(uri), { credentials: 'same-origin' })
        .then(r => r.ok ? r.json() : Promise.reject())
        .then(d => { img.src = d.data_uri; })
        .catch(() => { img.style.display = 'none'; });
    }
  });
  function openLightbox(src) {
    if (!src) return;
    const ov = document.getElementById('image-lightbox');
    if (!ov) return;
    ov.querySelector('img').src = src;
    ov.classList.remove('hidden');
    ov.classList.add('flex');
  }
  function closeLightbox() {
    const ov = document.getElementById('image-lightbox');
    if (!ov) return;
    ov.classList.add('hidden');
    ov.classList.remove('flex');
    ov.querySelector('img').src = '';
  }
  document.getElementById('image-lightbox')?.addEventListener('click', e => { if (e.target.id === 'image-lightbox') closeLightbox(); });
  document.addEventListener('keydown', e => { if (e.key === 'Escape') closeLightbox(); });
})();
</script>

<!-- Image lightbox (click a thumbnail to enlarge) -->
<div id="image-lightbox" class="hidden fixed inset-0 z-50 bg-black/80 items-center justify-center p-4 cursor-zoom-out no-print">
  <img src="" alt="attached image" class="max-w-full max-h-full rounded shadow-2xl" onclick="event.stopPropagation()" />
  <button type="button" onclick="this.closest('#image-lightbox').classList.add('hidden');this.closest('#image-lightbox').classList.remove('flex')" class="absolute top-4 right-4 text-white/90 hover:text-white text-3xl leading-none" aria-label="Close">&times;</button>
</div>