{% extends "base.html" %}
{% block title %}{% if exercise %}{{ exercise.title }}{% else %}Listening{% endif %} – Auf Deutsch{% endblock %}

{% block content %}
{% if exercise %}
<div class="page-listening fade-in">
  <a href="/listening" class="back-link">← Back to listening</a>

  <header class="listening-header">
    <div class="grammar-kicker">{{ exercise.level }} listening</div>
    <h1 class="page-title">{{ exercise.cover_emoji }} {{ exercise.title }}</h1>
    <p class="grammar-lead">{{ exercise.situation }}</p>
    <div class="listening-meta-row">
      <span class="home-level-pill">{{ exercise.focus }}</span>
      <span class="home-goal-pill">{{ exercise.estimated_minutes }} min</span>
      <span class="listening-step-pill">1 Listen</span>
      <span class="listening-step-pill">2 Answer</span>
      <span class="listening-step-pill">3 Reveal</span>
    </div>
  </header>

  <section class="listening-stage-grid">
    <div class="card listening-stage-card listening-stage-card-primary">
      <div class="listening-stage-number">Step 1</div>
      <h2 class="card-title">Listen without reading</h2>
      <p class="listening-player-copy">Play the conversation once from start to finish. Focus on the main situation before you chase details.</p>
      <div class="listening-actions">
        <button type="button" class="btn btn-primary" id="play-conversation-btn">Play conversation</button>
        <button type="button" class="btn btn-secondary" id="toggle-transcript-btn" aria-expanded="false">Show transcript later</button>
      </div>
    </div>

    <div class="card listening-stage-card">
      <div class="listening-stage-number">Step 2</div>
      <h2 class="card-title">Catch the key detail</h2>
      <div class="listening-focus-list">
        <div class="listening-focus-item">Situation: {{ exercise.situation }}</div>
        <div class="listening-focus-item">Main goal: understand who wants what, when, and why.</div>
        <div class="listening-focus-item">Hints come only after your first guess.</div>
      </div>
    </div>
  </section>

  {% if exercise.tips %}
  <section class="card listening-tips-card">
    <div class="dashboard-kicker">Useful hints</div>
    <div class="listening-tip-box">
      {% for tip in exercise.tips %}
      <div class="listening-tip-row">{{ tip }}</div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <section class="card transcript-card" id="transcript-card" hidden>
    <h2 class="card-title">Transcript</h2>
    <div class="listening-lines">
      {% for line in exercise.lines %}
      <div class="listening-line-card">
        <div class="listening-line-top">
          <span class="bubble-speaker">{{ line.speaker }}</span>
          <button type="button" class="btn btn-audio" onclick='playAudio({{ line.audio_url|default("", true)|tojson }}, {{ line.de|tojson }})'>▶ Play line</button>
        </div>
        <div class="listening-line-de">{{ line.de }}</div>
        <div class="listening-line-en">{{ line.en }}</div>
      </div>
      {% endfor %}
    </div>
  </section>

  <section class="card">
    <h2 class="card-title">Questions</h2>
    <div class="listening-question-list">
      {% for question in exercise.questions %}
      <div class="listening-question-card">
        <div class="question-text">
          <span class="question-de">{{ question.question_de }}</span>
          <span class="question-en muted">{{ question.question_en }}</span>
        </div>
        <div class="listening-question-actions">
          <button type="button" class="btn btn-secondary btn-question-toggle" data-target="hint-{{ loop.index0 }}">Show hint</button>
          <button type="button" class="btn btn-secondary btn-question-toggle" data-target="answer-{{ loop.index0 }}">Show answer</button>
        </div>
        <div class="listening-hint" id="hint-{{ loop.index0 }}" hidden>{{ question.hint }}</div>
        <div class="listening-answer" id="answer-{{ loop.index0 }}" hidden>
          <div class="answer-de">{{ question.answer_de }}</div>
          <div class="answer-en muted">{{ question.answer_en }}</div>
          <div class="listening-answer-note">{{ question.explanation }}</div>
        </div>
      </div>
      {% endfor %}
    </div>
  </section>
</div>
{% else %}
<div class="page-listening fade-in">
  {% set a1_items = exercise_cards | selectattr("level", "equalto", "A1") | list %}
  {% set a2_items = exercise_cards | selectattr("level", "equalto", "A2") | list %}

  <header class="listening-index-header">
    <div class="grammar-kicker">Listening that does not overwhelm</div>
    <h1 class="page-title">Short real situations, then questions, then transcript</h1>
    <p class="stories-subtitle">Use the same loop every time: listen once, answer from memory, then reveal the transcript and hints only when needed.</p>
  </header>

  {% if a1_items %}
  <section class="listening-feature-row">
    {% for item in a1_items[:2] %}
    <a href="/listening/{{ item.exercise_id }}" class="listening-feature-card">
      <div class="listening-feature-top">
        <span class="listening-overview-emoji">{{ item.cover_emoji }}</span>
        <span class="level-badge">{{ item.level }}</span>
      </div>
      <div class="listening-feature-title">{{ item.title }}</div>
      <p class="listening-overview-copy">{{ item.situation }}</p>
      <div class="listening-overview-meta">{{ item.estimated_minutes }} min · {{ item.focus }}</div>
    </a>
    {% endfor %}
  </section>
  {% endif %}

  {% if a1_items %}
  <section class="stories-section">
    <h2 class="section-title">A1 — Beginner listening</h2>
    <div class="listening-card-grid">
      {% for item in a1_items %}
      <a href="/listening/{{ item.exercise_id }}" class="listening-overview-card">
        <div class="listening-overview-top">
          <span class="listening-overview-emoji">{{ item.cover_emoji }}</span>
          <span class="level-badge">{{ item.level }}</span>
        </div>
        <div class="listening-overview-title">{{ item.title }}</div>
        <p class="listening-overview-copy">{{ item.situation }}</p>
        <div class="listening-overview-meta">{{ item.estimated_minutes }} min · {{ item.focus }}</div>
      </a>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if a2_items %}
  <section class="stories-section">
    <h2 class="section-title">A2 — Elementary listening</h2>
    <div class="listening-card-grid">
      {% for item in a2_items %}
      <a href="/listening/{{ item.exercise_id }}" class="listening-overview-card">
        <div class="listening-overview-top">
          <span class="listening-overview-emoji">{{ item.cover_emoji }}</span>
          <span class="level-badge level-badge-a2">{{ item.level }}</span>
        </div>
        <div class="listening-overview-title">{{ item.title }}</div>
        <p class="listening-overview-copy">{{ item.situation }}</p>
        <div class="listening-overview-meta">{{ item.estimated_minutes }} min · {{ item.focus }}</div>
      </a>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if not exercise_cards %}
  <p class="muted">No listening exercises yet.</p>
  {% endif %}
</div>
{% endif %}
{% endblock %}

{% block scripts %}
{% if exercise %}
<script>
  const transcriptBtn = document.getElementById("toggle-transcript-btn");
  const transcriptCard = document.getElementById("transcript-card");
  if (transcriptBtn && transcriptCard) {
    transcriptBtn.addEventListener("click", () => {
      const isHidden = transcriptCard.hidden;
      transcriptCard.hidden = !isHidden;
      transcriptBtn.textContent = isHidden ? "Hide transcript" : "Show transcript";
      transcriptBtn.setAttribute("aria-expanded", String(isHidden));
    });
  }

  document.querySelectorAll(".btn-question-toggle").forEach((button) => {
    button.addEventListener("click", () => {
      const target = document.getElementById(button.dataset.target);
      if (!target) return;
      const shouldShow = target.hidden;
      target.hidden = !shouldShow;
      if (button.dataset.target.startsWith("hint-")) {
        button.textContent = shouldShow ? "Hide hint" : "Show hint";
      } else {
        button.textContent = shouldShow ? "Hide answer" : "Show answer";
      }
    });
  });

  const conversationLines = {{ exercise.lines | map(attribute='audio_url') | list | tojson }}.map((url, index) => ({
    url,
    text: {{ exercise.lines | map(attribute='de') | list | tojson }}[index],
  }));
  const playAllBtn = document.getElementById("play-conversation-btn");
  if (playAllBtn) {
    playAllBtn.addEventListener("click", async () => {
      playAllBtn.disabled = true;
      await playAudioSequence(conversationLines);
      playAllBtn.disabled = false;
    });
  }
</script>
{% endif %}
{% endblock %}