{% extends "base.html" %}
{% block title %}Studies · e2er{% endblock %}

{% block content %}
<div class="list-head">
  <h1>Studies</h1>
  <form class="search" method="get" action="/" role="search">
    {% if show_archived %}<input type="hidden" name="archived" value="1" />{% endif %}
    <input type="search" name="q" value="{{ q }}" placeholder="Search questions and titles" aria-label="Search studies" />
  </form>
</div>

<div class="list-tools">
  <span class="muted">
    {{ studies | length }} stud{{ "y" if studies | length == 1 else "ies" }} · {{ n_attempts }} run{{ "" if n_attempts == 1 else "s" }}
    {% if q %} matching “{{ q }}” · <a href="/{% if show_archived %}?archived=1{% endif %}">clear</a>{% endif %}
  </span>
  <span class="tools-right">
    {% if show_archived %}
      <a href="/{% if q %}?q={{ q | urlencode }}{% endif %}">Hide archived</a>
    {% elif n_archived %}
      <a href="/?archived=1{% if q %}&q={{ q | urlencode }}{% endif %}">Show archived ({{ n_archived }})</a>
    {% endif %}
    <button type="button" class="btn btn-small" id="bulk-open">Archive failed and cancelled runs</button>
  </span>
</div>

<div id="bulk-panel" class="confirm-panel" hidden>
  <p id="bulk-text" class="confirm-text">Counting…</p>
  <ul id="bulk-list" class="confirm-list"></ul>
  <div class="confirm-actions">
    <button type="button" class="btn-danger btn-small" id="bulk-go" disabled>Archive</button>
    <button type="button" class="btn btn-small" id="bulk-cancel">Cancel</button>
  </div>
</div>
<p id="list-msg" class="msg" role="status"></p>

{% if not studies %}
  {% if q %}
    <p class="empty">No study matches “{{ q }}”.</p>
  {% else %}
    <p class="empty">No studies yet. <a href="/papers/new">Start one →</a></p>
  {% endif %}
{% else %}
<table class="papers studies">
  <thead>
    <tr>
      <th>Study</th>
      <th>Runs</th>
      <th>Latest</th>
      {% if show_archived %}<th></th>{% endif %}
    </tr>
  </thead>
  <tbody>
    {% for s in studies %}
    <tr{% if show_archived and s.archived == s.total %} class="is-archived"{% endif %}>
      <td class="c-study">
        <a href="/studies/{{ s.key }}{% if show_archived %}?archived=1{% endif %}">{{ s.title }}</a>
        <span class="study-tpl">{{ s.template | template_label }}</span>
      </td>
      <td class="c-attempts">
        <span class="n">{{ s.attempts }} run{{ "" if s.attempts == 1 else "s" }}</span>
        <span class="muted summary">{{ s.summary }}{% if not show_archived and s.archived %} · {{ s.archived }} archived{% endif %}</span>
      </td>
      <td class="c-latest">
        {% if s.latest_status %}<span class="status status-{{ s.latest_status }}">{{ s.latest_status | status_words }}</span>{% endif %}
        <span class="muted">{{ (s.latest_date or "")[:16] }}</span>
        {% if s.latest_plan_limit %}
          <span class="plan-limit">{{ s.latest_plan_limit }}</span>
          <button type="button" class="btn-primary btn-small" data-resume="{{ s.latest_id }}">Resume</button>
        {% endif %}
      </td>
      {% if show_archived %}
      <td class="c-action">
        {% if s.has_archived %}
          <button type="button" class="btn btn-small" data-unarchive-study="{{ s.key }}">Unarchive</button>
        {% endif %}
      </td>
      {% endif %}
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}

<script>
(() => {
  const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
  const call = (method, url, body) => e2er.call(method, url, body);
  const msg = document.getElementById('list-msg');
  const panel = document.getElementById('bulk-panel');
  const text = document.getElementById('bulk-text');
  const list = document.getElementById('bulk-list');
  const go = document.getElementById('bulk-go');
  let ids = [];

  document.getElementById('bulk-open').addEventListener('click', async () => {
    panel.hidden = false; go.disabled = true; list.innerHTML = ''; text.textContent = 'Counting…';
    try {
      const d = await call('GET', '/api/archive/failed');
      ids = d.attempts.map((a) => a.id);
      if (!d.count) { text.textContent = 'There are no failed or cancelled runs to archive.'; return; }
      text.innerHTML = '<strong>Archive ' + d.count + ' failed and cancelled run' + (d.count === 1 ? '' : 's') + '?</strong> ' +
        'They are hidden from this list. Nothing is deleted: their files and records stay, and “Show archived” brings them back.';
      const byStudy = {};
      d.attempts.forEach((a) => { (byStudy[a.study_title] = byStudy[a.study_title] || []).push('run ' + a.version + ', ' + (a.status_words || a.status)); });
      list.innerHTML = Object.entries(byStudy).map(([t, vs]) => '<li><span class="cl-title">' + esc(t) + '</span> <span class="muted">' + esc(vs.join(', ')) + '</span></li>').join('');
      go.textContent = 'Archive ' + d.count;
      go.disabled = false;
    } catch (e) { text.textContent = e.message; }
  });
  document.getElementById('bulk-cancel').addEventListener('click', () => { panel.hidden = true; });
  go.addEventListener('click', async () => {
    go.disabled = true;
    try {
      const d = await call('POST', '/api/archive/failed', { ids });
      panel.hidden = true;
      msg.textContent = 'Archived ' + d.archived + ' run' + (d.archived === 1 ? '' : 's') + '. Nothing was deleted.';
      setTimeout(() => location.reload(), 700);
    } catch (e) { text.textContent = e.message; go.disabled = false; }
  });
  document.querySelectorAll('[data-resume]').forEach((b) => b.addEventListener('click', async () => {
    b.disabled = true;
    try { await call('POST', '/api/papers/' + b.dataset.resume + '/resume'); msg.textContent = 'Resumed.'; setTimeout(() => location.reload(), 700); }
    catch (e) { msg.textContent = e.message; b.disabled = false; }
  }));
  document.querySelectorAll('[data-unarchive-study]').forEach((b) => b.addEventListener('click', async () => {
    b.disabled = true;
    try { await call('POST', '/api/studies/' + b.dataset.unarchiveStudy + '/unarchive'); location.reload(); }
    catch (e) { msg.textContent = e.message; b.disabled = false; }
  }));
})();
</script>
{% endblock %}