{% extends "base.html" %}
{% block title %}New Experiment — SimpleAudit{% endblock %}
{% block content %}
<div class="flex flex-wrap items-baseline gap-x-3 gap-y-1 mb-4">
  <h1 class="text-lg font-semibold text-gray-100">New Experiment</h1>
  <p class="text-sm text-gray-500">Pick one value per input for a single run, or several to compare: every combination becomes a run, reviewed before launch.</p>
</div>

{% if error %}
<div class="mb-4 text-sm text-red-300 bg-red-900/30 rounded-lg px-4 py-2">{{ error }}</div>
{% endif %}
{% if not can_launch %}
<div class="mb-4 text-sm text-yellow-300 bg-yellow-900/20 rounded-lg px-4 py-2">
  You have view-only access to this workspace. Launching runs needs the admin or auditor role, because runs spend the workspace's API keys.
  Ask a workspace admin, or <a href="{% url 'workspaces' %}?new=1" class="underline">create your own workspace</a>.
</div>
{% endif %}

<form method="post" id="design-form" class="space-y-4 max-w-7xl">
  {% csrf_token %}
  <input type="hidden" name="action" value="design">

  {# Row 1 (wide screens): scenario sets | models, equal height, lists scroll inside. #}
  <div id="picker-sections" class="grid grid-cols-1 xl:grid-cols-3 gap-4">
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4 min-w-0">
    <div class="flex items-center justify-between mb-1">
      <h3 class="text-sm font-semibold text-gray-300">Scenario sets</h3>
      <a href="{% url 'scenarios' %}" target="_blank" class="text-xs text-accent hover:text-accent-hover hover:underline">＋ New</a>
    </div>
    <p class="text-xs text-gray-500 mb-3">Ticking a set uses its latest version. Open <em>Versions</em> to use an older one, or tick several to compare them.</p>
    {% if sets %}
    <fieldset data-axis="scenario_version">
    <div class="flex items-center gap-2 mb-2">
      <input type="search" data-filter placeholder="Search scenario sets…" aria-label="Search scenario sets"
             class="flex-1 px-2.5 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-accent/50">
      <span class="text-[10px] text-gray-500 shrink-0" data-axis-count></span>
    </div>
    <div data-filter-list class="space-y-1.5 h-60 overflow-y-auto pr-1">
      {% for s in sets %}
      {# Only the version checkboxes are submitted (name="scenario_version"); the set checkbox is a shortcut for "latest". #}
      <div data-filter-item data-set-row class="rounded-lg border border-gray-800 bg-surface-overlay/40 text-sm">
        <div class="flex items-start gap-2 px-2.5 py-2">
          <input type="checkbox" data-set-toggle id="set-{{ s.id }}" class="mt-0.5" {% if s.ticked %}checked{% endif %} {% if not s.version_list %}disabled{% endif %}>
          <label for="set-{{ s.id }}" class="min-w-0 flex-1 cursor-pointer">
            <span class="text-gray-200 block truncate">{{ s.name }}</span>
            <span class="text-[11px] text-gray-500" data-set-summary>{% if s.version_list %}v{{ s.version_list.0.version }} · latest{% else %}no published version yet{% endif %}</span>
          </label>
          {% if s.version_list %}
          <button type="button" data-version-toggle aria-expanded="{% if s.show_versions %}true{% else %}false{% endif %}"
                  class="shrink-0 text-[11px] text-gray-400 hover:text-accent px-1.5 py-0.5 rounded hover:bg-surface-overlay">Versions {% if s.show_versions %}▴{% else %}▾{% endif %}</button>
          {% endif %}
        </div>
        <div data-version-list class="{% if not s.show_versions %}hidden{% endif %} border-t border-gray-800 px-2.5 py-1.5 space-y-0.5 max-h-44 overflow-y-auto">
          {% if s.version_list %}
          <label class="flex items-baseline gap-2 text-xs cursor-pointer py-0.5 border-b border-gray-800/60 pb-1.5 mb-1" title="Not pinned: each run uses the newest version published at that time">
            <input type="checkbox" name="scenario_version" value="{{ s.follow_value }}" data-follow data-version="{{ s.version_list.0.version }}"
                   {% if s.follow_value in s.ticked %}checked{% endif %}>
            <span class="text-gray-200">Always latest</span>
            <span class="text-gray-500 truncate">follows new versions · now v{{ s.version_list.0.version }}</span>
          </label>
          {% endif %}
          {% for v in s.version_list %}
          <div class="flex items-baseline gap-2 text-xs py-0.5">
            <label class="flex items-baseline gap-2 min-w-0 flex-1 cursor-pointer">
              <input type="checkbox" name="scenario_version" value="{{ v.id }}" data-version="{{ v.version }}" {% if forloop.first %}data-latest{% endif %}
                     {% if v.id|stringformat:"d" in s.ticked %}checked{% endif %}>
              <span class="text-gray-200 shrink-0">v{{ v.version }}{% if forloop.first %} <span class="text-accent">latest</span>{% endif %}</span>
              <span class="text-gray-500 truncate" title="Published {{ v.published_at|date:'M j, Y, H:i' }} UTC{% if v.published_by %} by {{ v.published_by.username }}{% endif %}">{{ v.scenario_count }} scenario{{ v.scenario_count|pluralize }} · {{ v.published_at|date:"M j" }}</span>
            </label>
            {# New tab: keep the design form as it is. #}
            <a href="{% url 'scenarios' %}?set={{ s.id }}&version={{ v.version }}" target="_blank" rel="noopener"
               title="Open v{{ v.version }} of {{ s.name }} in a new tab" class="shrink-0 text-gray-500 hover:text-accent">View ↗</a>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endfor %}
      <p data-filter-empty class="hidden px-2.5 py-2 text-xs text-gray-500">No matches.</p>
    </div>
    </fieldset>
    {% else %}
    <p class="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="xl:col-span-2 min-w-0">{% include "partials/model_pickers.html" %}</div>
  </div>


  {# Row 2 (wide screens): run settings | schedule. #}
  <div class="grid grid-cols-1 xl:grid-cols-2 gap-4 items-start">
  <div class="min-w-0">{% include "partials/run_settings.html" %}</div>

  <!-- Schedule: run once, or repeat (creates monitors) -->
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4 min-w-0" id="schedule-card">
    <h3 class="text-sm font-semibold text-gray-300 mb-1">Schedule</h3>
    <p class="text-xs text-gray-500 mb-3">Run once, or repeat on a schedule to track changes over time. Repeating runs appear under Monitors.</p>
    <input type="hidden" name="clone_from" value="{{ rep.clone_from }}">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <label for="repeat-picker" class="block text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">Repeat</label>
        <select name="repeat" id="repeat-picker" 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 value, label in repeat_choices %}<option value="{{ value }}" {% if rep.repeat == value %}selected{% endif %}>{{ label }}</option>{% endfor %}
        </select>
      </div>
      <div data-repeat-only>
        <label for="timezone-picker" class="block text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">Timezone</label>
        <select name="timezone" id="timezone-picker" data-chosen="{{ rep.timezone }}" 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 tz in timezones %}<option value="{{ tz }}" {% if rep.timezone == tz %}selected{% endif %}>{{ tz }}</option>{% endfor %}
        </select>
        <p class="mt-1 text-xs text-gray-600">Times below are read in this zone. Defaults to yours.</p>
      </div>
      <div data-cron-only class="md:col-span-2">
        <label for="cron-input" class="block text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">Cron expression</label>
        <input id="cron-input" type="text" name="cron_expression" value="{{ rep.cron_expression }}" placeholder="0 6 * * 1" spellcheck="false" autocomplete="off"
               class="w-full md:w-80 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">
        <p class="mt-1 text-xs text-gray-600">
          minute hour day-of-month month day-of-week. Examples: <code class="text-gray-400">0 6 * * 1</code> (Mondays 06:00),
          <code class="text-gray-400">30 2 * * *</code> (daily 02:30), <code class="text-gray-400">0 */12 * * *</code> (every 12 hours).
          If a run is still going when the next one is due, that one is skipped.
        </p>
      </div>
      <fieldset data-repeat-only class="md:col-span-2">
        <legend class="block text-xs font-medium text-gray-500 mb-1.5 uppercase tracking-wide">Start</legend>
        <div class="space-y-1.5 text-sm text-gray-300">
          <label class="flex items-start gap-2"><input type="radio" name="start" value="now" class="mt-1" {% if rep.start != "at" and rep.start != "baseline" %}checked{% endif %}>
            <span>Now <span class="block text-xs text-gray-500">Run immediately, then repeat. The first runs become the baseline.</span></span></label>
          {% if source_run %}
          <label class="flex items-start gap-2"><input type="radio" name="start" value="baseline" class="mt-1" {% if rep.start == "baseline" %}checked{% endif %}>
            <span>Use run #{{ source_run.id }} as the first point <span class="block text-xs text-gray-500">No new run now; repeats start at the next scheduled time. Only if settings still match that run.</span></span></label>
          {% endif %}
          <label class="flex items-start gap-2"><input type="radio" name="start" value="at" class="mt-1" {% if rep.start == "at" %}checked{% endif %}>
            <span class="flex-1">At a specific time <span class="block text-xs text-gray-500">Nothing runs now.</span>
              <input type="datetime-local" name="first_run_at" value="{{ rep.first_run_at }}" aria-label="First run time"
                     class="mt-1 px-3 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-accent/50">
            </span></label>
        </div>
      </fieldset>
    </div>
  </div>
  </div>

  <!-- Sticky summary: how many runs this design makes -->
  <div class="sticky bottom-0 z-10 pb-4 pt-2 bg-gradient-to-t from-surface via-surface/90 to-transparent">
    <div class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-gray-700 bg-surface-raised px-4 py-3 shadow-lg">
      <p class="text-sm text-gray-300 min-w-0" id="design-summary" aria-live="polite">—</p>
      <button type="submit" id="launch-btn" data-busy-label="Working…" {% if not can_launch %}disabled title="Admin or auditor role required"{% endif %}
              class="shrink-0 px-4 py-2 rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent-hover transition-colors disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:bg-accent">
        Launch run
      </button>
    </div>
  </div>
</form>

<script>
(function() {
  const form = document.getElementById('design-form');
  const btn = document.getElementById('launch-btn');
  const summary = document.getElementById('design-summary');
  const canLaunch = {{ can_launch|yesno:"true,false" }};
  const MAX_RUNS = {{ max_runs }};
  const AXES = [['scenario_version', 'scenario set'], ['target_model', 'target'], ['auditor_model', 'auditor'], ['judge_model', 'judge']];

  function listCount(name) {
    const el = form.querySelector(`[name="${name}"]`);
    const parts = (el ? el.value : '').split(',').map(s => s.trim()).filter(Boolean);
    return Math.max(new Set(parts).size, 1);
  }

  function update() {
    let runs = 1;
    const missing = [];
    const compared = [];
    AXES.forEach(([name, label]) => {
      const n = form.querySelectorAll(`input[name="${name}"]:checked`).length;
      const counter = form.querySelector(`[data-axis="${name}"] [data-axis-count]`);
      if (counter) counter.textContent = n > 1 ? n + ' selected' : '';
      if (!n) missing.push(label);
      if (n > 1) {
        // Two versions of one set are compared as versions, not as different sets.
        const sameSet = name === 'scenario_version' &&
          [...form.querySelectorAll('[data-set-row]')].some(r => r.querySelectorAll('input[name="scenario_version"]:checked').length > 1);
        compared.push(n + ' ' + (sameSet ? 'scenario versions' : label + 's'));
      }
      runs *= Math.max(n, 1);
    });
    [['max_turns', 'max-turn values'], ['language', 'languages']].forEach(([name, label]) => {
      const n = listCount(name);
      if (n > 1) compared.push(n + ' ' + label);
      runs *= n;
    });
    const repeatSel = document.getElementById('repeat-picker');
    const repeating = repeatSel && repeatSel.value !== 'once';
    const repeatText = repeating ? repeatSel.selectedOptions[0].textContent.replace('…', '').toLowerCase() : '';
    const startVal = (form.querySelector('input[name="start"]:checked') || {}).value || 'now';
    let text, label, ok = true;
    if (missing.length) {
      ok = false;
      text = 'Pick at least one ' + missing.join(', ') + '.';
      label = runs > 1 ? `Review ${runs} runs →` : 'Launch run';
    } else if (runs > MAX_RUNS) {
      ok = false;
      text = `<span class="text-red-300">${runs} runs: over the limit of ${MAX_RUNS}.</span> Pick fewer values.`;
      label = `Too many runs`;
    } else if (runs === 1) {
      text = '1 run';
      label = !repeating ? 'Launch run' : (startVal === 'now' ? 'Launch run + monitor' : 'Create monitor');
    } else {
      text = `<strong class="text-gray-100">${runs} runs</strong> · comparing ${compared.join(' × ')}`;
      label = `Review ${runs} runs →`;
    }
    if (repeating && ok) text += ` · <span class="text-accent">repeats ${repeatText}</span>`;
    summary.innerHTML = text;
    btn.textContent = label;
    btn.dataset.busyLabel = runs === 1 ? 'Working…' : 'Preparing review…';

    // Schedule card: reveal details only when repeating.
    form.querySelectorAll('[data-repeat-only]').forEach(el => el.classList.toggle('hidden', !repeating));
    form.querySelectorAll('[data-cron-only]').forEach(el => {
      el.classList.toggle('hidden', !(repeating && repeatSel.value === 'cron'));
      el.querySelector('input').required = repeating && repeatSel.value === 'cron';
    });
    btn.disabled = !canLaunch || !ok;
  }

  form.addEventListener('change', update);
  form.addEventListener('input', e => { if (e.target.matches('[data-axis-list]')) update(); });

  // --- Search in pickers: filter items live, hide empty connection groups. ---
  function initFilters(root) {
    root.querySelectorAll('[data-filter]').forEach(input => {
      const scope = input.closest('fieldset');
      const apply = () => {
        const q = input.value.trim().toLowerCase();
        let shown = 0;
        scope.querySelectorAll('[data-filter-item]').forEach(item => {
          const hit = !q || item.textContent.toLowerCase().includes(q);
          item.classList.toggle('hidden', !hit);
          if (hit) shown++;
        });
        scope.querySelectorAll('[data-filter-group]').forEach(g => {
          const any = scope.querySelector(`[data-filter-item][data-group="${g.dataset.filterGroup}"]:not(.hidden)`);
          g.classList.toggle('hidden', !any);
        });
        const empty = scope.querySelector('[data-filter-empty]');
        if (empty) empty.classList.toggle('hidden', shown > 0);
      };
      input.addEventListener('input', apply);
      // Enter in a search box must not submit the form.
      input.addEventListener('keydown', e => { if (e.key === 'Enter') e.preventDefault(); });
    });
  }
  initFilters(form);

  // --- Chip inputs (max turns, language): several values, one hidden field. ---
  function initChips(wrap) {
    const box = wrap.querySelector('[data-chip-box]');
    const input = wrap.querySelector('[data-chip-input]');
    const hidden = wrap.querySelector('input[type="hidden"]');
    const error = wrap.querySelector('[data-chip-error]');
    const sugg = wrap.querySelector('[data-chip-suggestions]');
    const isInt = wrap.dataset.kind === 'int';
    let values = hidden.value.split(',').map(v => v.trim()).filter(Boolean);

    function commit() {
      hidden.value = values.join(', ');
      box.querySelectorAll('[data-chip]').forEach(c => c.remove());
      values.forEach((v, i) => {
        const chip = document.createElement('span');
        chip.dataset.chip = '';
        chip.className = 'inline-flex items-center gap-1 pl-2 pr-1 py-0.5 rounded-md bg-accent/15 text-accent text-xs';
        chip.innerHTML = '<span></span><button type="button" class="px-1 rounded hover:bg-accent/25" aria-label="Remove">×</button>';
        chip.firstChild.textContent = v;
        // Re-render after the click finishes: removing the clicked node mid-event
        // breaks htmx's document-level click listener.
        chip.lastChild.addEventListener('click', e => { e.stopPropagation(); values.splice(i, 1); setTimeout(commit); });
        box.insertBefore(chip, input);
      });
      input.placeholder = values.length ? 'Add another…' : input.dataset.placeholder;
      if (sugg) {
        sugg.innerHTML = '';
        sugg.dataset.chipSuggestions.split(',').filter(v => !values.includes(v)).forEach(v => {
          const b = document.createElement('button');
          b.type = 'button';
          b.className = 'px-1.5 py-0.5 rounded text-[11px] text-gray-400 bg-surface-overlay hover:text-accent';
          b.textContent = '+ ' + v;
          b.addEventListener('click', () => setTimeout(() => add(v)));
          sugg.appendChild(b);
        });
      }
      hidden.dispatchEvent(new Event('change', { bubbles: true }));
    }

    function add(raw) {
      const parts = String(raw).split(',').map(v => v.trim()).filter(Boolean);
      for (const v of parts) {
        if (isInt && !(/^\d+$/.test(v) && +v >= 1 && +v <= 50)) {
          error.textContent = `“${v}” is not a whole number from 1 to 50.`;
          error.classList.remove('hidden');
          return false;
        }
        if (!values.includes(v)) values.push(v);
      }
      error.classList.add('hidden');
      commit();
      return true;
    }

    input.dataset.placeholder = input.placeholder;
    input.addEventListener('keydown', e => {
      if ((e.key === 'Enter' || e.key === ',' || e.key === 'Tab') && input.value.trim()) {
        if (e.key !== 'Tab') e.preventDefault();
        if (add(input.value)) input.value = '';
      } else if (e.key === 'Enter') {
        e.preventDefault();
      } else if (e.key === 'Backspace' && !input.value && values.length) {
        values.pop();
        commit();
      }
    });
    input.addEventListener('blur', () => { if (input.value.trim() && add(input.value)) input.value = ''; });
    box.addEventListener('click', () => input.focus());
    // Typed but not yet added when the form is submitted: include it.
    form.addEventListener('submit', e => {
      if (input.value.trim() && !add(input.value)) { e.preventDefault(); e.stopImmediatePropagation(); input.focus(); }
      else input.value = '';
    });
    commit();
  }
  form.querySelectorAll('[data-chips]').forEach(initChips);

  // --- Scenario set rows: the set checkbox means "latest"; versions can be picked. ---
  function syncSetRow(row) {
    const versions = [...row.querySelectorAll('input[name="scenario_version"]')];
    const ticked = versions.filter(v => v.checked);
    const toggle = row.querySelector('[data-set-toggle]');
    const summary = row.querySelector('[data-set-summary]');
    if (!versions.length) return;
    toggle.checked = ticked.length > 0;
    toggle.indeterminate = false;
    const latest = versions.find(v => 'latest' in v.dataset);
    const name = v => 'follow' in v.dataset ? 'always latest' : 'v' + v.dataset.version;
    if (!ticked.length) summary.textContent = `v${latest.dataset.version} · latest`;
    else if (ticked.length === 1) {
      const v = ticked[0];
      summary.textContent = 'follow' in v.dataset ? `always latest (now v${v.dataset.version})`
        : `v${v.dataset.version}` + (v === latest ? ' · latest' : ' · older version');
    } else {
      summary.innerHTML = `<span class="text-accent">comparing ${ticked.map(name).reverse().join(' vs ')}</span>`;
    }
  }
  function initSetRows(root) {
    root.querySelectorAll('[data-set-row]').forEach(row => {
      syncSetRow(row);
      row.querySelector('[data-set-toggle]').addEventListener('change', e => {
        const versions = [...row.querySelectorAll('input[name="scenario_version"]')];
        if (e.target.checked) {
          if (!versions.some(v => v.checked)) versions.find(v => 'latest' in v.dataset).checked = true;
        } else {
          versions.forEach(v => { v.checked = false; });
        }
        syncSetRow(row);
      });
      row.querySelectorAll('input[name="scenario_version"]').forEach(v => v.addEventListener('change', () => syncSetRow(row)));
      const btn = row.querySelector('[data-version-toggle]');
      if (btn) btn.addEventListener('click', () => {
        const list = row.querySelector('[data-version-list]');
        const open = list.classList.toggle('hidden') === false;
        btn.setAttribute('aria-expanded', open);
        btn.textContent = open ? 'Versions ▴' : 'Versions ▾';
      });
    });
  }
  initSetRows(form);

  // Returning from another tab (e.g. after adding a model): refresh the pickers, keeping ticks.
  let focusTimer = null;
  window.addEventListener('focus', () => {
    clearTimeout(focusTimer);
    focusTimer = setTimeout(async () => {
      const target = document.getElementById('picker-sections');
      if (!target) return;
      const ticked = new Set([...target.querySelectorAll('input:checked')].map(i => i.name + '=' + i.value));
      try {
        const resp = await fetch('{% url "new_experiment" %}', { credentials: 'same-origin' });
        if (!resp.ok) return;
        const fresh = new DOMParser().parseFromString(await resp.text(), 'text/html').getElementById('picker-sections');
        if (!fresh) return;
        fresh.querySelectorAll('input[type="checkbox"]').forEach(i => { i.checked = ticked.has(i.name + '=' + i.value); });
        target.replaceWith(fresh);
        initFilters(fresh);
        initSetRows(fresh);
        update();
      } catch (e) { /* offline: keep the current pickers */ }
    }, 800);
  });

  // Timezone defaults to the browser's own (unless re-showing a POST).
  const tzPicker = document.getElementById('timezone-picker');
  if (tzPicker && !tzPicker.dataset.chosen) {
    const local = Intl.DateTimeFormat().resolvedOptions().timeZone;
    if (local && tzPicker.querySelector(`option[value="${local}"]`)) tzPicker.value = local;
  }
  // Picking a start time selects "At a specific time".
  const at = form.querySelector('input[name="first_run_at"]');
  if (at) at.addEventListener('focus', () => { form.querySelector('input[name="start"][value="at"]').checked = true; update(); });

  update();
})();
</script>
{% include "partials/run_settings_js.html" %}
{% endblock %}