{% 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 Hogwarts-Brief -->
        <div class="hogwarts-parchment-letter" id="envelope">
            <!-- Marmorierte Pergament-Textur & Lichteffekte -->
            <div class="parchment-texture-layer"></div>
            <div class="parchment-vignette"></div>
            <div class="parchment-sketch-border"></div>

            <!-- Handgezeichnetes Wachssiegel -->
            <div class="sketched-wax-seal" id="waxSeal" onclick="startGame()" title="Siegel brechen & Prüfung beginnen">
                <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>

            <!-- Briefinhalt -->
            <div class="letter-inner">
                <header class="letter-header">
                    <div class="letter-crest-box">
                        <img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts Crest" class="letter-crest-sketch">
                    </div>
                    <h2 class="letter-school-name" id="letterSchoolTitle">Hogwarts-Schule für Hexerei und Zauberei</h2>
                    <p class="letter-headmaster" id="letterHeadmaster">Schulleiter: Albus Dumbledore<br><span>(Großhexenmeister, Träger des Merlin-Ordens Erster 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">
                        wir freuen uns, dir mitteilen zu dürfen, dass du zu den <strong>Magischen Z.A.G.-Prüfungen</strong> des Zaubereiministeriums zugelassen bist.
                    </p>
                    <p class="letter-paragraph" id="letterParagraph2">
                        Zehn anspruchsvolle Prüfungsfragen entscheiden über deinen Rang in den Chroniken von Hogwarts. Zeige deinen Scharfsinn und sichere bis zu <strong>1.000 Hauspunkte</strong> für dein Haus!
                    </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>
        </div>

        <!-- Auswahlbereich unter dem Pergament -->
        <div class="intro-content intro-controls-panel">
            <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>

            <button id="startBtn" class="btn btn-primary btn-large btn-break-seal" onclick="startGame()">
                📜 Siegel brechen & Brief öffnen
            </button>
        </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.4"></script>
{% endblock %}