{% extends "base.html" %}

{% block title %}Prepare · {{ pending.original_filename }}{% endblock %}

{% block content %}
<section class="card" data-role="prepare-wizard">
  <div class="step-indicator" aria-label="Audiobook workflow" data-role="wizard-indicator">
    <span class="step-indicator__item is-complete" data-role="wizard-step" data-step-key="setup">
      <span class="step-indicator__index">1</span>
      <span class="step-indicator__label">Upload &amp; settings</span>
    </span>
    <span class="step-indicator__item is-active" data-role="wizard-step" data-step-key="chapters">
      <span class="step-indicator__index">2</span>
      <span class="step-indicator__label">Chapters</span>
    </span>
    <span class="step-indicator__item" data-role="wizard-step" data-step-key="speakers">
      <span class="step-indicator__index">3</span>
      <span class="step-indicator__label">Speakers</span>
    </span>
  </div>
  <div class="card__title">Prepare audiobook</div>
  <p class="card__subtitle">Review the detected chapters, tune the speaker roster, and optionally override the voice per chapter before sending the job to the queue.</p>

  {% set analysis = pending.speaker_analysis or {} %}
  {% set analysis_speakers = analysis.get('speakers', {}) %}
  {% set show_analysis_prompt = pending.speaker_mode == 'multi' and not pending.analysis_requested %}
  {% set has_metadata = pending.metadata_tags %}
  {% set roster = pending.speakers or {} %}
  {% set speaker_configs = options.speaker_configs or [] %}
  {% set applied_languages = pending.speaker_voice_languages or analysis.get('config_languages', []) or [] %}
  {% set recommended_template = options.speaker_pronunciation_sentence or "This is {{name}} speaking." %}

  <form method="post" action="{{ url_for('web.finalize_job', pending_id=pending.id) }}" class="prepare-form" id="prepare-form">
    <div class="prepare-summary">
      <div class="prepare-summary__stats">
        <dl>
          <div>
            <dt>Source</dt>
            <dd>{{ pending.original_filename }}</dd>
          </div>
          <div>
            <dt>Language</dt>
            <dd>{{ options.languages.get(pending.language, pending.language|upper) }}</dd>
          </div>
          <div>
            <dt>Default voice</dt>
            <dd>{% if pending.voice_profile %}Profile · {{ pending.voice_profile }}{% else %}{{ pending.voice }}{% endif %}</dd>
          </div>
          <div>
            <dt>Total chapters</dt>
            <dd>{{ pending.chapters|length }}</dd>
          </div>
          <div>
            <dt>Characters</dt>
            <dd>{{ '{:,}'.format(pending.total_characters|default(0)) }}</dd>
          </div>
          <div>
            <dt>Chapter intro delay</dt>
            <dd>{{ '%.1f'|format(pending.chapter_intro_delay) }} seconds</dd>
          </div>
          <div>
            <dt>Chunk granularity</dt>
            <dd>{{ pending.chunk_level|replace('_', ' ')|title }}</dd>
          </div>
          <div>
            <dt>Speaker mode</dt>
            <dd>{{ pending.speaker_mode|replace('_', ' ')|title }}</dd>
          </div>
          <div>
            <dt>Speaker analysis threshold</dt>
            <dd>{{ pending.speaker_analysis_threshold }} {{ 'mention' if pending.speaker_analysis_threshold == 1 else 'mentions' }}</dd>
          </div>
          <div>
            <dt>EPUB 3 package</dt>
            <dd>{% if pending.generate_epub3 %}Enabled{% else %}Disabled{% endif %}</dd>
          </div>
          {% if applied_languages %}
          <div>
            <dt>Config languages</dt>
            <dd>{{ applied_languages | map('upper') | join(', ') }}</dd>
          </div>
          {% endif %}
        </dl>
      </div>
      {% if analysis_speakers or show_analysis_prompt or has_metadata %}
      <div class="prepare-summary__insights">
        {% if analysis_speakers %}
        {% set ordered_ids = analysis.get('ordered_speakers', []) %}
        <div class="prepare-analysis">
          <h2>Detected speakers</h2>
          {% if ordered_ids %}
          <ul>
            {% for sid in ordered_ids %}
              {% set speaker = analysis_speakers.get(sid) %}
              {% if speaker %}
                <li>
                  <strong>{{ speaker.label }}</strong>
                  {% if speaker.gender and speaker.gender != 'unknown' %}
                    · {{ speaker.gender|title }}
                  {% endif %}
                  · {{ speaker.count }} lines · confidence {{ speaker.confidence|title }}
                </li>
              {% endif %}
            {% endfor %}
          </ul>
          {% else %}
          <p>No additional speakers met the threshold yet. All dialogue will use the narrator voice.</p>
          {% endif %}
        </div>
        {% elif show_analysis_prompt %}
        <div class="prepare-analysis">
          <h2>Detected speakers</h2>
          <p>Press <strong>Analyze speakers</strong> after selecting chapters to discover recurring voices.</p>
        </div>
        {% endif %}
      </div>
      {% endif %}
    </div>

    {% if error %}
      <div class="alert alert--error">{{ error }}</div>
    {% endif %}
    {% if notice %}
      <div class="alert alert--info">{{ notice }}</div>
    {% endif %}

    <div class="prepare-step-nav" data-role="prepare-step-nav">
      <button type="button" class="button button--ghost is-active" data-step-target="chapters">Step 2 · Chapters</button>
      <button type="button" class="button button--ghost" data-step-target="speakers" disabled aria-disabled="true" data-state="locked">Step 3 · Speakers</button>
    </div>

    <div class="prepare-steps" data-role="prepare-step-panels">
      <section class="prepare-step" data-step-panel="chapters">
        <header class="prepare-step__header">
          <h2>Step 2 · Select chapters</h2>
          <p class="hint">Choose which chapters to convert and tweak conversion options.</p>
        </header>

        <div class="chapter-grid">
          {% for chapter in pending.chapters %}
          {% set is_enabled = chapter.enabled is not defined or chapter.enabled %}
          {% set selected_option = '__default' %}
          {% if chapter.voice_profile %}
            {% set selected_option = 'profile:' ~ chapter.voice_profile %}
          {% elif chapter.voice %}
            {% set selected_option = 'voice:' ~ chapter.voice %}
          {% elif chapter.voice_formula %}
            {% set selected_option = 'formula' %}
          {% endif %}
          <article class="chapter-card" data-role="chapter-row">
            <header class="chapter-card__header">
              <div class="chapter-card__title">
                <label class="chapter-card__checkbox">
                  <input type="checkbox" name="chapter-{{ loop.index0 }}-enabled" data-role="chapter-enabled" {% if is_enabled %}checked{% endif %}>
                  <span>Chapter {{ loop.index }} · {{ chapter.title }}</span>
                </label>
              </div>
              <div class="chapter-card__metrics">
                {{ '{:,}'.format(chapter.characters) }} characters
              </div>
            </header>
            <div class="chapter-card__body">
              <div class="chapter-card__field">
                <label for="chapter-{{ loop.index0 }}-title">Title</label>
                <input type="text" id="chapter-{{ loop.index0 }}-title" name="chapter-{{ loop.index0 }}-title" value="{{ chapter.title }}">
              </div>
              <div class="chapter-card__preview">
                <details>
                  <summary>Preview text</summary>
                  <pre>{{ chapter.text[:2000] }}{% if chapter.text|length > 2000 %}…{% endif %}</pre>
                </details>
              </div>
              <div class="chapter-card__field">
                <label for="chapter-{{ loop.index0 }}-voice">Voice override</label>
                <select id="chapter-{{ loop.index0 }}-voice" name="chapter-{{ loop.index0 }}-voice" data-role="voice-select">
                  <option value="__default" {% if selected_option == '__default' %}selected{% endif %}>Use job default</option>
                  <optgroup label="Voices">
                    {% for voice in options.voices %}
                      <option value="voice:{{ voice }}" {% if selected_option == 'voice:' ~ voice %}selected{% endif %}>{{ voice }}</option>
                    {% endfor %}
                  </optgroup>
                  {% if options.voice_profile_options %}
                  <optgroup label="Profiles">
                    {% for profile in options.voice_profile_options %}
                      <option value="profile:{{ profile.name }}" {% if selected_option == 'profile:' ~ profile.name %}selected{% endif %}>{{ profile.name }}{% if profile.language %} · {{ profile.language|upper }}{% endif %}</option>
                    {% endfor %}
                  </optgroup>
                  {% endif %}
                  <option value="formula" {% if selected_option == 'formula' %}selected{% endif %}>Custom formula…</option>
                </select>
                <input type="text" name="chapter-{{ loop.index0 }}-formula" class="chapter-card__formula" data-role="formula-input" placeholder="af_nova*0.4+am_liam*0.6" value="{{ chapter.voice_formula or '' }}" {% if selected_option != 'formula' %}hidden aria-hidden="true"{% else %}aria-hidden="false"{% endif %}>
              </div>
            </div>
          </article>
          {% endfor %}
        </div>

        <div class="prepare-options">
          <div class="field">
            <label for="chunk_level">Chunk granularity</label>
            <select id="chunk_level" name="chunk_level">
              {% for option in options.chunk_levels %}
                <option value="{{ option.value }}" {% if pending.chunk_level == option.value %}selected{% endif %}>{{ option.label }}</option>
              {% endfor %}
            </select>
            <p class="hint">Paragraphs work well for long-form narration; sentences give finer subtitle sync.</p>
          </div>
          <div class="field">
            <label for="speaker_mode">Speaker mode</label>
            <select id="speaker_mode" name="speaker_mode">
              {% for option in options.speaker_modes %}
                <option value="{{ option.value }}" {% if pending.speaker_mode == option.value %}selected{% endif %}>{{ option.label }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="field">
            <label for="speaker_analysis_threshold">Speaker analysis minimum mentions</label>
            <input type="number" min="1" max="25" id="speaker_analysis_threshold" name="speaker_analysis_threshold" value="{{ pending.speaker_analysis_threshold }}">
            <p class="hint">Only speakers that appear at least this many times will keep unique voices in multi-speaker mode.</p>
          </div>
          <div class="field">
            <label for="chapter_intro_delay">Pause after chapter titles (seconds)</label>
            <input type="number" step="0.1" min="0" id="chapter_intro_delay" name="chapter_intro_delay" value="{{ '%.2f'|format(pending.chapter_intro_delay) }}">
            <p class="hint">Set to 0 to disable the pause after speaking each chapter title.</p>
          </div>
          <div class="field field--choices">
            <label class="toggle-pill">
              <input type="checkbox" name="generate_epub3" value="true" {% if pending.generate_epub3 %}checked{% endif %}>
              <span>Generate EPUB 3 (experimental)</span>
            </label>
          </div>
        </div>

        <div class="prepare-step__actions">
          <button type="button" class="button" data-role="step-next" data-step-target="speakers">Continue to speakers</button>
        </div>
      </section>

      <section class="prepare-step" data-step-panel="speakers" hidden>
        <header class="prepare-step__header">
          <h2>Step 3 · Select speakers</h2>
          <p class="hint">Assign voices, audition samples, and finalize your roster.</p>
        </header>

        <div class="prepare-speaker-config">
          <div class="prepare-speaker-config__header">
            <h2>Speaker configuration</h2>
            <p class="hint">Reuse saved presets to keep character voices consistent between projects.</p>
          </div>
          <div class="prepare-speaker-config__grid">
            <label class="field prepare-speaker-config__field" for="applied_speaker_config">
              <span>Saved preset</span>
              <select id="applied_speaker_config" name="applied_speaker_config">
                <option value="">None</option>
                {% for config in speaker_configs %}
                <option value="{{ config.name }}" {% if pending.applied_speaker_config == config.name %}selected{% endif %}>
                  {{ config.name }} · {{ config.speakers|length }} speaker{% if config.speakers|length != 1 %}s{% endif %}
                </option>
                {% endfor %}
              </select>
              <p class="hint">Presets are managed on the <a href="{{ url_for('web.speaker_configs_page') }}">Speakers page</a>.</p>
            </label>
            <div class="prepare-speaker-config__actions">
              <button type="submit"
                      class="button button--ghost"
                      name="apply_speaker_config"
                      value="1"
                      formaction="{{ url_for('web.analyze_pending_job', pending_id=pending.id) }}"
                      formmethod="post"
                      formnovalidate
                      {% if not speaker_configs %}disabled{% endif %}>
                Apply preset
              </button>
              <button type="submit"
                      class="button button--ghost"
                      name="randomize_speaker_config"
                      value="1"
                      formaction="{{ url_for('web.analyze_pending_job', pending_id=pending.id) }}"
                      formmethod="post"
                      formnovalidate
                      {% if not speaker_configs %}disabled{% endif %}>
                Randomize compatible voices
              </button>
              <label class="toggle-pill">
                <input type="checkbox" name="save_speaker_config" value="1">
                <span>Save roster updates back to preset</span>
              </label>
            </div>
          </div>
        </div>

        {% if roster %}
        <div class="prepare-speakers">
          <h2>Speaker settings</h2>
          <p class="hint">Set pronunciations, lock specific voices, and audition sample paragraphs to hear casting choices.</p>
          <ul class="speaker-list">
            {% for speaker_id, speaker in roster.items() %}
            {% set spoken_name = speaker.pronunciation or speaker.label %}
            {% set preview_text = recommended_template | replace("{{name}}", spoken_name) %}
            {% set selected_voice = speaker.resolved_voice or speaker.voice %}
            {% set seen = namespace(values=[]) %}
            {% set sample_quotes = speaker.sample_quotes or [] %}
            <li class="speaker-list__item" data-speaker-id="{{ speaker_id }}">
              <div class="speaker-line speaker-list__header">
                <span class="speaker-list__name">{{ speaker.label }}</span>
                <button type="button"
                        class="icon-button speaker-list__preview"
                        data-role="speaker-preview"
                        data-speaker-id="{{ speaker_id }}"
                        data-preview-text="{{ preview_text|e }}"
                        data-language="{{ pending.language }}"
                        data-voice="{{ selected_voice or pending.voice }}"
                        data-speed="{{ '%.2f'|format(pending.speed) }}"
                        data-use-gpu="{{ 'true' if pending.use_gpu else 'false' }}"
                        aria-label="Preview pronunciation for {{ speaker.label }}"
                        title="Preview pronunciation">
                  🔊
                </button>
              </div>
              <template data-role="speaker-samples">{{ sample_quotes | tojson }}</template>
              <div class="speaker-list__meta">
                {% if speaker.gender and speaker.gender != 'unknown' %}
                <span class="badge badge--info">{{ speaker.gender|title }}</span>
                {% else %}
                <span class="badge badge--muted">Gender unknown</span>
                {% endif %}
                {% if speaker.get('analysis_count') %}
                <span class="badge badge--muted">{{ speaker.analysis_count }} lines · {{ speaker.analysis_confidence|default('low')|title }} confidence</span>
                {% endif %}
                {% if settings.speaker_random_languages %}
                <span class="badge badge--muted">Randomizer: {{ settings.speaker_random_languages | map('upper') | join(', ') }}</span>
                {% endif %}
              </div>
              <label class="speaker-list__field" for="speaker-{{ speaker_id }}-pronunciation">
                <span>Pronunciation</span>
                <input type="text"
                       id="speaker-{{ speaker_id }}-pronunciation"
                       name="speaker-{{ speaker_id }}-pronunciation"
                       value="{{ speaker.pronunciation or '' }}"
                       placeholder="{{ speaker.label }}">
              </label>
              <div class="speaker-list__controls">
                <div class="speaker-list__selection">
                  <label class="speaker-list__field" for="speaker-{{ speaker_id }}-voice">
                    <span>Assigned voice</span>
                    <select id="speaker-{{ speaker_id }}-voice"
                            name="speaker-{{ speaker_id }}-voice"
                            data-role="speaker-voice"
                            data-default-voice="{{ pending.voice }}"
                            {% if speaker.randomize %}disabled{% endif %}>
                      <option value="" {% if not selected_voice %}selected{% endif %}>Use narrator voice ({{ pending.voice }})</option>
                      {% if speaker.recommended_voices %}
                      <optgroup label="Recommended">
                        {% for voice_id in speaker.recommended_voices[:6] %}
                          {% if voice_id not in seen.values %}
                            {% set voice_meta = options.voice_catalog_map.get(voice_id) or {} %}
                            <option value="{{ voice_id }}" {% if selected_voice == voice_id %}selected{% endif %}>
                              {{ voice_meta.display_name or voice_id }} · {{ voice_meta.language_label or voice_id[0]|upper }} · {{ voice_meta.gender or 'Unknown' }}
                            </option>
                            {% set _ = seen.values.append(voice_id) %}
                          {% endif %}
                        {% endfor %}
                      </optgroup>
                      {% endif %}
                      <optgroup label="All voices">
                        {% for voice in options.voice_catalog %}
                          {% if voice.id not in seen.values %}
                          <option value="{{ voice.id }}"
                                  {% if selected_voice == voice.id %}selected{% endif %}>
                            {{ voice.display_name }} · {{ voice.language_label }} · {{ voice.gender }}
                          </option>
                          {% endif %}
                        {% endfor %}
                      </optgroup>
                    </select>
                  </label>
                  <button type="button"
                          class="button button--ghost button--small"
                          data-role="open-voice-browser"
                          data-speaker-id="{{ speaker_id }}">
                    Browse voices
                  </button>
                </div>
                <div class="speaker-list__inline">
                  <label class="toggle-pill">
                    <input type="checkbox"
                           name="speaker-{{ speaker_id }}-randomize"
                           value="1"
                           data-role="randomize-toggle"
                           {% if speaker.randomize %}checked{% endif %}>
                    <span>Randomize compatible voice on analyze</span>
                  </label>
                </div>
              </div>
              <details class="speaker-list__samples" {% if not sample_quotes %}data-state="empty"{% endif %}>
                <summary>Sample paragraphs</summary>
                {% if sample_quotes %}
                  {% for quote in sample_quotes %}
                  <article class="speaker-sample" data-sample-index="{{ loop.index0 }}">
                    <p>{{ quote }}</p>
                    <div class="speaker-sample__actions">
                      <button type="button"
                              class="button button--ghost button--small"
                              data-role="speaker-preview"
                              data-speaker-id="{{ speaker_id }}"
                              data-preview-text="{{ quote|e }}"
                              data-language="{{ pending.language }}"
                              data-voice="{{ selected_voice or pending.voice }}"
                              data-speed="{{ '%.2f'|format(pending.speed) }}"
                              data-use-gpu="{{ 'true' if pending.use_gpu else 'false' }}">
                        Preview with assigned voice
                      </button>
                      <button type="button"
                              class="button button--ghost button--small"
                              data-role="open-voice-browser"
                              data-speaker-id="{{ speaker_id }}"
                              data-sample-index="{{ loop.index0 }}">
                        Preview in voice browser
                      </button>
                    </div>
                  </article>
                  {% endfor %}
                {% else %}
                  <p class="hint">No paragraphs captured yet. Analyze speakers to collect dialogue samples.</p>
                {% endif %}
              </details>
              {% if speaker.recommended_voices %}
              <div class="speaker-list__recommendations">
                <span class="hint">Suggested:</span>
                {% for voice_id in speaker.recommended_voices[:6] %}
                  {% set voice_meta = options.voice_catalog_map.get(voice_id) or {} %}
                  <button type="button"
                          class="chip"
                          data-role="recommended-voice"
                          data-voice="{{ voice_id }}"
                          title="{{ voice_meta.display_name or voice_id }} · {{ voice_meta.language_label or voice_id[0]|upper }} · {{ voice_meta.gender or 'Unknown' }}">
                    {{ voice_meta.display_name or voice_id }}
                  </button>
                {% endfor %}
              </div>
              {% endif %}
            </li>
            {% endfor %}
          </ul>
        </div>
        {% else %}
        <p class="hint">No additional speakers detected yet. The narrator voice will be used for all dialogue.</p>
        {% endif %}

        <div class="prepare-actions">
          <button type="button" class="button button--ghost" data-role="step-prev" data-step-target="chapters">Back to chapters</button>
          <button type="submit"
                  class="button button--ghost"
                  data-role="analyze-button"
                  formaction="{{ url_for('web.analyze_pending_job', pending_id=pending.id) }}"
                  formmethod="post"
                  formnovalidate
                  {% if pending.speaker_mode != 'multi' %}hidden aria-hidden="true"{% else %}aria-hidden="false"{% endif %}>
            Analyze speakers
          </button>
          <button type="submit" class="button">Queue conversion</button>
          <button type="submit" class="button button--ghost" form="cancel-form">Cancel</button>
        </div>
      </section>
    </div>
  </form>
  <form method="post" action="{{ url_for('web.cancel_pending_job', pending_id=pending.id) }}" id="cancel-form"></form>
  <div class="modal" data-role="voice-modal" hidden>
    <div class="modal__overlay" data-role="voice-modal-close" tabindex="-1"></div>
    <div class="modal__content voice-browser" role="dialog" aria-modal="true" aria-labelledby="voice-modal-title">
      <header class="voice-browser__header">
        <h2 id="voice-modal-title">Choose a voice</h2>
        <button type="button" class="icon-button" data-role="voice-modal-close" aria-label="Close voice browser">✕</button>
      </header>
      <div class="voice-browser__body">
        <aside class="voice-browser__filters">
          <label class="field">
            <span>Search</span>
            <input type="search" data-role="voice-modal-search" placeholder="Search by name or language">
          </label>
          <label class="field">
            <span>Language</span>
            <select data-role="voice-modal-language">
              <option value="">All languages</option>
              {% for code, label in options.languages.items() %}
              <option value="{{ code }}">{{ label }} ({{ code|upper }})</option>
              {% endfor %}
            </select>
          </label>
          <div class="voice-browser__gender" role="group" aria-label="Filter by gender">
            <button type="button" class="button button--ghost button--small" data-role="voice-modal-gender" data-value="">All</button>
            <button type="button" class="button button--ghost button--small" data-role="voice-modal-gender" data-value="f">Female</button>
            <button type="button" class="button button--ghost button--small" data-role="voice-modal-gender" data-value="m">Male</button>
          </div>
        </aside>
        <section class="voice-browser__catalog" aria-label="Voice catalog">
          <ul class="voice-browser__list" data-role="voice-modal-list"></ul>
        </section>
        <section class="voice-browser__preview" data-role="voice-modal-preview">
          <h3 data-role="voice-modal-selected-name">Select a voice to preview</h3>
          <p class="tag" data-role="voice-modal-selected-meta"></p>
          <div class="voice-browser__samples" data-role="voice-modal-samples"></div>
          <div class="voice-browser__actions">
            <button type="button" class="button" data-role="voice-modal-apply" disabled>Use this voice</button>
          </div>
        </section>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script id="voice-catalog-data" type="application/json">{{ options.voice_catalog | tojson }}</script>
  <script id="voice-language-map" type="application/json">{{ options.languages | tojson }}</script>
  <script type="module" src="{{ url_for('static', filename='speakers.js') }}"></script>
  <script type="module" src="{{ url_for('static', filename='prepare.js') }}"></script>
{% endblock %}