{% extends "wagtailadmin/base.html" %}
{% load i18n %}
{% load l10n %}
{% load wagtailimages_tags wagtailadmin_tags %}
{% block titletag %}{% blocktrans with title=transcript.pk %}Editing {{ title }}{% endblocktrans %}{% endblock %}

{% block extra_js %}
  {{ block.super }}
  {{ form.media.js }}

  {% url 'wagtailadmin_tag_autocomplete' as autocomplete_url %}
  <script>
    $(function() {
      $('#id_tags').tagit({
        autocomplete: {source: "{{ autocomplete_url|addslashes }}"}
      });
    });
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var audio = document.querySelector('[data-cast-speaker-audio]');
      if (audio) {
        var boundedEnd = null;
        audio.addEventListener('timeupdate', function() {
          if (boundedEnd !== null && audio.currentTime >= boundedEnd) {
            audio.pause();
            boundedEnd = null;
          }
        });
        document.querySelectorAll('[data-cast-speaker-seek]').forEach(function(button) {
          button.addEventListener('click', function() {
            var seconds = Number(button.getAttribute('data-cast-speaker-seek'));
            var endSeconds = Number(button.getAttribute('data-cast-speaker-end'));
            if (Number.isNaN(seconds)) {
              return;
            }
            boundedEnd = Number.isNaN(endSeconds) ? null : endSeconds;
            audio.currentTime = seconds;
            var playPromise = audio.play();
            if (playPromise && typeof playPromise.catch === 'function') {
              playPromise.catch(function() {});
            }
          });
        });
      }
      document.querySelectorAll('[data-cast-voice-reference-form]').forEach(function(form) {
        var checkbox = form.querySelector('[data-cast-voice-reference-consent]');
        var approveButton = form.querySelector('[data-cast-voice-reference-approve]');
        if (!checkbox || !approveButton) {
          return;
        }
        var syncApprovalState = function() {
          approveButton.disabled = !checkbox.checked;
        };
        checkbox.addEventListener('change', syncApprovalState);
        syncApprovalState();
      });
    });
  </script>
{% endblock %}

{% block extra_css %}
  {{ block.super }}
  {{ form.media.css }}
  <style>
    .cast-speaker-audio {
      margin: 1rem 0 1.5rem;
      max-width: 42rem;
    }

    .cast-speaker-audio audio {
      width: 100%;
    }

    .cast-speaker-mapping {
      list-style: none;
      margin: 1.5rem 0;
      padding: 0;
    }

    .cast-speaker-mapping__row {
      align-items: start;
      border-top: 1px solid var(--w-color-border-furniture, #4c4c4c);
      display: grid;
      gap: 1rem 2rem;
      grid-template-columns: minmax(16rem, 28rem) minmax(0, 1fr);
      padding: 1.25rem 0;
    }

    .cast-speaker-mapping__row:last-child {
      border-bottom: 1px solid var(--w-color-border-furniture, #4c4c4c);
    }

    .cast-speaker-mapping__field .field {
      margin-bottom: 0;
    }

    .cast-speaker-samples {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .cast-speaker-samples__empty {
      color: var(--w-color-text-label, inherit);
      margin: 0;
    }

    .cast-speaker-sample {
      display: grid;
      gap: 0.5rem;
      grid-template-columns: 4.5rem minmax(0, 1fr);
      margin-bottom: 0.75rem;
    }

    .cast-speaker-sample:last-child {
      margin-bottom: 0;
    }

    .cast-speaker-sample__time,
    .cast-speaker-sample__time-label {
      color: var(--w-color-text-label, inherit);
      font-variant-numeric: tabular-nums;
      line-height: 1.4;
      min-width: 0;
      text-align: left;
    }

    .cast-speaker-sample__time {
      background: none;
      border: 0;
      cursor: pointer;
      padding: 0;
      text-decoration: underline;
      text-underline-offset: 0.15em;
    }

    .cast-speaker-sample__text {
      line-height: 1.4;
      margin: 0;
      min-width: 0;
    }

    .cast-known-speaker-segments {
      border-collapse: collapse;
      margin: 1rem 0 1.5rem;
      width: 100%;
    }

    .cast-known-speaker-segments th,
    .cast-known-speaker-segments td {
      border-bottom: 1px solid var(--w-color-border-furniture, #4c4c4c);
      padding: 0.6rem 0.75rem 0.6rem 0;
      text-align: left;
      vertical-align: top;
    }

    .cast-known-speaker-segments th {
      color: var(--w-color-text-label, inherit);
      font-size: 0.875rem;
    }

    .cast-known-speaker-segments__time {
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .cast-known-speaker-segments__text {
      min-width: 14rem;
    }

    .cast-known-speaker-segments__metadata {
      color: var(--w-color-text-label, inherit);
      font-size: 0.875rem;
      margin: 0.25rem 0 0;
    }

    .cast-known-speaker-segments__field select {
      max-width: 100%;
    }

    .cast-voice-reference-group {
      border-top: 1px solid var(--w-color-border-furniture, #4c4c4c);
      margin-top: 1.25rem;
      padding-top: 1rem;
    }

    .cast-voice-reference-table {
      border-collapse: collapse;
      margin: 0.75rem 0 1.5rem;
      width: 100%;
    }

    .cast-voice-reference-table th,
    .cast-voice-reference-table td {
      border-bottom: 1px solid var(--w-color-border-furniture, #4c4c4c);
      padding: 0.6rem 0.75rem 0.6rem 0;
      text-align: left;
      vertical-align: top;
    }

    .cast-voice-reference-table th {
      color: var(--w-color-text-label, inherit);
      font-size: 0.875rem;
    }

    .cast-voice-reference-table__time {
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .cast-voice-reference-table__text {
      min-width: 14rem;
    }

    .cast-voice-reference-actions {
      display: grid;
      gap: 0.5rem;
      min-width: 14rem;
    }

    .cast-voice-reference-actions label {
      align-items: start;
      display: flex;
      gap: 0.4rem;
      line-height: 1.3;
      margin: 0;
    }

    @media (max-width: 900px) {
      .cast-known-speaker-segments,
      .cast-known-speaker-segments thead,
      .cast-known-speaker-segments tbody,
      .cast-known-speaker-segments th,
      .cast-known-speaker-segments td,
      .cast-known-speaker-segments tr,
      .cast-voice-reference-table,
      .cast-voice-reference-table thead,
      .cast-voice-reference-table tbody,
      .cast-voice-reference-table th,
      .cast-voice-reference-table td,
      .cast-voice-reference-table tr {
        display: block;
      }

      .cast-known-speaker-segments thead,
      .cast-voice-reference-table thead {
        display: none;
      }

      .cast-known-speaker-segments td,
      .cast-voice-reference-table td {
        padding-right: 0;
      }
    }

    @media (max-width: 700px) {
      .cast-speaker-mapping__row,
      .cast-speaker-sample {
        grid-template-columns: 1fr;
      }
    }
  </style>
{% endblock %}

{% block content %}
  {% trans "Editing" as editing_str %}
  {% include "wagtailadmin/shared/header.html" with title=editing_str subtitle=transcript.pk icon="media" usage_object=transcript %}

  {% block form_row %}
    <div class="row row-flush nice-padding">

      <div class="col10 divider-after">
        <form action="{% url 'cast-transcript:edit' transcript.id %}" method="POST" enctype="multipart/form-data" novalidate>
          {% csrf_token %}
          <ul class="fields">
            {% for field in form %}
              {% if field.name == 'file' %}
                {% include "cast/wagtail/_file_field_as_li.html" %}
              {% elif field.name == 'thumbnail' %}
                {% include "cast/wagtail/_thumbnail_field_as_li.html" %}
              {% else %}
                <li>
                  {% include "wagtailadmin/shared/field.html" %}
                </li>
              {% endif %}
            {% endfor %}
            <li>
              <input class="button" type="submit" value="{% trans 'Save' %}" />
              {% if user_can_delete %}
                <a href="{% url 'cast-transcript:delete' transcript.id %}" class="button button-secondary no">{% trans "Delete" %}</a>
              {% endif %}
            </li>
          </ul>
        </form>

        <hr />

        {% if known_speaker_review.total %}
          <h2>{% trans "Known-speaker suggestions" %}</h2>
          <p>
            {% blocktrans with confident=known_speaker_review.confident uncertain=known_speaker_review.uncertain total=known_speaker_review.total %}
              Voxhelm returned {{ total }} known-speaker suggestions: {{ confident }} confident and {{ uncertain }} uncertain (needs review).
            {% endblocktrans %}
          </p>
          <ul class="cast-known-speaker-review">
            {% for name, count in known_speaker_review.by_speaker.items %}
              <li>{{ name }}: {{ count }} {% trans "confident segments" %}</li>
            {% endfor %}
          </ul>
          <p>{% trans "The bulk action applies known-speaker names to public Podlove, DOTe, and WebVTT output by start time and may smooth uncertain segments between confident speakers. Use the segment review table to override a segment or leave it blank." %}</p>
          <form action="{% url 'cast-transcript:edit' transcript.id %}" method="POST" novalidate>
            {% csrf_token %}
            <input type="hidden" name="action" value="apply-known-speakers" />
            <ul class="fields">
              <li>
                <input class="button" type="submit" value="{% trans 'Approve and apply confident suggestions' %}"{% if not known_speaker_review.confident %} disabled{% endif %} />
              </li>
            </ul>
          </form>

          <form action="{% url 'cast-transcript:edit' transcript.id %}" method="POST" novalidate>
            {% csrf_token %}
            {% for hidden_field in known_speaker_review_form.hidden_fields %}
              {{ hidden_field }}
            {% endfor %}
            <table class="cast-known-speaker-segments">
              <thead>
                <tr>
                  <th>{% trans "Time" %}</th>
                  <th>{% trans "Text" %}</th>
                  <th>{% trans "Suggestion" %}</th>
                  <th>{% trans "Resolution" %}</th>
                </tr>
              </thead>
              <tbody>
                {% for row in known_speaker_review_rows %}
                  <tr>
                    <td class="cast-known-speaker-segments__time">
                      {% if row.timestamp_label %}
                        {{ row.timestamp_label }}
                      {% else %}
                        —
                      {% endif %}
                    </td>
                    <td class="cast-known-speaker-segments__text">
                      {% if row.text %}
                        {{ row.text }}
                      {% else %}
                        {% trans "No text available" %}
                      {% endif %}
                    </td>
                    <td>
                      {% if row.speaker %}
                        {{ row.speaker }}
                      {% else %}
                        {% trans "No suggestion" %}
                      {% endif %}
                      <p class="cast-known-speaker-segments__metadata">
                        {% if row.uncertain %}
                          {% trans "Needs review" %}
                        {% else %}
                          {% trans "Confident" %}
                        {% endif %}
                        {% if row.confidence is not None %}
                          · {% blocktrans with confidence=row.confidence %}confidence {{ confidence }}{% endblocktrans %}
                        {% endif %}
                        {% if row.margin is not None %}
                          · {% blocktrans with margin=row.margin %}margin {{ margin }}{% endblocktrans %}
                        {% endif %}
                      </p>
                    </td>
                    <td class="cast-known-speaker-segments__field">
                      {{ row.field.errors }}
                      {{ row.field }}
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
            <ul class="fields">
              {% if known_speaker_review_form.non_field_errors %}
                <li>{{ known_speaker_review_form.non_field_errors }}</li>
              {% endif %}
              <li>
                <input class="button button-secondary" type="submit" value="{% trans 'Save segment decisions' %}" />
              </li>
            </ul>
          </form>

          <hr />
        {% endif %}

        <h2>{% trans "Map speakers to contributors" %}</h2>
        {% if speaker_mapping_rows %}
          <p>{% trans "Store approved speaker mappings for public transcript output without rewriting the raw Podlove, DOTe, or WebVTT files." %}</p>
          {% if transcript_audio_sources %}
            <div class="cast-speaker-audio">
              <audio controls preload="metadata" data-cast-speaker-audio>
                {% for source in transcript_audio_sources %}
                  <source src="{{ source.url }}" type="{{ source.mimeType }}" />
                {% endfor %}
              </audio>
            </div>
          {% endif %}
          {% if not contributor_assignments %}
            <p>{% trans "No episode contributors are available for this transcript's audio. Use one-off display names for speakers who should not become reusable contributors." %}</p>
          {% endif %}
          <form action="{% url 'cast-transcript:edit' transcript.id %}" method="POST" novalidate>
            {% csrf_token %}
            {% for hidden_field in speaker_mapping_form.hidden_fields %}
              {{ hidden_field }}
            {% endfor %}
            <ul class="cast-speaker-mapping">
              {% for row in speaker_mapping_rows %}
                <li class="cast-speaker-mapping__row">
                  <div class="cast-speaker-mapping__field">
                    <p>
                      <strong>{{ row.mapping.speaker_label }}</strong><br />
                      {{ row.mapping.get_review_state_display }}
                      {% if not row.mapping.active %} · {% trans "inactive" %}{% endif %}
                    </p>
                    {% include "wagtailadmin/shared/field.html" with field=row.target_field %}
                    {% include "wagtailadmin/shared/field.html" with field=row.display_name_field %}
                  </div>
                  <div class="cast-speaker-mapping__samples">
                    {% if row.samples %}
                      <ol class="cast-speaker-samples">
                        {% for sample in row.samples %}
                          <li class="cast-speaker-sample">
                            {% if sample.has_start_time and transcript_audio_sources %}
                              <button
                                class="cast-speaker-sample__time"
                                type="button"
                                data-cast-speaker-seek="{{ sample.start_seconds|unlocalize }}"
                              >
                                {{ sample.timestamp_label }}
                              </button>
                            {% elif sample.timestamp_label %}
                              <span class="cast-speaker-sample__time-label">{{ sample.timestamp_label }}</span>
                            {% else %}
                              <span class="cast-speaker-sample__time-label"></span>
                            {% endif %}
                            <p class="cast-speaker-sample__text">{{ sample.text }}</p>
                          </li>
                        {% endfor %}
                      </ol>
                    {% else %}
                      <p class="cast-speaker-samples__empty">{% trans "No transcript samples found for this speaker." %}</p>
                    {% endif %}
                  </div>
                </li>
              {% endfor %}
            </ul>
            <ul class="fields">
              {% if speaker_mapping_form.non_field_errors %}
                <li>{{ speaker_mapping_form.non_field_errors }}</li>
              {% endif %}
              <li>
                <input class="button" type="submit" value="{% trans 'Save speaker mappings' %}" />
              </li>
            </ul>
          </form>

          <h2>{% trans "Voice-reference candidates" %}</h2>
          {% if voice_reference_candidate_groups %}
            {% for group in voice_reference_candidate_groups %}
              <section class="cast-voice-reference-group">
                <h3>
                  {% if group.contributor %}
                    {{ group.contributor.display_name }}
                  {% else %}
                    {{ group.speaker_label }}
                  {% endif %}
                </h3>
                {% if not group.contributor %}
                  <p>{% trans "Map this speaker label to one contributor before creating a voice reference." %}</p>
                {% endif %}
                <table class="cast-voice-reference-table">
                  <thead>
                    <tr>
                      <th>{% trans "Speaker" %}</th>
                      <th>{% trans "Start" %}</th>
                      <th>{% trans "End" %}</th>
                      <th>{% trans "Duration" %}</th>
                      <th>{% trans "Text" %}</th>
                      <th>{% trans "Audition" %}</th>
                      <th>{% trans "Reference" %}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for row in group.rows %}
                      <tr>
                        <td>{{ row.candidate.speaker_label }}</td>
                        <td class="cast-voice-reference-table__time">{{ row.candidate.start_timestamp_label }}</td>
                        <td class="cast-voice-reference-table__time">{{ row.candidate.end_timestamp_label }}</td>
                        <td class="cast-voice-reference-table__time">{{ row.candidate.duration_label }}</td>
                        <td class="cast-voice-reference-table__text">{{ row.candidate.text }}</td>
                        <td>
                          {% if transcript_audio_sources %}
                            <button
                              class="button button-small button-secondary"
                              type="button"
                              data-cast-speaker-seek="{{ row.candidate.start_seconds|unlocalize }}"
                              data-cast-speaker-end="{{ row.candidate.end_seconds|unlocalize }}"
                            >
                              {% trans "Play range" %}
                            </button>
                          {% else %}
                            {% trans "No playable audio" %}
                          {% endif %}
                        </td>
                        <td>
                          {% if row.duplicate_reference %}
                            {% trans "Existing reference" %}
                          {% elif row.contributor %}
                            <form
                              action="{% url 'cast-transcript:edit' transcript.id %}"
                              method="POST"
                              novalidate
                              data-cast-voice-reference-form
                            >
                              {% csrf_token %}
                              <input type="hidden" name="action" value="create-voice-reference" />
                              <input type="hidden" name="speaker_label" value="{{ row.candidate.speaker_label }}" />
                              <input type="hidden" name="candidate_rank" value="{{ row.candidate.rank }}" />
                              <div class="cast-voice-reference-actions">
                                <button
                                  class="button button-small button-secondary"
                                  type="submit"
                                  name="voice_reference_status"
                                  value="pending"
                                >
                                  {% trans "Save pending" %}
                                </button>
                                <label for="{{ row.form_id }}-consent">
                                  <input
                                    id="{{ row.form_id }}-consent"
                                    type="checkbox"
                                    name="consent_confirmed"
                                    value="on"
                                    data-cast-voice-reference-consent
                                  />
                                  {% trans "Contributor consent confirmed" %}
                                </label>
                                <button
                                  class="button button-small"
                                  type="submit"
                                  name="voice_reference_status"
                                  value="approved"
                                  data-cast-voice-reference-approve
                                  disabled
                                >
                                  {% trans "Create approved" %}
                                </button>
                              </div>
                            </form>
                          {% else %}
                            {% trans "Needs contributor mapping" %}
                          {% endif %}
                        </td>
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </section>
            {% endfor %}
          {% else %}
            <p>{% trans "No source-range candidates were found for this transcript." %}</p>
          {% endif %}
        {% else %}
          <p>{% trans "No speaker labels were found in the Podlove, DOTe, or WebVTT transcript files." %}</p>
        {% endif %}
      </div>
    </div>
  {% endblock %}

  </div>
{% endblock %}