{% extends "base.html" %}
{% load static %}
{% 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>
      <span class="text-xs text-gray-500 ml-2">{{ s.versions.count }}v</span>
    </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' %}" 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 items-center justify-between mb-3">
        <div class="flex items-center gap-2">
          <h2 class="text-sm font-semibold text-gray-200">{{ selected.name }}</h2>
          {% if viewing_version %}<span class="text-xs text-gray-500">(v{{ viewing_version.version }})</span>{% endif %}
        </div>
        <div class="flex gap-2 items-center">
          <a href="{% url 'scenario_export' selected.id %}" class="px-2 py-1 rounded text-xs bg-surface-overlay text-gray-400 hover:text-gray-200">Export</a>
          <button onclick="document.getElementById('import-set-modal').style.display='block'" class="px-2 py-1 rounded text-xs bg-surface-overlay text-gray-400 hover:text-gray-200">Import</button>
          <button onclick="document.getElementById('edit-set-modal').style.display='block'" class="px-2 py-1 rounded text-xs bg-surface-overlay text-gray-400 hover:text-gray-200">Edit</button>
          <form method="post" action="{% url 'scenario_set_delete' selected.id %}" onsubmit="return 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" onclick="showRevertDiff({{ selected.id }}, {{ viewing_version.version }})" 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 onclick="showVersionDiff({{ selected.id }}, {{ prev_version }}, {{ 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">rev {{ item.revision.revision }}</span>
            </div>
            <div class="flex gap-1 shrink-0">
              <button onclick="document.getElementById('edit-scenario-{{ item.scenario.id }}').style.display='block'" class="text-xs text-gray-500 hover:text-accent">✎</button>
              <form method="post" action="{% url 'scenario_delete' item.scenario.id %}" onsubmit="return confirm('Delete scenario?')">
                {% csrf_token %}
                <input type="hidden" name="set_id" value="{{ selected.id }}">
                <button 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 }}">
              <input type="hidden" id="orig-desc-{{ item.scenario.id }}" value="{{ item.revision.description }}">
              <input type="hidden" id="orig-eb-{{ item.scenario.id }}" value="{% for b in item.revision.expected_behavior %}{{ b }}\n{% endfor %}">
              <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>
              <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' %}" 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>
        <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>

<!-- Edit set modal -->
{% if selected %}
<div id="edit-set-modal" style="display:none" 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 %}

<script src="{% static 'js/diff.min.js' %}"></script>
<script>
// Live version hint: shows "Will publish as vN" when description OR expected_behavior changes
const CURRENT_VERSION = {{ viewing_version.version|default:0 }};

function _contentChanged(id) {
  const descEl = document.getElementById('desc-' + id);
  const ebEl = document.getElementById('eb-' + id);
  const origDesc = document.getElementById('orig-desc-' + id);
  const origEb = document.getElementById('orig-eb-' + id);
  const descDiff = descEl && origDesc && descEl.value.trim() !== origDesc.value.trim();
  const ebDiff = ebEl && origEb && ebEl.value.trim() !== origEb.value.trim();
  return descDiff || ebDiff;
}

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;
}

// ─── Diff Rendering Helpers (jsdiff-based) ──────────────────────────────────
function escHtml(s) {
  const div = document.createElement('div');
  div.textContent = s || '';
  return div.innerHTML;
}

/** Render an inline word-level diff using jsdiff. Returns HTML string. */
function renderInlineDiff(oldText, newText) {
  if (!oldText && !newText) return '<span class="text-gray-600 italic">empty</span>';
  if (!oldText) return `<span class="bg-green-900/40 text-green-300 rounded px-0.5">${escHtml(newText)}</span>`;
  if (!newText) return `<span class="bg-red-900/40 text-red-300 rounded px-0.5 line-through">${escHtml(oldText)}</span>`;
  const parts = Diff.diffWords(oldText, newText);
  let html = '';
  parts.forEach(part => {
    if (part.added) {
      html += `<span class="bg-green-900/50 text-green-300 rounded-sm px-0.5">${escHtml(part.value)}</span>`;
    } else if (part.removed) {
      html += `<span class="bg-red-900/50 text-red-300 rounded-sm px-0.5 line-through">${escHtml(part.value)}</span>`;
    } else {
      html += escHtml(part.value);
    }
  });
  return html;
}

/** Render a list of EB criteria as a diff (line-by-line). */
function renderEbdiff(oldList, newList) {
  const oldStr = (oldList || []).join('\n');
  const newStr = (newList || []).join('\n');
  if (oldStr === newStr) return null;
  return renderInlineDiff(oldStr, newStr);
}

/** Build the full diff modal body from a diff API response. */
function buildDiffBody(d, opts) {
  // opts: { labelFrom, labelTo, footer }
  let html = '';
  const totalChanges = d.added.length + d.removed.length + d.changed.length;

  if (totalChanges === 0) {
    html += `<p class="text-green-400 text-sm mb-3">✓ No differences between ${opts.labelFrom} and ${opts.labelTo}.</p>`;
  } else {
    html += `<div class="flex gap-2 text-xs mb-4 flex-wrap">`;
    html += `<span class="px-2 py-0.5 rounded bg-green-900/40 text-green-400 font-medium">+${d.added.length} added</span>`;
    html += `<span class="px-2 py-0.5 rounded bg-red-900/40 text-red-400 font-medium">−${d.removed.length} removed</span>`;
    html += `<span class="px-2 py-0.5 rounded bg-yellow-900/40 text-yellow-400 font-medium">~${d.changed.length} changed</span>`;
    html += `<span class="px-2 py-0.5 rounded bg-gray-800 text-gray-500">${d.unchanged_count} unchanged</span>`;
    html += `</div>`;
  }

  // Added
  if (d.added.length) {
    html += `<div class="mb-4"><h4 class="text-xs font-semibold text-green-400 uppercase tracking-wide mb-2">Added</h4>`;
    d.added.forEach(s => {
      html += `<div class="ml-2 pl-3 border-l-2 border-green-800 pb-2 mb-2">`;
      html += `<p class="text-sm text-green-300 font-medium">+ ${escHtml(s.title)}</p>`;
      html += `<p class="text-xs text-gray-400 mt-1 whitespace-pre-wrap">${escHtml(s.description)}</p>`;
      if (s.expected_behavior && s.expected_behavior.length) {
        html += `<p class="text-xs text-gray-500 mt-1"><span class="text-gray-600">Criteria:</span> ${s.expected_behavior.map(escHtml).join('; ')}</p>`;
      }
      html += `</div>`;
    });
    html += `</div>`;
  }

  // Removed
  if (d.removed.length) {
    html += `<div class="mb-4"><h4 class="text-xs font-semibold text-red-400 uppercase tracking-wide mb-2">Removed</h4>`;
    d.removed.forEach(s => {
      html += `<div class="ml-2 pl-3 border-l-2 border-red-800 pb-2 mb-2">`;
      html += `<p class="text-sm text-red-300 font-medium">− ${escHtml(s.title)}</p>`;
      html += `<p class="text-xs text-gray-400 mt-1 whitespace-pre-wrap line-through decoration-red-900">${escHtml(s.description)}</p>`;
      html += `</div>`;
    });
    html += `</div>`;
  }

  // Changed
  if (d.changed.length) {
    html += `<div class="mb-4"><h4 class="text-xs font-semibold text-yellow-400 uppercase tracking-wide mb-2">Modified</h4>`;
    d.changed.forEach(s => {
      html += `<div class="ml-2 pl-3 border-l-2 border-yellow-800 pb-3 mb-3">`;
      html += `<p class="text-sm text-yellow-300 font-medium mb-1">~ ${escHtml(s.title)}</p>`;
      // Description inline diff
      const descKeyFrom = opts.descKeyFrom || 'from_desc';
      const descKeyTo = opts.descKeyTo || 'to_desc';
      if (s[descKeyFrom] !== s[descKeyTo]) {
        html += `<div class="text-xs text-gray-300 bg-gray-900/50 rounded p-2 mt-1 whitespace-pre-wrap leading-relaxed">`;
        html += renderInlineDiff(s[descKeyFrom], s[descKeyTo]);
        html += `</div>`;
      }
      // EB inline diff
      const ebKeyFrom = opts.ebKeyFrom || 'from_eb';
      const ebKeyTo = opts.ebKeyTo || 'to_eb';
      const ebDiff = renderEbdiff(s[ebKeyFrom], s[ebKeyTo]);
      if (ebDiff) {
        html += `<div class="text-xs text-gray-300 bg-gray-900/50 rounded p-2 mt-1 whitespace-pre-wrap leading-relaxed">`;
        html += `<span class="text-gray-500 font-medium block mb-0.5">Judge criteria:</span>`;
        html += ebDiff;
        html += `</div>`;
      }
      html += `</div>`;
    });
    html += `</div>`;
  }

  if (opts.footer) html += `<p class="text-xs text-gray-500 mt-4 border-t border-gray-800 pt-3">${opts.footer}</p>`;
  return html;
}

// ─── Compare & Revert (latest vs target) ────────────────────────────────────
async function showRevertDiff(setId, targetVer) {
  const overlay = document.getElementById('revert-diff-overlay');
  const body = document.getElementById('revert-diff-body');
  overlay.classList.remove('hidden');
  body.innerHTML = '<div class="text-gray-400 text-sm py-8 text-center">Loading diff…</div>';

  try {
    const resp = await fetch(`/scenarios/revert/${setId}/?target_version=${targetVer}`);
    const d = await resp.json();
    if (d.error) { body.innerHTML = `<p class="text-red-400">${d.error}</p>`; return; }

    body.innerHTML = buildDiffBody(d, {
      labelFrom: `v${d.latest_version} (current)`,
      labelTo: `v${d.target_version} (target)`,
      descKeyFrom: 'latest_desc', descKeyTo: 'target_desc',
      ebKeyFrom: 'latest_eb', ebKeyTo: 'target_eb',
      footer: `Confirming will publish v${d.target_version}'s content as a new version (v${d.latest_version + 1}). Historical versions are not modified.`
    });
  } catch (e) {
    body.innerHTML = `<p class="text-red-400 text-sm">Failed to load diff: ${escHtml(e.message)}</p>`;
  }
}

function closeRevertDiff() {
  document.getElementById('revert-diff-overlay').classList.add('hidden');
}

function confirmRevert() {
  closeRevertDiff();
  document.getElementById('revert-form').submit();
}

// ─── Version-to-Version Diff (read-only) ────────────────────────────────────
async function showVersionDiff(setId, fromVer, toVer) {
  const overlay = document.getElementById('version-diff-overlay');
  const body = document.getElementById('version-diff-body');
  const title = document.getElementById('version-diff-title');
  overlay.classList.remove('hidden');
  title.textContent = `v${fromVer} → v${toVer}`;
  body.innerHTML = '<div class="text-gray-400 text-sm py-8 text-center">Loading diff…</div>';

  try {
    const resp = await fetch(`/scenarios/diff/${setId}/?from=${fromVer}&to=${toVer}`);
    const d = await resp.json();
    if (d.error) { body.innerHTML = `<p class="text-red-400">${d.error}</p>`; return; }

    body.innerHTML = buildDiffBody(d, {
      labelFrom: `v${d.from_version}`,
      labelTo: `v${d.to_version}`,
      descKeyFrom: 'from_desc', descKeyTo: 'to_desc',
      ebKeyFrom: 'from_eb', ebKeyTo: 'to_eb',
    });
  } catch (e) {
    body.innerHTML = `<p class="text-red-400 text-sm">Failed to load diff: ${escHtml(e.message)}</p>`;
  }
}

function closeVersionDiff() {
  document.getElementById('version-diff-overlay').classList.add('hidden');
}

// ─── 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>

<!-- Compare & Revert Modal -->
<div id="revert-diff-overlay" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm" onclick="if(event.target===this)closeRevertDiff()">
  <div class="bg-surface border border-gray-700 rounded-xl shadow-2xl w-full max-w-3xl max-h-[85vh] flex flex-col mx-4">
    <div class="flex items-center justify-between px-5 py-3 border-b border-gray-800">
      <h3 class="text-sm font-semibold text-gray-200">Compare & Revert</h3>
      <button onclick="closeRevertDiff()" class="text-gray-500 hover:text-gray-300 text-lg leading-none" aria-label="Close">&times;</button>
    </div>
    <div id="revert-diff-body" class="flex-1 overflow-y-auto px-5 py-4"></div>
    <div class="flex justify-end gap-2 px-5 py-3 border-t border-gray-800">
      <button onclick="closeRevertDiff()" class="px-4 py-1.5 rounded text-xs bg-gray-800 text-gray-300 hover:bg-gray-700">Cancel</button>
      <button onclick="confirmRevert()" class="px-4 py-1.5 rounded text-xs bg-amber-700 text-white hover:bg-amber-600 font-medium">Confirm Revert</button>
    </div>
  </div>
</div>

<!-- Version Changes Modal (read-only) -->
<div id="version-diff-overlay" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm" onclick="if(event.target===this)closeVersionDiff()">
  <div class="bg-surface border border-gray-700 rounded-xl shadow-2xl w-full max-w-3xl max-h-[85vh] flex flex-col mx-4">
    <div class="flex items-center justify-between px-5 py-3 border-b border-gray-800">
      <h3 class="text-sm font-semibold text-gray-200">Version Changes — <span id="version-diff-title"></span></h3>
      <button onclick="closeVersionDiff()" class="text-gray-500 hover:text-gray-300 text-lg leading-none" aria-label="Close">&times;</button>
    </div>
    <div id="version-diff-body" class="flex-1 overflow-y-auto px-5 py-4"></div>
    <div class="flex justify-end px-5 py-3 border-t border-gray-800">
      <button onclick="closeVersionDiff()" class="px-4 py-1.5 rounded text-xs bg-gray-800 text-gray-300 hover:bg-gray-700">Close</button>
    </div>
  </div>
</div>

<!-- Import Set Modal -->
{% if selected %}
<div id="import-set-modal" style="display:none" 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);

    // Get CSRF token from cookie or meta tag
    let csrfToken = '';
    const csrfInput = document.querySelector('[name=csrfmiddlewaretoken]');
    if (csrfInput) {
      csrfToken = csrfInput.value;
    } else {
      const cookies = document.cookie.split(';');
      for (const c of cookies) {
        const [name, val] = c.trim().split('=');
        if (name === 'csrftoken') { csrfToken = val; break; }
      }
    }

    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 %}
{% endblock %}