{% extends "base.html" %}

{% block title %}✨ Magisches Harry-Potter-Escape-Quiz ✨{% endblock %}

{% block content %}
<div class="quiz-wrapper">
    <header class="quiz-header">
        <h1 class="glow-title" id="pageTitle">✨ Magisches Hogwarts-Escape-Quiz ✨</h1>
        <p class="subtitle" id="pageSubtitle">10 knifflige Rätsel aus der Zauberwelt warten auf dich</p>
    </header>

    <!-- Brief-Intro / Startmaske -->
    <div id="introCard" class="card intro-card intro-parchment-wrapper">
        <!-- Antiker geschlossener Hogwarts-Umschlag (öffnet sich bei Klick auf das Siegel) -->
        <!-- Briefumschlag (CodePen-Faltarchitektur mit Hogwarts-Optik) -->
        <div class="envelope-outer-wrap">
            <div class="envelope-form" id="envelope">
                <div class="env-wrap">

                    <!-- Dunklere Pergament-Innenwand (hinter dem Briefbogen) -->
                    <div class="env-body-back"></div>

                    <!-- Der innenliegende Briefbogen (ohne lange Texte, gleitet beim Öffnen heraus) -->
                    <div class="env-letter-sheet" id="letterSheet">
                        <img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts-Wappen" class="letter-crest-small">
                        <h3 class="letter-title" id="letterTitle">Hogwarts-Schule</h3>
                        <p class="letter-subtitle" id="letterSubtitle">für Hexerei und Zauberei</p>
                        <button id="startQuizBtnInLetter" class="btn-launch-express" onclick="startQuizFromLetter()">
                            🚂 Hogwarts-Express besteigen & Prüfung beginnen ➔
                        </button>
                    </div>

                    <!-- Obere V-Klappe (schließt von oben nach unten zur Mitte) -->
                    <div class="env-top" id="envelopeFlap"></div>

                    <!-- Untere Tasche mit Seiten- und Bodenfalzen (CodePen-Taschenfalz) -->
                    <div class="env-bottom-wrap">
                        <div class="env-bottom"></div>
                    </div>

                    <!-- Absender oben links (dezent, klein, wie auf einem echten Brief) -->
                    <div class="env-sender-line" id="envSenderLine">
                        Abs.: Hogwarts Schule für Hexerei und Zauberei
                    </div>

                    <!-- Handgezeichnetes Hogwarts-Wachssiegel exakt in der Mitte -->
                    <div class="sketched-wax-seal" id="waxSeal" onclick="breakSealAndOpenLetter()" title="Siegel brechen & Brief öffnen">
                        <img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts-Wappen Siegel" class="seal-crest-img">
                        <div class="seal-emboss-ring"></div>
                        <div class="seal-glow"></div>
                    </div>

                </div>
            </div>
        </div>

        <!-- Auswahlbereich unter dem Pergament -->
        <div class="intro-content intro-controls-panel" id="introControls">
            <p class="intro-subnote" id="introDesc">
                Ein verzauberter Pergamentbrief aus Hogwarts liegt vor dir.<br>
                Wähle deinen Schwierigkeitsgrad und brich das rote Zaubersiegel:
            </p>

            <!-- Difficulty Selector Chips -->
            <div class="difficulty-selection">
                <span class="difficulty-label" id="diffLabel">Schwierigkeitsgrad wählen:</span>
                <div class="difficulty-chips" role="radiogroup" aria-label="Schwierigkeitsgrad">
                    <button type="button" class="diff-chip active" data-diff="all" onclick="selectDifficulty('all')">
                        <span class="diff-icon">🎲</span> <span class="diff-text" id="diffAllText">Alle gemischt</span>
                    </button>
                    <button type="button" class="diff-chip" data-diff="easy" onclick="selectDifficulty('easy')">
                        <span class="diff-icon">🟢</span> <span class="diff-text" id="diffEasyText">Leicht</span>
                    </button>
                    <button type="button" class="diff-chip" data-diff="medium" onclick="selectDifficulty('medium')">
                        <span class="diff-icon">🟡</span> <span class="diff-text" id="diffMedText">Mittel</span>
                    </button>
                    <button type="button" class="diff-chip" data-diff="hard" onclick="selectDifficulty('hard')">
                        <span class="diff-icon">🔴</span> <span class="diff-text" id="diffHardText">Schwer</span>
                    </button>
                </div>
            </div>

            <div class="intro-action-container">
                <button id="breakSealBtn" class="btn btn-primary btn-large btn-break-seal" onclick="breakSealAndOpenLetter()">
                    📜 Siegel brechen & Brief öffnen
                </button>
                <div id="letterActions" class="letter-actions hidden">
                    <button id="startQuizBtn" class="btn btn-primary btn-large btn-launch-quiz glow-pulse" onclick="startQuizFromLetter()">
                        🚂 Hogwarts-Express besteigen & Prüfung beginnen ➔
                    </button>
                    <button id="closeLetterBtn" class="btn btn-secondary btn-close-letter" onclick="closeLetter()">
                        ↩ Brief wieder schließen
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Spielbereich (initial versteckt) -->
    <div id="gameCard" class="game-area hidden">
        <!-- Fortschritt & Punkte & Zeit -->
        <div class="status-panel">
            <div class="progress-info">
                <span id="questionCounter">Frage 1 von 10</span>
                <span id="timerBadge" class="timer-badge">⏱️ 00:00</span>
                <span id="pointsCounter" class="points-badge">🏆 Hauspunkte: 0</span>
            </div>
            <div class="progress-container">
                <div id="progressBar" class="progress-bar"></div>
            </div>
        </div>

        <!-- Frage-Container -->
        <div id="frageBox" class="card question-card">
            <div class="question-meta">
                <div class="meta-left">
                    <span id="badgeCategory" class="badge">⚡ Harry Potter</span>
                    <span id="badgeDifficulty" class="badge badge-diff">🟢 Leicht</span>
                </div>
                <span id="attemptBadge" class="attempt-badge">Versuch 1 von 3</span>
            </div>

            <h2 id="frageText" class="question-text">Lade verzauberte Schriftrollen...</h2>

            <!-- Freitext-Eingabe (wenn question_type == 'text') -->
            <div id="textAnswerGroup" class="answer-form">
                <input type="text" id="answerInput" class="input-answer" placeholder="Deine Antwort hier eingeben..." autocomplete="off">
                
                <div class="btn-group">
                    <button id="checkBtn" class="btn btn-primary" onclick="checkAnswer()">
                        ✨ Antwort prüfen
                    </button>
                    <button id="hintBtn" class="btn btn-secondary" onclick="requestHint()">
                        💡 Hinweis anzeigen
                    </button>
                </div>
            </div>

            <!-- Multiple-Choice-Auswahl (wenn question_type == 'multiple_choice') -->
            <div id="choiceAnswerGroup" class="choice-group hidden">
                <div id="choiceOptionsContainer" class="choice-grid"></div>
                <div class="btn-group" style="margin-top: 15px;">
                    <button id="hintBtnMC" class="btn btn-secondary" onclick="requestHint()">
                        💡 Hinweis anzeigen
                    </button>
                </div>
            </div>

            <div id="hintBox" class="hint-box hidden">
                <strong id="hintHeading">📜 Notiz aus der verbotenen Abteilung:</strong>
                <p id="hintText"></p>
            </div>

            <div id="feedbackBox" class="feedback-box"></div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/quiz.js?v=2.9"></script>
{% endblock %}