document.addEventListener('DOMContentLoaded', function () {
    const moodButtons = document.querySelectorAll('.btn-mood');
    const resultsSection = document.getElementById('results');
    const resultsTitle = document.getElementById('results-title');
    const videoGrid = document.getElementById('video-grid');

    // Hardcoded YouTube video IDs for different moods
    const musicDatabase = {
        happy: ['3_w0dsiud4E', 'ZbZSe6N_BXs', 'r5Mozr0B-4o'],
        sad: ['h1YVae0pKnA', 'RB-RcX5DS5A', 'co512-p_gA8'],
        energetic: ['_tV5LEBDs7w', 'l-sZyfFX4F0', 'q9d57g_m_dw'],
        calm: ['5qap5aO4i9A', 'lFcLg2hQjdc', 'DWcJFNfaw9c'],
        upbeat: ['9d8SzG4FPyM', 'fK_zwl-lnmc', '0-7IHOXkiV8']
    };

    moodButtons.forEach(button => {
        button.addEventListener('click', function () {
            const mood = this.dataset.mood;
            
            // Update active button
            moodButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');

            displayVideos(mood);
        });
    });

    function displayVideos(mood) {
        const videos = musicDatabase[mood] || [];
        videoGrid.innerHTML = ''; // Clear previous results

        if (videos.length > 0) {
            resultsTitle.textContent = `Here's your ${mood} playlist`;
            resultsSection.style.display = 'block';

            videos.forEach(videoId => {
                const col = document.createElement('div');
                col.className = 'col-lg-4 col-md-6';
                
                const videoContainer = document.createElement('div');
                videoContainer.className = 'video-container';

                const iframe = document.createElement('iframe');
                iframe.src = `https://www.youtube.com/embed/${videoId}`;
                iframe.title = 'YouTube video player';
                iframe.frameBorder = '0';
                iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
                iframe.allowFullscreen = true;

                videoContainer.appendChild(iframe);
                col.appendChild(videoContainer);
                videoGrid.appendChild(col);
            });

            // Smooth scroll to results
            resultsSection.scrollIntoView({ behavior: 'smooth' });

        } else {
            resultsSection.style.display = 'none';
        }
    }
});