{% 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) -->
        <!-- Antiker geschlossener Hogwarts-Umschlag (öffnet sich bei Klick auf das Siegel) -->
        <div class="antique-envelope-scene" id="envelopeScene">
            <div class="envelope-base" id="envelope">
                <!-- Dunklere Pergament-Innenwand (hinter dem Briefbogen) -->
                <div class="envelope-interior"></div>

                <!-- Der darin liegende Briefbogen (gleitet beim Öffnen majestätisch hervor) -->
                <div class="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>

                <!-- Solide Rückseite des Briefumschlags mit Nahtlinien -->
                <div class="envelope-back-body">
                    <!-- Schöne diagonale Faltungsnähte auf der Rückseite -->
                    <svg class="envelope-body-folds" viewBox="0 0 100 100" preserveAspectRatio="none">
                        <line x1="0" y1="100" x2="50" y2="55" stroke="#7a5528" stroke-width="1.2" stroke-dasharray="3 2" />
                        <line x1="100" y1="100" x2="50" y2="55" stroke="#7a5528" stroke-width="1.2" stroke-dasharray="3 2" />
                    </svg>
                </div>

                <!-- Absender oben links auf der Rückseite (dezent, handschriftlich) -->
                <div class="env-sender-line" id="envSenderLine">
                    Abs.: Hogwarts Schule für Hexerei und Zauberei
                </div>

                <!-- Markante obere V-Klappe mit klarer Kontur & Schattierung -->
                <div class="envelope-closing-flap" id="envelopeFlap">
                    <svg class="v-flap-outline" viewBox="0 0 100 55" preserveAspectRatio="none">
                        <polyline points="0,0 50,55 100,0" fill="none" stroke="#7a5528" stroke-width="1.6" stroke-dasharray="3 2" />
                        <polyline points="1,0 50,53.5 99,0" fill="none" stroke="rgba(255,255,255,0.45)" stroke-width="1" />
                    </svg>
                </div>

                <!-- Handgezeichnetes Hogwarts-Wachssiegel exakt auf 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=3.1"></script>
{% endblock %}