{% extends "base.html" %}
{% from "fragments/export_menu.html" import export_menu %}
{% block title %}Voxint — {{ media_label }}{% endblock %}

{% block cb_breadcrumb %}media / <strong>{{ media_label|lower|replace(" ", "-") }}</strong>{% endblock %}
{% block cb_summary %}
{%- if selected_run -%}
  {{ selected_run.status }}
{%- else -%}
  no runs
{%- endif -%}
{% endblock %}

{% block body %}
{# Media detail page with the editor island (Console 2.0 P3a/P3b, issues
   #156/#157). Renders run metadata, a run chooser, and (when a completed run
   is selected) the media-editor island with a server-rendered transcript table
   as JS-off fallback.

   Layout: the media/runs metadata sits in an inline bar above the editor.
   The island's own .me-layout grid handles the transcript + speaker-rail
   split; it is NOT nested inside .lib-two-col (that double-nesting caused
   the rail to collapse at desktop widths, see #370). #}

<div class="editor-meta">
  <div class="card">
    <h3>Media</h3>
    <dl class="oc-meta-list">
      <dt>File</dt>
      <dd title="{{ detail.media.source_path }}">{{ media_label }}</dd>
      {% if detail.media.duration_seconds is not none %}
      <dt>Duration</dt>
      <dd>{{ format_duration(detail.media.duration_seconds) }}</dd>
      {% endif %}
      {% if detail.media.size_bytes is not none %}
      <dt>Size</dt>
      <dd>{{ format_size(detail.media.size_bytes) }}</dd>
      {% endif %}
    </dl>
  </div>

  {% if detail.chooser %}
  <div class="card">
    <h3>{% if selected_run %}Run{% else %}Runs{% endif %}</h3>
    {% if selected_run %}
    <dl class="oc-meta-list">
      <dt>Status</dt>
      <dd>
        <span class="chip {{ selected_run.status }}">{{ selected_run.status }}</span>
        {% if selected_run.current_stage %}
          <span class="muted text-sm">{{ selected_run.current_stage }}</span>
        {% endif %}
      </dd>
      {% if selected_run.error %}
      {% set nerr = normalize_error(selected_run.error) %}
      <dt>Error</dt>
      <dd class="text-sm">
        {{ nerr.label if nerr else selected_run.error|truncate(120) }}
        {% if nerr and nerr.hint %}<br><span class="oc-muted">{{ nerr.hint }}</span>{% endif %}
        {% if nerr and nerr.raw != nerr.label %}
        <details><summary>Details</summary><pre class="error-raw">{{ nerr.raw }}</pre></details>
        {% endif %}
      </dd>
      {% endif %}
    </dl>
    {% set restartable = selected_run.status in ('completed', 'failed', 'cancelled') and not selected_run.archived_at %}
    {% if restartable and csrf_restart %}
    {% if restart_impact and restart_impact.has_blockers %}
    <div class="mt-2">
      <button type="button" class="text-sm" disabled>
        {% if selected_run.status == 'failed' %}Retry{% else %}Re-run{% endif %}
      </button>
      <span class="text-sm notice-warn">Blocked:
        {{ restart_impact.segment_scope_decisions }} segment-scope ruling(s) and
        {{ restart_impact.enrichment_evidence }} enrichment evidence row(s)
        prevent restart. Submit as a new run instead.</span>
    </div>
    {% elif restart_impact and restart_impact.label_scope_decisions > 0 %}
    <form method="post" action="/runs/{{ selected_run.id }}/restart" class="mt-2">
      <input type="hidden" name="revision" value="{{ selected_run.revision }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_restart }}">
      <div class="notice-warn text-sm" style="margin-bottom: 0.25em">
        <label>
          <input type="checkbox" name="acknowledge_label_risk" value="true" required>
          {{ restart_impact.label_scope_decisions }} speaker ruling(s) may apply
          to different voices after re-processing.
        </label>
      </div>
      <button type="submit" class="text-sm"
        onclick="return confirm('Restart from scratch? This re-processes all stages.')">
        {% if selected_run.status == 'failed' %}Retry{% else %}Re-run{% endif %}
      </button>
    </form>
    {% else %}
    <form method="post" action="/runs/{{ selected_run.id }}/restart" class="mt-2">
      <input type="hidden" name="revision" value="{{ selected_run.revision }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_restart }}">
      <button type="submit" class="text-sm"
        onclick="return confirm('Restart from scratch? This re-processes all stages.')">
        {% if selected_run.status == 'failed' %}Retry{% else %}Re-run{% endif %}
      </button>
    </form>
    {% endif %}
    {% endif %}
    <p class="mt-1"><a href="/runs/{{ selected_run.id }}" class="text-sm">Run details</a></p>
    {% endif %}
    {% set other_runs = detail.chooser|length - (1 if selected_run else 0) %}
    {% if other_runs > 0 %}
    {% if selected_run %}
    <details class="mt-2">
      <summary class="text-sm muted">Other runs ({{ other_runs }})</summary>
    {% endif %}
      <ul class="run-chooser">
        {% for entry in detail.chooser %}
        {% if not selected_run or entry.id != selected_run.id %}
        <li>
          <a href="/media/{{ detail.media.id }}/editor?run={{ entry.id }}{% if token %}&amp;token={{ token }}{% endif %}">
            {{ entry.created_at.strftime("%Y-%m-%d %H:%M") }}
            <span class="chip {{ entry.status }}">{{ entry.status }}</span>
            {% if entry.archived %}<span class="chip">archived</span>{% endif %}
          </a>
        </li>
        {% endif %}
        {% endfor %}
      </ul>
    {% if selected_run %}
    </details>
    {% endif %}
    {% endif %}
  </div>
  {% endif %}
</div>

{% if selected_run and island_props %}
  {# Media editor island (#157). The server-rendered table inside is the
     JS-off / hydration-failure fallback. #}
  <div data-island="media-editor" data-props='{{ island_props|tojson }}'>
    <div class="card" id="transcript-document">
      {% if not token %}
      <p class="notice">Read-only view. Claim this run to edit.</p>
      {% endif %}

      <table class="grid-table transcript-table">
        <thead>
          <tr>
            <th>Time</th>
            <th>Speaker</th>
            <th>Text</th>
          </tr>
        </thead>
        <tbody>
          {% for seg in island_props.segments %}
          <tr{% if seg.verified %} class="verified"{% endif %}>
            <td class="mono">{{ "%.1f"|format(seg.start) }}s</td>
            <td>{{ seg.speaker or "—" }}</td>
            <td>{{ seg.text }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {{ export_menu(selected_run) }}

{% elif selected_run %}
  <div class="card">
    <p>Run <code>{{ selected_run.id.hex[:8] }}</code> is
    <strong>{{ selected_run.status }}</strong>. The transcript will be
    available once the run completes.</p>
    <p><a href="/runs/{{ selected_run.id }}">View run details</a></p>
  </div>

{% else %}
  <div class="card">
    {% if detail.chooser %}
    <p>No completed runs yet. Select a run above to view its status.</p>
    {% else %}
    <p>No runs for this media file yet.</p>
    {% endif %}
    <p><a href="/media">Back to the library</a></p>
  </div>
{% endif %}

{% endblock %}