{% extends 'base.html.twig' %}

{% block title %}PixelのKami | Lobby{% endblock %}

{% block body %}
<style>
    body {
        background: radial-gradient(circle, #FF7221 0%,rgba(255, 255, 255, 0.15) 100%),#ff7221;
    }

    nav {
        display:none;
    }

    .bgshadow {
        box-shadow: 8px 8px 0px 0px rgba(255, 255, 255, 0.5);
    }

    .stroke {
        -webkit-text-stroke: 1px #FF7221; /* Bordure noire autour du texte */
        color: white; /* Le texte sera uniquement la bordure */
    }

    .stroke_score {
        -webkit-text-stroke: 1.6px #FF7221; /* Bordure noire autour du texte */
        color: white; /* Le texte sera uniquement la bordure */
    }

    video {
        width: -webkit-fill-available;
    }

    .selectedButton {
        border: solid 2px #1F2223;
    }
    
</style>

<div class="flex grow flex-col text-center justify-center justify-items-center px-20 pt-10 pb-0">
    <h1 id="titlePixel" class="text-7xl justify-center font-bold mb-10">PixelのKami</h1>
    <div id="lobby" class="flex grow flex-col items-center">
        <div class="flex bg-white w-1/2 p-6 rounded-3xl bgshadow justify-center mb-20">
            <h1 class="text-[#FF7221] text-3xl font-bold">Joueurs</h1>
        </div>
        <div class="flex grow" id="players-list">
            {% for player in players %}
            <div class="relative w-[100px] h-[100px] mx-8">
                <img class="object-cover rounded-full w-full h-full border-white border-4 drop-shadow-lg" src="{{ asset('img/profilePicture/' ~ player.user.profilePicture) }}" alt="Profile Picture">
                <p class="absolute left-1/2 bottom-4 transform -translate-x-1/2 translate-y-8 text-white text-3xl font-bold drop-shadow-lg stroke">{{ player.user.username }}</p>
            </div>
            {% endfor %}
        </div>
        <div class="flex">
            <div id="join" class="border-2 border-white px-8 py-4 text-2xl {% if joined == true %}hidden{% endif %}">
                <button id="joinButton">Rejoindre</button>
            </div>
            <div id="leave" class="border-2 border-white px-8 py-4 text-2xl mr-10 {% if joined == false %}hidden{% endif %}">
                <button id="leaveButton">Quitter</button>
            </div>
            <div id="start" class="border-2 border-white px-8 py-4 text-2xl {% if joined == false %}hidden{% endif %}">
                <button id="startButton">Lancer la partie</button>
            </div>
        </div>
    </div>
    <div id="game" class="flex hidden bg-white bgshadow rounded-xl w-[60%] self-center p-10 pr-0">
        <div class="flex flex-col w-3/4">
            <div>
                <video id="video">
                    <source id="videoSrc" src="" type="video/mp4" controls>
                    Votre navigateur ne prend pas en charge la vidéo.
                </video>            
            </div>
            <p class="bg-[#0D0D0D] py-2 my-4 rounded-lg text-2xl">De quel animé provient cette image ?</p>
            <div id="duo" class="grid grid-cols-2 gap-4 hidden"></div>
            <div id="carre" class="grid grid-cols-2 gap-4 hidden"></div>
            <div id="cash" class="grid grid-cols-1 gap-4 hidden">
                <div class="flex">
                    <input id="cashAnswer" placeholder="Votre réponse..." class="border-2 border-[#FF7221] px-4 py-2 rounded-l-lg flex grow">
                    <button onclick="sendAnswer('cash', 'cash', this)" class="bg-[#FF7221] px-4 py-2 rounded-r-lg gameButton">Valider</button>
                </div>
                <div id="suggestions" class="mt-2 bg-white border border-gray-300 rounded-lg max-h-48 overflow-auto"></div>
            </div>
        </div>
        <div class="flex flex-col grow">
            <div class="flex self-center pt-6">
                <div class="relative border-[#FF7221] border-4 p-4" style="background-color:rgba(255, 114, 33, 0.7)">
                    <p class="stroke_score text-5xl absolute left-1/2 transform -translate-x-1/2 -top-7">SCORE</p>
                    <div id="score"></div>
                </div>
            </div>
            <div class="flex flex-col mt-4 space-y-4 items-center">
                <div class="flex">
                    <button id="duo-btn" onclick="toggleVisibility('duo')" class="bg-[#0D0D0D] rounded-l-lg py-2 text-2xl w-[100px]">Duo</button>
                    <span class="bg-[#1F2223] rounded-r-lg py-2 text-2xl w-[70px]">1pt</span>
                </div>
                <div class="flex">
                    <button id="carre-btn" onclick="toggleVisibility('carre')" class="bg-[#0D0D0D] rounded-l-lg py-2 text-2xl w-[100px]">Carré</button>
                    <span class="bg-[#1F2223] rounded-r-lg py-2 text-2xl w-[70px]">2pts</span>
                </div>
                <div class="flex">
                    <button id="cash-btn" onclick="toggleVisibility('cash')" class="bg-[#0D0D0D] rounded-l-lg py-2 text-2xl w-[100px]">Cash</button>
                    <span class="bg-[#1F2223] rounded-r-lg py-2 text-2xl w-[70px]">4pts</span>
                </div>
            </div>
            <div id="playersReady" class="flex bg-[#FF7221] w-fit justify-center self-center text-2xl px-4 py-2 rounded-full mt-4 hidden">
                <p id="nbAnswer"></p>
            </div>
        </div>
    </div>
</div>
<div id="resultDiv" class="absolute items-center justify-center z-20 flex grow w-full h-full hidden" style="background-color:rgba(0,0,0,0.5)">
    <div class="flex flex-col items-center">
        <h1 class="text-center text-4xl mb-10">La réponse est...</h1>
        <div class="justify-items-center bg-white w-3/4 border-[10px] border-[#FF7221]">
            <video id="videoAnswer" class="w-full" controls autoplay>
                <source id="videoAnswerSrc" src="" type="video/mp4">
                Votre navigateur ne prend pas en charge la vidéo.
            </video>
            <div id="answer" class="w-full"></div>
            <div id="answerList" class="flex"></div>
        </div>
        <div class="mt-4">
            <button onclick="nextQuestion()" class="bg-white text-[#FF7221] py-2 px-4 text-xl rounded-lg">Suivant</button>
        </div>
    </div>
</div>
<footer class="py-6 mt-10 text-xl justify-items-center">
    <p>MLyshu © 2024. Tous droits réservés.</p>
</footer>

<script>
    // Fonction pour récupérer la liste des joueurs via AJAX
    function updateGame() {
        fetch('/pixel/game')
            .then(response => response.json())
            .then(data => {
                const playersListDiv = document.getElementById('players-list');
                playersListDiv.innerHTML = ''; // Effacer les joueurs existants

                // Ajouter les nouveaux joueurs
                data.players.forEach(player => {
                    const playerDiv = document.createElement('div');
                    playerDiv.className = 'relative w-[100px] h-[100px] mx-8'; // Classe pour le conteneur parent

                    playerDiv.innerHTML = `
                        <img class="object-cover rounded-full w-full h-full border-white border-4 drop-shadow-lg" src="{{ asset('img/profilePicture/') }}${player.profilePicture}" alt="Profile Picture">
                        <p class="absolute left-1/2 bottom-4 transform -translate-x-1/2 translate-y-8 text-white text-3xl font-bold drop-shadow-lg stroke">${player.username}</p>
                    `;
                    
                    playersListDiv.appendChild(playerDiv);
                });

                if(data.start == true){
                    getQuestion();
                    document.getElementById('game').classList.remove('hidden');
                    document.getElementById('lobby').classList.add('hidden');
                    document.getElementById('titlePixel').classList.add('hidden');

                    clearInterval(updateGame);
                }
            })
            .catch(error => console.error('Erreur AJAX:', error));
    }

    // Mettre à jour la liste des joueurs toutes les secondes
    updateGame = setInterval(updateGame, 1000);
    
    document.getElementById('joinButton').addEventListener('click', function() {
        // Crée une requête AJAX avec Fetch
        fetch('/join', {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'error') {
                alert('Erreur lors de l\'ajout du joueur');
            }
        })
        .catch(error => {
            console.error('Erreur AJAX:', error);
        });

        document.getElementById('join').classList.add('hidden');
        document.getElementById('start').classList.remove('hidden');
        document.getElementById('leave').classList.remove('hidden');
    });

    document.getElementById('leaveButton').addEventListener('click', function() {
        // Crée une requête AJAX avec Fetch
        fetch('/leave', {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'error') {
                alert('Erreur lors de la suppression du joueur');
            }
        })
        .catch(error => {
            console.error('Erreur AJAX:', error);
        });

        document.getElementById('join').classList.remove('hidden');
        document.getElementById('start').classList.add('hidden');
        document.getElementById('leave').classList.add('hidden');
    });

    document.getElementById('startButton').addEventListener('click', function () {

        document.getElementById('game').classList.remove('hidden');
        document.getElementById('lobby').classList.add('hidden');
        document.getElementById('titlePixel').classList.add('hidden');

        setQuestion();
        setTimeout(getQuestion, 1500);

        clearInterval(updateGame);
    });

    function setQuestion(){
        // Crée une requête AJAX avec Fetch
        fetch('/pixel/set-question', {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
        })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'error') {
                    alert("Erreur lors de l'obtention des données du jeu");
                }
            })
            .catch(error => {
                console.error('Erreur AJAX:', error);
            });
    }

    function getQuestion(hide = false){
        console.log('getQuestion');

        if(hide == true){

            document.getElementById('resultDiv').classList.add('hidden');
            document.getElementById('videoAnswer').pause();
            document.getElementById('duo-btn').disabled = false;
            document.getElementById('carre-btn').disabled = false;
            document.getElementById('cash-btn').disabled = false;

            document.getElementById('cashAnswer').value = '';
            document.getElementById('cashAnswer').readOnly = false;

            document.getElementById(`duo`).classList.add('hidden');
            document.getElementById(`carre`).classList.add('hidden');
            document.getElementById(`cash`).classList.add('hidden');
            document.getElementById(`playersReady`).classList.add('hidden');

            const buttons = document.querySelectorAll('.gameButton');
            // Active chaque bouton
            buttons.forEach(button => {
                button.disabled = false; // Désactiver le bouton
            });
        }

        // Crée une requête AJAX avec Fetch
        fetch('/pixel/get-question', {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
        })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'error') {
                    alert("Erreur lors de l'obtention des données du jeu");
                } else {
                    // Gestion de la vidéo
                    const video = document.getElementById('video');
                    video.src = data.video_link;
                    video.load();

                    video.addEventListener('loadedmetadata', () => {
                        // Fixer le moment aléatoire
                        video.currentTime = video.duration/100*data.time;

                        // Ne pas jouer la vidéo automatiquement
                        video.pause();
                    });

                    // Gestion des réponses 'Carré'
                    document.getElementById('carre').innerHTML = '';
                    data.carre.forEach(answer => {
                        document.getElementById('carre').innerHTML += `
                            <button class="rounded-lg bg-[#FF7221] px-4 py-2 content-center gameButton" onclick="sendAnswer('${answer}', 'carre', this)">${answer}</button>
                        `
                    });

                    // Gestion des réponses 'Duo'
                    document.getElementById('duo').innerHTML = '';
                    data.duo.forEach(answer => {
                        document.getElementById('duo').innerHTML += `
                            <button class="rounded-lg bg-[#FF7221] px-4 py-2 content-center gameButton" onclick="sendAnswer('${answer}', 'duo', this)">${answer}</button>
                        `
                    });

                    // Gestion des scores
                    document.getElementById('score').innerHTML = '';
                    data.players.forEach(player => {
                        document.getElementById('score').innerHTML += `
                            <div class="relative w-[70px] h-[70px] mx-8 my-4">
                                <img class="object-cover rounded-full w-full h-full border-white border-4 drop-shadow-xl" src="/img/profilePicture/${player.profilePicture}" alt="Profile Picture">
                                <p class="absolute left-1/2 -top-10 transform -translate-x-1/2 translate-y-8 text-white text-2xl font-bold drop-shadow-xl stroke">${player.username}</p>
                                <p class="absolute -right-2 -bottom-2 text-white text-4xl font-bold drop-shadow-xl stroke">${player.score}</p>
                            </div>
                        `
                    });
                }
            })
            .catch(error => {
                console.error('Erreur AJAX:', error);
            });
    }

    function toggleVisibility(type) {
        document.getElementById('duo-btn').disabled = true;
        document.getElementById('carre-btn').disabled = true;
        document.getElementById('cash-btn').disabled = true;

        // Affiche la div correspondante
        if (type === 'duo') {
            document.getElementById(`duo`).classList.remove('hidden');
        } else if (type === 'carre') {
            document.getElementById(`carre`).classList.remove('hidden');
        } else {
            document.getElementById(`cash`).classList.remove('hidden');
        }
    }

    document.addEventListener("DOMContentLoaded", () => {
        const animes = JSON.parse(decodeURIComponent('{{ animes|json_encode|url_encode }}'));
        const input = document.getElementById("cashAnswer");
        const suggestions = document.getElementById("suggestions");

        input.addEventListener("input", () => {
            const query = input.value.toLowerCase();
            suggestions.innerHTML = ""; // Réinitialiser les suggestions

            if (query) {
                const filteredAnimes = animes.filter(anime => 
                    anime.name.toLowerCase().includes(query)
                );

                // Afficher les résultats filtrés
                let suggestionsHTML = "";
                filteredAnimes.forEach(anime => {
                    suggestionsHTML += `
                        <div class="p-2 cursor-pointer hover:bg-gray-200 text-[#FF7221]" data-name="${anime.name}">
                            ${anime.name}
                        </div>
                    `;
                });

                // Insérer le HTML dans le conteneur
                suggestions.innerHTML = suggestionsHTML;

                // Ajouter un événement de clic sur chaque suggestion
                const suggestionItems = suggestions.querySelectorAll("div");
                suggestionItems.forEach(item => {
                    item.addEventListener("click", () => {
                        input.value = item.getAttribute("data-name"); // Remplir l'input
                        suggestions.innerHTML = ""; // Vider les suggestions
                    });
                });
            }
        });
    });

    function sendAnswer(answer, type, button) {
        if(answer == 'cash'){
            // Récupérer la valeur de l'input avec l'ID "cashAnswer"
            const input = document.getElementById('cashAnswer');
            input.readOnly = true;
            answer = input.value;
        }

        button.classList.add('selectedButton');
        const buttons = document.querySelectorAll('.gameButton');

        // Désactiver chaque bouton
        buttons.forEach(button => {
            button.disabled = true; // Désactiver le bouton
        });

        // Envoyer la réponse à la route Symfony
        fetch('/pixel/send', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ answer: answer, type: type })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                console.log('Réponse enregistrée avec succès');
            } else {
                console.error('Erreur lors de l\'enregistrement de la réponse');
            }
        })
        .catch(error => {
            console.error('Erreur réseau:', error);
        });

        document.getElementById('playersReady').classList.remove('hidden');

        waitPlayers();
    }

    function waitPlayers() {
        // Faire une requête GET à la route Symfony pour vérifier l'état
        fetch('/pixel/status')
            .then(response => response.json())
            .then(data => {
                // Si tous les joueurs ont répondu, on arrête la vérification
                if (data.allAnswered) {
                    document.getElementById('nbAnswer').innerHTML=`${data.answeredPlayers}/${data.totalPlayers}`;
                    clearInterval(interval);
                    result();
                    // Vous pouvez déclencher ici des actions lorsque tous les joueurs ont répondu
                } else {
                    document.getElementById('nbAnswer').innerHTML=`${data.answeredPlayers}/${data.totalPlayers}`;
                }
            })
            .catch(error => {
                console.error('Erreur lors de la vérification de l\'état des réponses:', error);
            });
        const interval = setInterval(() => {
            // Faire une requête GET à la route Symfony pour vérifier l'état
            fetch('/pixel/status')
                .then(response => response.json())
                .then(data => {
                    // Si tous les joueurs ont répondu, on arrête la vérification
                    if (data.allAnswered) {
                        document.getElementById('nbAnswer').innerHTML=`${data.answeredPlayers}/${data.totalPlayers}`;
                        clearInterval(interval);
                        result();
                        // Vous pouvez déclencher ici des actions lorsque tous les joueurs ont répondu
                    } else {
                        document.getElementById('nbAnswer').innerHTML=`${data.answeredPlayers}/${data.totalPlayers}`;
                    }
                })
                .catch(error => {
                    console.error('Erreur lors de la vérification de l\'état des réponses:', error);
                });
        }, 1000); // Vérification toutes les 3 secondes
    }

    let questionId = 0; // Variable pour stocker l'ID de la question actuelle
    let wait;

    function result(){
        fetch('/pixel/get-answers')
        .then(response => response.json())
        .then(data => {
            if (data.success) {                
                let video = document.getElementById('videoAnswer');
                let div = document.getElementById('answerList');

                video.src = data.goodAnswer.link;
                video.volume = 0.5;
                div.innerHTML = '';
                data.playerAnswers.forEach(answer => {

                    let bonusPoints = 0;
                    if (answer.answer === data.goodAnswer.anime) {
                        // Détermine les points en fonction du type
                        switch (answer.type) {
                            case 'duo':
                                bonusPoints = 1;
                                break;
                            case 'carre':
                                bonusPoints = 2;
                                break;
                            case 'cash':
                                bonusPoints = 4;
                                break;
                        }
                    }
                    document.getElementById('answer').innerHTML = `
                        <p class="bg-[#FF7221] text-center py-2 text-2xl">${data.goodAnswer.anime}</p>
                    `;
                    div.innerHTML += `
                        <div class="flex flex-col items-center px-4 pt-2 pb-4">
                            <div class="relative w-[70px] h-[70px] mx-8 my-4">
                                <img class="object-cover rounded-full w-full h-full border-white border-4 drop-shadow-xl" src="/img/profilePicture/${answer.user.profilePicture}" alt="Profile Picture">
                                <p class="absolute left-1/2 -top-10 transform -translate-x-1/2 translate-y-8 text-white text-2xl font-bold drop-shadow-xl stroke">${answer.user.username}</p>
                            </div>
                            <p class="flex text-center text-xl text-[#FF7221]">${answer.answer}<span class="flex rounded-full text-white bg-[#FF7221] w-[30px] h-[30px] justify-center ml-2">${bonusPoints}</span></p>
                        </div>
                    `;
                });
            } else {
                console.error('Erreur lors de l\'obtention des réponses.');
            }
        })
        .catch(error => {
            console.error('Erreur réseau:', error);
        });

        document.getElementById('resultDiv').classList.remove('hidden');
        monitorQuestionId();
    }

    async function monitorQuestionId() {
        questionId = await waitNextQuestion(); // Initialise `questionId` avec l'ID actuel
        wait = setInterval(async () => {
            const newId = await waitNextQuestion(); // Récupère l'ID actuel depuis l'API
            console.log(newId);
            if (newId && newId !== questionId) { // Si l'ID a changé
                console.log('YEEEEEES');
                questionId = newId; // Met à jour `questionId`
                getQuestion(true); // Appelle `getQuestion`
                clearInterval(wait); // Stoppe l'intervalle
            }
        }, 1000); // Vérifie toutes les secondes
    }

    function nextQuestion(){
        fetch('/pixel/set-score', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            console.log('glouglou');
            setQuestion();
            setTimeout(() => {
                getQuestion(true);
                clearInterval(wait); // Stoppe l'intervalle
            }, 2000);
        })
        .catch(error => {
            console.error('Erreur lors de la vérification de l\'état des réponses:', error);
        });
    }

    async function waitNextQuestion() {
        try {
            const response = await fetch('/pixel/wait', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
            });
            const data = await response.json();
            return data.id; // Retourne la valeur une fois la promesse résolue
        } catch (error) {
            console.error('Erreur lors de la vérification de l\'état des réponses:', error);
            return null; // Retourne null en cas d'erreur
        }
    }

</script>
{% endblock %}