{% 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">
        <div class="intro-envelope" id="envelope">
            <div class="envelope-body">
                <div class="envelope-flap"></div>
                <div class="wax-seal">H</div>
                <div class="letter-preview">
                    <p class="letter-text" id="envelopeLetter">Hogwarts-Schule für Hexerei und Zauberei</p>
                </div>
            </div>
        </div>
        <div class="intro-content">
            <p class="intro-text" id="introDesc">
                Ein verzauberter Brief aus Hogwarts schwebt vor dir in der Luft.<br>
                Bist du bereit, die Prüfungen abzulegen und deine Hauspunkte zu sichern?
            </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" onclick="startGame()">
                📜 Siegel brechen & Brief öffnen
            </button>
        </div>
    </div>

    <!-- Spielbereich (initial versteckt) -->
    <div id="gameCard" class="game-area hidden">
        <!-- Fortschritt & Punkte -->
        <div class="status-panel">
            <div class="progress-info">
                <span id="questionCounter">Frage 1 von 10</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()">
                        ✨ Zauber prüfen
                    </button>
                    <button id="hintBtn" class="btn btn-secondary" onclick="requestHint()">
                        💡 Zaubertipp
                    </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()">
                        💡 Zaubertipp
                    </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"></script>
{% endblock %}