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

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <!-- Set list -->
  <div class="space-y-2">
    <!-- Set search -->
    <input type="text" id="set-search" placeholder="Filter sets…" oninput="filterSets(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-2">
    <div id="set-list">
    {% for s in sets %}
    <a href="?set={{ s.id }}"
       class="block px-4 py-3 rounded-xl border text-sm transition-colors {% if selected and selected.id == s.id %}bg-accent/15 border-accent/30 text-accent{% else %}bg-surface-raised border-gray-800 text-gray-300 hover:border-gray-600{% endif %}">
      <span class="font-medium">{{ s.name }}</span>
      {% if s.latest_version %}<span class="ml-2">{% include "partials/version_badge.html" with number=s.latest_version count=s.version_count %}</span>{% else %}<span class="ml-2 text-[11px] text-gray-500" title="No version published yet: add a scenario to publish v1">draft</span>{% endif %}
    </a>
    {% empty %}
    <p class="text-sm text-gray-500">No scenario sets yet.</p>
    {% endfor %}
    </div><!-- /set-list -->

    <!-- Create new set -->
    <form method="post" action="{% url 'scenario_set_create' %}" data-write class="pt-2 border-t border-gray-800 mt-3 space-y-2">
      {% csrf_token %}
      <div>
        <label class="block text-xs text-gray-500 mb-1">Set Name</label>
        <input type="text" name="name" placeholder="e.g. Medical Safety v2" required
               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">
      </div>
      <div>
        <label class="block text-xs text-gray-500 mb-1">Description</label>
        <input type="text" name="description" placeholder="Optional description"
               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">
      </div>
      <button class="px-3 py-1.5 rounded-lg bg-accent text-white text-xs font-medium hover:bg-accent-hover">+ New Set</button>
    </form>
  </div>

  <!-- Detail panel -->
  <div class="md:col-span-2">
    {% if selected %}
    <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
      <!-- Header: name + actions -->
      <div class="flex flex-wrap items-center justify-between gap-2 mb-3">
        <div class="flex items-center gap-2 min-w-0">
          <h2 class="text-sm font-semibold text-gray-200 truncate">{{ selected.name }}</h2>
          {% if viewing_version %}{% include "partials/version_badge.html" with number=viewing_version.version latest=viewing_is_latest count=versions|length %}{% endif %}
        </div>
        <div class="flex flex-wrap gap-2 items-center">
          <button onclick="openScenarioExport()" class="px-2 py-1 rounded text-xs bg-surface-overlay text-gray-400 hover:text-gray-200">Export</button>
          <button data-write onclick="openModal('import-set-modal')" class="px-2 py-1 rounded text-xs bg-surface-overlay text-gray-400 hover:text-gray-200">Import</button>
          <button data-write onclick="openModal('edit-set-modal')" class="px-2 py-1 rounded text-xs bg-surface-overlay text-gray-400 hover:text-gray-200">Edit</button>
          <form method="post" data-write action="{% url 'scenario_set_delete' selected.id %}" data-confirm="Delete this set and all its versions?">
            {% csrf_token %}
            <button class="px-2 py-1 rounded text-xs bg-red-900/30 text-red-400 hover:bg-red-900/50">Delete</button>
          </form>
        </div>
      </div>

      <!-- Version selector -->
      {% if versions %}
      <div class="flex items-center gap-2 mb-4 flex-wrap">
        <label class="text-xs text-gray-500">Version:</label>
        <select onchange="if(this.value) window.location='?set={{ selected.id }}&version='+this.value; else window.location='?set={{ selected.id }}'"
                class="px-2 py-1 rounded bg-surface-overlay border border-gray-700 text-xs text-gray-300">
          {% for v in versions %}
          <option value="{{ v.version }}" {% if viewing_version and viewing_version.version == v.version %}selected{% endif %}>
            v{{ v.version }} — {{ v.scenario_count }} scenarios — {{ v.published_at|date:"M j, H:i" }}
          </option>
          {% endfor %}
        </select>
        {% if viewing_version and viewing_version != versions.0 %}
        <form id="revert-form" method="post" action="{% url 'scenario_revert' selected.id %}">
          {% csrf_token %}
          <input type="hidden" name="target_version" value="{{ viewing_version.version }}">
          <button type="button" id="revert-open" title="See what reverting changes before confirming" class="px-2 py-1 rounded text-xs bg-amber-900/30 text-amber-400 hover:bg-amber-900/50">↩ Compare & Revert to v{{ viewing_version.version }}</button>
        </form>
        {% endif %}
        {% if viewing_version and viewing_version.version > 1 %}
        <button type="button" data-diff-open="{{ prev_version }}:{{ viewing_version.version }}" title="See what changed from v{{ prev_version }} to v{{ viewing_version.version }}" class="px-2 py-1 rounded text-xs bg-blue-900/30 text-blue-400 hover:bg-blue-900/50">Changes from v{{ prev_version }}</button>
        {% endif %}
      </div>
      {% endif %}

      <!-- Scenario search + category filter -->
      <div class="flex gap-2 mb-3">
        <input type="text" id="scenario-search" placeholder="Search scenarios…" oninput="filterScenarios(this.value)"
               class="flex-1 px-3 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-accent/50">
        <select id="category-filter" onchange="filterScenarios(document.getElementById('scenario-search').value)"
                class="px-2 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs text-gray-400">
          <option value="">All categories</option>
          {% for cat in categories %}
          <option value="{{ cat }}">{{ cat }}</option>
          {% endfor %}
        </select>
      </div>

      <!-- Scenario list -->
      <div id="scenario-list" class="space-y-2 mb-4">
        {% for item in items %}
        <div id="scenario-{{ item.scenario.id }}" class="rounded-lg border border-gray-800 bg-surface-overlay/50 overflow-hidden">
          <div class="flex items-center justify-between px-3 py-2 cursor-pointer select-none hover:bg-surface-overlay/80 transition-colors" onclick="toggleViewMode({{ item.scenario.id }})">
            <div class="min-w-0 flex-1">
              <span class="text-sm text-gray-200 truncate">{{ item.scenario.title }}</span>
              {% if item.scenario.category %}<span class="ml-2 text-xs text-gray-500">{{ item.scenario.category }}</span>{% endif %}
              <span class="ml-2 text-xs text-gray-600" title="Revision {{ item.revision.revision }} of this scenario: each edit to its description or expected behaviour adds a revision">rev {{ item.revision.revision }}</span>
            </div>
            <div class="flex gap-1 shrink-0">
              <button data-write onclick="openEditForm({{ item.scenario.id }}, event)" title="Edit scenario" aria-label="Edit scenario" class="text-xs text-gray-500 hover:text-accent">✎</button>
              <form method="post" data-write action="{% url 'scenario_delete' item.scenario.id %}" data-confirm="Delete this scenario?" onclick="event.stopPropagation()">
                {% csrf_token %}
                <input type="hidden" name="set_id" value="{{ selected.id }}">
                <button title="Delete scenario" aria-label="Delete scenario" class="text-xs text-gray-600 hover:text-red-400">✕</button>
              </form>
            </div>
          </div>
          <!-- Description preview (collapsed only; hidden when view mode is open) -->
          <div id="preview-{{ item.scenario.id }}" class="px-3 pb-2 text-xs text-gray-500 line-clamp-2 cursor-pointer hover:text-gray-400 transition-colors" onclick="toggleViewMode({{ item.scenario.id }})">{{ item.revision.description|truncatechars:200 }}</div>

          <!-- Read-only view mode (toggled by clicking the card header) -->
          <div id="view-scenario-{{ item.scenario.id }}" style="display:none" class="px-3 pb-3 pt-1 border-t border-gray-800 space-y-2">
            <div class="text-xs space-y-2">
              <div>
                <span class="text-gray-500 font-medium">Description</span>
                <p class="text-gray-300 mt-0.5 whitespace-pre-wrap">{{ item.revision.description }}</p>
              </div>
              {% if item.revision.expected_behavior %}
              <div>
                <span class="text-gray-500 font-medium">Expected behavior</span>
                <ul class="mt-0.5 space-y-0.5 list-disc list-inside">
                  {% for b in item.revision.expected_behavior %}
                  <li class="text-gray-300">{{ b }}</li>
                  {% endfor %}
                </ul>
              </div>
              {% endif %}
              {% if item.revision.test_prompt %}
              <div>
                <span class="text-gray-500 font-medium">Test prompt</span>
                <p class="text-gray-300 mt-0.5 whitespace-pre-wrap">{{ item.revision.test_prompt }}</p>
              </div>
              {% endif %}
              <details class="group">
                <summary class="text-gray-500 font-medium 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">
                  <div>
                    <span class="text-gray-500">Severity ceiling:</span>
                    {% if item.revision.severity_ceiling %}
                    <span class="ml-1 px-1.5 py-0.5 rounded bg-surface-raised text-gray-300 text-[11px]">{{ item.revision.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 item.revision.documents %}text-gray-300{% else %}text-gray-600{% endif %}">{% if item.revision.documents %}{{ item.revision.documents|jsonify }}{% 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 item.revision.file_uri %}text-gray-300{% else %}text-gray-600{% endif %}">{% if item.revision.file_uri %}{{ item.revision.file_uri }}{% else %}none{% endif %}</span>
                  </div>
                </div>
              </details>
              {% if item.revision.metadata.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=item.revision.metadata.agentic %}
                </div>
              </details>
              {% endif %}
            </div>
          </div>

          <!-- Inline edit form (hidden by default) -->
          <div id="edit-scenario-{{ item.scenario.id }}" style="display:none" class="px-3 pb-3 pt-2 border-t border-gray-800 space-y-2">
            <form method="post" action="{% url 'scenario_edit' item.scenario.id %}" class="space-y-2"
                  onsubmit="return confirmScenarioSave({{ item.scenario.id }}, this) && syncAgenticFields(this)">
              {% csrf_token %}
              <input type="hidden" name="set_id" value="{{ selected.id }}">
              <div class="grid grid-cols-2 gap-2">
                <input type="text" name="title" value="{{ item.scenario.title }}" required
                       class="px-2 py-1.5 rounded bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-1 focus:ring-accent/50">
                <input type="text" name="category" value="{{ item.scenario.category }}" placeholder="Category"
                       class="px-2 py-1.5 rounded bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-1 focus:ring-accent/50">
              </div>
              <label class="text-xs text-gray-500">Description (scenario prompt)</label>
              <textarea name="description" rows="3" id="desc-{{ item.scenario.id }}"
                        class="w-full px-2 py-1.5 rounded bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-1 focus:ring-accent/50">{{ item.revision.description }}</textarea>
              <label class="text-xs text-gray-500">Expected behavior (one per line — judge criteria)</label>
              <textarea name="expected_behavior" rows="2" id="eb-{{ item.scenario.id }}" placeholder="Should refuse…&#10;Should not reveal…"
                        class="w-full px-2 py-1.5 rounded bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-1 focus:ring-accent/50">{% for b in item.revision.expected_behavior %}{{ b }}
{% endfor %}</textarea>
              <label class="text-xs text-gray-500">Test prompt (optional)</label>
              <textarea name="test_prompt" rows="1" placeholder="Exact first user request for replay scenarios"
                        class="w-full px-2 py-1.5 rounded bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-1 focus:ring-accent/50">{{ item.revision.test_prompt }}</textarea>
              <label class="flex items-center gap-2 text-xs text-gray-500">
                <input type="checkbox" name="agentic_scenario" value="1" {% if item.revision.metadata.agentic %}checked{% endif %}>
                Agentic scenario
              </label>
              <div data-agentic-section{% if not item.revision.metadata.agentic %} style="display:none"{% endif %}>
                {% include "partials/agentic_controls.html" with agentic=item.revision.metadata.agentic %}
                <details class="group mt-1">
                  <summary class="text-xs text-gray-500 cursor-pointer select-none hover:text-gray-400">Agentic metadata preview (read-only)</summary>
                  <div class="space-y-1 mt-2 pl-3 border-l border-gray-800">
                    <p class="text-[11px] text-gray-600">Live, read-only view of exactly what will be saved. Edit the structured fields above — this updates in real time. You can't type directly here; unknown fields are still preserved on save and export.</p>
                    <textarea name="metadata" rows="8" spellcheck="false" readonly aria-readonly="true" class="w-full px-2 py-1.5 rounded bg-surface-overlay border border-gray-800 text-xs font-mono text-gray-400 cursor-default resize-y select-text">{{ item.revision.metadata|jsonify }}</textarea>
                  </div>
                </details>
              </div>
              <details class="group">
                <summary class="text-xs text-gray-500 cursor-pointer select-none hover:text-gray-400">Advanced options (usually leave empty)</summary>
                <div class="space-y-2 mt-2 pl-3 border-l border-gray-800">
                  <div>
                    <label class="text-xs text-gray-500">Severity ceiling</label>
                    <p class="text-[11px] text-gray-600 mb-1">Caps the max severity the judge can assign when the target fails. Use when you know a scenario's worst case (e.g. set "medium" so it never escalates to critical even if the judge thinks it should). Passed to the engine as the scenario's <code class="text-gray-400">severity</code> field. Most scenarios don't need this — leave empty to let the judge decide freely.</p>
                    <select name="severity_ceiling" class="w-full px-2 py-1.5 rounded bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-1 focus:ring-accent/50">
                      <option value="" {% if not item.revision.severity_ceiling %}selected{% endif %}>— No ceiling (judge decides) —</option>
                      <option value="pass" {% if item.revision.severity_ceiling == "pass" %}selected{% endif %}>pass</option>
                      <option value="low" {% if item.revision.severity_ceiling == "low" %}selected{% endif %}>low</option>
                      <option value="medium" {% if item.revision.severity_ceiling == "medium" %}selected{% endif %}>medium</option>
                      <option value="high" {% if item.revision.severity_ceiling == "high" %}selected{% endif %}>high</option>
                      <option value="critical" {% if item.revision.severity_ceiling == "critical" %}selected{% endif %}>critical</option>
                    </select>
                  </div>
                  <div>
                    <label class="text-xs text-gray-500">Documents (RAG context)</label>
                    <p class="text-[11px] text-gray-600 mb-1">Extra context documents injected into the auditor's prompt so the judge has reference material (e.g. a policy PDF the agent should follow). Only needed when your scenario tests compliance against a specific document. JSON array: <code class="text-gray-400">["policy.pdf", "terms.txt"]</code>. Most scenarios leave this empty.</p>
                    <input type="text" name="documents" value="{{ item.revision.documents|jsonify }}" placeholder='Usually empty. e.g. ["policy.pdf"]'
                           class="w-full px-2 py-1.5 rounded bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-1 focus:ring-accent/50">
                  </div>
                  <div>
                    <label class="text-xs text-gray-500">File URI (vision input)</label>
                    <p class="text-[11px] text-gray-600 mb-1">Path or URL of an image/screenshot the agent must analyze. Only needed for vision-based scenarios (e.g. "does the UI show a warning?"). The file is passed to the model as a multimodal input. Most scenarios leave this empty.</p>
                    <input type="text" name="file_uri" value="{{ item.revision.file_uri|default:'' }}" placeholder="Usually empty. e.g. /data/screenshots/login.png"
                           class="w-full px-2 py-1.5 rounded bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-1 focus:ring-accent/50">
                  </div>
                </div>
              </details>
              <div class="flex gap-2 items-center">
                <button class="px-3 py-1 rounded bg-accent text-white text-xs">Save</button>
                <button type="button" onclick="document.getElementById('edit-scenario-{{ item.scenario.id }}').style.display='none'" class="px-3 py-1 rounded bg-surface-overlay text-gray-400 text-xs">Cancel</button>
                <span id="version-hint-{{ item.scenario.id }}" class="text-xs text-amber-400 hidden"></span>
              </div>
            </form>
          </div>
        </div>
        {% empty %}
        <p class="text-sm text-gray-500 py-2">No scenarios in this version.</p>
        {% endfor %}
      </div>

      <!-- Add scenario form -->
      <form method="post" action="{% url 'scenario_create' %}" data-write class="space-y-2 pt-3 border-t border-gray-800" onsubmit="return validateFormJson(this) && syncAgenticFields(this)">
        {% csrf_token %}
        <input type="hidden" name="set_id" value="{{ selected.id }}">
        <div class="grid grid-cols-2 gap-2">
          <input type="text" name="name" placeholder="Scenario name" required
                 class="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">
          <input type="text" name="category" placeholder="Category (optional)"
                 class="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">
        </div>
        <label class="text-xs text-gray-500">Description (scenario prompt)</label>
        <textarea name="description" rows="2" placeholder="What should the auditor do?"
                  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"></textarea>
        <label class="text-xs text-gray-500">Expected behavior (one per line — judge criteria)</label>
        <textarea name="expected_behavior" rows="2" placeholder="Should refuse harmful requests…&#10;Should maintain boundaries…"
                  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"></textarea>
        <label class="text-xs text-gray-500">Test prompt (optional — exact first user request for replay scenarios)</label>
        <textarea name="test_prompt" rows="1" placeholder="The concrete first user request, if this is a replay-style scenario. Leave empty for auditor-generated probes."
                  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"></textarea>
        <label class="flex items-center gap-2 text-xs text-gray-500">
          <input type="checkbox" name="agentic_scenario" value="1">
          Agentic scenario
        </label>
        <div data-agentic-section style="display:none">
          {% include "partials/agentic_controls.html" with agentic=None %}
          <details class="group mt-1">
            <summary class="text-xs text-gray-500 cursor-pointer select-none hover:text-gray-400">Agentic metadata preview (read-only)</summary>
            <div class="space-y-1 mt-2 pl-3 border-l border-gray-800">
              <p class="text-[11px] text-gray-600">Live, read-only view of exactly what will be saved. Edit the structured fields above — this updates in real time. You can't type directly here; unknown fields are still preserved on save and export.</p>
              <textarea name="metadata" rows="8" spellcheck="false" readonly aria-readonly="true" class="w-full px-2 py-1.5 rounded bg-surface-overlay border border-gray-800 text-xs font-mono text-gray-400 cursor-default resize-y select-text"></textarea>
            </div>
          </details>
        </div>
        <details class="group">
          <summary class="text-xs text-gray-500 cursor-pointer select-none hover:text-gray-400">Advanced options (usually leave empty)</summary>
          <div class="space-y-2 mt-2 pl-3 border-l border-gray-800">
            <div>
              <label class="text-xs text-gray-500">Severity ceiling</label>
              <p class="text-[11px] text-gray-600 mb-1">Caps the max severity the judge can assign when the target fails. Use when you know a scenario's worst case (e.g. set "medium" so it never escalates to critical even if the judge thinks it should). Passed to the engine as the scenario's <code class="text-gray-400">severity</code> field. Most scenarios don't need this — leave empty to let the judge decide freely.</p>
              <select name="severity_ceiling" class="w-full px-2 py-1.5 rounded bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-1 focus:ring-accent/50">
                <option value="">— No ceiling (judge decides) —</option>
                <option value="pass">pass</option>
                <option value="low">low</option>
                <option value="medium">medium</option>
                <option value="high">high</option>
                <option value="critical">critical</option>
              </select>
            </div>
            <div>
              <label class="text-xs text-gray-500">Documents (RAG context)</label>
              <p class="text-[11px] text-gray-600 mb-1">Extra context documents injected into the auditor's prompt so the judge has reference material (e.g. a policy PDF the agent should follow). Only needed when your scenario tests compliance against a specific document. JSON array: <code class="text-gray-400">["policy.pdf", "terms.txt"]</code>. Most scenarios leave this empty.</p>
              <input type="text" name="documents" placeholder='Usually empty. e.g. ["policy.pdf"]'
                     class="w-full px-2 py-1.5 rounded bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-1 focus:ring-accent/50">
            </div>
            <div>
              <label class="text-xs text-gray-500">File URI (vision input)</label>
              <p class="text-[11px] text-gray-600 mb-1">Path or URL of an image/screenshot the agent must analyze. Only needed for vision-based scenarios (e.g. "does the UI show a warning?"). The file is passed to the model as a multimodal input. Most scenarios leave this empty.</p>
              <input type="text" name="file_uri" placeholder="Usually empty. e.g. /data/screenshots/login.png"
                     class="w-full px-2 py-1.5 rounded bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-1 focus:ring-accent/50">
            </div>
          </div>
        </details>
        <button class="px-3 py-1.5 rounded-lg bg-accent text-white text-xs font-medium hover:bg-accent-hover">+ Add Scenario</button>
      </form>
    </div>
    {% else %}
    <div class="bg-surface-raised rounded-xl border border-gray-800 p-8 text-center">
      <p class="text-sm text-gray-500">Select a scenario set to view its contents.</p>
    </div>
    {% endif %}
  </div>
</div>

<script>
// Centered modals: must open as flex (display:block breaks the centering).
function openModal(id) {
  const m = document.getElementById(id);
  if (!m) return;
  m.style.display = 'flex';
  const first = m.querySelector('input:not([type=hidden]), textarea, select');
  if (first) first.focus();
}
document.addEventListener('keydown', e => {
  if (e.key === 'Escape') document.querySelectorAll('[data-modal]').forEach(m => { m.style.display = 'none'; });
});
document.addEventListener('click', e => {
  if (e.target.matches && e.target.matches('[data-modal]')) e.target.style.display = 'none';
});
</script>

<!-- Edit set modal -->
{% if selected %}
<div id="edit-set-modal" style="display:none" data-modal role="dialog" aria-modal="true" aria-label="Edit scenario set" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
  <div class="bg-surface-raised rounded-xl border border-gray-700 p-5 w-96 max-w-full mx-4">
    <h3 class="text-sm font-semibold text-gray-200 mb-3">Edit Scenario Set</h3>
    <form method="post" action="{% url 'scenario_set_rename' selected.id %}" class="space-y-3">
      {% csrf_token %}
      <div>
        <label class="text-xs text-gray-500 block mb-1">Name</label>
        <input type="text" name="name" value="{{ selected.name }}" required
               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">
      </div>
      <div>
        <label class="text-xs text-gray-500 block mb-1">Description</label>
        <textarea name="description" rows="2" 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">{{ selected.description }}</textarea>
      </div>
      <div class="flex gap-2 justify-end">
        <button type="button" onclick="document.getElementById('edit-set-modal').style.display='none'" class="px-3 py-1.5 rounded-lg bg-surface-overlay text-gray-400 text-xs">Cancel</button>
        <button class="px-3 py-1.5 rounded-lg bg-accent text-white text-xs font-medium">Save</button>
      </div>
    </form>
  </div>
</div>
{% endif %}

{% if selected and versions|length > 1 %}
{% include "partials/version_diff_modal.html" with id="set-diff" title="What changed" versions=versions %}
{% include "partials/version_diff_modal.html" with id="revert-diff" title="Compare & revert" confirm="Confirm revert" %}
{% endif %}

{% include "partials/version_diff_js.html" %}
<script>
// Live version hint: shows "Will publish as vN" when description OR expected_behavior changes
// Saving publishes after the latest version, whichever one is being viewed.
const CURRENT_VERSION = {{ versions.0.version|default:0 }};

// Scenario content changed (a new version will be published)? defaultValue is the saved text.
function _contentChanged(id) {
  return ['desc-', 'eb-'].some(prefix => {
    const el = document.getElementById(prefix + id);
    return el && el.value.trim() !== el.defaultValue.trim();
  });
}

document.querySelectorAll('textarea[id^="desc-"], textarea[id^="eb-"]').forEach(ta => {
  ta.addEventListener('input', function() {
    const id = this.id.replace(/^(desc|eb)-/, '');
    const hint = document.getElementById('version-hint-' + id);
    if (_contentChanged(id)) {
      hint.textContent = '⚡ Will publish as v' + (CURRENT_VERSION + 1);
      hint.classList.remove('hidden');
    } else {
      hint.classList.add('hidden');
    }
  });
});

// Confirm before saving if content changed
function confirmScenarioSave(scenarioId, form) {
  // Block save if any JSON field is invalid
  const jsonFields = form.querySelectorAll('textarea[name]');
  for (const ta of jsonFields) {
    if (!JSON_FIELDS.includes(ta.name)) continue;
    if (!validateJsonField(ta)) {
      alert('Please fix the invalid JSON in "' + ta.previousElementSibling?.textContent?.trim() + '" before saving.');
      ta.focus();
      return false;
    }
  }
  if (_contentChanged(scenarioId)) {
    return confirm('Content changed — this will save as a NEW VERSION (v' + (CURRENT_VERSION + 1) + ').\n\nContinue?');
  }
  return true;
}

// ─── What changed / Compare & revert (shared VersionDiff) ───────────────────
{% if selected and versions|length > 1 %}
/** A scenario set diff (scenarios/services.version_diff) as HTML. */
function setDiffHtml(d) {
  if (d.from_version === d.to_version) return '<p class="text-gray-400">Pick two different versions.</p>';
  let html = VersionDiff.counts({ added: d.added.length, removed: d.removed.length, changed: d.changed.length, unchanged: d.unchanged_count });
  if (!d.added.length && !d.removed.length && !d.changed.length) {
    return html + `<p class="text-green-400">✓ No differences between v${d.from_version} and v${d.to_version}.</p>`;
  }
  const section = (title, cls, items, body) => items.length
    ? `<h4 class="font-semibold uppercase tracking-wide mb-2 ${cls}">${title}</h4>` + items.map(body).join('') : '';
  const scenario = (s, sign, border, extra = '') =>
    `<div class="ml-2 pl-3 border-l-2 ${border} pb-2 mb-3"><p class="text-sm font-medium">${sign} ${esc(s.title)} <span class="text-xs font-normal text-gray-500">${extra}</span></p>`;
  html += section('Added', 'text-green-400', d.added, s => scenario(s, '+', 'border-green-800', `rev ${s.revision}`) +
    VersionDiff.fields([{ label: 'Description', from: '', to: s.description }, { label: 'Expected behaviour', from: [], to: s.expected_behavior }], { unchanged: false }) + '</div>');
  html += section('Removed', 'text-red-400', d.removed, s => scenario(s, '−', 'border-red-800', `rev ${s.revision}`) +
    `<p class="text-gray-500 line-through whitespace-pre-wrap">${esc(s.description)}</p></div>`);
  html += section('Changed', 'text-yellow-400', d.changed, s => scenario(s, '~', 'border-yellow-800', `rev ${s.from.revision} → rev ${s.to.revision}`) +
    VersionDiff.fields([
      { label: 'Description', from: s.from.description, to: s.to.description },
      { label: 'Expected behaviour', from: s.from.expected_behavior, to: s.to.expected_behavior },
    ], { unchanged: false }) + '</div>');
  return html;
}

async function loadSetDiff(api, url, footer) {
  api.loading();
  try {
    const resp = await fetch(url);
    const d = await resp.json();
    if (d.error) return api.error(d.error);
    api.body.innerHTML = setDiffHtml(d) + (footer ? `<p class="mt-4 pt-3 border-t border-gray-800 text-gray-500">${footer(d)}</p>` : '');
  } catch (e) { api.error(`Failed to load the diff: ${e.message}`); }
}

const setDiff = VersionDiff.modal('set-diff', api =>
  loadSetDiff(api, `{% url 'scenario_diff' selected.id %}?from=${api.from.value}&to=${api.to.value}`));
document.querySelectorAll('[data-diff-open]').forEach(btn =>
  btn.addEventListener('click', () => setDiff.open(...btn.dataset.diffOpen.split(':'))));

{% if viewing_version and viewing_version != versions.0 %}
const revertDiff = VersionDiff.modal('revert-diff', api =>
  loadSetDiff(api, `{% url 'scenario_revert' selected.id %}?target_version={{ viewing_version.version }}`,
    d => `Confirming publishes v${d.to_version}'s scenarios as a new version, v${d.from_version + 1}. Older versions are not changed.`));
document.getElementById('revert-open').addEventListener('click', () => revertDiff.open());
revertDiff.root.querySelector('[data-diff-confirm]').addEventListener('click', () => document.getElementById('revert-form').submit());
{% endif %}
{% endif %}

// ─── Set list search filter ─────────────────────────────────────────────────
function filterSets(query) {
  const q = query.toLowerCase();
  document.querySelectorAll('#set-list a').forEach(el => {
    el.style.display = el.textContent.toLowerCase().includes(q) ? '' : 'none';
  });
}

// ─── Scenario card search + category filter ─────────────────────────────────
function filterScenarios(query) {
  const q = (query || '').toLowerCase();
  const catFilter = document.getElementById('category-filter');
  const cat = catFilter ? catFilter.value : '';
  document.querySelectorAll('#scenario-list > div[id^="scenario-"]').forEach(card => {
    const titleEl = card.querySelector('.text-sm');
    const catEl = card.querySelector('.ml-2.text-xs');
    const text = (titleEl ? titleEl.textContent : '') + ' ' + (catEl ? catEl.textContent : '');
    const matchesText = !q || text.toLowerCase().includes(q);
    const matchesCat = !cat || (catEl && catEl.textContent.trim() === cat);
    card.style.display = (matchesText && matchesCat) ? '' : 'none';
  });
}
</script>

<!-- Import Set Modal -->
{% if selected %}
<div id="import-set-modal" style="display:none" data-modal role="dialog" aria-modal="true" aria-label="Import scenarios" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
  <div class="bg-surface-raised rounded-xl border border-gray-700 p-5 w-96 max-w-full mx-4">
    <h3 class="text-sm font-semibold text-gray-200 mb-3">Import Scenarios</h3>
    <p class="text-xs text-gray-500 mb-3">Upload a JSON file exported from another set. Scenarios will be added and published as a new version.</p>
    <div class="space-y-3">
      <div>
        <label class="text-xs text-gray-500 block mb-1">JSON file</label>
        <input type="file" id="import-file-input" accept=".json"
               class="w-full text-xs text-gray-400 file:mr-3 file:px-3 file:py-1.5 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-accent file:text-white hover:file:bg-accent-hover file:cursor-pointer">
      </div>
      <div id="import-feedback" class="hidden text-xs px-3 py-2 rounded-lg"></div>
    </div>
    <div class="flex gap-2 justify-end mt-4">
      <button type="button" onclick="document.getElementById('import-set-modal').style.display='none'" class="px-3 py-1.5 rounded-lg bg-surface-overlay text-gray-400 text-xs">Cancel</button>
      <button onclick="submitImport({{ selected.id }})" class="px-3 py-1.5 rounded-lg bg-accent text-white text-xs font-medium hover:bg-accent-hover">Import</button>
    </div>
  </div>
</div>
<script>
// Auto-size textareas to fit their content (avoids cropping long descriptions).
function autoSizeTextarea(el) {
  el.style.height = 'auto';
  // Use the greater of content height and placeholder height so the
  // placeholder is always fully visible even when the field is empty.
  let h = el.scrollHeight;
  if (!el.value && el.placeholder) {
    const prev = el.value;
    el.value = el.placeholder;
    h = Math.max(h, el.scrollHeight);
    el.value = prev;
  }
  el.style.height = h + 2 + 'px';
}
function autoSizeAllTextareas(container) {
  container.querySelectorAll('textarea').forEach(autoSizeTextarea);
}
function openEditForm(id, ev) {
  if (ev) ev.stopPropagation(); // don't trigger view mode toggle
  const form = document.getElementById('edit-scenario-' + id);
  // Close view mode if open
  const view = document.getElementById('view-scenario-' + id);
  if (view) view.style.display = 'none';
  document.getElementById('preview-' + id).style.display = '';
  form.style.display = 'block';
  autoSizeAllTextareas(form);
}
function toggleViewMode(id) {
  const view = document.getElementById('view-scenario-' + id);
  const preview = document.getElementById('preview-' + id);
  const editForm = document.getElementById('edit-scenario-' + id);
  const willShow = view.style.display === 'none';
  view.style.display = willShow ? 'block' : 'none';
  preview.style.display = willShow ? 'none' : '';
  if (willShow && editForm) editForm.style.display = 'none'; // close edit if open
}

// Show/hide the agentic structured controls + read-only preview based on the checkbox.
// The backend already strips agentic metadata on save when the box is off, so
// hiding these fields keeps the UI consistent with what actually gets stored.
function toggleAgenticSection(form) {
  const toggle = form.querySelector('[name="agentic_scenario"]');
  const section = form.querySelector('[data-agentic-section]');
  if (section) {
    const show = toggle && toggle.checked;
    section.style.display = show ? '' : 'none';
    if (show) requestAnimationFrame(() => autoSizeAllTextareas(section));
  }
}

// Merge the structured controls into the raw metadata object. Pure: returns a
// new metadata dict, preserving every field the form doesn't model. Throws when
// a structured JSON field is invalid so callers can surface it.
function buildAgenticMetadata(form, baseMetadata) {
  const metadata = baseMetadata && typeof baseMetadata === 'object' ? baseMetadata : {};
  const agentic = metadata.agentic && typeof metadata.agentic === 'object' ? metadata.agentic : {schema_version: 2};
  const csv = (name) => (form.querySelector(`[name="${name}"]`)?.value || '').split(',').map(v => v.trim()).filter(Boolean);
  const number = (name) => {
    const value = form.querySelector(`[name="${name}"]`)?.value.trim();
    return value === undefined || value === '' ? null : Number(value);
  };
  const json = (name) => {
    const value = form.querySelector(`[name="${name}"]`)?.value.trim();
    if (value === undefined || value === '') return [];
    try { return JSON.parse(value); } catch (_) { throw new Error(`${name} must be valid JSON.`); }
  };
  const bool = (name) => form.querySelector(`[name="${name}"][type="checkbox"]`)?.checked || false;
  const set = (section, key, value) => { agentic[section] = {...(agentic[section] || {}), [key]: value}; };
  // The expected-tools field holds plain names; wrap each in the rich spec the
  // engine checks against ({name, min_calls, max_calls}). Per-tool call bounds
  // and argument matching are authored via the read-only JSON preview / import.
  set('tools', 'expected', csv('agentic_tools_expected').map((name) => ({ name, min_calls: 1, max_calls: null })));
  set('tools', 'forbidden', csv('agentic_tools_forbidden'));
  set('retrieval', 'sources', csv('agentic_sources'));
  set('retrieval', 'required', csv('agentic_sources').length > 0);
  set('retrieval', 'min_documents', number('agentic_retrieval_min_documents'));
  set('retrieval', 'max_documents', number('agentic_retrieval_max_documents'));
  set('trajectory', 'required_sequence', csv('agentic_sequence'));
  set('trajectory', 'max_steps', number('agentic_trajectory_max_steps'));
  set('trajectory', 'max_retries_per_tool', number('agentic_trajectory_max_retries_per_tool'));
  set('trajectory', 'max_identical_consecutive_calls', number('agentic_trajectory_max_identical_consecutive_calls'));
  set('budgets', 'max_tool_calls', number('agentic_max_tool_calls'));
  set('budgets', 'max_errors', number('agentic_budgets_max_errors'));
  set('rerank', 'required', bool('agentic_rerank_required'));
  set('rerank', 'min_calls', number('agentic_rerank_min_calls'));
  set('rerank', 'max_calls', number('agentic_rerank_max_calls'));
  set('policy', 'read_only', bool('agentic_policy_read_only'));
  set('policy', 'allowed_data_scopes', csv('agentic_policy_allowed_data_scopes'));
  set('policy', 'forbidden_data_scopes', csv('agentic_policy_forbidden_data_scopes'));
  set('policy', 'forbidden_side_effects', csv('agentic_policy_forbidden_side_effects'));
  set('policy', 'allowed_destinations', csv('agentic_policy_allowed_destinations'));
  set('policy', 'allow_side_effects', bool('agentic_policy_allow_side_effects'));
  set('guardrails', 'required', csv('agentic_guardrails_required'));
  set('guardrails', 'must_pass', csv('agentic_guardrails_must_pass'));
  set('guardrails', 'before_actions', json('agentic_guardrails_before_actions'));
  set('approvals', 'required_for', csv('agentic_approvals_required_for'));
  set('approvals', 'must_precede_execution', bool('agentic_approvals_must_precede_execution'));
  set('handoffs', 'allowed', csv('agentic_handoffs_allowed'));
  set('handoffs', 'forbidden', csv('agentic_handoffs_forbidden'));
  set('handoffs', 'required', csv('agentic_handoffs_required'));
  set('handoffs', 'max_handoffs', number('agentic_handoffs_max_handoffs'));
  set('handoffs', 'max_depth', number('agentic_handoffs_max_depth'));
  set('state', 'assertions', json('agentic_state_assertions'));
  const mode = form.querySelector('[name="agentic_enforcement_mode"]')?.value;
  if (mode) set('enforcement', 'mode', mode);
  metadata.agentic = agentic;
  return metadata;
}

// On-submit hook: the raw box is a read-only preview, so there is nothing to
// validate or re-parse here — just make sure the preview matches the form one
// last time. The server merges from the previous revision, preserving unknown
// fields. Always returns true (never blocks submission).
function syncAgenticFields(form) {
  _refreshAgenticJsonLive(form);
  return true;
}

// Realtime: as the user edits any structured control, rebuild the read-only
// preview so it always mirrors what will be saved. Unknown fields are carried
// over from whatever is already shown, so toggling fields never loses them.
// Never throws — an in-progress structured JSON field is skipped for that
// keystroke and rebuilt on the next one.
function _refreshAgenticJsonLive(form) {
  const toggle = form.querySelector('[name="agentic_scenario"]');
  const metadataField = form.querySelector('[name="metadata"]');
  if (!metadataField) return;
  if (!toggle || !toggle.checked) return;   // leave the preview untouched while agentic is off
  let base = {};
  try { base = metadataField.value.trim() ? JSON.parse(metadataField.value) : {}; }
  catch (_) { return; }
  try { metadataField.value = JSON.stringify(buildAgenticMetadata(form, base), null, 2); }
  catch (_) { /* an in-progress structured JSON field isn't valid yet — retry next keystroke */ }
}
// Wire up per-form behavior for every scenario form (inline edit + add):
// show/hide the agentic section with the checkbox, and keep the read-only
// preview in sync as the structured controls change.
document.querySelectorAll('form[data-write], form[action*="/scenarios/"]').forEach((form) => {
  const controls = form.querySelector('[data-agentic-controls]');
  if (controls) controls.addEventListener('input', () => _refreshAgenticJsonLive(form));
  const toggle = form.querySelector('[name="agentic_scenario"]');
  if (toggle) toggle.addEventListener('change', () => { toggleAgenticSection(form); _refreshAgenticJsonLive(form); });
  // Auto-grow textareas as the user types (description, expected behavior, etc.)
  form.querySelectorAll('textarea').forEach((ta) => ta.addEventListener('input', () => autoSizeTextarea(ta)));
});
// Initial sizing pass: size any textareas that are already visible on page load.
requestAnimationFrame(() => {
  document.querySelectorAll('textarea').forEach((ta) => {
    if (ta.offsetParent !== null) autoSizeTextarea(ta);
  });
});

// Live JSON validation for textareas that require valid JSON.
// Shows a red border + error message below the field when invalid.
const JSON_FIELDS = ['agentic_guardrails_before_actions', 'agentic_state_assertions'];
function validateFormJson(form) {
  let firstInvalid = null;
  const jsonFields = form.querySelectorAll('textarea[name]');
  for (const ta of jsonFields) {
    if (!JSON_FIELDS.includes(ta.name)) continue;
    if (!validateJsonField(ta) && !firstInvalid) firstInvalid = ta;
  }
  if (firstInvalid) {
    alert('Please fix the invalid JSON before saving.');
    firstInvalid.focus();
    return false;
  }
  return true;
}
function validateJsonField(ta) {
  const value = ta.value.trim();
  const errorEl = ta.parentElement.querySelector('.json-error');
  if (!value) {
    // Empty means "none" — valid
    ta.classList.remove('border-red-500');
    ta.classList.add('border-gray-700');
    if (errorEl) errorEl.textContent = '';
    return true;
  }
  try {
    const parsed = JSON.parse(value);
    if (!Array.isArray(parsed)) {
      throw new Error('Must be a JSON array, e.g. [] or [{...}]');
    }
    ta.classList.remove('border-red-500');
    ta.classList.add('border-gray-700');
    if (errorEl) errorEl.textContent = '';
    return true;
  } catch (e) {
    ta.classList.remove('border-gray-700');
    ta.classList.add('border-red-500');
    if (errorEl) errorEl.textContent = 'Invalid JSON: ' + e.message;
    return false;
  }
}
// Wire up JSON validation + add error message elements
document.querySelectorAll('textarea[name]').forEach((ta) => {
  if (!JSON_FIELDS.includes(ta.name)) return;
  // Add an error message element after the textarea
  let errorEl = ta.parentElement.querySelector('.json-error');
  if (!errorEl) {
    errorEl = document.createElement('p');
    errorEl.className = 'json-error text-[11px] text-red-400 mt-0.5 min-h-[1em]';
    ta.parentElement.appendChild(errorEl);
  }
  ta.addEventListener('input', () => validateJsonField(ta));
});

async function submitImport(setId) {
  const fileInput = document.getElementById('import-file-input');
  const feedback = document.getElementById('import-feedback');
  feedback.classList.add('hidden');

  if (!fileInput.files || !fileInput.files[0]) {
    feedback.textContent = 'Please select a JSON file.';
    feedback.className = 'text-xs px-3 py-2 rounded-lg bg-red-900/30 border border-red-800 text-red-300';
    feedback.classList.remove('hidden');
    return;
  }

  try {
    const text = await fileInput.files[0].text();
    const data = JSON.parse(text);

    const resp = await fetch(`/scenarios/${setId}/import/`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrfToken(),
      },
      body: JSON.stringify(data),
    });

    if (resp.redirected) {
      window.location.href = resp.url;
      return;
    }

    const result = await resp.json();
    if (result.error) {
      feedback.textContent = 'Import failed: ' + result.error;
      feedback.className = 'text-xs px-3 py-2 rounded-lg bg-red-900/30 border border-red-800 text-red-300';
    } else {
      feedback.textContent = 'Import successful! Redirecting…';
      feedback.className = 'text-xs px-3 py-2 rounded-lg bg-emerald-900/30 border border-emerald-800 text-emerald-300';
      setTimeout(() => { window.location.href = `/scenarios/?set=${setId}`; }, 1000);
    }
    feedback.classList.remove('hidden');
  } catch (e) {
    feedback.textContent = 'Error: ' + e.message;
    feedback.className = 'text-xs px-3 py-2 rounded-lg bg-red-900/30 border border-red-800 text-red-300';
    feedback.classList.remove('hidden');
  }
}
</script>
{% endif %}

{% if selected %}
{% include "partials/text_file_modal.html" %}
<script>
function openScenarioExport() {
  TextFileModal.open({
    url: '{% url "scenario_export" selected.id %}',
    filename: '{{ selected.name|slugify }}_scenarios.json',
    title: 'Export scenario set',
    description: 'The scenarios in this set as JSON — re-import it on another workspace with the Import button.',
  });
}
</script>
{% endif %}
{% endblock %}