{% 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" aria-label="Media metadata">
  <div class="card">
    <h2>Media</h2>
    <dl class="oc-meta-list" aria-label="File details">
      <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">
    <h2>{% if selected_run %}Run{% else %}Runs{% endif %}</h2>
    {% if selected_run %}
    <dl class="oc-meta-list" aria-label="Run details">
      <dt>Status</dt>
      <dd>
        <span class="chip {{ selected_run.status }}" role="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>
    <p class="mt-1"><a href="/runs/{{ selected_run.id }}" class="text-sm">Run details</a>
      <span class="oc-muted text-sm">(restart, archive, technical info)</span></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" aria-label="Available runs">
        {% 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 %}

  {% if source_metadata %}
  <details class="card">
    <summary>Source{% if source_metadata.title %}: {{ source_metadata.title }}{% endif %}</summary>
    <dl class="oc-meta-list">
      {% if source_metadata.title %}<dt>Title</dt><dd>{{ source_metadata.title }}</dd>{% endif %}
      {% if source_metadata.uploader or source_metadata.channel %}
      <dt>Uploader</dt>
      <dd>
        {{ source_metadata.uploader or source_metadata.channel }}
        {% if source_metadata.channel and source_metadata.uploader and source_metadata.channel != source_metadata.uploader %}
          · {{ source_metadata.channel }}
        {% endif %}
        {% if source_metadata.channel_url %}
          · <a href="{{ source_metadata.channel_url }}" rel="noopener noreferrer">channel</a>
        {% endif %}
      </dd>
      {% endif %}
      {% if source_metadata.upload_date %}<dt>Uploaded</dt><dd>{{ source_metadata.upload_date.isoformat() }}</dd>{% endif %}
      {% if source_metadata.tags %}<dt>Tags</dt><dd>{{ source_metadata.tags | join(", ") }}</dd>{% endif %}
      {% if source_metadata.canonical_url %}
      <dt>Page</dt><dd><a href="{{ source_metadata.canonical_url }}" rel="noopener noreferrer">{{ source_metadata.canonical_url }}</a></dd>
      {% endif %}
    </dl>
    {% if source_metadata.description %}
    <details class="mt-1">
      <summary class="text-sm">Description</summary>
      <p class="oc-muted">{{ source_metadata.description }}</p>
    </details>
    {% endif %}
  </details>
  {% endif %}

  {% if selected_run %}
  <div class="card">
    <h2>Notes for this run</h2>
    {% if shell.can_write %}
    <form method="post" action="/runs/{{ selected_run.id }}/notes" class="notes">
      <input type="hidden" name="csrf_token" value="{{ csrf_notes }}">
      <textarea name="notes" rows="3" maxlength="10000"
                placeholder="Who is speaking, context, follow-ups...">{{ operator_notes or "" }}</textarea>
      <button type="submit" class="text-sm">Save notes</button>
    </form>
    {% elif operator_notes %}
    <p>{{ operator_notes }}</p>
    {% else %}
    <p class="oc-muted">No notes.</p>
    {% 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 }}' role="region" aria-label="Transcript editor">
    <div class="card" id="transcript-document">
      {% if not token %}
      <p class="notice" role="status">Read-only view. Claim this run to edit.</p>
      {% endif %}

      <table class="grid-table transcript-table">
        <caption class="visually-hidden">Transcript</caption>
        <thead>
          <tr>
            <th>Time</th>
            <th>Speaker</th>
            <th>Text</th>
          </tr>
        </thead>
        <tbody>
          {% for seg in island_props.segments[:200] %}
          <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 %}
          {% if island_props.segments|length > 200 %}
          <tr>
            <td colspan="3" class="muted text-center py-4">
              {{ island_props.segments|length - 200 }} more segments. Enable JavaScript for the full transcript.
            </td>
          </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>

  {{ export_menu(selected_run) }}

  {% if speaker_timeline is not none %}
  <section class="card">
    <details>
      <summary>Speaker timeline</summary>
      <div data-island="speaker-timeline"
           data-run-id="{{ selected_run.id }}"
           data-props='{{ speaker_timeline|tojson }}'>
        <ul class="oc-muted">
          {% for lane in speaker_timeline.lanes %}
          {% set total_seconds = lane.total_seconds|int %}
          <li>{{ lane.speaker_name or lane.label }} ({{ total_seconds // 60 }}m {{ total_seconds % 60 }}s)</li>
          {% endfor %}
        </ul>
      </div>
    </details>
  </section>
  {% endif %}

{% 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 %}