document.addEventListener('DOMContentLoaded', () => {



    let selectedCards = [];

    function toggleSelection(card) {
        const id = card.dataset.id;

        if (card.classList.contains('selected')) {
            card.classList.remove('selected');
            selectedCards = selectedCards.filter(c => c.dataset.id !== id);
        } else {
            if (selectedCards.length < 2) {
                card.classList.add('selected');
                selectedCards.push(card);
            } else {
                alert("Tu ne peux sélectionner que 2 créatures à la fois.");
            }
        }

        updateSelectionDisplay();
    }

    function updateSelectionDisplay() {
        const status = document.getElementById("selection-status");
        const visual = document.getElementById("selection-visual");

        if (selectedCards.length === 0) {
            status.textContent = "Sélectionnez 2 créatures...";
            visual.innerHTML = "";
        } else if (selectedCards.length === 1) {
            status.textContent = `1ère sélection : ${selectedCards[0].dataset.name}`;
            visual.innerHTML = "";
        } else {
            status.textContent = "2 créatures sélectionnées !";
            visual.innerHTML = `
                <div class="creature-tag">${selectedCards[0].dataset.name}</div>
                <span class="vs-text"> et </span>
                <div class="creature-tag">${selectedCards[1].dataset.name}</div>
            `;
        }
    }

    async function handleAction(type) {
        if (selectedCards.length !== 2) {
            alert("Tu dois sélectionner 2 créatures.");
            return;
        }

        const id1 = selectedCards[0].dataset.id;
        const id2 = selectedCards[1].dataset.id;

        const idUser = document.getElementById('user-data').dataset.userId;

        if (type === 'reproduction') {
            // try {
            //     const response = await fetch(`/emojis/fusion/${encodeURIComponent(idUser)}/${encodeURIComponent(id1)}/${encodeURIComponent(id2)}`, {
            //         method: 'GET',
            //         headers: {
            //             'Accept': 'application/json'
            //         }
            //     });

            //     if (!response.ok) {
            //         throw new Error("Erreur serveur : " + response.status);
            //     }

            //     const data = await response.json();

            //     //alert(`Succès : ${data.message} (ID : ${data.childId})`);

            //     // Rajout de la nouvelle carte dans la collection
            //     // const container = document.getElementById('collection-container'); // ou l’id réel

            //     // const color = getRarityColor(data.rarity); // fonction ci-dessous

            //     // const newCard = document.createElement('div');
            //     // newCard.className = `emoji-card ${color}`;
            //     // newCard.setAttribute('data-id', data.childId);
            //     // newCard.innerHTML = `
            //     //     <div class="emoji-level">Level ${data.fightsWon}</div>
            //     //     <div class="emoji">${data.code}</div>
            //     //     <div class="emoji-name ${color}">${data.name}</div>
            //     //     <div class="detail-icon" data-id="${data.childId}">ℹ️</div>
            //     //     <div class="detail-icon-hierarchy" data-id="${data.childId}">👨‍👩‍👧‍👦</div>
            //     //     <div class="popup" id="popup-${data.childId}"></div>
            //     //     <div class="popup" id="popup-hiera-${data.childId}"></div>
            //     // `;

            //     // container.appendChild(newCard);


            //     // Réinitialisation de la séléction
            //     selectedCards.forEach(card => card.classList.remove('selected'));
            //     selectedCards = [];
            //     updateSelectionDisplay();

            window.location.href = `https://localhost:8000/reproduction/${encodeURIComponent(idUser)}/${encodeURIComponent(id1)}/${encodeURIComponent(id2)}`;

            // } catch (error) {
            //     console.error("Erreur lors de la reproduction :", error);
            //     alert("Une erreur est survenue lors de la reproduction.");
            // }

            return; // on quitte ici
        }

        if (type === 'combat') {

            fetch(`/emojis/fight/${id1}/${id2}`, { method: 'GET',
            headers: {
                'Accept': 'application/json' 
            }}).then(response => {
            if (!response.ok) {
                throw new Error(`Erreur HTTP ${response.status}`);
            }
            return response.json();
            })
            .then(data => {
                console.log('Données reçues :', data);
            })
            .catch(error => {
                console.error('Erreur lors de la requête :', error);
            });

        }

        // Réinitialiser si pas redirection
        selectedCards.forEach(card => card.classList.remove('selected'));
        selectedCards = [];
        updateSelectionDisplay();
    }

    // Ouvre / Ferme la popup d'information
    function togglePopup(id) {
        const popup = document.getElementById('popup-' + id);
        if (popup) {
            popup.style.display = (popup.style.display === 'block') ? 'none' : 'block';
        }
    }

    // Ouvre / Ferme la popup de hierachie de famille
    async function toggleHierachiPopup(id) {

        try {
            const response = await fetch(`/emojis/${id}/getParents/`, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json'
                }
            });

            if (!response.ok) throw new Error("Erreur serveur : " + response.status);

            const data = await response.json();

            // Injection dynamique dans la popup
            const parent1El = document.getElementById(`parent1-${id}`);
            if (data.codeParent1 && data.codeParent1.includes('vercel')) {
                parent1El.innerHTML = `<img src="${data.codeParent1}" alt="Parent 1" width="48" height="48">`;
            } else {
                parent1El.innerText = data.codeParent1 || '❓';
            }

            const parent2El = document.getElementById(`parent2-${id}`);
            if (data.codeParent2 && data.codeParent2.includes('vercel')) {
                parent2El.innerHTML = `<img src="${data.codeParent2}" alt="Parent 2" width="48" height="48">`;
            } else {
                parent2El.innerText = data.codeParent2 || '❓';
            }

            const childEl = document.getElementById(`child-${id}`);
            if (data.codeEnfant && data.codeEnfant.includes('vercel')) {
                childEl.innerHTML = `<img src="${data.codeEnfant}" alt="Emoji fusionné" width="64" height="64">`;
            } else {
                childEl.innerText = data.codeEnfant || '❓';
            }

            document.getElementById(`name-parent1-${id}`).innerText = data.nameParent1 || 'inconnu';
            document.getElementById(`name-parent2-${id}`).innerText = data.nameParent2 || 'inconnu';
            document.getElementById(`name-child-${id}`).innerText = data.nameEnfant || 'inconnu';
            console.log("Parents récupérés :", data);

            // Affichage plein écran
            const popup = document.getElementById(`popup-hiera-${id}`);
            if (popup) popup.style.display = 'block';

        } catch (error) {
            console.error("Erreur lors de la récupération des parents :", error);
            alert("Une erreur est survenue lors de l'affichage de la hiérarchie.");
        }
    }

    function closeHierarchyPopup(id) {
        const popup = document.getElementById(`popup-hiera-${id}`);
        if (popup) popup.style.display = 'none';
    }

    // Fermer les autres popups en cliquant ailleurs
    document.addEventListener('click', function(e) {
        document.querySelectorAll('.popup').forEach(p => {
            if (!p.contains(e.target) && !p.previousElementSibling.contains(e.target)) {
                p.style.display = 'none';
            }
        });

        // Partie pour fermer la popup de hiérarchie
        document.querySelectorAll('.close-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const id = btn.dataset.id; // On récupère l'id depuis l'attribut data-id
                const popup = document.getElementById(`popup-hiera-${id}`);
                if (popup) popup.style.display = 'none';
                e.stopPropagation(); // Empêche la propagation du clic
            });
        });
    });

    // Fonction pour appliquer la recherche, les filtres et le tri
    function applyFilters() {
        const selectedColor = document.getElementById('rarete-filter').value;
        const sortBy = document.getElementById('sort-select').value;
        const searchTerm = document.getElementById('search-input').value.toLowerCase();

        const cards = Array.from(document.querySelectorAll('#collection-container .emoji-card'));

        cards.forEach(card => {
            const color = card.dataset.color;
            const name = card.querySelector('.emoji-name')?.textContent.toLowerCase() ?? "";

            const matchColor = !selectedColor || color === selectedColor;
            const matchName = !searchTerm || name.includes(searchTerm);

            if (matchColor && matchName) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });

        if (sortBy !== 'none') {
            const container = document.getElementById('collection-container');
            const visibleCards = cards.filter(c => c.style.display !== 'none');

            visibleCards.sort((a, b) => {
                const aVal = parseFloat(a.dataset[sortBy]);
                const bVal = parseFloat(b.dataset[sortBy]);
                return bVal - aVal;
            });

            visibleCards.forEach(card => container.appendChild(card));
            paginateCards();
        }
    }

    // Appel Fonctionnalité de popup d'information
    document.querySelectorAll('.detail-icon').forEach(icon => {
        icon.addEventListener('click', (e) => {
            const card = icon.closest('.emoji-card');
            const id = card?.dataset.id;
            if (id) {
                togglePopup(id);
            }
            e.stopPropagation(); // évite que ça sélectionne la carte
        });
    });

    // Appel Fonctionnalité de popup de hierachie de famille
    document.querySelectorAll('.detail-icon-hierarchy').forEach(icon => {
        icon.addEventListener('click', (e) => {
            const card = icon.closest('.emoji-card');
            const id = card?.dataset.id;
            if (id) {
                toggleHierachiPopup(id);
            }
            e.stopPropagation(); // évite que ça sélectionne la carte
        });
    });

    // Appliquer l'écouteur à toutes les cartes (base + collection)
    document.querySelectorAll('.emoji-container').forEach(container => {
        container.addEventListener('click', (e) => {
            const card = e.target.closest('.emoji-card');
            if (!card || e.target.closest('.detail-icon')) return; // Ignore si clic sur icône ℹ️
            toggleSelection(card);
        });
    });

    // Appel Fonctionnalité de combat et reproduction 
    document.querySelectorAll('.btn').forEach(button => {
        button.addEventListener('click', () => {
            const type = button.textContent.includes('Combattre') ? 'combat' : 'reproduction';
            handleAction(type);
        });
    });

    // Appel Fonctionnalité de recherche et filtres
    document.getElementById('search-input').addEventListener('input', applyFilters);
    document.getElementById('rarete-filter').addEventListener('change', applyFilters);
    document.getElementById('sort-select').addEventListener('change', applyFilters);

    /***** Partie Pagination ******/

    const ITEMS_PER_PAGE = 10;
    let currentPage = 1;

    function paginateCards() {
        const allCards = Array.from(document.querySelectorAll('#collection-container .emoji-card'));
        const container = document.getElementById('collection-container');
        const totalPages = Math.ceil(allCards.length / ITEMS_PER_PAGE);

        // Masquer toutes les cartes
        allCards.forEach(card => card.style.display = 'none');

        // Afficher uniquement les cartes de la page courante
        const start = (currentPage - 1) * ITEMS_PER_PAGE;
        const end = start + ITEMS_PER_PAGE;

        allCards.slice(start, end).forEach(card => card.style.display = 'block');

        renderPagination(totalPages);
    }

    function renderPagination(totalPages) {
        const pagination = document.getElementById('pagination');
        pagination.innerHTML = '';

        const addBtn = (text, page = null, isActive = false, disabled = false) => {
            const btn = document.createElement('button');
            btn.textContent = text;
            if (isActive) btn.classList.add('active');
            if (disabled) btn.disabled = true;
            if (page !== null) {
                btn.addEventListener('click', () => {
                    currentPage = page;
                    paginateCards();
                });
            }
            pagination.appendChild(btn);
        };

        addBtn('Précédent', currentPage - 1, false, currentPage === 1);

        for (let i = 1; i <= totalPages; i++) {
            if (
                i === 1 ||
                i === totalPages ||
                (i >= currentPage - 1 && i <= currentPage + 1)
            ) {
                addBtn(i, i, i === currentPage);
            } else if (
                i === 2 && currentPage > 3 ||
                i === totalPages - 1 && currentPage < totalPages - 2
            ) {
                addBtn('...');
            }
        }

        addBtn('Suivant', currentPage + 1, false, currentPage === totalPages);
    }

    paginateCards();
});