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

<!-- Header -->
<div class="flex items-center justify-between mb-6">
  <div class="flex items-center gap-3">
    <h1 class="text-lg font-semibold text-gray-100">{{ scenario_name }}</h1>
    {% if severity == "pass" or severity == "low" %}<span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-900/50 text-emerald-300">{{ severity }}</span>
    {% elif severity == "medium" %}<span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-semibold bg-amber-900/50 text-amber-300">{{ severity }}</span>
    {% else %}<span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-900/50 text-red-300">{{ severity|default:"unknown" }}</span>{% endif %}
  </div>
  <a href="{% url 'audit_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 summary %}
<div class="bg-surface-raised rounded-xl border border-gray-800 p-4 mb-4">
  <p class="text-sm text-gray-300">{{ summary }}</p>
</div>
{% endif %}

<!-- Repetition Stability (n_repetitions > 1) -->
{% if is_repeated %}
<div class="bg-surface-raised rounded-xl border border-accent/30 p-4 mb-4">
  <h2 class="text-sm font-semibold text-accent mb-3">Judge Stability ({{ n_reps }} repetitions)</h2>
  <div class="grid grid-cols-3 gap-4 mb-3">
    <div class="text-center">
      <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 class="text-center">
      <p class="text-lg font-bold text-gray-200">{{ aggregated_severity }}</p>
      <p class="text-[10px] text-gray-500 uppercase">Modal Verdict</p>
    </div>
    <div class="text-center">
      <p class="text-lg font-bold text-gray-200">{{ n_reps }}×</p>
      <p class="text-[10px] text-gray-500 uppercase">Runs</p>
    </div>
  </div>
  <!-- Severity distribution legend -->
  {% if severity_distribution %}
  <div class="flex gap-3 text-[10px] text-gray-500 mb-3 flex-wrap">
    {% for sev, cnt in severity_distribution.items %}
    <span><span class="inline-block w-2 h-2 rounded-full {% if sev == 'pass' or sev == 'low' %}bg-emerald-500{% elif sev == 'medium' %}bg-amber-500{% else %}bg-red-500{% endif %} mr-1"></span>{{ sev }}: {{ cnt }}/{{ n_reps }}</span>
    {% endfor %}
  </div>
  {% endif %}
  <!-- Per-rep table -->
  <table class="w-full text-xs">
    <thead><tr class="border-b border-gray-800">
      <th class="text-left px-2 py-1 text-gray-500">Rep</th>
      <th class="text-left px-2 py-1 text-gray-500">Severity</th>
      <th class="text-right px-2 py-1 text-gray-500">Tokens</th>
      <th class="text-right px-2 py-1 text-gray-500">Latency</th>
    </tr></thead>
    <tbody>
      {% for rep in rep_summaries %}
      <tr class="border-b border-gray-800/50 {% if rep.severity != aggregated_severity %}bg-amber-900/10{% endif %}">
        <td class="px-2 py-1.5 text-gray-400">#{{ rep.index }}</td>
        <td class="px-2 py-1.5"><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.severity != aggregated_severity %} <span class="text-amber-500 text-[10px]">≠</span>{% endif %}</td>
        <td class="px-2 py-1.5 text-right text-gray-500">{{ rep.tokens|default:"—" }}</td>
        <td class="px-2 py-1.5 text-right text-gray-500">{{ rep.latency_ms|default:"—"}}{% if rep.latency_ms %}ms{% endif %}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% 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 ({{ agreement_rate|floatformat:0 }}%). This scenario's verdict may be unstable — consider increasing repetitions.</p>
  {% endif %}
</div>
{% endif %}

<!-- Conversation -->
{% if conversation %}
<div class="bg-surface-raised rounded-xl border border-gray-800 p-4 mb-4">
  <h2 class="text-sm font-semibold text-gray-300 mb-3">Conversation ({{ conversation|length }} turns)</h2>
  <div class="space-y-3 max-h-96 overflow-y-auto">
    {% for turn in conversation %}
    <div class="rounded-lg p-3 {% if turn.role == 'user' or turn.role == 'system' %}bg-surface-overlay/70{% else %}bg-blue-950/30{% endif %}">
      <p class="text-[10px] uppercase tracking-wide font-semibold {% if turn.role == 'assistant' %}text-blue-400{% else %}text-gray-500{% endif %} mb-1">{{ turn.role|default:"message" }}</p>
      <p class="text-sm text-gray-200 whitespace-pre-wrap">{{ turn.content }}</p>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

<!-- Issues Found -->
{% if issues %}
<div class="bg-surface-raised rounded-xl border border-red-900/30 p-4 mb-4">
  <h2 class="text-sm font-semibold text-red-300 mb-3">Issues Found ({{ issues|length }})</h2>
  <ul class="space-y-2">
    {% for issue in issues %}
    <li class="text-sm text-gray-200 flex items-start gap-2">
      <span class="text-red-400 mt-0.5 shrink-0">•</span>
      <span>{{ issue.description }}</span>
    </li>
    {% endfor %}
  </ul>
</div>
{% endif %}

<!-- Judge Rationale / Evidence -->
{% if rationale %}
<div class="bg-surface-raised rounded-xl border border-gray-800 p-4 mb-4">
  <h2 class="text-sm font-semibold text-gray-300 mb-3">Judge Rationale</h2>
  <p class="text-sm text-gray-300 whitespace-pre-wrap">{{ rationale }}</p>
</div>
{% endif %}

<!-- Other Keys -->
{% if other_keys %}
<div class="bg-surface-raised rounded-xl border border-gray-800 p-4 mb-4">
  <h2 class="text-sm font-semibold text-gray-300 mb-3">Details</h2>
  <div class="space-y-2">
    {% for key, value in other_keys.items %}
    <div class="flex items-start gap-2 text-sm">
      <span class="text-gray-500 shrink-0 min-w-[120px]">{{ key }}</span>
      <span class="text-gray-300 break-all">{{ value }}</span>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

<!-- Raw JSON -->
{% if raw_json %}
<div class="bg-surface-raised rounded-xl border border-gray-800 p-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>
{% endif %}

{% if not raw_json %}
<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 %}