document.addEventListener('DOMContentLoaded', function () {
    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();

            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });

    // --- Add Song Modal Logic ---
    const addSongFab = document.getElementById('add-song-fab');
    const modalOverlay = document.getElementById('add-song-modal-overlay');
    const modalContainer = document.getElementById('add-song-modal-container');
    const closeModalBtn = document.getElementById('close-modal-btn');
    const searchResultsContainer = document.getElementById('search-results');
    const queueList = document.getElementById('queue-list');
    const emptyQueueMessage = document.getElementById('empty-queue-message');

    if (addSongFab) {
        addSongFab.addEventListener('click', () => {
            modalOverlay.classList.add('visible');
        });
    }

    if (closeModalBtn) {
        closeModalBtn.addEventListener('click', closeModal);
    }

    if (modalOverlay) {
        modalOverlay.addEventListener('click', (e) => {
            if (e.target === modalOverlay) {
                closeModal();
            }
        });
    }

    function closeModal() {
        modalContainer.style.transform = 'translateY(100%)';
        modalOverlay.classList.remove('visible');
    }

    // --- Add Song to Queue Logic ---
    searchResultsContainer.addEventListener('click', (e) => {
        const resultItem = e.target.closest('.search-result-item');
        if (!resultItem) return;

        const song = {
            title: resultItem.dataset.title,
            artist: resultItem.dataset.artist,
            albumArt: resultItem.dataset.albumArt,
            source: resultItem.dataset.source,
            sessionCode: window.currentSessionCode
        };

        addSongToQueue(song);
    });

    async function addSongToQueue(song) {
        try {
            const response = await fetch('add_song.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(song),
            });

            const result = await response.json();

            if (result.status === 'success') {
                addSongToDOM(result.data);
                closeModal();
            } else {
                alert(result.message || 'Failed to add song.');
            }
        } catch (error) {
            console.error('Error adding song:', error);
            alert('An error occurred. Please try again.');
        }
    }

    function addSongToDOM(song) {
        if (emptyQueueMessage) {
            emptyQueueMessage.remove();
        }

        const queueItem = document.createElement('div');
        queueItem.className = 'queue-item new-item';
        queueItem.innerHTML = `
            <img src="${song.album_art_url}" alt="Album Art">
            <div class="track-info">
                <div class="track-title">${song.track_title}</div>
                <div class="artist-name">${song.artist_name}</div>
            </div>
            <button class="vote-button">
                <i class="bi bi-caret-up-fill"></i>
                <span>${song.votes}</span>
            </button>
        `;

        queueList.appendChild(queueItem);

        // Trigger the animation
        setTimeout(() => {
            queueItem.classList.remove('new-item');
        }, 10); // Small delay to ensure the transition is applied
    }
});