{% extends "base.html" %}
{% from "fragments/_chips.html" import chip %}
{% from "legacy_runs/_run_row.html" import run_row %}
{% from "legacy_runs/_live_poller.html" import poller %}
{% block title %}Voxint — runs{% endblock %}

{% block cb_breadcrumb %}runs /{% if show_archived %} <span class="oc-muted">archived</span>{% endif %}{% endblock %}
{% block cb_summary %}
{%- if show_archived -%}
  Archived runs. <a href="{{ archived_toggle_url }}">Back to active</a>
{%- else -%}
  {{ pipeline_summary }}
  · <a href="{{ settings_status_url }}">Pipeline status</a>
{%- endif -%}
{% endblock %}
{% block cb_actions %}
{% if shell.can_write %}
{% if shell.media_enabled %}
<a class="cb-btn cb-btn-primary" href="/media">+ Add media</a>
{% else %}
<a class="cb-btn cb-btn-primary" href="#add-media">+ Add media</a>
{% endif %}
{% endif %}
{% endblock %}

{% block body %}
{% if not shell.media_enabled and shell.can_write %}
<section id="add-media" class="oc-section">
  <h2 class="oc-section-title">ADD MEDIA</h2>
  <form method="post" action="/submit" enctype="multipart/form-data" class="upload">
    <input type="hidden" name="submission_id" value="{{ submission_id }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_submit }}">
    <label>Upload media
      <input type="file" name="file" required>
    </label>
    <button type="submit" class="primary">Submit for transcription</button>
  </form>

  {% if ytdlp_enabled %}
  <form method="post" action="/fetch" class="upload">
    <input type="hidden" name="submission_id" value="{{ fetch_submission_id }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_fetch }}">
    <label>Fetch from URL
      <input type="url" name="url" placeholder="https://…" required>
    </label>
    <button type="submit">Fetch &amp; transcribe</button>
  </form>
  <p class="oc-muted">Fetching a URL lets the downloader contact other sites, including
  ones a link redirects to. If you fetch links you don't fully trust, run the
  restricted URL-download overlay (<code>compose.ytdlp-egress.yaml</code>) — see the
  operations guide, &ldquo;URL ingestion &amp; egress security&rdquo;.</p>
  {% else %}
  <p class="oc-muted">URL ingestion is disabled.</p>
  {% endif %}
</section>
{% endif %}

{% for d in degraded %}
<div class="degraded-banner" role="alert">
  <div class="db-text">
    <strong>{{ d.consequence }}</strong> {{ d.detail }}
  </div>
  <a class="cb-btn cb-btn-secondary" href="/settings">Turn on in Settings</a>
</div>
{% endfor %}

{% if dashboard %}
{% include "legacy_runs/_progress_strip.html" %}
{% endif %}

<section class="oc-section" aria-label="Runs">
  <h2 class="oc-section-title">RUNS</h2>

  {% if queue_paused %}
  <div class="degraded-banner" role="alert" style="margin-bottom:var(--space-3)">
    <div class="db-text">
      <strong>Queue paused.</strong> No new runs will start processing. Runs already in progress will finish.
    </div>
    <form method="post" action="/queue/resume" style="display:inline">
      <input type="hidden" name="csrf_token" value="{{ csrf_queue_resume }}">
      <button type="submit" class="cb-btn cb-btn-primary">Resume queue</button>
    </form>
  </div>
  {% elif not show_archived %}
  <form method="post" action="/queue/pause" style="display:inline;float:right;margin-top:-2rem">
    <input type="hidden" name="csrf_token" value="{{ csrf_queue_pause }}">
    <button type="submit" class="cb-btn cb-btn-secondary" style="font-size:var(--t-sm)">Pause queue</button>
  </form>
  {% endif %}

  <nav class="filter-tabs" aria-label="Lifecycle view">
    {% for view_val, view_label, view_url in view_tabs %}
    <a href="{{ view_url }}"
       {% if view_val == active_view %}aria-current="page"{% endif %}>{{ view_label }}</a>
    {% endfor %}
    <span class="ft-spacer"></span>
    {% if not show_archived %}
    <a href="{{ archived_toggle_url }}" style="font-size:var(--t-sm);color:var(--accent);text-decoration:none">Archived →</a>
    {% endif %}
  </nav>

  <nav class="filter-tabs" aria-label="Search mode">
    <a href="/runs{% if filters.q %}?q={{ filters.q|urlencode }}{% endif %}" aria-current="page">Exact</a>
    <a href="/search{% if filters.q %}?q={{ filters.q|urlencode }}{% endif %}">Meaning</a>
  </nav>

  {# Collapsible filter bar: closed by default, auto-opens when any filter is active. #}
  {% set has_active_filters = status or review or filters.q or filters.speaker_id or filters.source or filters.created_from or filters.created_to or filters.language %}
  <details class="runs-filters" {% if has_active_filters %}open{% endif %}>
    <summary>Filter{% if has_active_filters %} (active){% endif %}</summary>
    <form method="get" action="/runs" class="filters">
      {% if show_archived %}<input type="hidden" name="archived" value="1">{% endif %}
      {% if active_view != LifecycleView.ALL %}<input type="hidden" name="view" value="{{ active_view.value }}">{% endif %}
      <label>Status
        <select name="status">
          <option value="">all</option>
          {% for s in statuses %}
          <option value="{{ s.value }}"{% if status == s %} selected{% endif %}>{{ s.value }}</option>
          {% endfor %}
        </select>
      </label>
      <label>Review
        <select name="review">
          <option value="">all</option>
          {% for r in reviews %}
          <option value="{{ r.value }}"{% if review == r %} selected{% endif %}>{{ r.value }}</option>
          {% endfor %}
        </select>
      </label>
      <button type="submit">Filter</button>
      {% if has_active_filters %}
      <a href="{{ clear_url }}" class="oc-muted" style="font-size:var(--t-sm)">Clear</a>
      {% endif %}
      {% set has_more_filters = filters.q or filters.speaker_id or filters.source or filters.created_from or filters.created_to or filters.language %}
      <details class="runs-more-filters"{% if has_more_filters %} open{% endif %}>
        <summary>More filters{% if has_more_filters %} (active){% endif %}</summary>
        <div class="filters" style="margin-top: .5rem;">
          <label>Transcript
            <input type="search" name="q" value="{{ filters.q or "" }}"
                   placeholder='words, "a phrase", -excluded, this OR that'>
          </label>
          <label>Speaker
            <select name="speaker">
              <option value="">all</option>
              {% for sp in facet_speakers %}
              <option value="{{ sp.id }}"{% if filters.speaker_id == sp.id %} selected{% endif %}>
                {{- sp.display_name }}{% if sp.deleted_at %} (archived){% endif -%}
              </option>
              {% endfor %}
            </select>
          </label>
          <label>Source
            <input type="text" name="source" value="{{ filters.source or "" }}" placeholder="path contains…">
          </label>
          <label>Detected language
            <select name="language">
              <option value="">all</option>
              {% for lang in facet_languages %}
              <option value="{{ lang.code }}"{% if filters.language == lang.code %} selected{% endif %}>{{ lang.label }}</option>
              {% endfor %}
            </select>
          </label>
          <label>From
            <input type="date" name="created_from"
                   value="{{ filters.created_from.isoformat() if filters.created_from else "" }}">
          </label>
          <label>To
            <input type="date" name="created_to"
                   value="{{ filters.created_to.isoformat() if filters.created_to else "" }}">
          </label>
        </div>
      </details>
    </form>
  </details>

  {% if not page.items %}
  <p class="oc-muted">No runs match{% if has_active_filters %} these filters{% endif %}{% if active_view != LifecycleView.ALL %} in this view{% endif %}.</p>
  {% else %}
  <div class="grid-table" style="grid-template-columns: 1fr auto auto auto auto auto auto;" role="region" aria-label="Runs">
    <div class="gt-header">
      <span>MEDIA</span>
      <span>STATUS</span>
      <span>REVIEW</span>
      <span>LANGUAGE</span>
      <span>TOOK</span>
      <span>CREATED</span>
      <span></span>
    </div>
    {% if grouped_items is not none %}
    {# Failed tab: grouped rendering with bulk-retry forms. #}
    {% for entry in grouped_items %}
      {% if entry.error_label is defined %}
      {# FailedRunGroup: summary row with bulk retry form. #}
      <div class="gt-row" style="background:var(--surface-2, var(--bg-alt, #f8f8f8))">
        <span>
          <span style="font-size:var(--t-sm)">{{ entry.error_label }}</span>
          <br><span class="oc-muted" style="font-size:var(--t-sm)">{{ entry.items|length }} failed runs</span>
        </span>
        <span><span class="pill failed">Failed × {{ entry.items|length }}</span></span>
        <span><span class="oc-muted">—</span></span>
        <span><span class="oc-muted">—</span></span>
        <span><span class="oc-muted">—</span></span>
        <span><span title="{{ entry.items[0].created_at.strftime('%Y-%m-%d %H:%M UTC') }}">{{ format_age(entry.items[0].created_at, now=now) }}</span></span>
        <span class="gt-action">
          {% set batch = entry.items[:100] %}
          <form method="post" action="/runs/bulk-retry" style="display:inline">
            {% for it in batch %}
            <input type="hidden" name="item" value="{{ it.run_id }}:{{ it.revision }}">
            {% endfor %}
            <input type="hidden" name="csrf_token" value="{{ csrf_bulk_retry }}">
            <button type="submit" class="cb-btn cb-btn-secondary" style="font-size:var(--t-sm)">Retry {% if batch|length < entry.items|length %}first {{ batch|length }}{% else %}all {{ batch|length }}{% endif %}</button>
          </form>
        </span>
      </div>
      {% else %}
      {# Singleton failed run: normal row. #}
      {{ run_row(entry, none, now, csrf_requeue) }}
      {% endif %}
    {% endfor %}
    {% else %}
    {# Non-Failed tabs: standard row rendering. #}
    {% for it in page.items %}
    {{ run_row(it, stage_progress.get(it.run_id), now, csrf_requeue) }}
    {% endfor %}
    {% endif %}
  </div>
  {% endif %}

  {% if grouped_items is none and not show_archived and live_ids %}
  {{ poller(live_ids, poll_seconds) }}
  {% endif %}

  {% if next_url %}
  <p><a href="{{ next_url }}" class="oc-muted">Older →</a></p>
  {% endif %}
</section>

{% if aux_jobs %}
<details class="runs-aux-jobs">
  <summary class="oc-section-title" style="cursor:pointer">OTHER TASKS <span class="oc-muted" style="font-weight:400;font-size:var(--t-sm)">({{ aux_jobs|length }})</span></summary>
  <p class="oc-muted">Recent asset, translation, voice sample, and research
  jobs. These run alongside the pipeline and never block it.</p>
  <div class="grid-table" style="grid-template-columns: auto auto auto auto auto;">
    <div class="gt-header">
      <span>KIND</span>
      <span>DETAIL</span>
      <span>STATUS</span>
      <span>TARGET</span>
      <span>CREATED</span>
    </div>
    {% for job in aux_jobs %}
    <div class="gt-row">
      <span>{{ job.family }}</span>
      <span>{{ job.detail or "—" }}</span>
      <span>{{ chip(job.status) }}</span>
      <span>
        {% if job.family == "research" and job.speaker_id %}<a href="/speakers/{{ job.speaker_id }}/research">speaker {{ job.speaker_id.hex[:8] }}</a>
        {% elif job.pipeline_run_id %}<a href="/runs/{{ job.pipeline_run_id }}">run {{ job.pipeline_run_id.hex[:8] }}</a>
        {% elif job.speaker_id %}speaker {{ job.speaker_id.hex[:8] }}
        {% else %}—{% endif %}
      </span>
      <span class="num">{{ format_age(job.created_at, now=now) }}</span>
    </div>
    {% endfor %}
  </div>
</details>
{% endif %}

{% if dashboard %}
<script>
(function () {
  function fmt(s) {
    s = Math.max(0, s);
    var m = Math.floor(s / 60); s = Math.floor(s) % 60;
    var h = Math.floor(m / 60); m = m % 60;
    if (h) return h + "h" + (m < 10 ? "0" : "") + m + "m";
    return m + "m" + (s < 10 ? "0" : "") + s + "s";
  }
  function tick() {
    var strip = document.querySelector("[data-progress-strip]");
    if (!strip) return;
    var now = Date.now() / 1000;
    var els = strip.querySelectorAll("[data-started-at]");
    for (var i = 0; i < els.length; i++) {
      var t = Date.parse(els[i].dataset.startedAt) / 1000;
      if (isFinite(t)) els[i].textContent = fmt(now - t);
    }
    setTimeout(tick, 1000);
  }
  setTimeout(tick, 1000);
})();
</script>
{% endif %}
{% endblock %}