{% 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) -->
        <div class="antique-envelope-scene" id="envelope">
            <div class="envelope-base">
                <!-- Dunkleres Pergament-Innenfutter -->
                <div class="envelope-interior"></div>

                <!-- Der darin liegende Briefbogen (gleitet beim Öffnen majestätisch hervor) -->
                <div class="letter-sheet" id="letterSheet">
                    <div class="sheet-parchment-layer"></div>
                    <header class="letter-header">
                        <div class="letter-crest-box">
                            <img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts Crest" class="letter-crest-sketch">
                        </div>
                        <h3 class="letter-school-name" id="letterSchoolTitle">Hogwarts-Schule für Hexerei und Zauberei</h3>
                        <p class="letter-headmaster" id="letterHeadmaster">Schulleiter: Albus Dumbledore<br><span>(Großhexenmeister, Träger des Merlin-Ordens 1. Klasse)</span></p>
                        <div class="letter-ornament-line">
                            <span class="ornament-leaf">❦</span>
                            <span class="ornament-rule"></span>
                            <span class="ornament-shield">✦</span>
                            <span class="ornament-rule"></span>
                            <span class="ornament-leaf">❧</span>
                        </div>
                    </header>

                    <div class="letter-body-handwritten">
                        <p class="letter-salutation" id="letterSalutation">Liebe Hexe, lieber Zauberer,</p>
                        <p class="letter-paragraph" id="letterParagraph1">
                            die schwebenden Kerzen der Großen Halle flackern in unruhigem Schein, und der Sprechende Hut hat nach Jahrhunderten des Schweigens ein wohlbehütetes Geheimnis preisgegeben: Tief in den uralten Gewölben des Schlosses – verborgen hinter den wachsamen Wasserspeiern und den staubigen Bänden der Verbotenen Abteilung – wurde eine magische Prüfungsurkunde versiegelt.
                        </p>
                        <p class="letter-paragraph" id="letterParagraph2">
                            Zehn arkanische Prüfungen des Scharfsinns, der Zauberkunde und der Entschlossenheit liegen vor dir. Nur wer wahren Mut beweist und die uralten Rätsel meistert, sichert sich seinen ehrenvollen Platz in den Chroniken von Hogwarts und trägt bis zu <strong>1.000 Hauspunkte</strong> für sein Haus davon!
                        </p>
                        <p class="letter-paragraph" id="letterParagraph3">
                            Halte deinen Zauberstab bereit, besinne dich auf deine Flüche und Gegenzauber und nimm dich vor verhexten Trugschlüssen in Acht. Wir erwarten deine Eule nicht später als mit dem nächsten Glockenschlag des Uhrenturms.
                        </p>
                    </div>

                    <footer class="letter-signature-block">
                        <p class="letter-closing" id="letterClosing">Mit vorzüglicher Hochachtung,</p>
                        <p class="letter-signature-ink" id="letterSignature">Minerva McGonagall</p>
                        <p class="letter-sign-title" id="letterSignTitle">Stellvertretende Schulleiterin</p>
                    </footer>
                </div>

                <!-- Solide Rückseite des Briefumschlags -->
                <div class="envelope-back-body">
                    <!-- Absender oben links auf der Rückseite (sonst kein Text) -->
                    <div class="envelope-sender-block" id="envelopeSenderBlock">
                        <span class="sender-label" id="senderLabel">Absender:</span>
                        <p class="sender-name" id="envelopeSender">Hogwarts-Schule für Hexerei und Zauberei</p>
                        <p class="sender-location" id="envelopeSenderLocation">Schulleitung • Schloss Hogwarts</p>
                    </div>
                </div>

                <!-- Markante dreieckige V-Verschluss-Lasche -->
                <div class="envelope-closing-flap envelope-v-flap" id="envelopeFlap">
                    <div class="v-flap-sketch-line"></div>
                </div>

                <!-- Handgezeichnetes Wachssiegel über der Klappenspitze -->
                <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>

        <!-- 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.8"></script>
{% endblock %}