{% extends "base.html" %}
{% block title %}{{ pack.pack_name }} Quiz – Auf Deutsch{% endblock %}

{% block content %}
{% set quiz_questions = graded_questions or questions %}
<div class="page-pack-quiz fade-in" data-pack-id="{{ pack.pack_id }}">
  <a href="/packs/{{ pack.pack_id }}" class="back-link">← Back to pack</a>

  <div class="card">
    <h1 class="page-title">{{ pack.pack_name }} Mini-Quiz</h1>
    <p class="muted">Mixed practice with meaning, listening, dictation, scenarios, and quick drills.</p>
    <div class="quiz-score {% if score is none %}is-hidden{% endif %}" id="quiz-score">{{ score if score is not none else '' }}{% if total %}/{{ total }}{% endif %}</div>
    <p class="muted quiz-summary-copy {% if score is none %}is-hidden{% endif %}" id="quiz-summary-copy">
      {% if score is not none %}You checked {{ total }} questions.{% endif %}
    </p>
  </div>

  <form id="quiz-form" {% if not graded_questions %}novalidate{% endif %}>
    {% for question in quiz_questions %}
    {% set q_idx = loop.index0 %}
    {% set correct_answer = question.correct_answer if question.correct_answer is defined else (question.phrase.de if question.phrase else '') %}
    <section class="card quiz-card" data-index="{{ q_idx }}" data-type="{{ question.type }}">
      <div class="quiz-card-top">
        <span class="step-tag">Q{{ loop.index }}</span>
        <span class="register-badge">{{ question.type | replace("_", " ") }}</span>
      </div>

      <p class="quiz-prompt">{{ question.prompt }}</p>
      <div class="quiz-answer-key is-hidden">{{ correct_answer }}</div>

      {% if question.phrase %}
      <button type="button" class="btn btn-audio" onclick='playAudio({{ question.audio_url|default("", true)|tojson }}, {{ question.phrase.de|tojson }})'>▶ Play</button>
      {% endif %}

      {% if question.phrase and question.phrase.examples %}
      <p class="quiz-example muted">{{ question.phrase.examples[0].de }} — {{ question.phrase.examples[0].en }}</p>
      {% endif %}

      {% if question.type == "dictation" %}
      <p class="quiz-answer-hint muted">{{ question.phrase.en if question.phrase else "" }}</p>
      <input
        type="text"
        name="q{{ q_idx }}"
        class="form-input quiz-input"
        value="{{ question.submitted if graded_questions else '' }}"
        {% if graded_questions %}disabled{% endif %}
      >
      {% else %}
      <div class="choice-list">
        {% for choice in question.choices %}
        <label class="choice-card {% if graded_questions and choice == correct_answer %}choice-card-correct{% elif graded_questions and choice == question.submitted and not question.is_correct %}choice-card-wrong{% endif %}">
          <input
            type="radio"
            name="q{{ q_idx }}"
            value="{{ choice }}"
            {% if graded_questions and choice == question.submitted %}checked{% endif %}
            {% if graded_questions %}disabled{% endif %}
          >
          <span>{{ choice }}</span>
        </label>
        {% endfor %}
      </div>
      {% endif %}

      <div class="quiz-feedback {% if graded_questions and question.is_correct %}quiz-feedback-correct{% elif graded_questions %}quiz-feedback-wrong{% else %}is-hidden{% endif %}" id="feedback-{{ q_idx }}">
        {% if graded_questions %}
          {% if question.is_correct %}Correct{% else %}Correct answer: {{ correct_answer }}{% endif %}
        {% endif %}
      </div>

      {% if question.explanation %}
      <p class="muted quiz-explanation {% if not graded_questions %}is-hidden{% endif %}" id="explanation-{{ q_idx }}">{{ question.explanation }}</p>
      {% endif %}
    </section>
    {% endfor %}

    <div class="quiz-actions">
      {% if graded_questions %}
      <a href="/packs/{{ pack.pack_id }}/quiz" class="btn btn-secondary">Try again</a>
      <a href="/packs/{{ pack.pack_id }}" class="btn btn-primary">Back to pack</a>
      {% else %}
      <button type="button" class="btn btn-primary" id="quiz-check-btn">Check answers</button>
      <a href="/packs/{{ pack.pack_id }}/quiz" class="btn btn-secondary is-hidden" id="quiz-retry-btn">Try again</a>
      <a href="/packs/{{ pack.pack_id }}" class="btn btn-secondary is-hidden" id="quiz-back-btn">Back to pack</a>
      {% endif %}
    </div>
  </form>
</div>
{% endblock %}

{% block scripts %}
{% if not graded_questions %}
<script>
  (function() {
    const root = document.querySelector(".page-pack-quiz");
    const checkBtn = document.getElementById("quiz-check-btn");
    if (!root || !checkBtn) return;

    const packId = root.dataset.packId;
    const scoreEl = document.getElementById("quiz-score");
    const scoreCopyEl = document.getElementById("quiz-summary-copy");
    const retryBtn = document.getElementById("quiz-retry-btn");
    const backBtn = document.getElementById("quiz-back-btn");

    function normalizeAnswer(value) {
      return (value || "").trim().toLocaleLowerCase().replace(/\s+/g, " ");
    }

    function markChoiceCards(card, selectedValue, correctValue) {
      card.querySelectorAll(".choice-card").forEach((label) => {
        const input = label.querySelector("input");
        if (!input) return;
        label.classList.remove("choice-card-correct", "choice-card-wrong");
        if (input.value === correctValue) {
          label.classList.add("choice-card-correct");
        } else if (selectedValue && input.value === selectedValue) {
          label.classList.add("choice-card-wrong");
        }
      });
    }

    checkBtn.addEventListener("click", async () => {
      const cards = Array.from(document.querySelectorAll(".quiz-card"));
      let score = 0;

      cards.forEach((card) => {
        const type = card.dataset.type;
        const correctValue = card.querySelector(".quiz-answer-key").textContent.trim();
        const feedback = card.querySelector(".quiz-feedback");
        const explanation = card.querySelector(".quiz-explanation");
        let submitted = "";
        let isCorrect = false;

        if (type === "dictation") {
          const input = card.querySelector(".quiz-input");
          submitted = input ? input.value.trim() : "";
          isCorrect = normalizeAnswer(submitted) === normalizeAnswer(correctValue);
          if (input) input.disabled = true;
        } else {
          const checked = card.querySelector("input[type='radio']:checked");
          submitted = checked ? checked.value : "";
          isCorrect = submitted === correctValue;
          card.querySelectorAll("input[type='radio']").forEach((input) => { input.disabled = true; });
          markChoiceCards(card, submitted, correctValue);
        }

        if (isCorrect) {
          score += 1;
          feedback.textContent = "Correct";
          feedback.className = "quiz-feedback quiz-feedback-correct";
        } else if (submitted) {
          feedback.textContent = `Correct answer: ${correctValue}`;
          feedback.className = "quiz-feedback quiz-feedback-wrong";
        } else {
          feedback.textContent = `No answer. Correct answer: ${correctValue}`;
          feedback.className = "quiz-feedback quiz-feedback-wrong";
        }

        feedback.classList.remove("is-hidden");
        if (explanation) explanation.classList.remove("is-hidden");
      });

      scoreEl.textContent = `${score}/${cards.length}`;
      scoreEl.classList.remove("is-hidden");
      scoreCopyEl.textContent = "Answers checked on this page. Read the explanations before you retry.";
      scoreCopyEl.classList.remove("is-hidden");

      checkBtn.classList.add("is-hidden");
      retryBtn.classList.remove("is-hidden");
      backBtn.classList.remove("is-hidden");

      try {
        await fetch(`/packs/${packId}/quiz/attempt`, {
          method: "POST",
          headers: {"Content-Type": "application/json"},
          body: JSON.stringify({score: score, total: cards.length}),
        });
      } catch (err) {
        console.warn("Quiz score could not be logged", err);
      }
    });
  })();
</script>
{% endif %}
{% endblock %}