{% extends "base.html" %}

{% block title %}⚡ PotterTrivia – Das Harry-Potter-Wissensquiz{% endblock %}

{% block content %}
<div class="quiz-wrapper">
    <header class="quiz-header">
        <div class="hero-pill" id="heroPill">⚡ {{ question_count }} Fragen im Wissens-Pool · Buch & Film</div>
        <h1 class="glow-title" id="pageTitle">Harry Potter Wissensquiz</h1>
        <p class="subtitle" id="pageSubtitle">Teste dein Wissen über Bücher, Filme, Geschöpfe und Zaubersprüche – direkt & ohne Umwege.</p>
    </header>

    <!-- Kompaktes Direct-Start Dashboard -->
    <div id="introCard" class="card start-dashboard-card">
        <div class="dashboard-grid">
            <!-- Sektion 1: Schwierigkeitsgrad -->
            <div class="config-section">
                <div class="config-header">
                    <span class="config-step">1</span>
                    <span class="difficulty-label" id="diffLabel">Schwierigkeitsgrad</span>
                </div>
                <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 Stufen</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 (Experte)</span>
                    </button>
                </div>
            </div>

            <!-- Sektion 2: Kategorie-Filter -->
            <div class="config-section">
                <div class="config-header">
                    <span class="config-step">2</span>
                    <span class="difficulty-label" id="catLabel">Themengebiet wählen</span>
                </div>
                <div class="category-chips" role="radiogroup" aria-label="Themengebiet">
                    <button type="button" class="cat-chip active" data-cat="all" onclick="selectCategory('all')">
                        <span>✨</span> <span id="catAllText">Alle Kategorien</span>
                    </button>
                    <button type="button" class="cat-chip" data-cat="books" onclick="selectCategory('books')">
                        <span>📖</span> <span id="catBooksText">Buchwissen</span>
                    </button>
                    <button type="button" class="cat-chip" data-cat="movies" onclick="selectCategory('movies')">
                        <span>🎬</span> <span id="catMoviesText">Filmwissen</span>
                    </button>
                    <button type="button" class="cat-chip" data-cat="creatures" onclick="selectCategory('creatures')">
                        <span>🐉</span> <span id="catCreaturesText">Magische Geschöpfe</span>
                    </button>
                    <button type="button" class="cat-chip" data-cat="spells" onclick="selectCategory('spells')">
                        <span>🪄</span> <span id="catSpellsText">Zaubersprüche & Tränke</span>
                    </button>
                    <button type="button" class="cat-chip" data-cat="characters" onclick="selectCategory('characters')">
                        <span>🧙‍♂️</span> <span id="catCharsText">Charaktere</span>
                    </button>
                    <button type="button" class="cat-chip" data-cat="hogwarts" onclick="selectCategory('hogwarts')">
                        <span>🏰</span> <span id="catHogwartsText">Hogwarts & Orte</span>
                    </button>
                    <button type="button" class="cat-chip" data-cat="quidditch" onclick="selectCategory('quidditch')">
                        <span>🧹</span> <span id="catQuidditchText">Quidditch</span>
                    </button>
                    <button type="button" class="cat-chip" data-cat="lore" onclick="selectCategory('lore')">
                        <span>🔮</span> <span id="catLoreText">Artefakte & Lore</span>
                    </button>
                </div>
            </div>
        </div>

        <div class="dashboard-footer">
            <div class="dashboard-rules" id="dashboardRules">
                <span>🎯 10 Fragen pro Runde</span>
                <span>·</span>
                <span>🔥 Streak-Zähler</span>
                <span>·</span>
                <span>💡 Bis zu 3 Versuche je Frage</span>
            </div>
            <button id="startQuizBtn" class="btn btn-primary btn-large btn-launch-quiz" onclick="startGame()">
                ⚡ Quiz jetzt starten ➔
            </button>
        </div>
    </div>

    <!-- Spielbereich (initial versteckt) -->
    <div id="gameCard" class="game-area hidden">
        <!-- HUD: Fortschritt, Streak, Zeit & Punkte -->
        <div class="status-panel">
            <div class="progress-info">
                <span id="questionCounter" class="hud-pill">Frage 1 / 10</span>
                <div class="hud-center-group">
                    <span id="streakBadge" class="streak-badge" title="Antwort-Serie in Folge">🔥 0</span>
                    <span id="timerBadge" class="timer-badge">⏱️ 00:00</span>
                </div>
                <span id="pointsCounter" class="points-badge">🏆 0 Pkt.</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">⚡ Allgemein</span>
                    <span id="badgeDifficulty" class="badge badge-diff">🟢 Leicht</span>
                </div>
                <span id="attemptBadge" class="attempt-badge">Versuch 1 / 3</span>
            </div>

            <h2 id="frageText" class="question-text">Lade nächste Frage...</h2>

            <!-- Freitext-Eingabe (wenn question_type == 'text') -->
            <div id="textAnswerGroup" class="answer-form">
                <input type="text" id="answerInput" class="input-answer" placeholder="Deine Antwort 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()">
                        💡 Tipp 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: 16px;">
                    <button id="hintBtnMC" class="btn btn-secondary" onclick="requestHint()">
                        💡 Tipp anzeigen
                    </button>
                </div>
            </div>

            <div id="hintBox" class="hint-box hidden">
                <strong id="hintHeading">💡 Hinweis:</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=4.0"></script>
{% endblock %}