{% extends "base.html" %}

{% block title %}{% if lang == 'en' %}🏆 Hogwarts Hall of Fame – Leaderboard{% else %}🏆 Die Große Hogwarts-Ruhmeshalle – Bestenliste{% endif %}{% endblock %}

{% block content %}
<div class="quiz-wrapper">
    <div class="card leaderboard-card">
        <div class="leaderboard-header" style="text-align: center; margin-bottom: 20px;">
            <span class="sparkle-icon">🏆</span>
            <h1 class="glow-title" id="lbPageTitle">
                {% if lang == 'en' %}🏆 The Grand Hogwarts Hall of Fame 🏆{% else %}🏆 Die Große Hogwarts-Ruhmeshalle 🏆{% endif %}
            </h1>
            <p class="subtitle" id="lbPageSubtitle">
                {% if lang == 'en' %}The most brilliant witches and wizards of all time{% else %}Die schlauesten Hexen und Zauberer aller Zeiten{% endif %}
            </p>
        </div>

        <!-- Filter tabs for difficulty -->
        <div class="diff-filter-tabs">
            <button type="button" class="tab-btn active" data-diff="all" onclick="filterLeaderboard('all', this)" id="tabAll">
                🎲 {% if lang == 'en' %}All Mixed{% else %}Alle gemischt{% endif %}
            </button>
            <button type="button" class="tab-btn" data-diff="easy" onclick="filterLeaderboard('easy', this)" id="tabEasy">
                🟢 {% if lang == 'en' %}Easy{% else %}Leicht{% endif %}
            </button>
            <button type="button" class="tab-btn" data-diff="medium" onclick="filterLeaderboard('medium', this)" id="tabMed">
                🟡 {% if lang == 'en' %}Medium{% else %}Mittel{% endif %}
            </button>
            <button type="button" class="tab-btn" data-diff="hard" onclick="filterLeaderboard('hard', this)" id="tabHard">
                🔴 {% if lang == 'en' %}Hard{% else %}Schwer{% endif %}
            </button>
        </div>

        <div class="table-responsive" style="margin-top: 20px;">
            <table class="lb-table">
                <thead>
                    <tr>
                        <th style="width: 50px;">#</th>
                        <th id="thWizard">Zauberer</th>
                        <th id="thScore">Punkte</th>
                        <th id="thDuration">Zeit</th>
                        <th id="thDiff">Schwierigkeit</th>
                        <th id="thDate">Datum</th>
                    </tr>
                </thead>
                <tbody id="leaderboardBody">
                    <tr>
                        <td colspan="6" style="text-align: center; padding: 25px; color: var(--text-muted);">
                            ✨ Lade die Pergamente der Ruhmeshalle...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="btn-group" style="margin-top: 30px;">
            <a href="/" class="btn btn-primary" id="btnPlayNow">
                ✨ {% if lang == 'en' %}Play Now & Secure Rank{% else %}Jetzt spielen & Platz sichern{% endif %}
            </a>
            <a href="/vorschlag" class="btn btn-secondary" id="btnSuggestQ">
                ✍️ {% if lang == 'en' %}Submit Question{% else %}Frage einreichen{% endif %}
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    let currentFilter = "all";

    const LB_I18N = {
        de: {
            title: "🏆 Die Große Hogwarts-Ruhmeshalle 🏆",
            sub: "Die schlauesten Hexen und Zauberer aller Zeiten",
            tabAll: "🎲 Alle gemischt",
            tabEasy: "🟢 Leicht",
            tabMed: "🟡 Mittel",
            tabHard: "🔴 Schwer",
            thWizard: "Zauberer",
            thScore: "Punkte",
            thDuration: "Zeit",
            thDiff: "Schwierigkeit",
            thDate: "Datum",
            btnPlay: "✨ Jetzt spielen & Platz sichern",
            btnSuggest: "✍️ Frage einreichen",
            empty: "Noch keine Einträge vorhanden. Sei der Erste, der sich verewigt!",
            loading: "✨ Lade die Pergamente der Ruhmeshalle..."
        },
        en: {
            title: "🏆 The Grand Hogwarts Hall of Fame 🏆",
            sub: "The most brilliant witches and wizards of all time",
            tabAll: "🎲 All Mixed",
            tabEasy: "🟢 Easy",
            tabMed: "🟡 Medium",
            tabHard: "🔴 Hard",
            thWizard: "Wizard",
            thScore: "Points",
            thDuration: "Time",
            thDiff: "Difficulty",
            thDate: "Date",
            btnPlay: "✨ Play Now & Secure Rank",
            btnSuggest: "✍️ Submit Question",
            empty: "No entries yet. Be the first to enter the Hall of Fame!",
            loading: "✨ Unrolling the scrolls of the Hall of Fame..."
        }
    };

    function onLanguageChange(lang) {
        const isDe = (lang !== "en");
        const t = isDe ? LB_I18N.de : LB_I18N.en;

        const title = document.getElementById("lbPageTitle");
        const sub = document.getElementById("lbPageSubtitle");
        const tabAll = document.getElementById("tabAll");
        const tabEasy = document.getElementById("tabEasy");
        const tabMed = document.getElementById("tabMed");
        const tabHard = document.getElementById("tabHard");
        const thWizard = document.getElementById("thWizard");
        const thScore = document.getElementById("thScore");
        const thDuration = document.getElementById("thDuration");
        const thDiff = document.getElementById("thDiff");
        const thDate = document.getElementById("thDate");
        const btnPlay = document.getElementById("btnPlayNow");
        const btnSuggest = document.getElementById("btnSuggestQ");

        if (title) title.innerText = t.title;
        if (sub) sub.innerText = t.sub;
        if (tabAll) tabAll.innerText = t.tabAll;
        if (tabEasy) tabEasy.innerText = t.tabEasy;
        if (tabMed) tabMed.innerText = t.tabMed;
        if (tabHard) tabHard.innerText = t.tabHard;
        if (thWizard) thWizard.innerText = t.thWizard;
        if (thScore) thScore.innerText = t.thScore;
        if (thDuration) thDuration.innerText = t.thDuration;
        if (thDiff) thDiff.innerText = t.thDiff;
        if (thDate) thDate.innerText = t.thDate;
        if (btnPlay) btnPlay.innerText = t.btnPlay;
        if (btnSuggest) btnSuggest.innerText = t.btnSuggest;

        loadLeaderboard(currentFilter);
    }

    function filterLeaderboard(diff, btn) {
        currentFilter = diff;
        document.querySelectorAll(".diff-filter-tabs .tab-btn").forEach(b => b.classList.remove("active"));
        if (btn) btn.classList.add("active");
        loadLeaderboard(diff);
    }

    async function loadLeaderboard(diff) {
        const tbody = document.getElementById("leaderboardBody");
        const isDe = (currentLang !== "en");
        const t = isDe ? LB_I18N.de : LB_I18N.en;

        tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding: 25px; color: var(--text-muted);">${t.loading}</td></tr>`;

        try {
            const url = (diff && diff !== "all") ? `/api/leaderboard?difficulty=${diff}` : "/api/leaderboard";
            const res = await fetch(url);
            const entries = await res.json();

            if (!entries || entries.length === 0) {
                tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding: 30px; color: var(--text-muted);">${t.empty}</td></tr>`;
                return;
            }

            tbody.innerHTML = "";
            const medals = ["🥇", "🥈", "🥉"];
            entries.forEach(e => {
                const tr = document.createElement("tr");
                const rankDisplay = medals[e.rank - 1] || `${e.rank}.`;
                const diffBadgeClass = `badge-diff-${e.difficulty || 'medium'}`;

                let diffLabel = e.difficulty;
                if (e.difficulty === "easy") diffLabel = isDe ? "🟢 Leicht" : "🟢 Easy";
                else if (e.difficulty === "medium") diffLabel = isDe ? "🟡 Mittel" : "🟡 Medium";
                else if (e.difficulty === "hard") diffLabel = isDe ? "🔴 Schwer" : "🔴 Hard";
                else diffLabel = isDe ? "🎲 Gemischt" : "🎲 Mixed";

                tr.innerHTML = `
                    <td><strong>${rankDisplay}</strong></td>
                    <td><strong>${escapeHtml(e.nickname)}</strong></td>
                    <td><span class="gold-text font-weight-bold">${e.score} Pkt.</span></td>
                    <td>${e.time_formatted}</td>
                    <td><span class="badge badge-diff ${diffBadgeClass}">${diffLabel}</span></td>
                    <td class="text-muted" style="font-size: 0.85rem;">${e.date}</td>
                `;
                tbody.appendChild(tr);
            });
        } catch (err) {
            tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; color: #ff7675; padding: 20px;">Fehler beim Laden: ${err.message}</td></tr>`;
        }
    }

    function escapeHtml(str) {
        if (!str) return "";
        return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
    }

    document.addEventListener("DOMContentLoaded", () => {
        onLanguageChange(currentLang);
    });
</script>
{% endblock %}