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

<div class="flex items-center justify-between mb-6">
  <div class="flex items-center gap-2 min-w-0">
    <h1 id="audit-title" class="text-lg font-semibold text-gray-100 truncate">{{ run.name }} <span class="text-gray-500 font-normal text-sm">(Audit #{{ run.id }})</span></h1>
    <button type="button" onclick="toggleRename()" title="Rename this audit" aria-label="Rename this audit" class="shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-md text-gray-500 hover:text-accent hover:bg-surface-overlay transition-colors">
      <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>
    </button>
  </div>
  <form id="rename-form" method="post" action="{% url 'audit_rename' run.id %}" class="hidden flex items-center gap-2 mb-6">
    {% csrf_token %}
    <input type="text" name="name" value="{{ run.name }}" maxlength="250" required
           class="px-3 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-accent/50 w-64"
           onkeydown="if(event.key==='Enter')this.form.submit();if(event.key==='Escape')toggleRename()">
    <button type="submit" class="px-3 py-1.5 rounded-lg bg-accent text-white text-xs font-medium hover:bg-accent-hover">Save</button>
    <button type="button" onclick="toggleRename()" class="px-3 py-1.5 rounded-lg bg-surface-overlay text-gray-400 text-xs font-medium hover:text-gray-200">Cancel</button>
  </form>
  <div class="flex items-center gap-2">
    <a href="{% url 'new_audit' %}?clone_from={{ run.id }}" title="Clone this audit" aria-label="Clone this audit" class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-surface-overlay text-gray-400 hover:text-accent transition-colors">
      <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
    </a>
    <form method="post" action="{% url 'audit_archive' run.id %}" class="inline">
      {% csrf_token %}
      <button type="submit" title="{% if run.archived %}Unarchive this audit{% else %}Archive this audit{% endif %}" aria-label="{% if run.archived %}Unarchive this audit{% else %}Archive this audit{% endif %}" class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-surface-overlay text-gray-400 hover:text-gray-200 transition-colors">
        {% if run.archived %}
        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
        {% else %}
        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>
        {% endif %}
      </button>
    </form>
    {% if run.archived %}<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-semibold bg-gray-800 text-gray-400">archived</span>{% endif %}
    {% if run.status == "queued" or run.status == "preparing" or run.status == "target_execution" or run.status == "auditing" or run.status == "judging" or run.status == "aggregation" %}
    <form method="post" action="{% url 'audit_cancel' run.id %}">
      {% csrf_token %}
      <button class="px-3 py-1.5 rounded-lg bg-red-900/50 text-red-300 text-xs font-medium hover:bg-red-800/60">Cancel</button>
    </form>
    {% endif %}
  </div>
</div>

<script>
function toggleRename() {
  document.getElementById('rename-form').classList.toggle('hidden');
}
</script>

<!-- Live Progress (SSE) -->
{% if run.status != "completed" and run.status != "failed" and run.status != "cancelled" %}
<div id="progress-panel" class="bg-surface-raised rounded-xl border border-accent/30 p-4 mb-6">
  <div class="flex items-center justify-between mb-3">
    <h2 class="text-sm font-semibold text-accent">Live Progress</h2>
    <span class="inline-flex items-center gap-1.5 text-xs text-emerald-400">
      <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> streaming
    </span>
  </div>
  <!-- Turn / Role / Rep tracker (hidden until first turn event) -->
  <style>
    @keyframes pulse-role {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.08); opacity: 0.75; }
    }
    @keyframes slide-in {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .event-log-entry { animation: slide-in 0.3s ease; }
    .role-node {
      transition: all 0.3s ease;
      border: 1px solid transparent;
    }
    .role-node.active-auditor {
      border-color: rgb(129 140 248);
      background: rgb(99 102 241 / 0.25);
      color: rgb(165 180 252);
      box-shadow: 0 0 12px rgb(99 102 241 / 0.5);
      animation: pulse-role 1.2s ease-in-out infinite;
    }
    .role-node.active-target {
      border-color: rgb(52 211 153);
      background: rgb(16 185 129 / 0.25);
      color: rgb(110 231 183);
      box-shadow: 0 0 12px rgb(16 185 129 / 0.5);
      animation: pulse-role 1.2s ease-in-out infinite;
    }
    .role-node.active-judge {
      border-color: rgb(251 191 36);
      background: rgb(245 158 11 / 0.25);
      color: rgb(253 230 138);
      box-shadow: 0 0 12px rgb(245 158 11 / 0.5);
      animation: pulse-role 1.2s ease-in-out infinite;
    }
    .turn-bar-fill { transition: width 0.3s ease, background-color 0.3s ease; }
    .rep-dot { transition: all 0.3s ease; }
  </style>
  <div id="turn-section" class="mb-4 hidden">
    <!-- Turn counter + progress bar -->
    <div class="flex items-center justify-between mb-1">
      <span id="turn-label" class="text-xs font-medium text-gray-300">Turn —</span>
      <span id="rep-label" class="text-xs font-medium text-gray-400"></span>
    </div>
    <div class="h-1.5 rounded-full bg-surface-overlay overflow-hidden mb-3">
      <div id="turn-bar" class="turn-bar-fill h-full rounded-full bg-indigo-400" style="width: 0%"></div>
    </div>
    <!-- Role diagram: Auditor → Target → Judge -->
    <div class="flex items-center justify-center gap-2 mb-3">
      <div id="role-auditor" class="role-node px-3 py-1.5 rounded-lg text-[11px] font-semibold bg-surface-overlay text-gray-500">Auditor</div>
      <svg class="w-4 h-4 text-gray-600 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
      <div id="role-target" class="role-node px-3 py-1.5 rounded-lg text-[11px] font-semibold bg-surface-overlay text-gray-500">Target</div>
      <svg class="w-4 h-4 text-gray-600 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
      <div id="role-judge" class="role-node px-3 py-1.5 rounded-lg text-[11px] font-semibold bg-surface-overlay text-gray-500">Judge</div>
    </div>
    <!-- Rep tracker dots -->
    <div id="rep-dots" class="flex items-center justify-center gap-1.5"></div>
  </div>
  <!-- Stage pipeline -->
  <div id="stage-pipeline" class="flex items-center gap-1 mb-4 overflow-x-auto pb-1">
    {% for stage in stages %}
    <div id="stage-{{ stage }}" class="px-2 py-1 rounded text-[11px] whitespace-nowrap bg-surface-overlay text-gray-500 transition-colors duration-300">{{ stage|cut:"_" }}</div>
    {% endfor %}
  </div>
  <!-- Counters -->
  <div class="grid grid-cols-5 gap-2 text-center">
    <div><p id="prog-total" class="text-lg font-bold text-gray-200">{{ run.total_scenarios }}</p><p class="text-[10px] text-gray-500 uppercase">Total</p></div>
    <div><p id="prog-done" class="text-lg font-bold text-emerald-400">{{ run.completed_scenarios }}</p><p class="text-[10px] text-gray-500 uppercase">Done</p></div>
    <div><p id="prog-ok" class="text-lg font-bold text-blue-400">{{ run.successful_scenarios }}</p><p class="text-[10px] text-gray-500 uppercase">Pass</p></div>
    <div><p id="prog-fail" class="text-lg font-bold text-red-400">{{ run.failed_scenarios }}</p><p class="text-[10px] text-gray-500 uppercase">Fail</p></div>
    <div><p id="prog-retry" class="text-lg font-bold text-amber-400">{{ run.retried_scenarios }}</p><p class="text-[10px] text-gray-500 uppercase">Retry</p></div>
  </div>
  <!-- Event log -->
  <div id="event-log" class="mt-3 max-h-32 overflow-y-auto space-y-1 text-[11px] font-mono text-gray-500">
    <p>Waiting for events…</p>
  </div>
</div>
<script>
(function() {
  const project_id = {{ request.project.id }};
  const run_id = {{ run.id }};
  const url = `/api/projects/${project_id}/audit-runs/${run_id}/events/`;
  const es = new EventSource(url);
  const stages = ["queued","preparing","target_execution","auditing","judging","aggregation","completed"];
  let currentStage = "{{ run.status }}";

  function setStage(stage) {
    const idx = stages.indexOf(stage);
    if (idx === -1) return;
    currentStage = stage;
    stages.forEach((s, i) => {
      const el = document.getElementById('stage-' + s);
      if (!el) return;
      if (i < idx) el.className = 'px-2 py-1 rounded text-[11px] whitespace-nowrap bg-emerald-900/40 text-emerald-300';
      else if (i === idx) el.className = 'px-2 py-1 rounded text-[11px] whitespace-nowrap bg-accent/30 text-accent font-semibold';
      else el.className = 'px-2 py-1 rounded text-[11px] whitespace-nowrap bg-surface-overlay text-gray-500';
    });
  }
  setStage(currentStage);

  function updateCounter(id, val) {
    const el = document.getElementById(id);
    if (el && val !== null && val !== undefined) el.textContent = val;
  }

  function logEvent(kind, data) {
    const log = document.getElementById('event-log');
    if (!log) return;
    if (log.querySelector('p')) log.innerHTML = '';
    const p = document.createElement('p');
    p.className = 'event-log-entry';
    const t = new Date().toLocaleTimeString();
    p.textContent = `[${t}] ${kind}: ${JSON.stringify(data).slice(0, 120)}`;
    log.prepend(p);
    while (log.children.length > 50) log.lastChild.remove();
  }

  // --- Turn / Role / Rep tracking ---
  const ROLE_COLORS = { auditor: 'bg-indigo-400', target: 'bg-emerald-400', judge: 'bg-amber-400' };
  let maxTurns = 0, totalReps = 0, currentRep = 0;

  function showTurnSection() {
    const sec = document.getElementById('turn-section');
    if (sec) sec.classList.remove('hidden');
  }

  function renderRepDots() {
    const wrap = document.getElementById('rep-dots');
    if (!wrap || !totalReps) return;
    wrap.innerHTML = '';
    for (let i = 1; i <= totalReps; i++) {
      const dot = document.createElement('span');
      const done = i < currentRep;
      const active = i === currentRep;
      dot.className = 'rep-dot inline-flex items-center justify-center w-5 h-5 rounded-full text-[9px] font-bold ' +
        (done ? 'bg-emerald-900/60 text-emerald-300 border border-emerald-500/50'
             : active ? 'bg-accent/30 text-accent border border-accent/60'
                     : 'bg-surface-overlay text-gray-600 border border-gray-700');
      dot.textContent = done ? '✓' : i;
      wrap.appendChild(dot);
    }
  }

  function setRole(role) {
    ['auditor', 'target', 'judge'].forEach(r => {
      const el = document.getElementById('role-' + r);
      if (!el) return;
      el.classList.remove('active-auditor', 'active-target', 'active-judge');
      if (r === role) el.classList.add('active-' + r);
    });
    const bar = document.getElementById('turn-bar');
    if (bar && ROLE_COLORS[role]) bar.className = 'turn-bar-fill h-full rounded-full ' + ROLE_COLORS[role];
  }

  function clearRole() {
    ['auditor', 'target', 'judge'].forEach(r => {
      const el = document.getElementById('role-' + r);
      if (el) el.classList.remove('active-auditor', 'active-target', 'active-judge');
    });
  }

  function handleScenarioTurn(payload) {
    showTurnSection();
    const turn = payload.turn || 0;
    maxTurns = payload.max_turns || maxTurns;
    if (payload.rep && payload.total_reps) {
      currentRep = payload.rep;
      totalReps = payload.total_reps;
    }
    const label = document.getElementById('turn-label');
    if (label) label.textContent = maxTurns ? `Turn ${turn}/${maxTurns}` : `Turn ${turn}`;
    const repLabel = document.getElementById('rep-label');
    if (repLabel) repLabel.textContent = totalReps > 1 ? `Rep ${currentRep}/${totalReps}` : '';
    const bar = document.getElementById('turn-bar');
    if (bar && maxTurns) bar.style.width = Math.min(100, (turn / maxTurns) * 100) + '%';
    if (payload.role) setRole(payload.role);
    renderRepDots();
  }

  function handleRepStarted(payload) {
    showTurnSection();
    currentRep = payload.rep || 1;
    totalReps = payload.total_reps || totalReps;
    const repLabel = document.getElementById('rep-label');
    if (repLabel) repLabel.textContent = totalReps > 1 ? `Rep ${currentRep}/${totalReps}` : '';
    const label = document.getElementById('turn-label');
    if (label) label.textContent = maxTurns ? `Turn 0/${maxTurns}` : 'Turn 0';
    const bar = document.getElementById('turn-bar');
    if (bar) bar.style.width = '0%';
    clearRole();
    renderRepDots();
  }

  let done = {{ run.completed_scenarios }}, ok = {{ run.successful_scenarios }}, fail = {{ run.failed_scenarios }};
  es.addEventListener('run_stage', e => {
    const d = JSON.parse(e.data);
    if (d.payload && d.payload.stage) setStage(d.payload.stage);
    logEvent('stage', d.payload || {});
  });
  es.addEventListener('scenario_attempted', e => {
    const d = JSON.parse(e.data);
    logEvent('attempt', { vi: d.version_item_id, attempt: (d.payload||{}).attempt });
  });
  es.addEventListener('scenario_turn', e => {
    const d = JSON.parse(e.data);
    handleScenarioTurn(d.payload || {});
  });
  es.addEventListener('scenario_rep_started', e => {
    const d = JSON.parse(e.data);
    handleRepStarted(d.payload || {});
  });
  es.addEventListener('scenario_completed', e => {
    const d = JSON.parse(e.data);
    const p = d.payload || {};
    done++; if (p.severity !== 'ERROR') ok++; else fail++;
    updateCounter('prog-done', done); updateCounter('prog-ok', ok); updateCounter('prog-fail', fail);
    clearRole();
    logEvent('done', { vi: d.version_item_id, severity: p.severity });
  });
  es.addEventListener('scenario_failed', e => {
    const d = JSON.parse(e.data);
    const p = d.payload || {};
    done++; fail++;
    updateCounter('prog-done', done); updateCounter('prog-fail', fail);
    clearRole();
    logEvent('fail', { vi: d.version_item_id, error: p.error });
  });
  ['run_completed','run_failed','run_cancelled'].forEach(term => {
    es.addEventListener(term, e => {
      const d = JSON.parse(e.data);
      const stageMap = { run_completed:'completed', run_failed:'aggregation', run_cancelled:'aggregation' };
      setStage(stageMap[term] || term);
      logEvent(term, d.payload || {});
      es.close();
      const panel = document.getElementById('progress-panel');
      if (panel) {
        const badge = panel.querySelector('.animate-pulse');
        if (badge) badge.parentElement.innerHTML = '<span class="text-xs text-gray-400">ended</span>';
      }
    });
  });
  es.onerror = () => { es.close(); };
})();
</script>
{% endif %}

<!-- Status + Manifest -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    <h2 class="text-sm font-semibold text-gray-300 mb-3">Status</h2>
    <div class="space-y-2 text-sm">
      <div class="flex justify-between"><span class="text-gray-500">State</span>
        {% if run.status == "completed" %}<span class="text-emerald-400 font-medium">completed</span>
        {% elif run.status == "failed" %}<span class="text-red-400 font-medium">failed</span>
        {% else %}<span class="text-amber-400 font-medium">{{ run.get_status_display }}</span>{% endif %}
      </div>
      <div class="flex justify-between"><span class="text-gray-500">Started</span><span>{{ run.started_at|date:"M j, H:i"|default:"—" }}</span></div>
      <div class="flex justify-between"><span class="text-gray-500">Finished</span><span>{{ run.finished_at|date:"M j, H:i"|default:"—" }}</span></div>
      {% if duration %}<div class="flex justify-between"><span class="text-gray-500">Duration</span><span>{{ duration }}</span></div>{% endif %}
      <div class="flex justify-between"><span class="text-gray-500">Scenarios</span><span>{{ run.total_scenarios }} total, {{ run.completed_scenarios }} done</span></div>
    </div>
  </div>

  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    <h2 class="text-sm font-semibold text-gray-300 mb-3">Frozen Manifest</h2>
    <div class="space-y-1.5 text-xs">
      <div class="flex justify-between gap-2"><span class="text-gray-500 shrink-0">Scenario Set</span><a href="/scenarios/?set={{ run.scenario_set_version.scenario_set_id }}" class="text-gray-300 text-right break-all hover:text-accent transition-colors">{{ run.scenario_set_version.scenario_set.name }} v{{ run.scenario_set_version.version }}</a></div>
      <div class="flex justify-between gap-2"><span class="text-gray-500 shrink-0">Content Hash</span><span class="text-gray-400 font-mono truncate max-w-[140px]">{{ run.scenario_set_version.content_hash|truncatechars:16 }}</span></div>
      <div class="flex justify-between gap-2"><span class="text-gray-500 shrink-0">Target</span>{% if run.target_endpoint %}<a href="/models/?highlight={{ run.target_endpoint.id }}" class="text-gray-300 text-right break-all hover:text-accent transition-colors">{{ run.target_endpoint.display_name }}</a>{% else %}<span class="text-gray-300">—</span>{% endif %}</div>
      <div class="flex justify-between gap-2"><span class="text-gray-500 shrink-0">Auditor</span>{% if run.auditor_endpoint %}<a href="/models/?highlight={{ run.auditor_endpoint.id }}" class="text-gray-300 text-right break-all hover:text-accent transition-colors">{{ run.auditor_endpoint.display_name }}</a>{% else %}<span class="text-gray-300">—</span>{% endif %}</div>
      <div class="flex justify-between gap-2"><span class="text-gray-500 shrink-0">Judge</span>{% if run.judge_endpoint %}<a href="/models/?highlight={{ run.judge_endpoint.id }}" class="text-gray-300 text-right break-all hover:text-accent transition-colors">{{ run.judge_endpoint.display_name }}</a>{% else %}<span class="text-gray-300">—</span>{% endif %}</div>
      <div class="flex justify-between gap-2"><span class="text-gray-500 shrink-0">Max Turns</span><span class="text-gray-300">{{ run.generation_parameters_snapshot.max_turns|default:"5 (default)" }}</span></div>
      <div class="flex justify-between gap-2"><span class="text-gray-500 shrink-0">Repetitions</span><span class="text-gray-300">{% if run.generation_parameters_snapshot.n_repetitions %}{{ run.generation_parameters_snapshot.n_repetitions }}×{% else %}1 (single){% endif %}</span></div>
      <div class="flex justify-between gap-2"><span class="text-gray-500 shrink-0">Language</span><span class="text-gray-300">{{ run.generation_parameters_snapshot.language|default:"English" }}</span></div>
      <div class="flex justify-between gap-2"><span class="text-gray-500 shrink-0">SimpleAudit Engine</span><span class="text-gray-300">{{ run.simpleaudit_version|default:"—" }}{% if run.git_commit %} <span class="text-gray-400 font-mono">({{ run.git_commit|truncatechars:8 }})</span>{% endif %}</span></div>
    </div>
  </div>
</div>

<!-- Results -->
<div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
  <div class="flex items-center justify-between mb-3">
    <h2 class="text-sm font-semibold text-gray-300">Results ({{ results|length }})</h2>
    {% if results %}
    <a href="{% url 'audit_export' run.id %}?format=json" class="px-2.5 py-1 rounded-lg bg-surface-overlay text-gray-400 text-xs font-medium hover:text-gray-200 transition-colors">Export</a>
    {% endif %}
  </div>
  {% if results %}
  <div class="space-y-2 max-h-96 overflow-y-auto">
    {% for r in results %}
    <div class="px-3 py-2.5 rounded-lg bg-surface-overlay/50 flex items-center justify-between group">
      <a href="{% url 'scenario_result_detail' run.id r.result_id %}" class="flex-1 min-w-0 group-hover:text-accent transition-colors">
        <span class="text-sm text-gray-200 block truncate">{{ r.scenario_name }}</span>
        {% if r.summary %}<p class="text-xs text-gray-500 mt-1 line-clamp-2">{{ r.summary }}</p>{% endif %}
      </a>
      <span class="ml-3 shrink-0 flex items-center gap-2">
        {% if r.agreement_rate is not None %}
        <span class="text-[10px] text-gray-500" title="Judge agreement across {{ r.n_reps }} repetitions">{{ r.agreement_rate|floatformat:0 }}% agree</span>
        {% endif %}
        {% if r.severity == "pass" or r.severity == "low" %}<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-semibold bg-emerald-900/50 text-emerald-300">{{ r.severity }}</span>
        {% elif r.severity == "medium" %}<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-900/50 text-amber-300">{{ r.severity }}</span>
        {% else %}<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-semibold bg-red-900/50 text-red-300">{{ r.severity }}</span>{% endif %}
      </span>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="text-sm text-gray-500 py-4 text-center">No results yet.</p>
  {% endif %}
</div>
{% endblock %}