EvoLyte/public/js/home.js

document.addEventListener('DOMContentLoaded', () => {
    // Copie tout ici
    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>
            `;
        }
    }

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

        const name1 = selectedCards[0].dataset.name;
        const name2 = selectedCards[1].dataset.name;

        if (type === 'combat') {
            console.log(`Combat : ${name1} contre ${name2}`);
        } else if (type === 'reproduction') {
            console.log(`Accouplement : ${name1} et ${name2}`);
        }

        // Réinitialiser après l'action
        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';
        }
    }

    // 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';
            }
        });
    });

    // 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'); // ✅ corrigé
            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
        });
    });

    // 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();
});