{# T48.1 -- shared "Start new eval" modal partial.

Replaces the original ``window.prompt()`` chain (scan / model / prompts)
with a single Tailwind modal that has client-side validation, a model
dropdown, prompt multi-select checkboxes, and a today-vs-cap progress
bar.

Two modes, picked by the caller via ``{% with mode=... %}``:

* ``mode="select-scan"`` -- the modal includes a scan-search input
  driven by ``GET /admin/scans/search?q=...``. Used from the
  ``/admin/evals`` index page where the operator hasn't picked a scan
  yet.
* ``mode="fixed-scan"`` -- scan id is pre-set via ``fixed_scan_id``;
  the picker is hidden. This mode powered the per-scan eval matrix's
  "+ Add column" button, which was retired in P5; no live page renders
  it today, but the branch is kept for any future fixed-scan caller.

Caller threads ``today_usd`` + ``cap_usd`` so the cap bar shows accurate
state on first paint without an extra round-trip.

Open-trigger contract: any element with
``data-action="open-eval-modal"`` on the page opens this modal. The
``/admin/evals`` index page uses that attribute on its "Start new eval"
button.

XSS contract: every Jinja value below is autoescaped (the env is
configured with ``select_autoescape(["html", "htm"])``). The inline
``<script>`` reads ``mode`` + ``fixed_scan_id`` via Jinja string
literals; those strings are character classes constrained by the
caller (route handler) so direct injection isn't an attack vector,
but we still avoid templating untrusted text into the JS body.
#}
<div id="eval-new-modal"
     data-eval-new-modal
     data-mode="{{ mode }}"
     data-fixed-scan-id="{{ fixed_scan_id or '' }}"
     data-today-spend="{{ '%.4f'|format(today_usd or 0.0) }}"
     data-cap-limit="{{ '%.4f'|format(cap_usd or 5.0) }}"
     class="hidden fixed inset-0 z-50 bg-black/50 flex items-center justify-center">
  <div class="bg-white rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
    {# Header #}
    <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
      <h2 class="text-lg font-semibold text-gray-900">Start new eval</h2>
      <button type="button"
              data-modal-close
              class="text-gray-400 hover:text-gray-600 text-xl leading-none"
              aria-label="Close">&times;</button>
    </div>

    {# Body #}
    <div class="px-6 py-4 space-y-4">
      {# Scan picker -- only visible in select-scan mode. #}
      <div data-field="scan" {% if mode == "fixed-scan" %}class="hidden"{% endif %}>
        <label for="eval-scan-input" class="text-sm font-medium text-gray-700">Scan</label>
        <input type="text"
               id="eval-scan-input"
               placeholder="Paste scan UUID or search by URL..."
               autocomplete="off"
               class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
        <div id="eval-scan-suggestions"
             class="hidden mt-1 border border-gray-200 rounded-md bg-white shadow-sm max-h-40 overflow-y-auto"></div>
        <p class="mt-1 text-xs text-gray-500">Pick a scan to evaluate against.</p>
      </div>

      {# Model dropdown -- pulled from llm/pricing.py _PRICES at task #}
      {# authoring time. Update both files together when adding a model. #}
      <div>
        <label for="eval-model-select" class="text-sm font-medium text-gray-700">Model</label>
        <select id="eval-model-select"
                class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
          <optgroup label="Anthropic">
            <option value="claude-sonnet-4-6">Claude Sonnet 4.6 &mdash; $3 / $15 per 1M tokens</option>
            <option value="claude-haiku-4-5-20251001">Claude Haiku 4.5 &mdash; $1 / $5</option>
          </optgroup>
          <optgroup label="OpenAI">
            <option value="gpt-5.4-mini">GPT-5.4 mini &mdash; $0.75 / $4.50</option>
            <option value="gpt-5.4-nano">GPT-5.4 nano &mdash; $0.20 / $1.25</option>
            <option value="gpt-5.4">GPT-5.4 &mdash; $2.50 / $15</option>
          </optgroup>
          <optgroup label="xAI Grok">
            <option value="grok-3-mini">Grok 3 mini &mdash; $0.30 / $0.50</option>
            <option value="grok-4.3">Grok 4.3 &mdash; $1.25 / $2.50</option>
          </optgroup>
        </select>
      </div>

      {# Prompts multi-select. Defaults to the synthesis-pipeline four; #}
      {# flow_confirm + intent_clarifier are off by default because they #}
      {# only fire on scans where the user took the confirm/refine path. #}
      <div>
        <label class="text-sm font-medium text-gray-700">Prompts</label>
        <div class="mt-2 space-y-1">
          <label class="flex items-center text-sm">
            <input type="checkbox" name="eval-prompts" value="scan_synthesis" checked class="mr-2"> scan_synthesis
          </label>
          <label class="flex items-center text-sm">
            <input type="checkbox" name="eval-prompts" value="notes" checked class="mr-2"> notes
          </label>
          <label class="flex items-center text-sm">
            <input type="checkbox" name="eval-prompts" value="difficulty_drivers" checked class="mr-2"> difficulty_drivers
          </label>
          <label class="flex items-center text-sm">
            <input type="checkbox" name="eval-prompts" value="intent_filter" checked class="mr-2"> intent_filter
          </label>
          <label class="flex items-center text-sm">
            <input type="checkbox" name="eval-prompts" value="flow_confirm" class="mr-2"> flow_confirm
          </label>
          <label class="flex items-center text-sm">
            <input type="checkbox" name="eval-prompts" value="intent_clarifier" class="mr-2"> intent_clarifier
          </label>
        </div>
        <p class="mt-1 text-xs text-gray-500">Default selection covers the synthesis pipeline.</p>
      </div>

      {# Daily cap progress. JS reads the data-* on the wrapper and  #}
      {# fills these spans + bar width on modal init.                #}
      <div class="bg-gray-50 rounded-md p-3 text-sm">
        <div class="flex justify-between text-xs text-gray-600 mb-1">
          <span>Today's eval spend</span>
          <span id="eval-cap-display">$<span id="eval-spent-today">0.00</span> of $<span id="eval-cap-limit">5.00</span></span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div id="eval-cap-bar" class="bg-blue-500 h-2 rounded-full" style="width: 0%"></div>
        </div>
      </div>

      {# Status / error display. JS toggles visibility + writes text. #}
      <div id="eval-modal-error"
           class="hidden bg-red-50 border border-red-200 text-red-900 rounded-md p-3 text-sm"></div>
    </div>

    {# Footer #}
    <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-2">
      <button type="button" data-modal-close
              class="px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md">Cancel</button>
      <button type="button" id="eval-modal-submit"
              class="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-md">Start eval</button>
    </div>
  </div>
</div>

<script>
(function() {
  // T48.1: open / close / validate / submit handler for the shared
  // eval-new modal. Self-contained -- no external JS, no jQuery.
  const modal = document.getElementById('eval-new-modal');
  if (!modal) return;

  const mode = modal.dataset.mode || 'select-scan';
  const fixedScanId = modal.dataset.fixedScanId || '';

  // Open trigger -- any element on the page with [data-action="open-eval-modal"].
  document.querySelectorAll('[data-action="open-eval-modal"]').forEach(function(btn){
    btn.addEventListener('click', function(e){
      e.preventDefault();
      const errBox = document.getElementById('eval-modal-error');
      if (errBox) errBox.classList.add('hidden');
      modal.classList.remove('hidden');
    });
  });

  // Close handlers (X / Cancel / click outside / Esc).
  modal.querySelectorAll('[data-modal-close]').forEach(function(btn){
    btn.addEventListener('click', function(){ modal.classList.add('hidden'); });
  });
  modal.addEventListener('click', function(e){
    if (e.target === modal) modal.classList.add('hidden');
  });
  document.addEventListener('keydown', function(e){
    if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
      modal.classList.add('hidden');
    }
  });

  // Daily-cap bar -- values come from the data-* attributes on the
  // wrapper (server passes today_usd + cap_usd via the partial).
  const todaySpend = parseFloat(modal.dataset.todaySpend || '0') || 0;
  const capLimit = parseFloat(modal.dataset.capLimit || '5') || 5;
  const spentEl = document.getElementById('eval-spent-today');
  const capEl = document.getElementById('eval-cap-limit');
  const barEl = document.getElementById('eval-cap-bar');
  if (spentEl) spentEl.textContent = todaySpend.toFixed(2);
  if (capEl) capEl.textContent = capLimit.toFixed(2);
  if (barEl) {
    const pct = capLimit > 0 ? Math.min(100, (todaySpend / capLimit) * 100) : 0;
    barEl.style.width = pct + '%';
    if (pct > 80) {
      barEl.classList.remove('bg-blue-500');
      barEl.classList.add('bg-red-500');
    }
  }

  // Scan-search autocomplete (select-scan mode only). 250ms debounce;
  // queries shorter than 3 chars don't fire to avoid stampeding the
  // search endpoint on every keystroke.
  if (mode === 'select-scan') {
    const scanInput = document.getElementById('eval-scan-input');
    const suggestions = document.getElementById('eval-scan-suggestions');
    if (scanInput && suggestions) {
      let debounceTimer = null;
      scanInput.addEventListener('input', function(){
        if (debounceTimer) clearTimeout(debounceTimer);
        const q = scanInput.value.trim();
        if (!q || q.length < 3) {
          suggestions.classList.add('hidden');
          return;
        }
        debounceTimer = setTimeout(async function(){
          try {
            const resp = await fetch('/admin/scans/search?q=' + encodeURIComponent(q), {
              credentials: 'same-origin',
            });
            if (!resp.ok) {
              suggestions.classList.add('hidden');
              return;
            }
            const data = await resp.json();
            const results = (data && data.results) || [];
            if (results.length === 0) {
              suggestions.innerHTML = '<div class="px-3 py-2 text-sm text-gray-400 italic">No matches</div>';
              suggestions.classList.remove('hidden');
              return;
            }
            // Render. Use textContent / dataset (NOT innerHTML
            // interpolation) for the dynamic strings so a malformed
            // target_url can't sneak HTML into the dropdown.
            suggestions.innerHTML = '';
            results.forEach(function(r){
              const item = document.createElement('div');
              item.className = 'cursor-pointer hover:bg-gray-100 px-3 py-2 text-sm';
              item.dataset.scanId = r.scan_id;
              const idLine = document.createElement('div');
              idLine.className = 'font-mono text-xs text-gray-500';
              idLine.textContent = (r.scan_id || '').substring(0, 8);
              const urlLine = document.createElement('div');
              urlLine.textContent = r.target_url || '(no URL)';
              item.appendChild(idLine);
              item.appendChild(urlLine);
              item.addEventListener('click', function(){
                scanInput.value = item.dataset.scanId;
                suggestions.classList.add('hidden');
              });
              suggestions.appendChild(item);
            });
            suggestions.classList.remove('hidden');
          } catch (err) {
            suggestions.classList.add('hidden');
          }
        }, 250);
      });
    }
  }

  // Submit. Client-side validation (scan id non-empty, model non-empty,
  // at least one prompt picked) then POST /admin/evals/run with the
  // T27.1 X-CSRF-Token header. Success closes the modal + either
  // redirects (select-scan mode -> per-scan matrix page) or reloads
  // (fixed-scan mode -> same matrix, fresh queued/running cells).
  const submitBtn = document.getElementById('eval-modal-submit');
  if (submitBtn) {
    submitBtn.addEventListener('click', async function(){
      const errBox = document.getElementById('eval-modal-error');
      if (errBox) errBox.classList.add('hidden');

      const scanInput = document.getElementById('eval-scan-input');
      const scanId = mode === 'fixed-scan'
        ? fixedScanId
        : ((scanInput && scanInput.value) || '').trim();
      const modelSel = document.getElementById('eval-model-select');
      const model = modelSel ? modelSel.value : '';
      const prompts = Array.from(
        document.querySelectorAll('input[name="eval-prompts"]:checked')
      ).map(function(c){ return c.value; });

      function showErr(msg){
        if (!errBox) return;
        errBox.textContent = msg;
        errBox.classList.remove('hidden');
      }
      if (!scanId) { showErr('Please enter a scan ID.'); return; }
      if (!model) { showErr('Please pick a model.'); return; }
      if (prompts.length === 0) {
        showErr('Pick at least one prompt to evaluate.');
        return;
      }

      const csrfMeta = document.querySelector('meta[name="csrf-token"]');
      const csrf = csrfMeta ? csrfMeta.content : '';

      submitBtn.disabled = true;
      const originalLabel = submitBtn.textContent;
      submitBtn.textContent = 'Starting...';

      try {
        const resp = await fetch('/admin/evals/run', {
          method: 'POST',
          credentials: 'same-origin',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': csrf,
          },
          body: JSON.stringify({
            scan_id: scanId,
            model: model,
            prompts: prompts,
            force: false,
          }),
        });
        if (!resp.ok) {
          let detail = 'Server returned ' + resp.status + '.';
          try {
            const data = await resp.json();
            if (data && data.detail) detail = data.detail;
            else if (data && data.error) detail = data.error;
          } catch (e) { /* not JSON */ }
          showErr(detail);
          submitBtn.disabled = false;
          submitBtn.textContent = originalLabel;
          return;
        }
        modal.classList.add('hidden');
        if (mode === 'select-scan') {
          window.location.href = '/admin/evals/' + encodeURIComponent(scanId);
        } else {
          window.location.reload();
        }
      } catch (err) {
        showErr(String(err));
        submitBtn.disabled = false;
        submitBtn.textContent = originalLabel;
      }
    });
  }
})();
</script>