{% extends "base.html" %}
{% from "fragments/_chips.html" import chip, needs_review_chip %}
{% 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.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 %}
{% endblock %}

{% block body %}
{% if not shell.media_enabled %}
<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 %}

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

  <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>

  {# Macro: one standard run row (reused by both grouped and ungrouped paths). #}
  {% macro run_row(it) %}
    <div class="gt-row{% if it.status == 'running' %} is-machine-active{% elif it.unresolved_count > 0 and it.status == 'completed' %} is-needs-human{% endif %}">
      <span>
        <a href="/runs/{{ it.run_id }}" class="media-title" style="color:var(--ink);text-decoration:none"
           title="{{ it.source_path }}">{{ friendly_media_label(it.title, it.source_path) }}</a>
        {% if it.folder_path %}<br><span class="oc-muted" style="font-size:var(--t-sm)">{{ it.folder_path }}</span>{% endif %}
        <br><span class="run-id-secondary oc-muted" style="font-size:var(--t-sm)"><code>{{ it.run_id.hex[:8] }}</code></span>
      </span>
      <span>
        <span class="pill {{ it.status }}">{{ humanize_status(it.status) }}</span>
        {% if it.archived %}<span class="pill skipped">archived</span>{% endif %}
      </span>
      <span>
        {% if it.status == "completed" %}
          {% if it.label_count == 0 %}<span class="pill muted">no speakers</span>
          {% elif it.unresolved_count > 0 %}{{ needs_review_chip(it.unresolved_count) }}
          {% else %}{{ chip("reviewed") }}{% endif %}
        {% elif it.status == "failed" and it.error %}
        <span class="oc-muted" style="font-size:var(--t-sm)">{{ humanize_error(it.error) or "—" }}</span>
        {% else %}<span class="oc-muted">—</span>{% endif %}
        {% if it.claim_live %}<span class="pill grounded">claimed{% if it.claimed_by %} · {{ it.claimed_by }}{% endif %}</span>{% endif %}
      </span>
      <span>{% if it.language %}{{ language_label(it.language) }}{% else %}<span class="oc-muted">—</span>{% endif %}</span>
      <span><span title="{{ it.created_at.strftime("%Y-%m-%d %H:%M UTC") }}">{{ format_age(it.created_at, now=now) }}</span></span>
      <span class="gt-action">
        {% if it.status == "completed" and it.unresolved_count > 0 %}
        <a href="/review">Review →</a>
        {% elif it.status == "failed" %}
        <a href="/runs/{{ it.run_id }}">Retry →</a>
        {% else %}
        <a href="/runs/{{ it.run_id }}">View →</a>
        {% endif %}
      </span>
    </div>
    {% if it.snippet %}
    <div class="gt-row">
      <span class="oc-muted" style="grid-column: 1 / -1; padding: 0 var(--space-3) var(--space-2);">
        ⏱ {{ "%d:%02d" | format(it.snippet.start_seconds // 60, it.snippet.start_seconds % 60) }}
        — {{ it.snippet.html }}
      </span>
    </div>
    {% endif %}
  {% endmacro %}

  {% 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;" role="region" aria-label="Runs">
    <div class="gt-header">
      <span>MEDIA</span>
      <span>STATUS</span>
      <span>REVIEW</span>
      <span>LANGUAGE</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 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) }}
      {% endif %}
    {% endfor %}
    {% else %}
    {# Non-Failed tabs: standard row rendering. #}
    {% for it in page.items %}
    {{ run_row(it) }}
    {% endfor %}
    {% endif %}
  </div>
  {% 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 %}
{% endblock %}