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

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