{# T48 evals matrix partial.                                              #}
{# Rows = unique prompt_names. Columns = unique (model, provider)         #}
{# tuples (from eval_states) PLUS an "Original" column synthesized from  #}
{# the production llm_calls rows.                                        #}
{#                                                                       #}
{# Caller passes:                                                        #}
{#   scan_id (str) -- used for the polling endpoint URLs                 #}
{#   eval_states (list[dict]) -- latest LlmEval row per                  #}
{#     (prompt_name, model, provider)                                    #}
{#   original_calls (list[dict]) -- production llm_calls rows for the    #}
{#     "Original" column                                                 #}
{#   cap_usd / today_usd (float) -- displayed in the run modal           #}
{#   csrf_token (str) -- threaded into the JS for POSTs                  #}

{% set status_classes = {
  'queued':   'bg-gray-100 text-gray-700',
  'running':  'bg-blue-100 text-blue-800',
  'complete': 'bg-green-100 text-green-800',
  'errored':  'bg-red-100 text-red-800',
} %}

{# Build the row + column axes server-side. Rows are the union of every  #}
{# eval prompt + every original prompt; columns are the union of every   #}
{# (model, provider) seen in eval_states.                                #}
{# Jinja's loop-set doesn't escape the loop scope so we use a namespace  #}
{# object whose attributes can be mutated from inside ``for``.           #}
{% set ns = namespace(rows=[], cols=[]) %}
{% for s in eval_states %}
  {% if s.prompt_name not in ns.rows %}{% set _ = ns.rows.append(s.prompt_name) %}{% endif %}
{% endfor %}
{% for c in original_calls %}
  {% if c.prompt_name not in ns.rows %}{% set _ = ns.rows.append(c.prompt_name) %}{% endif %}
{% endfor %}
{% for s in eval_states %}
  {% set key = s.model ~ '|' ~ s.provider %}
  {% set ns2 = namespace(seen=false) %}
  {% for c in ns.cols %}{% if c.key == key %}{% set ns2.seen = true %}{% endif %}{% endfor %}
  {% if not ns2.seen %}{% set _ = ns.cols.append({'key': key, 'model': s.model, 'provider': s.provider}) %}{% endif %}
{% endfor %}
{% set _row_names = ns.rows %}
{% set _columns = ns.cols %}

<section class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden"
         data-evals-matrix
         data-scan-id="{{ scan_id }}"
         data-cap-usd="{{ '%.4f'|format(cap_usd or 0.0) }}"
         data-today-usd="{{ '%.4f'|format(today_usd or 0.0) }}">
  <div class="px-6 py-4 border-b border-gray-200 flex flex-wrap items-center gap-3 justify-between">
    <div>
      <h2 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Eval matrix</h2>
      <p class="text-xs text-gray-500 mt-0.5">Rows: prompt &middot; Columns: model</p>
    </div>
    <div class="flex items-center gap-2">
      <span class="text-xs text-gray-500">Today: ${{ '%.4f'|format(today_usd or 0.0) }} / ${{ '%.2f'|format(cap_usd or 0.0) }}</span>
      {# T48.1: opens the shared eval-new modal (included once at the #}
      {# page level in fixed-scan mode -- see admin_evals_scan.html / #}
      {# debug_scan.html). Replaces the legacy window.prompt() chain.  #}
      <button type="button"
              data-action="open-eval-modal"
              data-evals-add-column
              class="inline-flex items-center px-3 py-1.5 text-sm font-medium bg-blue-600 text-white rounded hover:bg-blue-700">
        + Add column
      </button>
    </div>
  </div>

  {% if not _row_names and not _columns %}
    <div class="px-6 py-10 text-sm text-gray-400 italic text-center">
      No evals recorded yet. Click "+ Add column" to start a new eval.
    </div>
  {% else %}
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 text-sm">
        <thead class="bg-gray-50">
          <tr>
            <th class="text-left font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">Prompt</th>
            <th class="text-left font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">Original</th>
            {% for col in _columns %}
              <th class="text-left font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">
                <div class="font-mono text-[11px] text-gray-700">{{ col.model }}</div>
                <div class="text-[10px] text-gray-400">{{ col.provider }}</div>
              </th>
            {% endfor %}
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
          {% for prompt_name in _row_names %}
            <tr class="even:bg-gray-50">
              <td class="py-3 px-4 font-mono text-xs text-gray-800 align-top">{{ prompt_name }}</td>

              {# Original column: pull the matching llm_calls row, else placeholder. #}
              {% set orig_ns = namespace(row=none) %}
              {% for c in original_calls %}
                {% if c.prompt_name == prompt_name and orig_ns.row is none %}
                  {% set orig_ns.row = c %}
                {% endif %}
              {% endfor %}
              <td class="py-3 px-4 align-top">
                {% if orig_ns.row %}
                  <div class="text-xs text-gray-700">
                    <div class="font-mono">{{ orig_ns.row.model }}</div>
                    <div class="text-gray-500">${{ '%.6f'|format(orig_ns.row.cost_usd) }} &middot; {{ orig_ns.row.latency_ms }}ms</div>
                  </div>
                {% else %}
                  <span class="text-xs text-gray-400 italic">&mdash;</span>
                {% endif %}
              </td>

              {# Eval cells per column. #}
              {% for col in _columns %}
                {% set state_ns = namespace(row=none) %}
                {% for s in eval_states %}
                  {% if s.prompt_name == prompt_name and s.model == col.model and s.provider == col.provider and state_ns.row is none %}
                    {% set state_ns.row = s %}
                  {% endif %}
                {% endfor %}
                {% set _state = state_ns.row %}
                {# T50.2: data-cell-diff on terminal-state cells fires the diff modal. #}
                {# Running/queued cells are NOT clickable -- no response_body yet. #}
                {% set _is_clickable = _state and _state.status in ('complete', 'errored') %}
                <td class="py-3 px-4 align-top relative group{% if _is_clickable %} cursor-pointer hover:bg-blue-50{% endif %}"
                    data-evals-cell
                    data-prompt-name="{{ prompt_name }}"
                    data-model="{{ col.model }}"
                    data-provider="{{ col.provider }}"
                    {% if _state %}data-eval-id="{{ _state.id }}" data-status="{{ _state.status }}"{% endif %}
                    {% if _is_clickable %}data-cell-diff="{{ _state.id }}" title="Click to compare with original"{% endif %}>
                  {% if _state %}
                    <div class="flex flex-col gap-1">
                      <span class="inline-flex w-fit items-center px-2 py-0.5 rounded text-xs font-medium {{ status_classes.get(_state.status, 'bg-gray-100 text-gray-700') }}">
                        {{ _state.status }}{% if _state.status == 'running' %} <span class="ml-1 animate-spin">&#9696;</span>{% endif %}
                      </span>
                      <div class="text-xs text-gray-600">${{ '%.6f'|format(_state.cost_usd) }} &middot; {{ _state.latency_ms }}ms</div>
                      {% if _state.error_message %}
                        <div class="text-[10px] text-red-600 truncate max-w-[16em]" title="{{ _state.error_message }}">{{ _state.error_message }}</div>
                      {% endif %}
                    </div>
                    <button type="button"
                            data-evals-rerun
                            class="opacity-0 group-hover:opacity-100 absolute top-1 right-1 text-xs text-gray-400 hover:text-blue-600 transition-opacity"
                            title="Re-run cell">&#x21BB;</button>
                  {% else %}
                    <span class="text-xs text-gray-400 italic">&mdash;</span>
                  {% endif %}
                </td>
              {% endfor %}
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}
</section>

{# Hidden modal scaffolding -- shown by the matrix JS on Add column / re-run #}
<div id="evals-modal-{{ scan_id }}"
     data-evals-modal
     class="hidden fixed inset-0 z-50 bg-black/40 flex items-center justify-center">
  <div class="bg-white rounded-lg shadow-xl p-6 max-w-md w-full">
    <h3 class="text-lg font-semibold text-gray-900 mb-2" data-evals-modal-title>Run eval</h3>
    <div class="text-sm text-gray-600 mb-4" data-evals-modal-body></div>
    <div class="flex justify-end gap-2">
      <button type="button" data-evals-modal-cancel
              class="px-3 py-1.5 text-sm border border-gray-300 rounded hover:bg-gray-50">Cancel</button>
      <button type="button" data-evals-modal-confirm
              class="px-4 py-1.5 text-sm font-medium bg-blue-600 text-white rounded hover:bg-blue-700">Confirm</button>
    </div>
  </div>
</div>

{# T50.2: side-by-side diff modal. Renders both panes via the T31           #}
{# llm_chat_view component (window.llmChatRender). One instance per matrix  #}
{# -- the cell click handlers below find this by scoped id.                 #}
<div id="eval-diff-modal-{{ scan_id }}"
     data-eval-diff-modal
     class="hidden fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
  <div class="bg-white rounded-lg shadow-xl w-full max-w-7xl mx-auto max-h-[90vh] overflow-hidden flex flex-col">
    <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" data-diff-modal-title>Eval comparison</h2>
      <button type="button"
              data-diff-modal-close
              class="text-gray-400 hover:text-gray-600 text-2xl leading-none"
              aria-label="Close">&times;</button>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-6 overflow-y-auto flex-1 bg-gray-50">
      <div>
        <h3 class="text-sm font-semibold text-gray-700 mb-2">Original (production)</h3>
        <div class="text-xs text-gray-500 mb-3" data-diff-meta-original>&mdash;</div>
        <div data-diff-pane-original>
          <div class="llm-chat-view bg-white border border-gray-200 rounded-lg p-4"
               data-diff-chat="original">
            <div class="flex items-center justify-between mb-2">
              <div class="text-xs text-gray-500" data-chat-meta></div>
              <button type="button" class="text-xs text-blue-600 hover:underline" data-toggle-raw>View raw JSON</button>
            </div>
            <div class="chat-bubbles space-y-3" data-chat-bubbles>
              <div class="text-sm text-gray-400 italic">Loading&hellip;</div>
            </div>
            <pre class="hidden bg-gray-900 text-gray-100 text-xs p-4 rounded overflow-x-auto max-w-full whitespace-pre" data-raw-json></pre>
          </div>
        </div>
      </div>
      <div>
        <h3 class="text-sm font-semibold text-gray-700 mb-2">Eval</h3>
        <div class="text-xs text-gray-500 mb-3" data-diff-meta-eval>&mdash;</div>
        <div data-diff-pane-eval>
          <div class="llm-chat-view bg-white border border-gray-200 rounded-lg p-4"
               data-diff-chat="eval">
            <div class="flex items-center justify-between mb-2">
              <div class="text-xs text-gray-500" data-chat-meta></div>
              <button type="button" class="text-xs text-blue-600 hover:underline" data-toggle-raw>View raw JSON</button>
            </div>
            <div class="chat-bubbles space-y-3" data-chat-bubbles>
              <div class="text-sm text-gray-400 italic">Loading&hellip;</div>
            </div>
            <pre class="hidden bg-gray-900 text-gray-100 text-xs p-4 rounded overflow-x-auto max-w-full whitespace-pre" data-raw-json></pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function(){
  // T48 matrix client. Polls the status endpoint every 3s when any
  // cell is queued/running and updates in place. Add-column + re-run
  // both go through a single confirm modal.
  const matrix = document.querySelector('[data-evals-matrix][data-scan-id="{{ scan_id }}"]');
  if (!matrix) return;
  const scanId = matrix.dataset.scanId;
  const modal = document.getElementById('evals-modal-' + scanId);
  const modalTitle = modal.querySelector('[data-evals-modal-title]');
  const modalBody = modal.querySelector('[data-evals-modal-body]');
  const modalConfirm = modal.querySelector('[data-evals-modal-confirm]');
  const modalCancel = modal.querySelector('[data-evals-modal-cancel]');
  const csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';

  function hideModal() { modal.classList.add('hidden'); }
  function showModal(title, body, onConfirm) {
    modalTitle.textContent = title;
    modalBody.innerHTML = body;
    modalConfirm.onclick = function(){ hideModal(); onConfirm(); };
    modal.classList.remove('hidden');
  }
  modalCancel.onclick = hideModal;

  async function poll() {
    try {
      const resp = await fetch('/admin/evals/' + encodeURIComponent(scanId) + '/status', {credentials: 'same-origin'});
      if (!resp.ok) return;
      const data = await resp.json();
      // Update each cell's data-status attribute when it changed; a
      // change to "complete" or "errored" reloads the page so the
      // server-rendered cell content reflects the new cost/latency.
      let needsReload = false;
      (data.eval_states || []).forEach(function(s){
        const sel = '[data-evals-cell][data-prompt-name="' + s.prompt_name + '"][data-model="' + s.model + '"][data-provider="' + s.provider + '"]';
        const cell = matrix.querySelector(sel);
        if (!cell) return;
        const prev = cell.dataset.status;
        if (prev !== s.status) {
          cell.dataset.status = s.status;
          if (s.status === 'complete' || s.status === 'errored') needsReload = true;
        }
      });
      if (needsReload) window.location.reload();
    } catch (e) { /* noop */ }
  }
  function anyInFlight() {
    return !!matrix.querySelector('[data-evals-cell][data-status="queued"], [data-evals-cell][data-status="running"]');
  }
  if (anyInFlight()) setInterval(poll, 3000);

  // Re-run handler on each cell's ↻ button.
  matrix.querySelectorAll('[data-evals-rerun]').forEach(function(btn){
    btn.addEventListener('click', function(){
      const cell = btn.closest('[data-evals-cell]');
      if (!cell) return;
      const promptName = cell.dataset.promptName;
      const model = cell.dataset.model;
      const provider = cell.dataset.provider;
      showModal(
        'Re-run cell',
        'Re-run <code>' + promptName + '</code> on <code>' + model + '</code>?<br>' +
        'Existing result moves to history; new result becomes current.',
        async function(){
          const resp = await fetch('/admin/evals/rerun-cell', {
            method: 'POST',
            credentials: 'same-origin',
            headers: {'Content-Type': 'application/json', 'X-CSRF-Token': csrf},
            body: JSON.stringify({scan_id: scanId, prompt_name: promptName, model: model, provider: provider}),
          });
          if (resp.ok) window.location.reload();
          else alert('Error: ' + (await resp.text()));
        }
      );
    });
  });

  // T48.1: the "+ Add column" button now opens the shared
  // ``partials/eval_new_modal.html`` (data-action="open-eval-modal"
  // is bound by the modal partial's own script). The legacy
  // chained browser-native prompts have been removed -- the modal
  // owns scan id (fixed via data-fixed-scan-id), model dropdown, and
  // prompts multi-select, plus client-side validation + the
  // X-CSRF-Token POST to /admin/evals/run.

  // T50.2: cell-click -> diff modal. Any cell with data-cell-diff is
  // clickable; we fetch the cell-detail JSON, render both panes via
  // window.llmChatRender (T31 component), and show the modal. Falls
  // back gracefully when the original S3 dump is missing.
  const diffModal = document.getElementById('eval-diff-modal-' + scanId);
  if (diffModal) {
    const titleEl = diffModal.querySelector('[data-diff-modal-title]');
    const metaOriginalEl = diffModal.querySelector('[data-diff-meta-original]');
    const metaEvalEl = diffModal.querySelector('[data-diff-meta-eval]');
    const chatOriginal = diffModal.querySelector('[data-diff-chat="original"]');
    const chatEval = diffModal.querySelector('[data-diff-chat="eval"]');

    function fmtMeta(side) {
      if (!side) return '(no row)';
      const cost = '$' + (Number(side.cost_usd || 0)).toFixed(6);
      const tokens = 'in=' + (side.input_tokens || 0) + ' out=' + (side.output_tokens || 0);
      const bits = [
        side.provider || '?',
        side.model || '?',
        cost,
        (side.latency_ms || 0) + 'ms',
        tokens,
      ];
      if (side._note) bits.push('note: ' + side._note);
      return bits.join(' · ');
    }
    function clearChat(container) {
      // Reset the "data-rendered" sentinel + Loading message so the
      // T31 component re-renders on every modal open.
      if (!container) return;
      container.dataset.rendered = '';
      const bubbles = container.querySelector('[data-chat-bubbles]');
      if (bubbles) bubbles.innerHTML = '<div class="text-sm text-gray-400 italic">Loading&hellip;</div>';
      const raw = container.querySelector('[data-raw-json]');
      if (raw) { raw.textContent = ''; raw.classList.add('hidden'); }
      const meta = container.querySelector('[data-chat-meta]');
      if (meta) meta.innerHTML = '';
      if (bubbles) bubbles.classList.remove('hidden');
    }
    function hideDiff() { diffModal.classList.add('hidden'); }

    diffModal.querySelectorAll('[data-diff-modal-close]').forEach(function(btn){
      btn.addEventListener('click', hideDiff);
    });
    diffModal.addEventListener('click', function(e){
      if (e.target === diffModal) hideDiff();
    });
    document.addEventListener('keydown', function(e){
      if (e.key === 'Escape' && !diffModal.classList.contains('hidden')) hideDiff();
    });

    matrix.querySelectorAll('[data-cell-diff]').forEach(function(cell){
      cell.addEventListener('click', async function(e){
        // Don't fire when the inner re-run button was clicked.
        if (e.target.closest('[data-evals-rerun]')) return;
        const evalId = cell.dataset.cellDiff;
        if (!evalId) return;
        clearChat(chatOriginal);
        clearChat(chatEval);
        if (titleEl) titleEl.textContent = 'Loading comparison…';
        diffModal.classList.remove('hidden');
        try {
          const resp = await fetch(
            '/admin/evals/' + encodeURIComponent(scanId) + '/cell/' + encodeURIComponent(evalId),
            { credentials: 'same-origin' }
          );
          if (!resp.ok) {
            let detail = 'HTTP ' + resp.status;
            try { const j = await resp.json(); if (j && j.detail) detail = j.detail; } catch (_) {}
            if (titleEl) titleEl.textContent = 'Failed to load: ' + detail;
            return;
          }
          const data = await resp.json();
          const ev = data.eval || {};
          const orig = data.original || null;
          if (titleEl) titleEl.textContent = (ev.prompt_name || 'eval') + ' — comparison';
          if (metaOriginalEl) metaOriginalEl.textContent = fmtMeta(orig);
          if (metaEvalEl) metaEvalEl.textContent = fmtMeta(ev);

          if (typeof window.llmChatRender !== 'function') {
            // Defensive: should never fire on a page that includes the
            // matrix partial (the layout always pulls /static/llm_chat_view.js
            // because of the T31 chat-view dependency).
            return;
          }
          // Original pane -- empty/missing pieces still render gracefully
          // (the T31 component skips bubbles for empty fields).
          const originalDump = orig ? {
            system: orig.system_prompt_snapshot || '',
            user: orig.user_prompt_snapshot || '',
            response: orig.response_body == null ? null : orig.response_body,
            error: null,
            metadata: {
              prompt_name: orig.prompt_name,
              model: orig.model,
              input_tokens: orig.input_tokens,
              output_tokens: orig.output_tokens,
            },
          } : { system: '', user: '', response: null, error: 'No matching production llm_calls row.' };
          const evalDump = {
            system: ev.system_prompt_snapshot || '',
            user: ev.user_prompt_snapshot || '',
            response: ev.response_body == null ? null : ev.response_body,
            error: ev.error_message || null,
            metadata: {
              prompt_name: ev.prompt_name,
              model: ev.model,
              input_tokens: ev.input_tokens,
              output_tokens: ev.output_tokens,
            },
          };
          window.llmChatRender(chatOriginal, originalDump);
          window.llmChatRender(chatEval, evalDump);
        } catch (err) {
          if (titleEl) titleEl.textContent = 'Error: ' + (err && err.message ? err.message : String(err));
        }
      });
    });
  }
})();
</script>