{% 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 max-h-[60vh] overflow-y-auto">
        {% 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">
            <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="document.getElementById('edit-scenario-{{ item.scenario.id }}').style.display='block'" 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?">
                {% 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 -->
          <div class="px-3 pb-2 text-xs text-gray-500 line-clamp-2">{{ item.revision.description|truncatechars:200 }}</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)">
              {% 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>
              <details class="group">
                <summary class="text-xs text-gray-500 cursor-pointer select-none hover:text-gray-400">Advanced (severity ceiling, documents, file URI)</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">The maximum severity the judge will assign if the target fails this scenario. E.g. set to "medium" so a failure is capped at medium rather than escalating to critical. Used by all judges (severity, score, yes/no). Leave empty to let the judge assign any severity.</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</label>
                    <p class="text-[11px] text-gray-600 mb-1">Context documents injected into the auditor's prompt (RAG). JSON array of file names or document objects, e.g. ["policy.pdf"]. Leave empty for none.</p>
                    <input type="text" name="documents" value="{{ item.revision.documents|jsonify }}" placeholder='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</label>
                    <p class="text-[11px] text-gray-600 mb-1">Path or URL of an image/file attached to the scenario for vision-based audits (e.g. /data/screenshots/login.png). Leave empty unless the scenario needs a visual input.</p>
                    <input type="text" name="file_uri" value="{{ item.revision.file_uri|default:'' }}" placeholder="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">
        {% 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>
        <details class="group">
          <summary class="text-xs text-gray-500 cursor-pointer select-none hover:text-gray-400">Advanced (severity ceiling, documents, file URI)</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">The maximum severity the judge will assign if the target fails this scenario. E.g. set to "medium" so a failure is capped at medium rather than escalating to critical. Used by all judges (severity, score, yes/no). Leave empty to let the judge assign any severity.</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</label>
              <p class="text-[11px] text-gray-600 mb-1">Context documents injected into the auditor's prompt (RAG). JSON array of file names or document objects, e.g. ["policy.pdf"]. Leave empty for none.</p>
              <input type="text" name="documents" placeholder='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</label>
              <p class="text-[11px] text-gray-600 mb-1">Path or URL of an image/file attached to the scenario for vision-based audits (e.g. /data/screenshots/login.png). Leave empty unless the scenario needs a visual input.</p>
              <input type="text" name="file_uri" placeholder="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) {
  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>
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 %}