{% extends 'base.html' %}

{% block content %}
<div class="container mx-auto px-4">
    <div class="bg-white rounded-lg shadow-md p-6 mb-6 dark:bg-transparent dark:text-white">
        <h1 class="text-3xl font-bold mb-6">Ergebnisse</h1>
       


        <div class="mb-6">
            {% if request.session.mode != "learn" %}
            <h2 class="text-xl font-bold mb-4">Punktestand</h2>
              {% endif %}

            <div id="scoreboard" class="leading-relaxed">
                {% for participant in participants %}
                {% if request.session.mode != "learn"  %}
                    {% if participant == my_participant or is_host %}
                        <div class="dark:bg-transparent mt-2 shadow-sm p-4 bg-gray-100 rounded-lg border-2 border
                                             {% if forloop.counter <= 3 %}
                      {% if forloop.counter == 1 %}border-yellow-400{% endif %}
                      {% if forloop.counter == 2 %}border-gray-400{% endif %}
                      {% if forloop.counter == 3 %}border-orange-400{% endif %}
                    {% else %}
                    border-transparent{% endif %}">
                            <div class="flex flex-col items-start gap-1">  
                                <div class="text-4xl font-bold flex items-center gap-2">
                                    {% if forloop.counter == 1 %}
                                        🥇 
                                    {% elif forloop.counter == 2 %}
                                        🥈 
                                    {% elif forloop.counter == 3 %}
                                        🥉 
                                        {% else %}
                                        {{ forloop.counter }}.
                                    {% endif %}
                                    <span class="display_name text-gray-600 font-black text-3xl dark:text-white " id="display_name-{{ forloop.counter0 }}">{{ participant.display_name }}</span>
                                </div>
                                
                                <p data-score="{{ participant.score }}" data-last-score="{{ participant.last_score }}" class="dark:text-white text-gray-600 font-bold show-score text-xl" id="score-{{ forloop.counter0 }}">{{ participant.score }} Punkte</p> 
                                {% if participant == my_participant or request.session.mode == "learn"%}
                                <p class="text-blue-600 font-bold text-md">+{{ participant.last_score }} Punkte</p>
                            
                               
                               {% endif %}
                                         </div>
                                        </div>
                              {% endif %}
                              
                               
                     
                         {% endif %}
            
                {% endfor %}
            </div>
        </div>  
 
    {% if is_host %}
        {% if is_last_question %}
        {% if is_last_question and request.session.mode != "learn" %}
               <button id="winner-button" class="mt-4 w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
                Siegerpodest
            </button>
         
        {% else %}
            <button id="finish-button" class="mt-4 w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
                Quiz beenden
            </button>
               {% endif %}
        {% else %}
                
             <button id="next-button" class="mt-4 w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
                Nächste Frage

            </button>

           
        {% endif %}
    {% endif %}    
    </div>
</div>
{% endblock %}

{% block extra_js %}
{% if is_last_question %}

{% endif %}  
{% include 'play/game/common_scripts.html' %}
{% if is_host %}
{% include 'play/game/sound.html' %}
{% endif %}




<script>
                              async function start() {

                            elements=document.getElementsByClassName("show-score");
                            for (let i = 0; i < elements.length; i++) {
                            const el = elements[i];

                            let counter=Number(el.getAttribute('data-score'))-Number(el.getAttribute('data-last-score'));
                            let goal=Number(el.getAttribute('data-score'));
                            let interval= setInterval(function(){
                            el.innerHTML = counter + " Punkte";

                               
                                if(counter<=goal){
                            el.innerHTML = counter + " Punkte";
                            counter+=8;
                           
                                }
                                else{
                                    
                                    el.innerHTML = goal + " Punkte";
                                    clearInterval(interval);
                                }

                            }, 20);}}

                            function bounce(){
                                                            
                            const names = document.getElementsByClassName("display_name");
                            for (let i = 0; i < names.length; i++) {
                            names[i].classList.add("animate-bounce");
                           }
                            }
 

                            {% if is_last_question %}
                            start();
                            bounce();
                                

                            {% else %}
                             start();
                                {% endif %}
    
const richtigeAntworten = [
  "Deine Antwort ist nicht falsch. Sie ist richtig!",
  "Ja, du kannst es!",
  "So kann es weiter gehen.",
  "Ja, deine Antwort ist korrekt. Was soll ich dazu noch sagen? SUPER!",
  "SUPER GUT.",
  "Volltreffer!",
  "Bravo! Das sitzt!",
  "Na bitte, geht doch!",
  "Schön. Einfach schön.",
  "Exzellent kombiniert, Sherlock!",
  "Punkt für dich!",
  "Das war meisterhaft.",
  "Korrekt - du scheinst das zu können!",
  "So sieht Erfolg aus!",
  "Glänzend gelöst!",
  "Das war keine Glückssache - das war Können!",
  "Treffer, versenkt!",
  "Du hast es drauf!",
  "Da merkt man: Profi am Werk.",
  "Richtige Antwort - dafür gibt es viele Punkte!",
  "Weiter so!",
  "Wow - das war richtig gut!"
];

const falscheAntworten = [
  "Oops! War wohl nicht dein Tag.",
  "Knapp daneben ist auch vorbei!",
  "Das war... kreativ!",
  "Wenn man schon alles wüsste, wäre das Quiz doch sinnlos.",
  "Deine Antwort war einzigartig - leider falsch!",
  "Na gut, wenigstens hast du es probiert.",
  "Das war eine interessante Theorie...",
  "Ein Genie irrt sich auch mal.",
  "Eine gute Antwort - aber nicht auf diese Frage.",
  "Das ist leider falsch. Mehr gibt es nicht zu sagen.",
  "Gute Idee! Aber leider nicht richtig.",
  "Oh weh! Ein Fehler. Naja, einer ist keiner.",
  "Die Antwort klang richtig, sie ist es aber nicht.",
  "Interessanter Ansatz. Nicht hilfreich, aber interessant.",
  "Nenn das lieber „alternative Fakten“.",
  "Du hast die richtige Antwort doch gewusst: 'Die Seite hat nur nicht geladen.'",
  "Jeder fängt mal klein an!",
  "Kopf hoch - weiter geht's!",
  "Nobody is perfect!",
  "Du schaffst das - vielleicht ab jetzt.",
  "Falsche Antwort, aber guter Wille!",
  "Übung macht den Quiz-Meister.",
  "Beim nächsten Mal triffst du!",
  "Das war nur zum Aufwärmen, oder?",
  "Kein Problem - weiter geht's.",
  "Gute Frage - aber falsche Antwort."
];


const antwortRichtig = document.getElementById("antwort-richtig");
const antwortFalsch = document.getElementById("antwort-falsch");

if (antwortRichtig) {
  antwortRichtig.textContent = richtigeAntworten[Math.floor(Math.random() * richtigeAntworten.length)];
} else if (antwortFalsch) {
  antwortFalsch.textContent = falscheAntworten[Math.floor(Math.random() * falscheAntworten.length)];
}
    const joinCode = '{{ quiz_game.join_code }}';
    const hostId = '{{ host_id }}';
    const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
    const gameSocket = new WebSocket(
        `${wsScheme}://${window.location.host}/ws/game/${joinCode}/`
    );

    gameSocket.onmessage = function(e) {
        const data = JSON.parse(e.data);
        if (data.type === 'game_state_update' && 
    data.redirect_url && 
    (data.action === 'next_question' || data.action === 'finish_game' || data.action === 'show_winner_podest'|| data.action === 'show_scoreboard')) {
    window.location.href = data.redirect_url;
}
 else if (data.type === 'answer_stats') {
            updateAnswerStats(data.stats);
        }
    };

    gameSocket.onclose = function(e) {
        // Normal closure (code 1000) oder Navigation zu einer anderen Seite (code 1001)
        if (e.code === 1000 || e.code === 1001) {
            console.log('Game socket closed normally');
        } else {
            console.error('Game socket closed unexpectedly', e.code);
        }
    };

    {% if is_host %}
    // Add click handlers for host buttons
    {% if is_last_question %}
    var finishButton = document.getElementById('finish-button');
    if (finishButton) {
        finishButton.addEventListener('click', function() {
            gameSocket.send(JSON.stringify({
                'type': 'finish_game',
                'host_id': hostId
            }));
        });
    }

    var podestButton = document.getElementById('winner-button');
    if (podestButton) {
        podestButton.addEventListener('click', function() {
            gameSocket.send(JSON.stringify({
                'type': 'winner_podest',
                'host_id': hostId
            }));
        });
    }

    {% else %}

        var scoreboardButton = document.getElementById('scoreboard-button');
    if (scoreboardButton) {
        scoreboardButton.addEventListener('click', function() {
            gameSocket.send(JSON.stringify({
                'type': 'scoreboard',
                'host_id': hostId
            }));
        });
    }


    var nextButton = document.getElementById('next-button');
    if (nextButton) {
        nextButton.addEventListener('click', function() {
            gameSocket.send(JSON.stringify({
                'type': 'next_question',
                'host_id': hostId
            }));
        }, { once: true });
    }
    {% endif %}
    {% endif %}

function updateAnswerStats(stats) {
    const total = Object.values(stats).reduce((a, b) => a + b, 0) || 1;

    for (var optionIndex in stats) {
        if (stats.hasOwnProperty(optionIndex)) {
            var countElement = document.getElementById('option-count-' + optionIndex);
            var fillElement = document.getElementById('option-fill-' + optionIndex);

            if (countElement) {
                countElement.textContent = stats[optionIndex] + ' Antwort(en)';
            }

            if (fillElement) {
                const percentage = Math.round((stats[optionIndex] / total) * 100);
                fillElement.style.width = percentage + '%';
            }
        }
    }
}

    // Request answer stats when page loads
    gameSocket.onopen = function(e) {
        gameSocket.send(JSON.stringify({
            'type': 'get_answer_stats'
        }));
    };
</script>
{% endblock %}