document.addEventListener('DOMContentLoaded', () => {
    const left = document.querySelector('.left-emoji');
    const right = document.querySelector('.right-emoji');
    const winnerText = document.getElementById('winner-text');

    fetch(`localhost:8000/emojis/fight/${id1}/${id2}`)
        .then(response => response.json())
        .then(data => {
            const { leftEmoji, rightEmoji, winner } = data;

            left.dataset.content = leftEmoji;
            right.dataset.content = rightEmoji;

            window.winnerSide = winner === 'left' ? 'left' : 'right';
            window.loserSide = winner === 'left' ? 'right' : 'left';

            insertEmojiOrImage(left);
            insertEmojiOrImage(right);

            left.classList.add('slide-in-left');
            right.classList.add('slide-in-right');

            setTimeout(() => {
                left.style.left = '100px';
                right.style.left = '300px';

                left.classList.add('fight-animation');
                right.classList.add('fight-animation');

                setTimeout(() => {
                    left.classList.remove('fight-animation');
                    right.classList.remove('fight-animation');

                    const loser = window.loserSide === 'left' ? left : right;
                    loser.classList.add('loser-fly-up');
                    const winnerEl = window.winnerSide === 'left' ? left : right;
                    winnerEl.classList.add('winner-center', 'winner-crown');

                    let name = winnerEl.dataset.content;
                    if (/^https?:\/\//.test(name)) {
                        winnerText.innerHTML = `<img src="${name}" style="width:64px">a gagné ! 🎉`;
                    } else {
                        winnerText.textContent = `${name} a gagné ! 🎉`;
                    }
                    winnerText.style.display = 'block';
                }, 1500);
            }, 3000);
        });

    function insertEmojiOrImage(el) {
        const value = el.dataset.content;
        if (/^https?:\/\//.test(value)) {
            const img = document.createElement('img');
            img.src = value;
            img.className = 'emoji-img';
            el.appendChild(img);
        } else {
            el.textContent = value;
        }
    }
});