{% extends "base.html" %}
{% block title %}Sample Inspection - lm-eval-ledger{% endblock %}
{% block content %}
<h1>Sample Inspection</h1>

<form class="panel" method="get" action="{{ url_for('samples') }}">
  <div class="lbhead"><span class="lbtitle">Sample comparison</span></div>
  <div class="controls">
    <label>mode
      <select name="mode" id="mode-sel">
        <option value="browse" {{ "selected" if mode == "browse" }}>browse</option>
        <option value="pairwise" {{ "selected" if mode == "pairwise" }}>pairwise (vertical)</option>
        <option value="wrong" {{ "selected" if mode == "wrong" }}>always wrong</option>
        <option value="right" {{ "selected" if mode == "right" }}>always right</option>
      </select></label>
    <label class="notbrowse">task
      <select name="task" id="task-sel">
        <option value="" id="all-tasks-opt">(all tasks)</option>
        {% for t in tasks %}
        <option {{ "selected" if args.get("task") == t }}>{{ t }}</option>
        {% endfor %}
      </select></label>
    <label class="browse-only">show
      <select name="scope" id="scope-sel">
        <option value="">(everything)</option>
        {% for g in scope_groups or [] %}
        <optgroup label="run {{ g.run_id }} · {{ g.run_name }}">
          {% for o in g.benches %}
          <option value="b:{{ o.benchmark_id }}"
            {{ "selected" if scope_value == "b:" ~ o.benchmark_id }}>
            {{ o.model_tag }} · {{ o.task }}({{ o.fewshot_k }}) · acc {{ o.acc if o.acc is not none else "…" }}</option>
          {% endfor %}
        </optgroup>
        {% endfor %}
        <optgroup label="by task (all runs & models)">
          {% for t in scope_tasks or [] %}
          <option value="t:{{ t }}" {{ "selected" if scope_value == "t:" ~ t }}>{{ t }}</option>
          {% endfor %}
        </optgroup>
        <optgroup label="by run (all its benchmarks)">
          {% for r in run_list %}
          <option value="r:{{ r.run_id }}" {{ "selected" if scope_value == "r:" ~ r.run_id }}>
            run {{ r.run_id }} · {{ r.run_name }}</option>
          {% endfor %}
        </optgroup>
        <optgroup label="by model (all tasks & runs)">
          {% for m in scope_models or [] %}
          <option value="m:{{ m }}" {{ "selected" if scope_value == "m:" ~ m }}>{{ m }}</option>
          {% endfor %}
        </optgroup>
      </select></label>
    <label class="browse-only">outcome
      <select name="outcome">
        <option value="">(all)</option>
        <option value="wrong" {{ "selected" if args.get("outcome") == "wrong" }}>wrong only</option>
        <option value="right" {{ "selected" if args.get("outcome") == "right" }}>right only</option>
      </select></label>
    <label class="pair-only">benchmark A
      <select name="a">{% for o in pair_benches or benches %}
        <option value="{{ o.benchmark_id }}" data-task="{{ o.task }}"
          {{ "selected" if args.get("a")|string == o.benchmark_id|string }}>
          run {{ o.run_id }} · {{ o.model_tag }} · {{ o.task }}({{ o.fewshot_k }}) · acc {{ o.acc if o.acc is not none else "…" }}</option>
      {% endfor %}</select></label>
    <label class="pair-only">benchmark B
      <select name="b">{% for o in pair_benches or benches %}
        <option value="{{ o.benchmark_id }}" data-task="{{ o.task }}"
          {{ "selected" if args.get("b")|string == o.benchmark_id|string }}>
          run {{ o.run_id }} · {{ o.model_tag }} · {{ o.task }}({{ o.fewshot_k }}) · acc {{ o.acc if o.acc is not none else "…" }}</option>
      {% endfor %}</select></label>
    <button type="submit" class="notcons">Apply</button>
  </div>
  <label class="benchbox cons-only"><span class="benchcap">benchmarks (none checked = all)</span>
    <div class="benchlist">
      {% for o in benches %}
      <label class="check" data-task="{{ o.task }}">
        <input type="checkbox" name="bs" value="{{ o.benchmark_id }}"
          {{ "checked" if o.benchmark_id|string in (sel or []) }}>
        <span>run {{ o.run_id }} · {{ o.model_tag }} · {{ o.task }}({{ o.fewshot_k }}) · acc {{ o.acc if o.acc is not none else "…" }}</span>
      </label>
      {% endfor %}
    </div>
  </label>
  <div class="cons-only applyrow">
    <button type="submit">Apply</button>
  </div>
</form>

{% if mode == "pairwise" and pairs is not none %}
<section class="panel">
  <div class="lbhead"><span class="lbtitle">Pairwise comparison</span>
    <a href="{{ url_for('samples', **swap_args) }}">⇄ swap A/B</a></div>
  <div class="pairwho">
    <span class="tag a">A</span> {{ label_a }}
    <span class="muted">→</span>
    <span class="tag b">B</span> {{ label_b }}
  </div>
  <div class="pairbtns">
    {% for key, text in [("all", "All"), ("improved", "Improved – B fixed"),
                         ("regressed", "Regressed – B broke"),
                         ("answers", "Same score, answer changed"),
                         ("same", "Unchanged")] %}
    <a class="chip {{ 'active' if cat == key }}"
       href="{{ url_for('samples', mode='pairwise', a=a, b=b, cat=key) }}">{{ text }}
       <span>{{ counts.values()|sum if key == "all" else counts[key] }}</span></a>
    {% endfor %}
  </div>
</section>
<table>
  <thead><tr><th>sample</th><th>gold</th><th>A answered</th><th>B answered</th>
    <th>A</th><th>B</th><th>Δ</th></tr></thead>
  <tbody>
  {% for c, r in pairs %}
    <tr class="{{ 'improved' if c == 'improved' else 'regressed' if c == 'regressed' else '' }}">
      <td><a href="{{ url_for('sample', pk=r.pk_a) }}">{{ r.sample_id|trunc(30) }}</a></td>
      <td>{{ r.gold|trunc(100) }}</td>
      <td>{{ r.ans_a|trunc(80) }}</td>
      <td>{{ r.ans_b|trunc(80) }}</td>
      <td>{{ "%g"|format(r.score_a) }}</td>
      <td>{{ "%g"|format(r.score_b) }}</td>
      <td class="badge">{{ {"improved": "IMPROVED", "regressed": "REGRESSED",
                            "answers": "≠", "same": "="}[c] }}</td>
    </tr>
  {% endfor %}
  </tbody>
</table>

{% elif mode in ("wrong", "right") and groups is defined %}
<p class="summary"><strong>{{ groups|length }}</strong> samples always
  {{ mode }} in every {{ "selected benchmark" if sel else "benchmark" }}
  covering them{{ " (%d selected)"|format(sel|length) if sel }}.</p>
<table>
  <thead><tr><th>task</th><th>sample</th><th>evals</th><th>models</th><th>gold</th></tr></thead>
  <tbody>
  {% for g in groups %}
    <tr>
      <td>{{ g.task }}</td>
      <td><a href="{{ url_for('sample', pk=g.example_pk) }}">{{ g.sample_id|trunc(30) }}</a></td>
      <td>{{ g.n_evals }}</td>
      <td>{{ g.n_models }}</td>
      <td>{{ g.gold|trunc(120) }}</td>
    </tr>
  {% endfor %}
  </tbody>
</table>

{% elif mode == "browse" and rows is defined %}
<p class="summary">Showing
  {% if chips %}
    {% for label, remove_url in chips %}
    <span class="chip">{{ label }} <a class="chip-x" href="{{ remove_url }}"
      title="remove this filter">×</a></span>
    {% endfor %}
  {% else %}<span class="chip">everything</span>{% endif %}
  — <strong>{{ total }}</strong> samples · page {{ page }}
  of {{ ((total - 1) // page_size) + 1 if total else 1 }}
  {% if page > 1 %}<a href="{{ url_for('samples', **dict(args, page=page-1)) }}">← prev</a>{% endif %}
  {% if page * page_size < total %}<a href="{{ url_for('samples', **dict(args, page=page+1)) }}">next →</a>{% endif %}
</p>
<table class="browse">
  <thead><tr><th>sample</th><th>model / task</th>
    <th>prompt</th><th>response</th>
    <th>gold</th><th>extracted</th><th>stop</th><th>score</th></tr></thead>
  <tbody>
  {% for r in rows %}
    {% set eff = (r.verified_score if r.verified_score is not none else r.score) or 0 %}
    <tr class="{{ 'improved' if eff >= 1 else 'regressed' }} rowlink"
        data-href="{{ url_for('sample', pk=r.sample_pk) }}">
      <td><a href="{{ url_for('sample', pk=r.sample_pk) }}">{{ r.sample_id|trunc(24) }}</a>
        <div class="muted small">bench {{ r.benchmark_id }}</div></td>
      <td>{{ r.model_tag }}<div class="muted small">{{ r.task }}</div></td>
      <td class="cell-text">
        {% for iid in r.image_ids|imgids %}
        <a href="{{ url_for('image', image_id=iid) }}" target="_blank"><img
           class="thumb" src="{{ url_for('image', image_id=iid) }}" alt="img"></a>
        {% endfor %}
        <div class="clamp">{{ r.prompt_snip }}</div></td>
      <td class="cell-text"><div class="clamp tall">{{ r.response_snip }}</div></td>
      <td class="cell-text"><div class="clamp">{{ r.gold|trunc(200) }}</div></td>
      <td>{{ r.extracted|trunc(40) }}</td>
      <td>{{ r.stop_reason|trunc(30) }}</td>
      <td>{{ "%g"|format(r.score) }}{% if r.verified_score is not none %}
        <div class="muted small">v {{ "%g"|format(r.verified_score) }}</div>{% endif %}</td>
    </tr>
  {% endfor %}
  </tbody>
</table>
{% endif %}

<script>
const modeSel = document.getElementById("mode-sel");
const taskSel = document.getElementById("task-sel");
function syncUi() {
  const m = modeSel.value;
  document.querySelectorAll(".pair-only").forEach(e =>
    e.style.display = m === "pairwise" ? "" : "none");
  document.querySelectorAll(".cons-only").forEach(e =>
    e.style.display = (m === "wrong" || m === "right") ? "" : "none");
  document.querySelectorAll(".notcons").forEach(e =>
    e.style.display = (m === "wrong" || m === "right") ? "none" : "");
  document.querySelectorAll(".browse-only").forEach(e =>
    e.style.display = m === "browse" ? "" : "none");
  document.querySelectorAll(".notbrowse").forEach(e =>
    e.style.display = m === "browse" ? "none" : "");
  if (m === "pairwise") {
    // pairwise joins samples between two benchmarks of the SAME task:
    // force a task choice, offering only tasks with 2+ scored benchmarks
    const counts = {};
    document.querySelectorAll('select[name="a"] option[data-task]')
      .forEach(o => counts[o.dataset.task] = (counts[o.dataset.task] || 0) + 1);
    let firstValid = null;
    taskSel.querySelectorAll("option").forEach(o => {
      const ok = o.value !== "" && (counts[o.value] || 0) >= 2;
      o.hidden = !ok;
      if (ok && firstValid === null) firstValid = o.value;
    });
    if (!taskSel.value || (counts[taskSel.value] || 0) < 2) {
      if (firstValid !== null) taskSel.value = firstValid;
    }
  } else {
    document.getElementById("all-tasks-opt").hidden = false;
  }
  const t = taskSel.value;
  document.querySelectorAll("[data-task]").forEach(e => {
    if (e.tagName === "OPTION") e.hidden = t !== "" && e.dataset.task !== t;
    else e.hidden = t !== "" && e.dataset.task !== t;
  });
}
// Whole-row click opens the sample detail. Real links inside the row
// (sample id, image thumbnails) keep their own behavior, and a drag
// that selected text is not treated as a click.
document.querySelectorAll("tr.rowlink").forEach(tr =>
  tr.addEventListener("click", e => {
    if (e.target.closest("a")) return;
    if (window.getSelection().toString()) return;
    window.location = tr.dataset.href;
  }));
modeSel.addEventListener("change", syncUi);
taskSel.addEventListener("change", syncUi);
syncUi();
// In browse mode the single scope select replaces the task box (task
// remains for pairwise/consistency); scope and outcome apply on change.
// Selecting a scope supersedes any legacy per-field params in the URL.
document.querySelectorAll("#scope-sel, .browse-only select").forEach(sel =>
  sel.addEventListener("change", () => {
    if (modeSel.value !== "browse") return;
    ["task", "run", "model", "benchmark_id"].forEach(n => {
      const el = sel.form.querySelector(`[name="${n}"]`);
      if (el && el.id !== "task-sel") el.remove();
      else if (el) el.value = "";
    });
    sel.form.submit();
  }));
</script>
{% endblock %}