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

{% if error %}
<div class="mb-4 text-sm text-red-300 bg-red-900/30 rounded-lg px-4 py-2">{{ error }}</div>
{% endif %}

<form method="post" class="space-y-4 max-w-4xl">
  {% csrf_token %}

  <div id="picker-sections">
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    <div class="flex items-center justify-between mb-3">
      <h3 class="text-sm font-semibold text-gray-300">Scenario Set</h3>
      <a href="{% url 'scenarios' %}" target="_blank" class="text-xs text-accent hover:text-accent-hover hover:underline">＋ New</a>
    </div>
    <label class="block text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">Select set</label>
    <select id="scenario-set-picker" name="scenario_set" 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">
      {% for s in sets %}
      <option value="{{ s.id }}" {% if clone and clone.scenario_set_id == s.id %}selected{% endif %}>{{ s.name }} (v{{ s.versions.count }})</option>
      {% empty %}
      <option value="">No scenario sets available</option>
      {% endfor %}
    </select>
    {% if not sets %}
    <p class="mt-2 text-xs text-gray-500">
      No sets yet? <a href="{% url 'scenarios' %}" target="_blank" class="text-accent hover:underline">Create a scenario set →</a>
    </p>
    {% endif %}
  </div>

  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    <div class="flex items-center justify-between mb-3">
      <h3 class="text-sm font-semibold text-gray-300">Models</h3>
      <a href="{% url 'models' %}" target="_blank" class="text-xs text-accent hover:text-accent-hover hover:underline">＋ New</a>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div>
        <label class="block text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">Target</label>
        <select name="target_endpoint" 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">
          {% for ep in endpoints %}          <option value="{{ ep.id }}" {% if clone and clone.target_endpoint_id == ep.id %}selected{% endif %}>{{ ep.display_name }}</option>{% empty %}<option value="">No models registered</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">Auditor</label>
        <select name="auditor_endpoint" 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">
          {% for ep in endpoints %}          <option value="{{ ep.id }}" {% if clone and clone.auditor_endpoint_id == ep.id %}selected{% endif %}>{{ ep.display_name }}</option>{% empty %}<option value="">No models registered</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">Judge</label>
        <select name="judge_endpoint" 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">
          {% for ep in endpoints %}          <option value="{{ ep.id }}" {% if clone and clone.judge_endpoint_id == ep.id %}selected{% endif %}>{{ ep.display_name }}</option>{% empty %}<option value="">No models registered</option>{% endfor %}
        </select>
      </div>
    </div>
    {% if not endpoints %}
    <p class="mt-2 text-xs text-gray-500">
      No models yet? <a href="{% url 'models' %}" target="_blank" class="text-accent hover:underline">Register a model endpoint →</a>
    </p>
    {% endif %}
  </div>
  </div>

  {% if clone %}<input type="hidden" name="scenario_set_version" value="{{ clone.scenario_set_version_id }}">{% endif %}

  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    <h3 class="text-sm font-semibold text-gray-300 mb-3">Hyperparameters</h3>
    <div class="grid grid-cols-3 gap-4">
      <div>
        <label class="block text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">Max Turns</label>
        <input type="number" name="max_turns" min="1" max="50" placeholder="5 (default)" value="{{ clone.max_turns|default:'' }}"
               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">
        <p class="mt-1 text-xs text-gray-600">Conversation turns per scenario.</p>
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">Language</label>
        <input type="text" name="language" list="lang-options" placeholder="English (default)" value="{{ clone.language|default:'' }}"
               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">
        <datalist id="lang-options">
          <option value="English"></option>
          <option value="Norwegian"></option>
          <option value="Spanish"></option>
          <option value="French"></option>
          <option value="German"></option>
          <option value="Danish"></option>
          <option value="Swedish"></option>
          <option value="Finnish"></option>
        </datalist>
        <p class="mt-1 text-xs text-gray-600">Used in auditor prompts.</p>
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">Repetitions</label>
        <input type="number" name="n_repetitions" min="1" max="20" placeholder="1 (default)" value="{{ clone.n_repetitions|default:'' }}"
               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">
        <p class="mt-1 text-xs text-gray-600">Run each scenario N times to measure judge stability.</p>
      </div>
    </div>
  </div>

  <!-- Advanced: Generation config override -->
  <details class="bg-surface-raised rounded-xl border border-gray-800 p-4 group">
    <summary class="text-sm font-semibold text-gray-300 cursor-pointer select-none flex items-center gap-2">
      <span class="text-gray-500 group-open:rotate-90 transition-transform">▸</span>
      Advanced — Generation Config Override (JSON)
    </summary>
    <div class="mt-3 space-y-3">
      <p class="text-xs text-gray-500">
        Optional JSON object merged into the frozen generation parameters. All keys are stored in the reproducibility manifest.
        <br><strong>Per-request generation params</strong> (SimpleAudit 0.1.13+):
        <code class="text-gray-400">params</code> (all roles), <code class="text-gray-400">target_params</code>,
        <code class="text-gray-400">judge_params</code>, <code class="text-gray-400">auditor_params</code> —
        any provider key (<code class="text-gray-400">temperature</code>, <code class="text-gray-400">top_p</code>,
        <code class="text-gray-400">max_tokens</code>, etc.).
        <br><strong>Client constructor kwargs:</strong>
        <code class="text-gray-400">target_kwargs</code>, <code class="text-gray-400">auditor_kwargs</code>,
        <code class="text-gray-400">judge_kwargs</code> (e.g. <code class="text-gray-400">{"timeout": 120}</code>).
        <br><strong>Other:</strong> <code class="text-gray-400">max_retries</code>, <code class="text-gray-400">retry_backoff</code>,
        <code class="text-gray-400">system_prompt</code>, <code class="text-gray-400">probe_prompt</code>,
        <code class="text-gray-400">judge_prompt</code>, <code class="text-gray-400">max_turns</code>,
        <code class="text-gray-400">language</code>.
      </p>
      <textarea name="gen_config_json" rows="5" placeholder='{"target_params": {"temperature": 0.7, "max_tokens": 2048}}'
                class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-accent/50 resize-y">{{ clone.generation_json|default:'' }}</textarea>
      <p id="gen-config-error" class="text-xs text-red-400 hidden"></p>
    </div>
  </details>

  <button type="submit" class="w-full px-4 py-2.5 rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent-hover transition-colors">
    Launch Audit
  </button>
</form>

<script>
const clonedScenarioSet = document.getElementById('scenario-set-picker');
const clonedVersion = document.querySelector('[name="scenario_set_version"]');
if (clonedScenarioSet && clonedVersion) {
  const originalSetId = "{{ clone.scenario_set_id|default:'' }}";
  clonedScenarioSet.addEventListener('change', () => {
    if (clonedScenarioSet.value !== originalSetId) clonedVersion.remove();
  });
}

// Auto-refresh pickers when user returns to this tab (e.g. after creating in new tab)
let __focusTimer = null;
window.addEventListener('focus', function() {
  clearTimeout(__focusTimer);
  __focusTimer = setTimeout(async () => {
    const target = document.getElementById('picker-sections');
    if (!target) return;
    // Save current selections
    const saved = [...target.querySelectorAll('select')].map(s => s.value);
    try {
      const resp = await fetch('{% url "new_audit" %}', { credentials: 'same-origin' });
      if (!resp.ok) return;
      const html = await resp.text();
      const doc = new DOMParser().parseFromString(html, 'text/html');
      const freshSections = doc.getElementById('picker-sections');
      if (!freshSections) return;
      // Replace options in each select, preserving current selection
      const oldSelects = target.querySelectorAll('select');
      const newSelects = freshSections.querySelectorAll('select');
      oldSelects.forEach((oldSel, i) => {
        const newSel = newSelects[i];
        if (!newSel) return;
        const prevValue = saved[i] || oldSel.value;
        oldSel.innerHTML = newSel.innerHTML;
        if (oldSel.querySelector(`option[value="${prevValue}"]`)) {
          oldSel.value = prevValue;
        }
      });
      // Update empty-state messages visibility
      target.outerHTML = freshSections.outerHTML;
      // Re-apply preserved values after outerHTML swap
      const restoredSelects = document.getElementById('picker-sections')?.querySelectorAll('select');
      if (restoredSelects) {
        restoredSelects.forEach((s, i) => {
          if (saved[i] && s.querySelector(`option[value="${saved[i]}"]`)) {
            s.value = saved[i];
          }
        });
      }
    } catch (e) { /* silent — network error, retry next focus */ }
  }, 800);
});

// Validate JSON on submit
document.querySelector('form').addEventListener('submit', function(e) {
  const ta = this.querySelector('[name="gen_config_json"]');
  const errEl = document.getElementById('gen-config-error');
  if (ta && ta.value.trim()) {
    try { JSON.parse(ta.value); }
    catch (err) {
      e.preventDefault();
      errEl.textContent = 'Invalid JSON: ' + err.message;
      errEl.classList.remove('hidden');
      return;
    }
  }
  errEl.classList.add('hidden');
});
</script>
{% endblock %}