// BEATPORT REBUILD SLIDER FUNCTIONALITY
// =================================

let beatportRebuildSliderState = {
    currentSlide: 0,
    totalSlides: 4,
    autoPlayInterval: null,
    autoPlayDelay: 5000
};

/**
 * Initialize the beatport rebuild slider functionality
 */
function initializeBeatportRebuildSlider() {
    console.log('🔄 Initializing beatport rebuild slider...');

    const slider = document.getElementById('beatport-rebuild-slider');
    if (!slider) {
        console.warn('Beatport rebuild slider not found');
        return;
    }

    // Check if already initialized to prevent duplicate event listeners
    if (slider.dataset.initialized === 'true') {
        console.log('Beatport rebuild slider already initialized, skipping...');
        startBeatportRebuildSliderAutoPlay(); // Just restart autoplay
        return;
    }

    // Mark as initialized
    slider.dataset.initialized = 'true';

    // Load real Beatport data first
    loadBeatportHeroTracks();

    console.log('✅ Beatport rebuild slider initialized successfully');
}

/**
 * Load real Beatport hero tracks and populate the slider
 */
async function loadBeatportHeroTracks() {
    console.log('🎯 Loading real Beatport hero tracks...');

    try {
        const signal = getBeatportContentSignal();
        const response = await fetch('/api/beatport/hero-tracks', signal ? { signal } : undefined);
        const data = await response.json();

        if (data.success && data.tracks && data.tracks.length > 0) {
            console.log(`✅ Loaded ${data.tracks.length} Beatport tracks`);
            populateBeatportSlider(data.tracks);
        } else {
            console.warn('❌ No tracks received from Beatport API, using placeholder data');
            setupBeatportSliderWithPlaceholders();
        }
    } catch (error) {
        if (error && error.name === 'AbortError') return;
        console.error('❌ Error loading Beatport tracks:', error);
        setupBeatportSliderWithPlaceholders();
    }
}

/**
 * Populate the slider with real Beatport track data
 */
function populateBeatportSlider(tracks) {
    const sliderTrack = document.getElementById('beatport-rebuild-slider-track');
    const indicatorsContainer = document.querySelector('.beatport-rebuild-slider-indicators');

    if (!sliderTrack || !indicatorsContainer) {
        console.warn('Slider elements not found');
        return;
    }

    // Clear existing content
    sliderTrack.innerHTML = '';
    indicatorsContainer.innerHTML = '';

    // Update state
    beatportRebuildSliderState.totalSlides = tracks.length;
    beatportRebuildSliderState.currentSlide = 0;

    // Generate slides HTML
    tracks.forEach((track, index) => {
        const slideHtml = `
            <div class="beatport-rebuild-slide ${index === 0 ? 'active' : ''}"
                 data-slide="${index}"
                 data-url="${track.url}"
                 data-image="${track.image_url}"
                 style="--slide-bg-image: url('${track.image_url}')">
                <div class="beatport-rebuild-slide-background">
                    <div class="beatport-rebuild-slide-gradient"></div>
                </div>
                <div class="beatport-rebuild-slide-content">
                    <div class="beatport-rebuild-track-info">
                        <h2 class="beatport-rebuild-track-title">${track.title}</h2>
                        <p class="beatport-rebuild-artist-name">${track.artist}</p>
                        <p class="beatport-rebuild-album-name">New on Beatport</p>
                    </div>
                </div>
            </div>
        `;
        sliderTrack.insertAdjacentHTML('beforeend', slideHtml);

        // Add indicator
        const indicatorHtml = `<button class="beatport-rebuild-indicator ${index === 0 ? 'active' : ''}" data-slide="${index}"></button>`;
        indicatorsContainer.insertAdjacentHTML('beforeend', indicatorHtml);
    });

    // Now set up all the functionality
    setupBeatportSliderFunctionality();

    // Add individual click handlers for each slide (like top 10 releases pattern)
    setupHeroSliderIndividualClickHandlers(tracks);

    console.log(`✅ Populated slider with ${tracks.length} real Beatport tracks`);
}

/**
 * Set up individual click handlers for hero slider slides (like top 10 releases)
 */
function setupHeroSliderIndividualClickHandlers(tracks) {
    const slides = document.querySelectorAll('.beatport-rebuild-slide[data-url]');

    slides.forEach((slide, index) => {
        const releaseUrl = slide.getAttribute('data-url');
        if (releaseUrl && releaseUrl !== '#' && releaseUrl !== '') {
            // Create release data object from the track data (similar to top 10 releases)
            const track = tracks[index];
            if (track) {
                const releaseData = {
                    url: releaseUrl,
                    title: track.title || 'Unknown Title',
                    artist: track.artist || 'Unknown Artist',
                    label: track.label || 'Unknown Label',
                    image_url: track.image_url || ''
                };

                // Add click handler that mimics the top 10 releases behavior
                slide.addEventListener('click', (event) => {
                    // Prevent navigation button clicks from triggering this
                    if (event.target.closest('.beatport-rebuild-nav-btn') ||
                        event.target.closest('.beatport-rebuild-indicator')) {
                        return;
                    }

                    console.log(`🎯 Hero slider slide clicked: ${releaseData.title} by ${releaseData.artist}`);
                    handleBeatportReleaseCardClick(slide, releaseData);
                });

                slide.style.cursor = 'pointer';
            }
        }
    });

    console.log(`✅ Set up individual click handlers for ${slides.length} hero slider slides`);
}

/**
 * Set up placeholder data if API fails
 */
function setupBeatportSliderWithPlaceholders() {
    console.log('🔄 Setting up slider with placeholder data...');

    // The HTML already has placeholder slides, just set up functionality
    setupBeatportSliderFunctionality();
}

/**
 * Set up all slider functionality after content is loaded
 */
function setupBeatportSliderFunctionality() {
    // Set up navigation buttons
    setupBeatportRebuildSliderNavigation();

    // Set up indicators
    setupBeatportRebuildSliderIndicators();


    // Start auto-play
    startBeatportRebuildSliderAutoPlay();

    // Set up pause on hover
    setupBeatportRebuildSliderHoverPause();
}

/**
 * Set up navigation button functionality
 */
function setupBeatportRebuildSliderNavigation() {
    const prevBtn = document.getElementById('beatport-rebuild-prev-btn');
    const nextBtn = document.getElementById('beatport-rebuild-next-btn');

    if (prevBtn) {
        prevBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            console.log('Previous button clicked, current slide:', beatportRebuildSliderState.currentSlide);
            goToBeatportRebuildSlide(beatportRebuildSliderState.currentSlide - 1);
            resetBeatportRebuildSliderAutoPlay();
        });
    }

    if (nextBtn) {
        nextBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            console.log('Next button clicked, current slide:', beatportRebuildSliderState.currentSlide);
            goToBeatportRebuildSlide(beatportRebuildSliderState.currentSlide + 1);
            resetBeatportRebuildSliderAutoPlay();
        });
    }
}

/**
 * Set up indicator functionality
 */
function setupBeatportRebuildSliderIndicators() {
    const indicators = document.querySelectorAll('.beatport-rebuild-indicator');

    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            goToBeatportRebuildSlide(index);
            resetBeatportRebuildSliderAutoPlay();
        });
    });
}

/**
 * Navigate to a specific slide
 */
function goToBeatportRebuildSlide(slideIndex) {
    console.log('goToBeatportRebuildSlide called with:', slideIndex, 'current:', beatportRebuildSliderState.currentSlide);

    // Wrap around if out of bounds
    if (slideIndex < 0) {
        slideIndex = beatportRebuildSliderState.totalSlides - 1;
    } else if (slideIndex >= beatportRebuildSliderState.totalSlides) {
        slideIndex = 0;
    }

    console.log('After wrapping, slideIndex:', slideIndex);

    // Update current slide
    beatportRebuildSliderState.currentSlide = slideIndex;

    // Update slide visibility
    const slides = document.querySelectorAll('.beatport-rebuild-slide');
    slides.forEach((slide, index) => {
        slide.classList.remove('active', 'prev', 'next');

        if (index === slideIndex) {
            slide.classList.add('active');
        } else if (index < slideIndex) {
            slide.classList.add('prev');
        } else {
            slide.classList.add('next');
        }
    });

    // Update indicators
    const indicators = document.querySelectorAll('.beatport-rebuild-indicator');
    indicators.forEach((indicator, index) => {
        indicator.classList.toggle('active', index === slideIndex);
    });

    console.log('Slide updated to:', beatportRebuildSliderState.currentSlide);
}

/**
 * Start auto-play functionality
 */
function startBeatportRebuildSliderAutoPlay() {
    if (beatportRebuildSliderState.autoPlayInterval) {
        clearInterval(beatportRebuildSliderState.autoPlayInterval);
    }

    beatportRebuildSliderState.autoPlayInterval = setInterval(() => {
        goToBeatportRebuildSlide(beatportRebuildSliderState.currentSlide + 1);
    }, beatportRebuildSliderState.autoPlayDelay);
}

/**
 * Reset auto-play timer
 */
function resetBeatportRebuildSliderAutoPlay() {
    startBeatportRebuildSliderAutoPlay();
}

/**
 * Set up hover pause functionality
 */
function setupBeatportRebuildSliderHoverPause() {
    const sliderContainer = document.querySelector('.beatport-rebuild-slider-container');

    if (sliderContainer) {
        sliderContainer.addEventListener('mouseenter', () => {
            if (beatportRebuildSliderState.autoPlayInterval) {
                clearInterval(beatportRebuildSliderState.autoPlayInterval);
            }
        });

        sliderContainer.addEventListener('mouseleave', () => {
            startBeatportRebuildSliderAutoPlay();
        });
    }
}


/**
 * Clean up beatport rebuild slider when switching away
 */
function cleanupBeatportRebuildSlider() {
    if (beatportRebuildSliderState.autoPlayInterval) {
        clearInterval(beatportRebuildSliderState.autoPlayInterval);
        beatportRebuildSliderState.autoPlayInterval = null;
    }
}

// ===================================
// BEATPORT NEW RELEASES SLIDER
// ===================================

// State management for new releases slider (copied from hero slider)
let beatportReleasesSliderState = {
    currentSlide: 0,
    totalSlides: 0,
    autoPlayInterval: null,
    autoPlayDelay: 8000,
    isInitialized: false
};

/**
 * Initialize the beatport new releases slider functionality (based on hero slider)
 */
function initializeBeatportReleasesSlider() {
    console.log('🆕 Initializing beatport new releases slider...');

    const slider = document.getElementById('beatport-releases-slider');
    if (!slider) {
        console.warn('Beatport releases slider not found');
        return;
    }

    // Prevent double initialization
    if (slider.dataset.initialized === 'true') {
        console.log('Releases slider already initialized');
        return;
    }

    const sliderTrack = document.getElementById('beatport-releases-slider-track');
    const indicatorsContainer = document.getElementById('beatport-releases-slider-indicators');

    if (!sliderTrack || !indicatorsContainer) {
        console.warn('Releases slider elements not found');
        return;
    }

    // Load data and initialize
    loadBeatportNewReleases().then(success => {
        if (success) {
            setupBeatportReleasesSliderNavigation();
            setupBeatportReleasesSliderIndicators();
            setupBeatportReleasesSliderHoverPause();
            startBeatportReleasesSliderAutoPlay();
            slider.dataset.initialized = 'true';
            beatportReleasesSliderState.isInitialized = true;
            console.log('✅ New releases slider initialized successfully');
        }
    });
}

/**
 * Load new releases data from API
 */
async function loadBeatportNewReleases() {
    try {
        console.log('📡 Fetching new releases data...');

        const signal = getBeatportContentSignal();
        const response = await fetch('/api/beatport/new-releases', signal ? { signal } : undefined);
        const data = await response.json();

        if (data.success && data.releases && data.releases.length > 0) {
            console.log(`📀 Loaded ${data.releases.length} releases`);
            populateBeatportReleasesSlider(data.releases);
            return true;
        } else {
            console.error('Failed to load releases:', data.error || 'No releases found');
            showBeatportReleasesError(data.error || 'No releases available');
            return false;
        }
    } catch (error) {
        if (error && error.name === 'AbortError') return false;
        console.error('Error loading new releases:', error);
        showBeatportReleasesError('Failed to load releases');
        return false;
    }
}

/**
 * Populate the releases slider with data (based on hero slider)
 */
function populateBeatportReleasesSlider(releases) {
    const sliderTrack = document.getElementById('beatport-releases-slider-track');
    const indicatorsContainer = document.getElementById('beatport-releases-slider-indicators');

    if (!sliderTrack || !indicatorsContainer) return;

    // Calculate slides needed (10 cards per slide)
    const cardsPerSlide = 10;
    const totalSlides = Math.ceil(releases.length / cardsPerSlide);

    // Clear existing content
    sliderTrack.innerHTML = '';
    indicatorsContainer.innerHTML = '';

    // Update state
    beatportReleasesSliderState.totalSlides = totalSlides;
    beatportReleasesSliderState.currentSlide = 0;

    console.log(`🎯 Creating ${totalSlides} slides with ${cardsPerSlide} cards each`);

    // Generate slides HTML (similar to hero slider)
    for (let slideIndex = 0; slideIndex < totalSlides; slideIndex++) {
        const startIndex = slideIndex * cardsPerSlide;
        const endIndex = Math.min(startIndex + cardsPerSlide, releases.length);
        const slideReleases = releases.slice(startIndex, endIndex);

        // Create grid HTML for this slide
        let gridHtml = '';
        for (let i = 0; i < cardsPerSlide; i++) {
            if (i < slideReleases.length) {
                const release = slideReleases[i];
                gridHtml += `
                    <div class="beatport-release-card" data-url="${release.url}" style="--card-bg-image: url('${release.image_url}')">
                        <div class="beatport-release-card-content">
                            <div class="beatport-release-artwork">
                                ${release.image_url ? `<img src="${release.image_url}" alt="${release.title}" loading="lazy">` : ''}
                            </div>
                            <div class="beatport-release-info">
                                <div class="beatport-release-title" title="${release.title}">${release.title}</div>
                                <div class="beatport-release-artist" title="${release.artist}">${release.artist}</div>
                                <div class="beatport-release-label" title="${release.label}">${release.label}</div>
                            </div>
                        </div>
                    </div>
                `;
            } else {
                // Placeholder card
                gridHtml += `
                    <div class="beatport-release-card beatport-release-placeholder">
                        <div class="beatport-release-card-content">
                            <div class="beatport-release-artwork">
                                <div class="placeholder-icon">📀</div>
                            </div>
                            <div class="beatport-release-info">
                                <div class="beatport-release-title">More Releases</div>
                                <div class="beatport-release-artist">Coming Soon</div>
                                <div class="beatport-release-label">Beatport</div>
                            </div>
                        </div>
                    </div>
                `;
            }
        }

        const slideHtml = `
            <div class="beatport-releases-slide ${slideIndex === 0 ? 'active' : ''}"
                 data-slide="${slideIndex}">
                <div class="beatport-releases-grid">
                    ${gridHtml}
                </div>
            </div>
        `;

        sliderTrack.innerHTML += slideHtml;

        // Create indicator
        const indicatorHtml = `<button class="beatport-releases-indicator ${slideIndex === 0 ? 'active' : ''}" data-slide="${slideIndex}"></button>`;
        indicatorsContainer.innerHTML += indicatorHtml;
    }

    console.log(`✅ Created ${totalSlides} slides for releases slider`);

    // Add click handlers for individual release discovery (matching Top 10 Releases pattern)
    const releaseCards = sliderTrack.querySelectorAll('.beatport-release-card[data-url]:not(.beatport-release-placeholder)');
    releaseCards.forEach((card) => {
        const releaseUrl = card.getAttribute('data-url');
        if (releaseUrl && releaseUrl !== '#') {
            // Find the corresponding release data
            const releaseData = releases.find(release => release.url === releaseUrl);
            if (releaseData) {
                card.addEventListener('click', () => handleBeatportReleaseCardClick(card, releaseData));
                card.style.cursor = 'pointer';
            }
        }
    });
}

/**
 * Set up navigation functionality (copied from hero slider)
 */
function setupBeatportReleasesSliderNavigation() {
    const prevBtn = document.getElementById('beatport-releases-prev-btn');
    const nextBtn = document.getElementById('beatport-releases-next-btn');

    if (prevBtn) {
        // Clone button to remove all existing event listeners
        const newPrevBtn = prevBtn.cloneNode(true);
        prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);

        newPrevBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            console.log('Previous releases button clicked, current slide:', beatportReleasesSliderState.currentSlide);
            goToBeatportReleasesSlide(beatportReleasesSliderState.currentSlide - 1);
            resetBeatportReleasesSliderAutoPlay();
        });
    }

    if (nextBtn) {
        // Clone button to remove all existing event listeners
        const newNextBtn = nextBtn.cloneNode(true);
        nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);

        newNextBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            console.log('Next releases button clicked, current slide:', beatportReleasesSliderState.currentSlide);
            goToBeatportReleasesSlide(beatportReleasesSliderState.currentSlide + 1);
            resetBeatportReleasesSliderAutoPlay();
        });
    }
}

/**
 * Set up indicator functionality (copied from hero slider)
 */
function setupBeatportReleasesSliderIndicators() {
    const indicators = document.querySelectorAll('.beatport-releases-indicator');

    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => {
            goToBeatportReleasesSlide(index);
            resetBeatportReleasesSliderAutoPlay();
        });
    });
}

/**
 * Navigate to a specific slide (copied from hero slider)
 */
function goToBeatportReleasesSlide(slideIndex) {
    console.log('goToBeatportReleasesSlide called with:', slideIndex, 'current:', beatportReleasesSliderState.currentSlide);

    // Wrap around if out of bounds
    if (slideIndex < 0) {
        slideIndex = beatportReleasesSliderState.totalSlides - 1;
    } else if (slideIndex >= beatportReleasesSliderState.totalSlides) {
        slideIndex = 0;
    }

    console.log('After wrapping, slideIndex:', slideIndex);

    // Update current slide
    beatportReleasesSliderState.currentSlide = slideIndex;

    // Update slide visibility
    const slides = document.querySelectorAll('.beatport-releases-slide');
    slides.forEach((slide, index) => {
        slide.classList.remove('active', 'prev', 'next');

        if (index === slideIndex) {
            slide.classList.add('active');
        } else if (index < slideIndex) {
            slide.classList.add('prev');
        } else {
            slide.classList.add('next');
        }
    });

    // Update indicators
    const indicators = document.querySelectorAll('.beatport-releases-indicator');
    indicators.forEach((indicator, index) => {
        indicator.classList.toggle('active', index === slideIndex);
    });

    console.log('Releases slide updated to:', beatportReleasesSliderState.currentSlide);
}

/**
 * Start auto-play functionality (copied from hero slider)
 */
function startBeatportReleasesSliderAutoPlay() {
    if (beatportReleasesSliderState.autoPlayInterval) {
        clearInterval(beatportReleasesSliderState.autoPlayInterval);
    }

    beatportReleasesSliderState.autoPlayInterval = setInterval(() => {
        goToBeatportReleasesSlide(beatportReleasesSliderState.currentSlide + 1);
    }, beatportReleasesSliderState.autoPlayDelay);
}

/**
 * Reset auto-play timer (copied from hero slider)
 */
function resetBeatportReleasesSliderAutoPlay() {
    startBeatportReleasesSliderAutoPlay();
}

/**
 * Set up hover pause functionality (copied from hero slider)
 */
function setupBeatportReleasesSliderHoverPause() {
    const sliderContainer = document.querySelector('.beatport-releases-slider-container');

    if (sliderContainer) {
        sliderContainer.addEventListener('mouseenter', () => {
            if (beatportReleasesSliderState.autoPlayInterval) {
                clearInterval(beatportReleasesSliderState.autoPlayInterval);
                beatportReleasesSliderState.autoPlayInterval = null;
            }
        });

        sliderContainer.addEventListener('mouseleave', () => {
            startBeatportReleasesSliderAutoPlay();
        });
    }
}

/**
 * Show error state
 */
function showBeatportReleasesError(errorMessage) {
    const sliderTrack = document.getElementById('beatport-releases-slider-track');
    if (!sliderTrack) return;

    sliderTrack.innerHTML = `
        <div class="beatport-releases-loading">
            <div class="beatport-releases-loading-content">
                <h3>❌ Error Loading Releases</h3>
                <p>${errorMessage}</p>
            </div>
        </div>
    `;
}

/**
 * Clean up releases slider when switching away (copied from hero slider)
 */
function cleanupBeatportReleasesSlider() {
    if (beatportReleasesSliderState.autoPlayInterval) {
        clearInterval(beatportReleasesSliderState.autoPlayInterval);
        beatportReleasesSliderState.autoPlayInterval = null;
    }
}

// ===================================
// BEATPORT HYPE PICKS SLIDER
// ===================================

// Hype Picks Slider State
let beatportHypePicksSliderState = {
    currentSlide: 0,
    totalSlides: 0,
    autoPlayInterval: null,
    autoPlayDelay: 4000,
    isInitialized: false
};

/**
 * Initialize the beatport hype picks slider functionality (based on releases slider)
 */
function initializeBeatportHypePicksSlider() {
    console.log('🔥 Initializing beatport hype picks slider...');

    const slider = document.getElementById('beatport-hype-picks-slider');
    if (!slider) {
        console.warn('Beatport hype picks slider not found');
        return;
    }

    // Check if already initialized
    if (beatportHypePicksSliderState.isInitialized) {
        console.log('Beatport hype picks slider already initialized, skipping...');
        startBeatportHypePicksSliderAutoPlay(); // Just restart autoplay
        return;
    }

    // Mark as initialized
    beatportHypePicksSliderState.isInitialized = true;

    // Reset state
    beatportHypePicksSliderState.currentSlide = 0;
    beatportHypePicksSliderState.totalSlides = 0;

    // Load data and initialize
    loadBeatportHypePicks().then(success => {
        if (success) {
            setupBeatportHypePicksSliderNavigation();
            setupBeatportHypePicksSliderIndicators();
            setupBeatportHypePicksSliderHoverPause();
            startBeatportHypePicksSliderAutoPlay();
        }
    });

    console.log('✅ Beatport hype picks slider initialized successfully');
}

/**
 * Load hype picks data from API
 */
async function loadBeatportHypePicks() {
    try {
        console.log('🔥 Fetching hype picks data...');

        const signal = getBeatportContentSignal();
        const response = await fetch('/api/beatport/hype-picks', signal ? { signal } : undefined);
        const data = await response.json();

        if (data.success && data.releases && data.releases.length > 0) {
            console.log(`🔥 Loaded ${data.releases.length} hype picks releases`);
            populateBeatportHypePicksSlider(data.releases);
            return true;
        } else {
            console.error('Failed to load hype picks:', data.error || 'No hype picks found');
            showBeatportHypePicksError(data.error || 'No hype picks available');
            return false;
        }
    } catch (error) {
        if (error && error.name === 'AbortError') return false;
        console.error('Error loading hype picks:', error);
        showBeatportHypePicksError('Failed to load hype picks');
        return false;
    }
}

/**
 * Populate the hype picks slider with data (based on releases slider)
 */
function populateBeatportHypePicksSlider(releases) {
    const sliderTrack = document.getElementById('beatport-hype-picks-slider-track');
    const indicatorsContainer = document.getElementById('beatport-hype-picks-slider-indicators');

    if (!sliderTrack || !indicatorsContainer) return;

    // Clear existing content
    sliderTrack.innerHTML = '';
    indicatorsContainer.innerHTML = '';

    // Group releases into slides (10 releases per slide in 5x2 grid)
    const releasesPerSlide = 10;
    const slides = [];
    for (let i = 0; i < releases.length; i += releasesPerSlide) {
        slides.push(releases.slice(i, i + releasesPerSlide));
    }

    console.log(`🔥 Hype Picks: Got ${releases.length} releases, creating ${slides.length} slides`);
    beatportHypePicksSliderState.totalSlides = slides.length;
    beatportHypePicksSliderState.currentSlide = 0;

    // Create slides
    slides.forEach((slideReleases, slideIndex) => {
        const slideHtml = `
            <div class="beatport-hype-picks-slide ${slideIndex === 0 ? 'active' : ''}"
                 data-slide="${slideIndex}">
                <div class="beatport-hype-picks-grid">
                    ${slideReleases.map(release => createBeatportHypePickCard(release)).join('')}
                    ${slideReleases.length < releasesPerSlide ?
                Array(releasesPerSlide - slideReleases.length).fill(0).map(() =>
                    `<div class="beatport-hype-pick-card beatport-hype-pick-placeholder">
                                <div class="placeholder-icon">🔥</div>
                            </div>`
                ).join('') : ''
            }
                </div>
            </div>
        `;
        sliderTrack.insertAdjacentHTML('beforeend', slideHtml);
        console.log(`🔥 Created slide ${slideIndex + 1}/${slides.length} with ${slideReleases.length} releases`);

        // Create indicator
        const indicatorHtml = `<button class="beatport-hype-picks-indicator ${slideIndex === 0 ? 'active' : ''}" data-slide="${slideIndex}"></button>`;
        indicatorsContainer.insertAdjacentHTML('beforeend', indicatorHtml);
    });

    // Add click handlers to track cards
    setupBeatportHypePickCardHandlers();
}

/**
 * Create a hype pick card HTML (for release cards, same as new releases)
 */
function createBeatportHypePickCard(release) {
    const artworkUrl = release.image_url || '';
    const bgStyle = artworkUrl ? `style="--card-bg-image: url('${artworkUrl}')"` : '';

    return `
        <div class="beatport-hype-pick-card" data-url="${release.url || ''}" ${bgStyle}>
            <div class="beatport-hype-pick-card-content">
                <div class="beatport-hype-pick-artwork">
                    ${artworkUrl ? `<img src="${artworkUrl}" alt="${release.title || 'Release'}" loading="lazy">` : ''}
                </div>
                <div class="beatport-hype-pick-info">
                    <div class="beatport-hype-pick-title">${release.title || 'Unknown Title'}</div>
                    <div class="beatport-hype-pick-artist">${release.artist || 'Unknown Artist'}</div>
                    <div class="beatport-hype-pick-label">${release.label || 'Hype Pick'}</div>
                </div>
            </div>
        </div>
    `;
}

/**
 * Setup navigation for hype picks slider (same pattern as releases)
 */
function setupBeatportHypePicksSliderNavigation() {
    const prevBtn = document.getElementById('beatport-hype-picks-prev-btn');
    const nextBtn = document.getElementById('beatport-hype-picks-next-btn');

    if (prevBtn) {
        // Clone button to remove all existing event listeners
        const newPrevBtn = prevBtn.cloneNode(true);
        prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);

        newPrevBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            console.log('Previous hype picks button clicked, current slide:', beatportHypePicksSliderState.currentSlide);
            goToBeatportHypePicksSlide(beatportHypePicksSliderState.currentSlide - 1);
            resetBeatportHypePicksSliderAutoPlay();
        });
    }

    if (nextBtn) {
        // Clone button to remove all existing event listeners
        const newNextBtn = nextBtn.cloneNode(true);
        nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);

        newNextBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            console.log('Next hype picks button clicked, current slide:', beatportHypePicksSliderState.currentSlide);
            goToBeatportHypePicksSlide(beatportHypePicksSliderState.currentSlide + 1);
            resetBeatportHypePicksSliderAutoPlay();
        });
    }
}

/**
 * Setup indicators for hype picks slider
 */
function setupBeatportHypePicksSliderIndicators() {
    const indicators = document.querySelectorAll('.beatport-hype-picks-indicator');

    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => {
            goToBeatportHypePicksSlide(index);
            resetBeatportHypePicksSliderAutoPlay();
        });
    });
}

/**
 * Navigate to specific slide
 */
function goToBeatportHypePicksSlide(slideIndex) {
    console.log('goToBeatportHypePicksSlide called with:', slideIndex, 'current:', beatportHypePicksSliderState.currentSlide);

    // Handle wrap around
    if (slideIndex < 0) {
        slideIndex = beatportHypePicksSliderState.totalSlides - 1;
    } else if (slideIndex >= beatportHypePicksSliderState.totalSlides) {
        slideIndex = 0;
    }

    // Update current slide
    beatportHypePicksSliderState.currentSlide = slideIndex;

    // Update slides
    const slides = document.querySelectorAll('.beatport-hype-picks-slide');
    slides.forEach((slide, index) => {
        slide.classList.remove('active', 'prev', 'next');
        if (index === slideIndex) {
            slide.classList.add('active');
        } else if (index < slideIndex) {
            slide.classList.add('prev');
        } else {
            slide.classList.add('next');
        }
    });

    // Update indicators
    const indicators = document.querySelectorAll('.beatport-hype-picks-indicator');
    indicators.forEach((indicator, index) => {
        indicator.classList.toggle('active', index === slideIndex);
    });

    console.log('Slide updated to:', beatportHypePicksSliderState.currentSlide);
}

/**
 * Start auto-play for hype picks slider
 */
function startBeatportHypePicksSliderAutoPlay() {
    if (beatportHypePicksSliderState.autoPlayInterval) {
        clearInterval(beatportHypePicksSliderState.autoPlayInterval);
    }

    beatportHypePicksSliderState.autoPlayInterval = setInterval(() => {
        goToBeatportHypePicksSlide(beatportHypePicksSliderState.currentSlide + 1);
    }, beatportHypePicksSliderState.autoPlayDelay);

    console.log('🔥 Hype picks slider autoplay started');
}

/**
 * Reset auto-play for hype picks slider
 */
function resetBeatportHypePicksSliderAutoPlay() {
    startBeatportHypePicksSliderAutoPlay();
}

/**
 * Setup hover pause for hype picks slider
 */
function setupBeatportHypePicksSliderHoverPause() {
    const sliderContainer = document.querySelector('.beatport-hype-picks-slider-container');
    if (sliderContainer) {
        sliderContainer.addEventListener('mouseenter', () => {
            if (beatportHypePicksSliderState.autoPlayInterval) {
                clearInterval(beatportHypePicksSliderState.autoPlayInterval);
            }
        });

        sliderContainer.addEventListener('mouseleave', () => {
            startBeatportHypePicksSliderAutoPlay();
        });
    }
}

/**
 * Setup click handlers for hype pick cards
 */
function setupBeatportHypePickCardHandlers() {
    const cards = document.querySelectorAll('.beatport-hype-pick-card:not(.beatport-hype-pick-placeholder)');

    cards.forEach(card => {
        const releaseUrl = card.getAttribute('data-url');
        if (releaseUrl && releaseUrl !== '#' && releaseUrl !== '') {
            // Extract release data from the card elements
            const titleElement = card.querySelector('.beatport-hype-pick-title');
            const artistElement = card.querySelector('.beatport-hype-pick-artist');
            const labelElement = card.querySelector('.beatport-hype-pick-label');
            const imageElement = card.querySelector('.beatport-hype-pick-artwork img');

            const releaseData = {
                url: releaseUrl,
                title: titleElement ? titleElement.textContent.trim() : 'Unknown Title',
                artist: artistElement ? artistElement.textContent.trim() : 'Unknown Artist',
                label: labelElement ? labelElement.textContent.trim() : 'Unknown Label',
                image_url: imageElement ? imageElement.src : ''
            };

            card.addEventListener('click', () => handleBeatportReleaseCardClick(card, releaseData));
            card.style.cursor = 'pointer';
        }
    });
}

/**
 * Show error state for hype picks slider
 */
function showBeatportHypePicksError(errorMessage) {
    const sliderTrack = document.getElementById('beatport-hype-picks-slider-track');
    if (sliderTrack) {
        sliderTrack.innerHTML = `
        <div class="beatport-hype-picks-loading">
            <div class="beatport-hype-picks-loading-content">
                <h3>❌ Error Loading Hype Picks</h3>
                <p>${errorMessage}</p>
            </div>
        </div>
        `;
    }
}

/**
 * Clean up hype picks slider when switching away
 */
function cleanupBeatportHypePicksSlider() {
    if (beatportHypePicksSliderState.autoPlayInterval) {
        clearInterval(beatportHypePicksSliderState.autoPlayInterval);
        beatportHypePicksSliderState.autoPlayInterval = null;
    }
}

// ===================================
// BEATPORT FEATURED CHARTS SLIDER
// ===================================

// State management for featured charts slider (copied from releases slider)
let beatportChartsSliderState = {
    currentSlide: 0,
    totalSlides: 0,
    autoPlayInterval: null,
    autoPlayDelay: 10000,  // Slightly longer auto-play for charts
    isInitialized: false
};

/**
 * Initialize the beatport featured charts slider functionality (based on releases slider)
 */
function initializeBeatportChartsSlider() {
    console.log('🔥 Initializing beatport featured charts slider...');

    const slider = document.getElementById('beatport-charts-slider');
    if (!slider) {
        console.warn('Beatport charts slider not found');
        return;
    }

    // Prevent double initialization
    if (slider.dataset.initialized === 'true') {
        console.log('Charts slider already initialized');
        return;
    }

    const sliderTrack = document.getElementById('beatport-charts-slider-track');
    const indicatorsContainer = document.getElementById('beatport-charts-slider-indicators');

    if (!sliderTrack || !indicatorsContainer) {
        console.warn('Charts slider elements not found');
        return;
    }

    // Load data and initialize
    loadBeatportFeaturedCharts().then(success => {
        if (success) {
            setupBeatportChartsSliderNavigation();
            setupBeatportChartsSliderIndicators();
            setupBeatportChartsSliderHoverPause();
            startBeatportChartsSliderAutoPlay();
            slider.dataset.initialized = 'true';
            beatportChartsSliderState.isInitialized = true;
            console.log('✅ Featured charts slider initialized successfully');
        }
    });
}

/**
 * Load featured charts data from API
 */
async function loadBeatportFeaturedCharts() {
    try {
        console.log('📊 Loading featured charts data...');
        const signal = getBeatportContentSignal();
        const response = await fetch('/api/beatport/featured-charts', signal ? { signal } : undefined);
        const data = await response.json();

        if (data.success && data.charts && data.charts.length > 0) {
            console.log(`📈 Loaded ${data.charts.length} featured charts`);
            createBeatportChartsSlides(data.charts);
            return true;
        } else {
            console.warn('No featured charts data available');
            return false;
        }
    } catch (error) {
        if (error && error.name === 'AbortError') return false;
        console.error('❌ Error loading featured charts:', error);
        return false;
    }
}

/**
 * Create chart slides with grid layout (copied from releases slider)
 */
function createBeatportChartsSlides(charts) {
    const sliderTrack = document.getElementById('beatport-charts-slider-track');
    const indicatorsContainer = document.getElementById('beatport-charts-slider-indicators');

    if (!sliderTrack || !indicatorsContainer) {
        console.error('Charts slider elements not found');
        return;
    }

    const cardsPerSlide = 10; // 5x2 grid
    const totalSlides = Math.ceil(charts.length / cardsPerSlide);

    // Clear existing content
    sliderTrack.innerHTML = '';
    indicatorsContainer.innerHTML = '';

    // Update state
    beatportChartsSliderState.totalSlides = totalSlides;
    beatportChartsSliderState.currentSlide = 0;

    console.log(`🎯 Creating ${totalSlides} chart slides with ${cardsPerSlide} cards each`);

    // Generate slides HTML
    for (let slideIndex = 0; slideIndex < totalSlides; slideIndex++) {
        const startIndex = slideIndex * cardsPerSlide;
        const endIndex = Math.min(startIndex + cardsPerSlide, charts.length);
        const slideCharts = charts.slice(startIndex, endIndex);

        // Create grid HTML for this slide
        const gridHtml = slideCharts.map(chart => {
            const bgImageStyle = chart.image ? `--chart-bg-image: url('${chart.image}')` : '';
            return `
                <div class="beatport-chart-card" style="${bgImageStyle}" data-url="${chart.url || ''}">
                    <div class="beatport-chart-card-content">
                        <div class="beatport-chart-name">${chart.name || 'Unknown Chart'}</div>
                        <div class="beatport-chart-creator">${chart.creator || 'Unknown Creator'}</div>
                    </div>
                </div>
            `;
        }).join('');

        // Create slide HTML
        const slideHtml = `
            <div class="beatport-charts-slide ${slideIndex === 0 ? 'active' : ''}">
                <div class="beatport-charts-grid">
                    ${gridHtml}
                </div>
            </div>
        `;

        sliderTrack.innerHTML += slideHtml;

        // Create indicator
        const indicatorHtml = `<button class="beatport-charts-indicator ${slideIndex === 0 ? 'active' : ''}" data-slide="${slideIndex}"></button>`;
        indicatorsContainer.innerHTML += indicatorHtml;
    }

    console.log(`✅ Created ${totalSlides} chart slides`);

    // Add click handlers for individual chart discovery (matching chart pattern)
    const chartCards = sliderTrack.querySelectorAll('.beatport-chart-card[data-url]');
    chartCards.forEach((card) => {
        const chartUrl = card.getAttribute('data-url');
        if (chartUrl && chartUrl !== '') {
            // Find the corresponding chart data
            const chartData = charts.find(chart => chart.url === chartUrl);
            if (chartData) {
                card.addEventListener('click', () => handleBeatportChartCardClick(card, chartData));
                card.style.cursor = 'pointer';
            }
        }
    });
}

/**
 * Set up navigation functionality (copied from releases slider with button cloning)
 */
function setupBeatportChartsSliderNavigation() {
    const prevBtn = document.getElementById('beatport-charts-prev-btn');
    const nextBtn = document.getElementById('beatport-charts-next-btn');

    if (prevBtn) {
        // Clone button to remove all existing event listeners
        const newPrevBtn = prevBtn.cloneNode(true);
        prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);

        newPrevBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            console.log('Previous charts button clicked, current slide:', beatportChartsSliderState.currentSlide);
            goToBeatportChartsSlide(beatportChartsSliderState.currentSlide - 1);
            resetBeatportChartsSliderAutoPlay();
        });
    }

    if (nextBtn) {
        // Clone button to remove all existing event listeners
        const newNextBtn = nextBtn.cloneNode(true);
        nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);

        newNextBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            console.log('Next charts button clicked, current slide:', beatportChartsSliderState.currentSlide);
            goToBeatportChartsSlide(beatportChartsSliderState.currentSlide + 1);
            resetBeatportChartsSliderAutoPlay();
        });
    }
}

/**
 * Set up indicator functionality (copied from releases slider)
 */
function setupBeatportChartsSliderIndicators() {
    const indicators = document.querySelectorAll('.beatport-charts-indicator');

    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => {
            goToBeatportChartsSlide(index);
            resetBeatportChartsSliderAutoPlay();
        });
    });
}

/**
 * Navigate to a specific slide (copied from releases slider)
 */
function goToBeatportChartsSlide(slideIndex) {
    console.log('goToBeatportChartsSlide called with:', slideIndex, 'current:', beatportChartsSliderState.currentSlide);

    // Wrap around if out of bounds
    if (slideIndex < 0) {
        slideIndex = beatportChartsSliderState.totalSlides - 1;
    } else if (slideIndex >= beatportChartsSliderState.totalSlides) {
        slideIndex = 0;
    }

    console.log('After wrapping, slideIndex:', slideIndex);

    // Update current slide
    beatportChartsSliderState.currentSlide = slideIndex;

    // Update slide visibility
    const slides = document.querySelectorAll('.beatport-charts-slide');
    slides.forEach((slide, index) => {
        slide.classList.remove('active', 'prev', 'next');

        if (index === slideIndex) {
            slide.classList.add('active');
        } else if (index < slideIndex) {
            slide.classList.add('prev');
        } else {
            slide.classList.add('next');
        }
    });

    // Update indicators
    const indicators = document.querySelectorAll('.beatport-charts-indicator');
    indicators.forEach((indicator, index) => {
        indicator.classList.toggle('active', index === slideIndex);
    });

    console.log('Charts slide updated to:', beatportChartsSliderState.currentSlide);
}

/**
 * Start auto-play functionality (copied from releases slider)
 */
function startBeatportChartsSliderAutoPlay() {
    if (beatportChartsSliderState.autoPlayInterval) {
        clearInterval(beatportChartsSliderState.autoPlayInterval);
    }

    beatportChartsSliderState.autoPlayInterval = setInterval(() => {
        goToBeatportChartsSlide(beatportChartsSliderState.currentSlide + 1);
    }, beatportChartsSliderState.autoPlayDelay);
}

/**
 * Reset auto-play timer (copied from releases slider)
 */
function resetBeatportChartsSliderAutoPlay() {
    startBeatportChartsSliderAutoPlay();
}

/**
 * Set up hover pause functionality (copied from releases slider)
 */
function setupBeatportChartsSliderHoverPause() {
    const sliderContainer = document.querySelector('.beatport-charts-slider-container');

    if (sliderContainer) {
        sliderContainer.addEventListener('mouseenter', () => {
            if (beatportChartsSliderState.autoPlayInterval) {
                clearInterval(beatportChartsSliderState.autoPlayInterval);
                beatportChartsSliderState.autoPlayInterval = null;
            }
        });

        sliderContainer.addEventListener('mouseleave', () => {
            startBeatportChartsSliderAutoPlay();
        });
    }
}

/**
 * Clean up charts slider when switching away (copied from releases slider)
 */
function cleanupBeatportChartsSlider() {
    if (beatportChartsSliderState.autoPlayInterval) {
        clearInterval(beatportChartsSliderState.autoPlayInterval);
        beatportChartsSliderState.autoPlayInterval = null;
    }
}

// ===================================
// BEATPORT DJ CHARTS SLIDER
// ===================================

// State management for DJ charts slider (3 cards per slide)
let beatportDJSliderState = {
    currentSlide: 0,
    totalSlides: 0,
    autoPlayInterval: null,
    autoPlayDelay: 12000,  // Longer auto-play for DJ charts
    isInitialized: false
};

/**
 * Initialize the beatport DJ charts slider functionality (based on charts slider)
 */
function initializeBeatportDJSlider() {
    console.log('🎧 Initializing beatport DJ charts slider...');

    const slider = document.getElementById('beatport-dj-slider');
    if (!slider) {
        console.warn('Beatport DJ slider not found');
        return;
    }

    // Prevent double initialization
    if (slider.dataset.initialized === 'true') {
        console.log('DJ slider already initialized');
        return;
    }

    const sliderTrack = document.getElementById('beatport-dj-slider-track');
    const indicatorsContainer = document.getElementById('beatport-dj-slider-indicators');

    if (!sliderTrack || !indicatorsContainer) {
        console.warn('DJ slider elements not found');
        return;
    }

    // Load data and initialize
    loadBeatportDJCharts().then(success => {
        if (success) {
            setupBeatportDJSliderNavigation();
            setupBeatportDJSliderIndicators();
            setupBeatportDJSliderHoverPause();
            startBeatportDJSliderAutoPlay();
            slider.dataset.initialized = 'true';
            beatportDJSliderState.isInitialized = true;
            console.log('✅ DJ charts slider initialized successfully');
        }
    });
}

/**
 * Load DJ charts data from API
 */
async function loadBeatportDJCharts() {
    try {
        console.log('🎧 Loading DJ charts data...');
        const signal = getBeatportContentSignal();
        const response = await fetch('/api/beatport/dj-charts', signal ? { signal } : undefined);
        const data = await response.json();

        if (data.success && data.charts && data.charts.length > 0) {
            console.log(`📈 Loaded ${data.charts.length} DJ charts`);
            createBeatportDJSlides(data.charts);
            return true;
        } else {
            console.warn('No DJ charts data available');
            return false;
        }
    } catch (error) {
        if (error && error.name === 'AbortError') return false;
        console.error('❌ Error loading DJ charts:', error);
        return false;
    }
}

/**
 * Create DJ chart slides with 3 cards per slide layout
 */
function createBeatportDJSlides(charts) {
    const sliderTrack = document.getElementById('beatport-dj-slider-track');
    const indicatorsContainer = document.getElementById('beatport-dj-slider-indicators');

    if (!sliderTrack || !indicatorsContainer) {
        console.error('DJ slider elements not found');
        return;
    }

    const cardsPerSlide = 3; // 3 cards per slide for DJ charts
    const totalSlides = Math.ceil(charts.length / cardsPerSlide);

    // Clear existing content
    sliderTrack.innerHTML = '';
    indicatorsContainer.innerHTML = '';

    // Update state
    beatportDJSliderState.totalSlides = totalSlides;
    beatportDJSliderState.currentSlide = 0;

    console.log(`🎯 Creating ${totalSlides} DJ chart slides with ${cardsPerSlide} cards each`);

    // Generate slides HTML
    for (let slideIndex = 0; slideIndex < totalSlides; slideIndex++) {
        const startIndex = slideIndex * cardsPerSlide;
        const endIndex = Math.min(startIndex + cardsPerSlide, charts.length);
        const slideCharts = charts.slice(startIndex, endIndex);

        // Create grid HTML for this slide
        const gridHtml = slideCharts.map(chart => {
            const bgImageStyle = chart.image ? `--dj-bg-image: url('${chart.image}')` : '';
            return `
                <div class="beatport-dj-card" style="${bgImageStyle}" data-url="${chart.url || ''}">
                    <div class="beatport-dj-card-content">
                        <div class="beatport-dj-name">${chart.name || 'Unknown Chart'}</div>
                        <div class="beatport-dj-creator">${chart.creator || 'Unknown Creator'}</div>
                    </div>
                </div>
            `;
        }).join('');

        // Create slide HTML
        const slideHtml = `
            <div class="beatport-dj-slide ${slideIndex === 0 ? 'active' : ''}">
                <div class="beatport-dj-grid">
                    ${gridHtml}
                </div>
            </div>
        `;

        sliderTrack.innerHTML += slideHtml;

        // Create indicator
        const indicatorHtml = `<button class="beatport-dj-indicator ${slideIndex === 0 ? 'active' : ''}" data-slide="${slideIndex}"></button>`;
        indicatorsContainer.innerHTML += indicatorHtml;
    }

    console.log(`✅ Created ${totalSlides} DJ chart slides`);

    // Add click handlers for individual DJ chart discovery (matching chart pattern)
    const djChartCards = sliderTrack.querySelectorAll('.beatport-dj-card[data-url]');
    djChartCards.forEach((card) => {
        const chartUrl = card.getAttribute('data-url');
        if (chartUrl && chartUrl !== '') {
            // Find the corresponding chart data
            const chartData = charts.find(chart => chart.url === chartUrl);
            if (chartData) {
                card.addEventListener('click', () => handleBeatportDJChartCardClick(card, chartData));
                card.style.cursor = 'pointer';
            }
        }
    });
}

/**
 * Set up navigation functionality (copied from charts slider with button cloning)
 */
function setupBeatportDJSliderNavigation() {
    const prevBtn = document.getElementById('beatport-dj-prev-btn');
    const nextBtn = document.getElementById('beatport-dj-next-btn');

    if (prevBtn) {
        // Clone button to remove all existing event listeners
        const newPrevBtn = prevBtn.cloneNode(true);
        prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);

        newPrevBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            console.log('Previous DJ button clicked, current slide:', beatportDJSliderState.currentSlide);
            goToBeatportDJSlide(beatportDJSliderState.currentSlide - 1);
            resetBeatportDJSliderAutoPlay();
        });
    }

    if (nextBtn) {
        // Clone button to remove all existing event listeners
        const newNextBtn = nextBtn.cloneNode(true);
        nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);

        newNextBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            console.log('Next DJ button clicked, current slide:', beatportDJSliderState.currentSlide);
            goToBeatportDJSlide(beatportDJSliderState.currentSlide + 1);
            resetBeatportDJSliderAutoPlay();
        });
    }
}

/**
 * Set up indicator functionality (copied from charts slider)
 */
function setupBeatportDJSliderIndicators() {
    const indicators = document.querySelectorAll('.beatport-dj-indicator');

    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => {
            goToBeatportDJSlide(index);
            resetBeatportDJSliderAutoPlay();
        });
    });
}

/**
 * Navigate to a specific slide (copied from charts slider)
 */
function goToBeatportDJSlide(slideIndex) {
    console.log('goToBeatportDJSlide called with:', slideIndex, 'current:', beatportDJSliderState.currentSlide);

    // Wrap around if out of bounds
    if (slideIndex < 0) {
        slideIndex = beatportDJSliderState.totalSlides - 1;
    } else if (slideIndex >= beatportDJSliderState.totalSlides) {
        slideIndex = 0;
    }

    console.log('After wrapping, slideIndex:', slideIndex);

    // Update current slide
    beatportDJSliderState.currentSlide = slideIndex;

    // Update slide visibility
    const slides = document.querySelectorAll('.beatport-dj-slide');
    slides.forEach((slide, index) => {
        slide.classList.remove('active', 'prev', 'next');

        if (index === slideIndex) {
            slide.classList.add('active');
        } else if (index < slideIndex) {
            slide.classList.add('prev');
        } else {
            slide.classList.add('next');
        }
    });

    // Update indicators
    const indicators = document.querySelectorAll('.beatport-dj-indicator');
    indicators.forEach((indicator, index) => {
        indicator.classList.toggle('active', index === slideIndex);
    });

    console.log('DJ slide updated to:', beatportDJSliderState.currentSlide);
}

/**
 * Start auto-play functionality (copied from charts slider)
 */
function startBeatportDJSliderAutoPlay() {
    if (beatportDJSliderState.autoPlayInterval) {
        clearInterval(beatportDJSliderState.autoPlayInterval);
    }

    beatportDJSliderState.autoPlayInterval = setInterval(() => {
        goToBeatportDJSlide(beatportDJSliderState.currentSlide + 1);
    }, beatportDJSliderState.autoPlayDelay);
}

/**
 * Reset auto-play timer (copied from charts slider)
 */
function resetBeatportDJSliderAutoPlay() {
    startBeatportDJSliderAutoPlay();
}

/**
 * Set up hover pause functionality (copied from charts slider)
 */
function setupBeatportDJSliderHoverPause() {
    const sliderContainer = document.querySelector('.beatport-dj-slider-container');

    if (sliderContainer) {
        sliderContainer.addEventListener('mouseenter', () => {
            if (beatportDJSliderState.autoPlayInterval) {
                clearInterval(beatportDJSliderState.autoPlayInterval);
                beatportDJSliderState.autoPlayInterval = null;
            }
        });

        sliderContainer.addEventListener('mouseleave', () => {
            startBeatportDJSliderAutoPlay();
        });
    }
}

/**
 * Clean up DJ slider when switching away (copied from charts slider)
 */
function cleanupBeatportDJSlider() {
    if (beatportDJSliderState.autoPlayInterval) {
        clearInterval(beatportDJSliderState.autoPlayInterval);
        beatportDJSliderState.autoPlayInterval = null;
    }
}

/**
 * Load top 10 lists data from API and populate both lists
 */
async function loadBeatportTop10Lists() {
    try {
        console.log('🏆 Loading top 10 lists data...');
        const signal = getBeatportContentSignal();
        const response = await fetch('/api/beatport/homepage/top-10-lists', signal ? { signal } : undefined);
        const data = await response.json();

        if (data.success) {
            console.log(`🎵 Loaded ${data.beatport_count} Beatport Top 10 + ${data.hype_count} Hype Top 10 tracks`);

            // Populate both lists
            populateBeatportTop10List(data.beatport_top10);
            populateHypeTop10List(data.hype_top10);
            return true;
        } else {
            console.error('Failed to load top 10 lists:', data.error);
            showTop10ListsError(data.error || 'No data available');
            return false;
        }
    } catch (error) {
        if (error && error.name === 'AbortError') return false;
        console.error('Error loading top 10 lists:', error);
        showTop10ListsError('Failed to load top 10 lists');
        return false;
    }
}

/**
 * Clean track/artist text for proper spacing
 */
function cleanTrackText(text) {
    if (!text) return text;

    // Fix common spacing issues
    text = text.replace(/([a-z$!@#%&*])([A-Z])/g, '$1 $2');  // Add space between lowercase/symbols and uppercase
    text = text.replace(/([a-zA-Z]),([a-zA-Z])/g, '$1, $2');  // Add space after comma
    text = text.replace(/([a-zA-Z])(Mix|Remix|Extended|Version)\b/g, '$1 $2');  // Fix mix types
    text = text.replace(/\s+/g, ' ');  // Collapse multiple spaces
    text = text.trim();

    return text;
}

/**
 * Populate Beatport Top 10 list with data
 */
function populateBeatportTop10List(tracks) {
    const container = document.getElementById('beatport-top10-list');
    if (!container || !tracks || tracks.length === 0) return;

    // Generate HTML for the tracks
    let tracksHtml = `
        <div class="beatport-top10-list-header">
            <h3 class="beatport-top10-list-title">🎵 Beatport Top 10</h3>
            <p class="beatport-top10-list-subtitle">Most popular tracks on Beatport</p>
        </div>
        <div class="beatport-top10-tracks">
    `;

    tracks.forEach((track, index) => {
        // Clean the text data before injection
        const cleanTitle = cleanTrackText(track.title || 'Unknown Title');
        const cleanArtist = cleanTrackText(track.artist || 'Unknown Artist');
        const cleanLabel = cleanTrackText(track.label || 'Unknown Label');

        tracksHtml += `
            <div class="beatport-top10-card" data-url="${track.url || '#'}">
                <div class="beatport-top10-card-rank">${track.rank || index + 1}</div>
                <div class="beatport-top10-card-artwork">
                    ${track.artwork_url ?
                `<img src="${track.artwork_url}" alt="${cleanTitle}" loading="lazy">` :
                '<div class="beatport-top10-card-placeholder">🎵</div>'
            }
                </div>
                <div class="beatport-top10-card-info">
                    <h4 class="beatport-top10-card-title">${cleanTitle}</h4>
                    <p class="beatport-top10-card-artist">${cleanArtist}</p>
                    <p class="beatport-top10-card-label">${cleanLabel}</p>
                </div>
            </div>
        `;
    });

    tracksHtml += '</div>';
    container.innerHTML = tracksHtml;
}

/**
 * Populate Hype Top 10 list with data
 */
function populateHypeTop10List(tracks) {
    const container = document.getElementById('beatport-hype10-list');
    if (!container || !tracks || tracks.length === 0) return;

    // Generate HTML for the tracks
    let tracksHtml = `
        <div class="beatport-hype10-list-header">
            <h3 class="beatport-hype10-list-title">🔥 Hype Top 10</h3>
            <p class="beatport-hype10-list-subtitle">Editor's trending picks</p>
        </div>
        <div class="beatport-hype10-tracks">
    `;

    tracks.forEach((track, index) => {
        // Clean the text data before injection
        const cleanTitle = cleanTrackText(track.title || 'Unknown Title');
        const cleanArtist = cleanTrackText(track.artist || 'Unknown Artist');
        const cleanLabel = cleanTrackText(track.label || 'Unknown Label');

        tracksHtml += `
            <div class="beatport-hype10-card" data-url="${track.url || '#'}">
                <div class="beatport-hype10-card-rank">${track.rank || index + 1}</div>
                <div class="beatport-hype10-card-artwork">
                    ${track.artwork_url ?
                `<img src="${track.artwork_url}" alt="${cleanTitle}" loading="lazy">` :
                '<div class="beatport-hype10-card-placeholder">🔥</div>'
            }
                </div>
                <div class="beatport-hype10-card-info">
                    <h4 class="beatport-hype10-card-title">${cleanTitle}</h4>
                    <p class="beatport-hype10-card-artist">${cleanArtist}</p>
                    <p class="beatport-hype10-card-label">${cleanLabel}</p>
                </div>
            </div>
        `;
    });

    tracksHtml += '</div>';
    container.innerHTML = tracksHtml;
}

/**
 * Show error message for top 10 lists
 */
function showTop10ListsError(errorMessage) {
    const beatportContainer = document.getElementById('beatport-top10-list');
    const hypeContainer = document.getElementById('beatport-hype10-list');

    const errorHtml = `
        <div class="beatport-top10-error">
            <h3>❌ Error Loading Data</h3>
            <p>${errorMessage}</p>
        </div>
    `;

    if (beatportContainer) beatportContainer.innerHTML = errorHtml;
    if (hypeContainer) hypeContainer.innerHTML = errorHtml;
}

/**
 * Load top 10 releases data from API and populate the list
 */
async function loadBeatportTop10Releases() {
    try {
        console.log('💿 Loading top 10 releases data...');
        const signal = getBeatportContentSignal();
        const response = await fetch('/api/beatport/homepage/top-10-releases-cards', signal ? { signal } : undefined);
        const data = await response.json();

        if (data.success) {
            console.log(`💿 Loaded ${data.releases_count} Top 10 Releases`);
            populateBeatportTop10Releases(data.releases);
            return true;
        } else {
            console.error('Failed to load top 10 releases:', data.error);
            showTop10ReleasesError(data.error || 'No data available');
            return false;
        }
    } catch (error) {
        if (error && error.name === 'AbortError') return false;
        console.error('Error loading top 10 releases:', error);
        showTop10ReleasesError('Failed to load top 10 releases');
        return false;
    }
}

/**
 * Populate Top 10 Releases list with data
 */
function populateBeatportTop10Releases(releases) {
    const container = document.getElementById('beatport-releases-top10-list');
    if (!container || !releases || releases.length === 0) return;

    // Generate HTML for the releases
    let releasesHtml = `
        <div class="beatport-releases-top10-tracks">
    `;

    releases.forEach((release, index) => {
        releasesHtml += `
            <div class="beatport-releases-top10-card" data-url="${release.url || '#'}" data-bg-image="${release.image_url || ''}">
                <div class="beatport-releases-top10-card-rank">${release.rank || index + 1}</div>
                <div class="beatport-releases-top10-card-artwork">
                    ${release.image_url ?
                `<img src="${release.image_url}" alt="${release.title}" loading="lazy">` :
                '<div class="beatport-releases-top10-card-placeholder">💿</div>'
            }
                </div>
                <div class="beatport-releases-top10-card-info">
                    <h4 class="beatport-releases-top10-card-title">${release.title || 'Unknown Title'}</h4>
                    <p class="beatport-releases-top10-card-artist">${release.artist || 'Unknown Artist'}</p>
                    <p class="beatport-releases-top10-card-label">${release.label || 'Unknown Label'}</p>
                </div>
            </div>
        `;
    });

    releasesHtml += '</div>';
    container.innerHTML = releasesHtml;

    // Set background images for cards
    const cards = container.querySelectorAll('.beatport-releases-top10-card[data-bg-image]');
    cards.forEach(card => {
        const bgImage = card.getAttribute('data-bg-image');
        if (bgImage) {
            // Transform image URL from 95x95 to 500x500 for higher quality background
            const highResImage = bgImage.replace('/image_size/95x95/', '/image_size/500x500/');
            card.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('${highResImage}')`;
            card.style.backgroundSize = 'cover';
            card.style.backgroundPosition = 'center';
        }
    });

    // Add click handlers for individual release discovery
    const releaseCards = container.querySelectorAll('.beatport-releases-top10-card[data-url]');
    releaseCards.forEach((card, index) => {
        card.addEventListener('click', () => handleBeatportReleaseCardClick(card, releases[index]));
        card.style.cursor = 'pointer';
    });
}

/**
 * Show error message for top 10 releases
 */
function showTop10ReleasesError(errorMessage) {
    const container = document.getElementById('beatport-releases-top10-list');

    const errorHtml = `
        <div class="beatport-releases-top10-error">
            <h3>❌ Error Loading Releases</h3>
            <p>${errorMessage}</p>
        </div>
    `;

    if (container) container.innerHTML = errorHtml;
}

/**
 * Handle click on individual Top 10 Release card - create discovery process for single release
 */
async function handleBeatportReleaseCardClick(cardElement, release) {
    if (_beatportModalOpening) return;
    _beatportModalOpening = true;

    console.log(`💿 Individual release card clicked: ${release.title} by ${release.artist}`);

    if (!release.url || release.url === '#') {
        _beatportModalOpening = false;
        showToast('No release URL available', 'error');
        return;
    }

    try {
        showToast(`Loading ${release.title}...`, 'info');
        showLoadingOverlay(`Getting tracks from ${release.title}...`);

        // Fetch structured release metadata for direct download modal
        console.log(`🎵 Fetching release metadata: ${release.url}`);
        const response = await fetch('/api/beatport/release-metadata', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ release_url: release.url })
        });

        const data = await response.json();

        if (!data.success || !data.tracks || data.tracks.length === 0) {
            throw new Error(data.error || 'No tracks found in this release');
        }

        console.log(`✅ Got ${data.tracks.length} tracks from ${data.album.name}`);

        // Format artists as array of strings for compatibility with download modal
        const formattedTracks = data.tracks.map(track => ({
            ...track,
            artists: track.artists.map(a => typeof a === 'object' ? a.name : a)
        }));

        const virtualPlaylistId = `beatport_release_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
        const playlistName = data.album.name;

        // Open download modal directly - same as clicking an album on the Artists page
        await openDownloadMissingModalForArtistAlbum(
            virtualPlaylistId,
            playlistName,
            formattedTracks,
            data.album,
            data.artist,
            false
        );

        // Register Beatport download bubble for releases (albums, EPs, singles)
        const releaseImage = (data.album.images && data.album.images.length > 0) ? data.album.images[0].url : (release.image_url || '');
        registerBeatportDownload(playlistName, releaseImage, virtualPlaylistId);

        hideLoadingOverlay();
        _beatportModalOpening = false;
        console.log(`✅ Opened download modal for ${playlistName}`);

    } catch (error) {
        console.error(`❌ Error handling release click for ${release.title}:`, error);
        hideLoadingOverlay();
        _beatportModalOpening = false;
        showToast(`Error loading ${release.title}: ${error.message}`, 'error');
    }
}

/**
 * Convert scraped Beatport tracks into download-modal-compatible format and open the modal.
 * Used by all chart/playlist handlers (Top 100, Hype 100, Featured Charts, DJ Charts, genre charts).
 * Charts open as compilations — each track is searched independently on Soulseek.
 */
// Guard against multiple rapid clicks opening duplicate modals
let _beatportModalOpening = false;

/**
 * Enrich tracks via a single batch request to the backend.
 * Progress is reported via WebSocket (beatport:enrich_progress) and updates the loading overlay.
 * Returns the enriched tracks array.
 */
async function _enrichTracksWithProgress(tracks, chartName) {
    const enrichmentId = `enrich_${Date.now()}_${Math.random().toString(36).substr(2, 6)}`;

    try {
        const resp = await fetch('/api/beatport/enrich-tracks', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ tracks, enrichment_id: enrichmentId })
        });
        const data = await resp.json();

        // Synchronous path — all tracks were cached, results returned inline
        if (data.success && data.tracks) {
            return data.tracks;
        }

        // Async path — poll for progress until done
        if (data.success && data.async) {
            while (true) {
                await new Promise(r => setTimeout(r, 800));
                try {
                    const progressResp = await fetch(`/api/beatport/enrich-progress/${enrichmentId}?_=${Date.now()}`);
                    const progress = await progressResp.json();
                    if (!progress.success) break;

                    // Update loading overlay with live progress
                    const overlayText = document.querySelector('#loading-overlay .loading-message');
                    if (overlayText) {
                        overlayText.textContent = `Fetching track metadata... (${progress.completed}/${progress.total}) ${progress.current_track || ''}`;
                    }

                    if (progress.done) {
                        if (progress.tracks) {
                            return progress.tracks;
                        }
                        console.warn('⚠️ Async enrichment failed:', progress.error);
                        return tracks;
                    }
                } catch (pollErr) {
                    console.warn('⚠️ Progress poll error:', pollErr);
                }
            }
        }

        console.warn('⚠️ Enrichment failed, returning original tracks');
        return tracks;
    } catch (e) {
        console.warn('⚠️ Failed to enrich tracks:', e);
        return tracks;
    }
}

function parseBeatportDuration(raw) {
    if (!raw) return 0;
    if (typeof raw === 'string' && raw.includes(':')) {
        const parts = raw.split(':');
        return (parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10)) * 1000 || 0;
    }
    return (parseInt(raw, 10) || 0) * 1000;
}

function openBeatportChartAsDownloadModal(tracks, chartName, chartImage) {
    // Note: callers already guard against double-clicks via _beatportModalOpening.
    // Reset the flag here so the modal can open even after fast (cached) enrichment.
    _beatportModalOpening = false;

    const albumObj = {
        id: `beatport_chart_${Date.now()}`,
        name: chartName,
        album_type: 'compilation',
        images: chartImage ? [{ url: chartImage }] : [],
        total_tracks: tracks.length
    };

    const formattedTracks = tracks.map((track, index) => {
        // Use per-track release metadata if available (from JSON extraction)
        const hasRelease = track.release_name && track.release_name.length > 0;
        const trackAlbum = hasRelease ? {
            id: `beatport_release_${track.release_id || index}`,
            name: cleanTrackText(track.release_name),
            album_type: 'single',
            images: track.release_image ? [{ url: track.release_image }] : [],
            release_date: track.release_date || '',
            total_tracks: 1
        } : albumObj;

        // Combine title + mix_name
        let trackName = cleanTrackText(track.title || 'Unknown Title');
        if (track.mix_name && track.mix_name.toLowerCase() !== 'original mix') {
            trackName = `${trackName} (${cleanTrackText(track.mix_name)})`;
        }

        // Split combined artist string into individual names for proper folder structure
        const rawArtist = cleanTrackText(track.artist || 'Unknown Artist');
        const artistList = rawArtist.includes(',')
            ? rawArtist.split(',').map(a => a.trim()).filter(a => a)
            : [rawArtist];

        return {
            id: `beatport_chart_${index}`,
            name: trackName,
            artists: artistList,
            duration_ms: parseBeatportDuration(track.duration),
            track_number: index + 1,
            disc_number: 1,
            album: trackAlbum
        };
    });

    const virtualPlaylistId = `beatport_chart_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;

    // Compilation artist
    const artistObj = { id: 'beatport_various', name: 'Various Artists' };

    openDownloadMissingModalForArtistAlbum(
        virtualPlaylistId,
        chartName,
        formattedTracks,
        albumObj,
        artistObj,
        false,
        'playlist'
    );

    // Register Beatport download bubble
    registerBeatportDownload(chartName, chartImage, virtualPlaylistId);
}

/**
 * Handle click on individual chart card - open download modal directly
 */
async function handleBeatportChartCardClick(cardElement, chart) {
    console.log(`📊 Individual chart card clicked: ${chart.name} by ${chart.creator}`);

    if (!chart.url || chart.url === '') {
        showToast('No chart URL available', 'error');
        return;
    }

    try {
        const chartName = `${chart.name} - ${chart.creator}`;
        showToast(`Loading ${chart.name}...`, 'info');
        showLoadingOverlay(`Scraping ${chart.name}...`);

        const response = await fetch('/api/beatport/chart/extract', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                chart_url: chart.url,
                chart_name: `Featured Chart: ${chart.name}`,
                limit: 100,
                enrich: false
            })
        });

        const data = await response.json();

        if (!data.success || !data.tracks || data.tracks.length === 0) {
            throw new Error('No tracks found in this chart');
        }

        console.log(`✅ Fetched ${data.tracks.length} raw tracks from ${chart.name}, enriching...`);
        const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);

        hideLoadingOverlay();
        openBeatportChartAsDownloadModal(enrichedTracks, chartName, chart.image);

    } catch (error) {
        console.error(`❌ Error handling chart click for ${chart.name}:`, error);
        hideLoadingOverlay();
        showToast(`Error loading ${chart.name}: ${error.message}`, 'error');
    }
}

/**
 * Handle click on individual DJ chart card - open download modal directly
 */
async function handleBeatportDJChartCardClick(cardElement, chart) {
    console.log(`🎧 Individual DJ chart card clicked: ${chart.name} by ${chart.creator}`);

    if (!chart.url || chart.url === '') {
        showToast('No DJ chart URL available', 'error');
        return;
    }

    try {
        const chartName = `${chart.name} - ${chart.creator}`;
        showToast(`Loading ${chart.name}...`, 'info');
        showLoadingOverlay(`Scraping ${chart.name}...`);

        const response = await fetch('/api/beatport/chart/extract', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                chart_url: chart.url,
                chart_name: `DJ Chart: ${chart.name}`,
                limit: 100,
                enrich: false
            })
        });

        const data = await response.json();

        if (!data.success || !data.tracks || data.tracks.length === 0) {
            throw new Error('No tracks found in this DJ chart');
        }

        console.log(`✅ Fetched ${data.tracks.length} raw tracks from ${chart.name}, enriching...`);
        const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);

        hideLoadingOverlay();
        openBeatportChartAsDownloadModal(enrichedTracks, chartName, chart.image);

    } catch (error) {
        console.error(`❌ Error handling DJ chart click for ${chart.name}:`, error);
        hideLoadingOverlay();
        showToast(`Error loading ${chart.name}: ${error.message}`, 'error');
    }
}

/**
 * Handle click on Beatport Top 100 button - open download modal directly
 */
async function handleBeatportTop100Click() {
    if (_beatportModalOpening) return;
    _beatportModalOpening = true;
    setTimeout(() => { _beatportModalOpening = false; }, 2000);

    console.log('💯 Beatport Top 100 button clicked');

    try {
        showLoadingOverlay('Scraping Beatport Top 100...');

        // Fetch track list without enrichment (fast)
        const response = await fetch('/api/beatport/top-100?enrich=false', { method: 'GET' });
        const data = await response.json();

        if (!data.success || !data.tracks || data.tracks.length === 0) {
            throw new Error('No tracks found in Beatport Top 100');
        }

        console.log(`✅ Fetched ${data.tracks.length} tracks, enriching one-by-one...`);

        // Enrich one-by-one with live progress
        const enrichedTracks = await _enrichTracksWithProgress(data.tracks, 'Beatport Top 100');

        hideLoadingOverlay();
        openBeatportChartAsDownloadModal(enrichedTracks, 'Beatport Top 100', null);

    } catch (error) {
        console.error('❌ Error handling Beatport Top 100 click:', error);
        hideLoadingOverlay();
        showToast(`Error loading Beatport Top 100: ${error.message}`, 'error');
    }
}

/**
 * Handle click on Hype Top 100 button - open download modal directly
 */
async function handleHypeTop100Click() {
    if (_beatportModalOpening) return;
    _beatportModalOpening = true;
    setTimeout(() => { _beatportModalOpening = false; }, 2000);

    console.log('🔥 Hype Top 100 button clicked');

    try {
        showLoadingOverlay('Scraping Hype Top 100...');

        // Fetch track list without enrichment (fast)
        const response = await fetch('/api/beatport/hype-top-100?enrich=false', { method: 'GET' });
        const data = await response.json();

        if (!data.success || !data.tracks || data.tracks.length === 0) {
            throw new Error('No tracks found in Hype Top 100');
        }

        console.log(`✅ Fetched ${data.tracks.length} tracks, enriching one-by-one...`);

        // Enrich one-by-one with live progress
        const enrichedTracks = await _enrichTracksWithProgress(data.tracks, 'Hype Top 100');

        hideLoadingOverlay();
        openBeatportChartAsDownloadModal(enrichedTracks, 'Hype Top 100', null);

    } catch (error) {
        console.error('❌ Error handling Hype Top 100 click:', error);
        hideLoadingOverlay();
        showToast(`Error loading Hype Top 100: ${error.message}`, 'error');
    }
}

// ================================= //
// GENRE BROWSER MODAL FUNCTIONS    //
// ================================= //

// Cache for genre browser data to avoid re-loading
let genreBrowserCache = {
    genres: null,
    imagesLoaded: false,
    lastLoaded: null,
    imageLoadingActive: false,
    imageWorkers: null
};

function initializeGenreBrowserModal() {
    console.log('🎵 Initializing Genre Browser Modal...');

    // Browse by Genre button click handler
    const browseByGenreBtn = document.getElementById('browse-by-genre-btn');
    if (browseByGenreBtn) {
        browseByGenreBtn.addEventListener('click', () => {
            console.log('🎵 Browse by Genre button clicked');
            openGenreBrowserModal();
        });
    }

    // Modal close button handler
    const modalCloseBtn = document.getElementById('genre-browser-modal-close');
    if (modalCloseBtn) {
        modalCloseBtn.addEventListener('click', closeGenreBrowserModal);
    }

    // Click outside modal to close
    const modalOverlay = document.getElementById('genre-browser-modal');
    if (modalOverlay) {
        modalOverlay.addEventListener('click', (e) => {
            if (e.target === modalOverlay) {
                closeGenreBrowserModal();
            }
        });
    }

    // Search functionality
    const searchInput = document.getElementById('genre-browser-search');
    if (searchInput) {
        searchInput.addEventListener('input', (e) => {
            filterGenreBrowserCards(e.target.value);
        });
    }

    // ESC key to close modal
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && isGenreBrowserModalOpen()) {
            closeGenreBrowserModal();
        }
    });

    console.log('✅ Genre Browser Modal initialized');
}

function openGenreBrowserModal() {
    console.log('🎵 Opening Genre Browser Modal...');

    const modal = document.getElementById('genre-browser-modal');
    if (modal) {
        modal.classList.add('active');
        document.body.style.overflow = 'hidden'; // Prevent background scrolling

        // Check cache before loading genres
        if (genreBrowserCache.genres && genreBrowserCache.genres.length > 0) {
            console.log('💾 Using cached genres data');
            displayCachedGenres();
        } else {
            console.log('🔄 No cached data, loading genres...');
            loadGenreBrowserGenres();
        }

        console.log('✅ Genre Browser Modal opened');
    }
}

function closeGenreBrowserModal() {
    console.log('🎵 Closing Genre Browser Modal...');

    const modal = document.getElementById('genre-browser-modal');
    if (modal) {
        modal.classList.remove('active');
        document.body.style.overflow = ''; // Restore scrolling

        // Clear search input but keep the genre data cached
        const searchInput = document.getElementById('genre-browser-search');
        if (searchInput) {
            searchInput.value = '';
            // Also reset the display filter to show all genres
            filterGenreBrowserCards('');
        }

        // Pause image loading workers if they're running
        if (genreBrowserCache.imageLoadingActive) {
            console.log('⏸️ Pausing image loading workers...');
            genreBrowserCache.imageLoadingActive = false;
        }

        console.log('✅ Genre Browser Modal closed (data preserved in cache)');
    }
}

function isGenreBrowserModalOpen() {
    const modal = document.getElementById('genre-browser-modal');
    return modal && modal.classList.contains('active');
}

async function loadGenreBrowserGenres() {
    console.log('🔍 Loading genres for Genre Browser Modal...');

    const genresGrid = document.getElementById('genre-browser-genres-grid');
    if (!genresGrid) {
        console.error('❌ Genre browser grid not found');
        return;
    }

    // Show loading state
    genresGrid.innerHTML = `
        <div class="genre-browser-loading-container">
            <div class="genre-browser-loading-spinner"></div>
            <p class="genre-browser-loading-text">🔍 Discovering current Beatport genres...</p>
        </div>
    `;

    try {
        // First, fetch genres quickly without images
        console.log('🚀 Fetching genres without images for fast loading...');
        const fastResponse = await fetch('/api/beatport/genres');
        if (!fastResponse.ok) {
            throw new Error(`API returned ${fastResponse.status}: ${fastResponse.statusText}`);
        }

        const fastData = await fastResponse.json();
        const genres = fastData.genres || [];

        if (genres.length === 0) {
            genresGrid.innerHTML = `
                <div class="genre-browser-loading-container">
                    <p style="color: rgba(255, 255, 255, 0.7);">⚠️ No genres available</p>
                    <button onclick="loadGenreBrowserGenres()" style="margin-top: 10px; padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(20, 20, 20, 0.8); color: white; border-radius: 8px; cursor: pointer;">🔄 Retry</button>
                </div>
            `;
            return;
        }

        // Filter out unwanted genres (section titles, etc.)
        const filteredGenres = genres.filter(genre => {
            const name = genre.name.toLowerCase().trim();
            const unwantedGenres = [
                'open format',
                'electronic',
                'genres',
                'browse',
                'charts',
                'new releases',
                'trending',
                'featured',
                'popular'
            ];

            const isUnwanted = unwantedGenres.includes(name);
            if (isUnwanted) {
                console.log(`🚫 Filtered out unwanted genre: "${genre.name}"`);
            }
            return !isUnwanted;
        });

        console.log(`📋 Filtered genres: ${genres.length} → ${filteredGenres.length} (removed ${genres.length - filteredGenres.length} unwanted)`);

        // Generate genre cards dynamically (without images first)
        const genreCardsHTML = filteredGenres.map(genre => `
            <div class="genre-browser-card genre-browser-card-fallback"
                 data-genre-slug="${genre.slug}"
                 data-genre-id="${genre.id}"
                 data-genre-name="${genre.name}"
                 data-url="${genre.url}">
                <div class="genre-browser-card-image">🎵</div>
                <div class="genre-browser-card-content">
                    <h3 class="genre-browser-card-title">${genre.name}</h3>
                    <p class="genre-browser-card-subtitle">Top 10 & Top 100 Charts</p>
                </div>
            </div>
        `).join('');

        genresGrid.innerHTML = genreCardsHTML;

        // Add click event listeners to genre cards
        addGenreBrowserCardClickListeners();

        // Cache the filtered genres data
        genreBrowserCache.genres = filteredGenres;
        genreBrowserCache.lastLoaded = new Date();
        genreBrowserCache.imagesLoaded = false;

        console.log(`✅ Loaded ${filteredGenres.length} Beatport genres for modal (fast mode)`);
        console.log(`💾 Cached ${filteredGenres.length} genres for future use`);
        showToast(`Loaded ${filteredGenres.length} genres for browsing`, 'success');

        // Now fetch images progressively in the background
        if (filteredGenres.length > 5) {
            console.log('🖼️ Loading genre images progressively for modal...');
            loadGenreBrowserImagesProgressively(filteredGenres);
        }

    } catch (error) {
        console.error('❌ Error loading genres for modal:', error);
        genresGrid.innerHTML = `
            <div class="genre-browser-loading-container">
                <p style="color: rgba(255, 255, 255, 0.7);">❌ Failed to load genres: ${error.message}</p>
                <button onclick="loadGenreBrowserGenres()" style="margin-top: 10px; padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(20, 20, 20, 0.8); color: white; border-radius: 8px; cursor: pointer;">🔄 Retry</button>
            </div>
        `;
        showToast(`Error loading genres: ${error.message}`, 'error');
    }
}

function displayCachedGenres() {
    console.log('💾 Displaying cached genres...');

    const genresGrid = document.getElementById('genre-browser-genres-grid');
    if (!genresGrid) {
        console.error('❌ Genre browser grid not found');
        return;
    }

    const genres = genreBrowserCache.genres;
    if (!genres || genres.length === 0) {
        console.error('❌ No cached genres available');
        return;
    }

    // Generate genre cards from cached data
    const genreCardsHTML = genres.map(genre => `
        <div class="genre-browser-card genre-browser-card-fallback"
             data-genre-slug="${genre.slug}"
             data-genre-id="${genre.id}"
             data-genre-name="${genre.name}"
             data-url="${genre.url}">
            <div class="genre-browser-card-image">🎵</div>
            <div class="genre-browser-card-content">
                <h3 class="genre-browser-card-title">${genre.name}</h3>
                <p class="genre-browser-card-subtitle">Top 10 & Top 100 Charts</p>
            </div>
        </div>
    `).join('');

    genresGrid.innerHTML = genreCardsHTML;

    // Add click event listeners to genre cards
    addGenreBrowserCardClickListeners();

    console.log(`✅ Displayed ${genres.length} cached genres instantly`);

    // Handle image loading based on current state
    if (genreBrowserCache.imagesLoaded) {
        console.log('🖼️ Images already loaded, restoring them...');
        restoreCachedImages(genres);
    } else if (!genreBrowserCache.imageLoadingActive && genres.length > 5) {
        // Resume or start image loading
        const cachedCount = genres.filter(g => g.imageUrl).length;
        if (cachedCount > 0) {
            console.log(`🔄 Resuming image loading (${cachedCount}/${genres.length} already cached)...`);
            restoreCachedImages(genres); // Show already cached images
        } else {
            console.log('🖼️ Starting fresh image loading for cached genres...');
        }
        loadGenreBrowserImagesProgressively(genres);
    } else {
        console.log('📷 Image loading in progress, showing cached images...');
        restoreCachedImages(genres);
    }
}

function restoreCachedImages(genres) {
    // Restore images that were already loaded in previous sessions
    genres.forEach(genre => {
        if (genre.imageUrl) {
            const genreCard = document.querySelector(
                `.genre-browser-card[data-genre-slug="${genre.slug}"][data-genre-id="${genre.id}"]`
            );

            if (genreCard) {
                const imageElement = genreCard.querySelector('.genre-browser-card-image');
                if (imageElement) {
                    imageElement.innerHTML = `<img src="${genre.imageUrl}" alt="${genre.name}" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;">`;
                    genreCard.classList.remove('genre-browser-card-fallback');
                }
            }
        }
    });
}

async function loadGenreBrowserImagesProgressively(genres) {
    // Load genre images with 2 concurrent workers for faster loading
    // Only process genres that don't already have cached images
    const imageQueue = genres.filter(genre => !genre.imageUrl);
    let imagesLoaded = 0;
    const maxWorkers = 2;

    // Mark loading as active
    genreBrowserCache.imageLoadingActive = true;

    console.log(`🖼️ Starting progressive image loading for modal with ${maxWorkers} workers for ${imageQueue.length} remaining genres (${genres.length - imageQueue.length} already cached)`);

    // If all images are already cached, mark as complete
    if (imageQueue.length === 0) {
        console.log('✅ All images already cached, marking as complete');
        genreBrowserCache.imagesLoaded = true;
        genreBrowserCache.imageLoadingActive = false;
        return;
    }

    // Function to process a single image
    async function processImage(genre) {
        try {
            // Fetch individual genre image from backend
            const response = await fetch(`/api/beatport/genre-image/${genre.slug}/${genre.id}`);

            if (response.ok) {
                const data = await response.json();

                if (data.success && data.image_url) {
                    // Cache the image URL in the genre object
                    genre.imageUrl = data.image_url;

                    // Find the genre card in the modal
                    const genreCard = document.querySelector(
                        `.genre-browser-card[data-genre-slug="${genre.slug}"][data-genre-id="${genre.id}"]`
                    );

                    if (genreCard) {
                        const imageElement = genreCard.querySelector('.genre-browser-card-image');
                        if (imageElement) {
                            // Replace the fallback emoji with the actual image
                            imageElement.innerHTML = `<img src="${data.image_url}" alt="${genre.name}" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;">`;
                            genreCard.classList.remove('genre-browser-card-fallback');

                            console.log(`✅ Loaded and cached image for ${genre.name} in modal`);
                        }
                    }
                }
            }

            imagesLoaded++;
            console.log(`📷 Progress: ${imagesLoaded}/${genres.length} images loaded for modal`);

        } catch (error) {
            console.log(`⚠️ Could not load image for ${genre.name} in modal: ${error.message}`);
            imagesLoaded++;
        }
    }

    // Worker function to process images from the queue
    async function worker() {
        while (imageQueue.length > 0 && genreBrowserCache.imageLoadingActive) {
            const genre = imageQueue.shift();
            if (genre) {
                await processImage(genre);
                // Small delay to prevent overwhelming the server
                await new Promise(resolve => setTimeout(resolve, 100));
            }

            // Check if we should pause
            if (!genreBrowserCache.imageLoadingActive) {
                console.log('⏸️ Worker paused - modal closed');
                break;
            }
        }
    }

    // Start the workers
    const workers = [];
    for (let i = 0; i < maxWorkers; i++) {
        workers.push(worker());
    }

    // Wait for all workers to complete
    await Promise.all(workers);

    // Check if loading was completed or paused
    if (genreBrowserCache.imageLoadingActive) {
        // Completed successfully
        genreBrowserCache.imagesLoaded = true;
        genreBrowserCache.imageLoadingActive = false;
        console.log(`🎉 Completed loading all genre images for modal (${imagesLoaded}/${genres.length})`);
        console.log(`💾 Marked images as loaded in cache`);
    } else {
        // Was paused
        console.log(`⏸️ Image loading paused (${imagesLoaded}/${genres.length} completed)`);
        console.log(`💾 Partial progress saved in cache`);
    }
}

function filterGenreBrowserCards(searchTerm) {
    const genreCards = document.querySelectorAll('.genre-browser-card');
    const searchLower = searchTerm.toLowerCase();

    genreCards.forEach(card => {
        const genreName = card.dataset.genreName?.toLowerCase() || '';
        const shouldShow = genreName.includes(searchLower);

        card.style.display = shouldShow ? 'block' : 'none';
    });

    console.log(`🔍 Filtered genre cards with search term: "${searchTerm}"`);
}

// === GENRE BROWSER CARD CLICK HANDLERS ===

function addGenreBrowserCardClickListeners() {
    const genreCards = document.querySelectorAll('.genre-browser-card');
    genreCards.forEach(card => {
        card.addEventListener('click', () => {
            const genreSlug = card.dataset.genreSlug;
            const genreId = card.dataset.genreId;
            const genreName = card.dataset.genreName;

            console.log(`🎵 Genre card clicked: ${genreName} (${genreSlug})`);
            handleGenreBrowserCardClick(genreSlug, genreId, genreName);
        });
    });

    console.log(`🔗 Added click listeners to ${genreCards.length} genre browser cards`);
}

async function handleGenreBrowserCardClick(genreSlug, genreId, genreName) {
    console.log(`🎠 Loading hero slider for ${genreName}...`);

    try {
        // Show the genre page view
        showGenrePageView(genreSlug, genreId, genreName);

        // Load the hero slider data
        // Load hero slider, Top 10 lists, and Top 10 releases in parallel
        await Promise.all([
            loadGenreHeroSlider(genreSlug, genreId, genreName),
            loadGenreTop10Lists(genreSlug, genreId, genreName),
            loadGenreTop10Releases(genreSlug, genreId, genreName)
        ]);

    } catch (error) {
        console.error(`❌ Error loading genre page for ${genreName}:`, error);
        showToast(`Error loading ${genreName}: ${error.message}`, 'error');

        // Return to genre list on error
        showGenreListView();
    }
}

function showGenrePageView(genreSlug, genreId, genreName) {
    console.log(`🎯 Showing genre page view for ${genreName}`);

    // CRITICAL: Stop all other slider auto-play to prevent conflicts
    if (typeof beatportRebuildSliderState !== 'undefined' && beatportRebuildSliderState.autoPlayInterval) {
        clearInterval(beatportRebuildSliderState.autoPlayInterval);
        console.log('🛑 Stopped main slider auto-play to prevent conflicts');
    }

    const modal = document.getElementById('genre-browser-modal');
    if (!modal) return;

    // Hide genre list elements
    const searchSection = modal.querySelector('.genre-browser-search-section');
    const genresSection = modal.querySelector('.genre-browser-genres-section');

    if (searchSection) searchSection.style.display = 'none';
    if (genresSection) genresSection.style.display = 'none';

    // Create or show genre page content
    let genrePageContent = modal.querySelector('.genre-page-content');
    if (!genrePageContent) {
        genrePageContent = document.createElement('div');
        genrePageContent.className = 'genre-page-content';
        genrePageContent.innerHTML = `
            <div class="genre-page-header">
                <button class="genre-back-button" id="genre-back-button">
                    <span class="back-icon">←</span> Back to Genres
                </button>
                <h2 class="genre-page-title"></h2>
            </div>
            <div class="genre-hero-slider-container" id="genre-hero-slider-container">
                <div class="genre-loading-container">
                    <div class="genre-loading-spinner"></div>
                    <p class="genre-loading-text">🎠 Loading hero releases...</p>
                </div>
            </div>
            <div class="genre-nav-buttons-section">
                <div class="genre-nav-buttons-container">
                    <button class="beatport-nav-button" id="genre-top100-btn">
                        <span class="beatport-nav-icon top100-icon"></span>
                        <span class="beatport-nav-text">Beatport Top 100</span>
                    </button>
                </div>
            </div>
            <div class="genre-top10-lists-container" id="genre-top10-lists-container">
                <div class="genre-top10-loading-container">
                    <div class="genre-loading-spinner"></div>
                    <p class="genre-loading-text">🎵 Loading Top 10 lists...</p>
                </div>
            </div>
            <div class="genre-top10-releases-container" id="genre-top10-releases-container">
                <div class="genre-top10-releases-loading-container">
                    <div class="genre-loading-spinner"></div>
                    <p class="genre-loading-text">💿 Loading Top 10 releases...</p>
                </div>
            </div>
        `;

        modal.querySelector('.genre-browser-modal-content').appendChild(genrePageContent);

        // Add back button listener
        const backButton = genrePageContent.querySelector('#genre-back-button');
        if (backButton) {
            backButton.addEventListener('click', showGenreListView);
        }

        // Add genre top 100 button listener
        const genreTop100Button = genrePageContent.querySelector('#genre-top100-btn');
        if (genreTop100Button) {
            genreTop100Button.addEventListener('click', () => {
                handleGenreTop100Click(genreSlug, genreId, genreName);
            });
        }
    }

    // Update title and show genre page
    const titleElement = genrePageContent.querySelector('.genre-page-title');
    if (titleElement) titleElement.textContent = genreName;

    genrePageContent.style.display = 'block';

    // Store current genre info for potential back navigation
    genrePageContent.dataset.genreSlug = genreSlug;
    genrePageContent.dataset.genreId = genreId;
    genrePageContent.dataset.genreName = genreName;
}

function showGenreListView() {
    console.log(`🔙 Returning to genre list view`);

    // Clean up genre hero slider
    if (window.genreHeroSliderState && window.genreHeroSliderState.autoPlayInterval) {
        clearInterval(window.genreHeroSliderState.autoPlayInterval);
        console.log('🧹 Cleaned up genre hero slider auto-play');
    }

    // CRITICAL: Restart main slider auto-play
    if (typeof beatportRebuildSliderState !== 'undefined' && !beatportRebuildSliderState.autoPlayInterval) {
        if (typeof startBeatportRebuildSliderAutoPlay === 'function') {
            startBeatportRebuildSliderAutoPlay();
            console.log('🔄 Restarted main slider auto-play');
        }
    }

    const modal = document.getElementById('genre-browser-modal');
    if (!modal) return;

    // Show genre list elements
    const searchSection = modal.querySelector('.genre-browser-search-section');
    const genresSection = modal.querySelector('.genre-browser-genres-section');
    const genrePageContent = modal.querySelector('.genre-page-content');

    if (searchSection) searchSection.style.display = 'block';
    if (genresSection) genresSection.style.display = 'block';
    if (genrePageContent) genrePageContent.style.display = 'none';
}

async function loadGenreHeroSlider(genreSlug, genreId, genreName) {
    console.log(`🎠 Loading hero slider data for ${genreName}...`);

    const container = document.getElementById('genre-hero-slider-container');
    if (!container) return;

    try {
        // Show loading state
        container.innerHTML = `
            <div class="genre-loading-container">
                <div class="genre-loading-spinner"></div>
                <p class="genre-loading-text">🎠 Loading ${genreName} hero releases...</p>
            </div>
        `;

        // Fetch hero slider data from API
        const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/hero`);
        if (!response.ok) {
            throw new Error(`API returned ${response.status}: ${response.statusText}`);
        }

        const data = await response.json();

        if (!data.success || !data.releases || data.releases.length === 0) {
            throw new Error(data.message || 'No hero releases found');
        }

        console.log(`✅ Loaded ${data.count} hero releases for ${genreName} (cached: ${data.cached})`);

        // Create hero slider HTML
        const heroSliderHTML = createGenreHeroSliderHTML(data.releases, genreName);
        container.innerHTML = heroSliderHTML;

        // Add click handlers to individual releases (for future download functionality)
        addGenreHeroReleaseClickHandlers(data.releases);

        showToast(`Loaded ${data.count} ${genreName} releases`, 'success');

    } catch (error) {
        console.error(`❌ Error loading hero slider for ${genreName}:`, error);

        container.innerHTML = `
            <div class="genre-error-container">
                <p class="genre-error-text">❌ Failed to load ${genreName} releases</p>
                <p class="genre-error-details">${error.message}</p>
                <button class="genre-retry-button" onclick="loadGenreHeroSlider('${genreSlug}', '${genreId}', '${genreName}')">
                    🔄 Retry
                </button>
            </div>
        `;

        throw error;
    }
}

function createGenreHeroSliderHTML(releases, genreName) {
    const slidesHTML = releases.map((release, index) => {
        // Convert relative URL to absolute URL
        const absoluteUrl = release.url.startsWith('http')
            ? release.url
            : `https://www.beatport.com${release.url}`;

        return `
        <div class="beatport-rebuild-slide ${index === 0 ? 'active' : ''}"
             data-slide="${index}"
             data-url="${absoluteUrl}"
             data-image="${release.image_url}"
             style="--slide-bg-image: url('${release.image_url}')">
            <div class="beatport-rebuild-slide-background">
                <div class="beatport-rebuild-slide-gradient"></div>
            </div>
            <div class="beatport-rebuild-slide-content">
                <div class="beatport-rebuild-track-info">
                    <h2 class="beatport-rebuild-track-title">${release.title}</h2>
                    <p class="beatport-rebuild-artist-name">${release.artists_string}</p>
                    <p class="beatport-rebuild-album-name">${release.label || genreName + ' Hero Release'}</p>
                </div>
            </div>
        </div>`;
    }).join('');

    const indicatorsHTML = releases.map((_, index) => `
        <button class="beatport-rebuild-indicator ${index === 0 ? 'active' : ''}" data-slide="${index}"></button>
    `).join('');

    return `
        <div class="beatport-rebuild-slider-container">
            <div class="beatport-rebuild-slider" id="genre-hero-slider">
                <div class="beatport-rebuild-slider-track" id="genre-hero-slider-track">
                    ${slidesHTML}
                </div>

                <!-- Slider Navigation -->
                <div class="beatport-rebuild-slider-nav">
                    <button class="beatport-rebuild-nav-btn beatport-rebuild-prev-btn" id="genre-hero-prev-btn">‹</button>
                    <button class="beatport-rebuild-nav-btn beatport-rebuild-next-btn" id="genre-hero-next-btn">›</button>
                </div>

                <!-- Slider Indicators -->
                <div class="beatport-rebuild-slider-indicators">
                    ${indicatorsHTML}
                </div>
            </div>
        </div>
    `;
}

function addGenreHeroReleaseClickHandlers(releases) {
    // Clear any existing intervals first
    if (window.genreHeroSliderState && window.genreHeroSliderState.autoPlayInterval) {
        clearInterval(window.genreHeroSliderState.autoPlayInterval);
        console.log('🧹 Cleared previous genre hero auto-play interval');
    }

    // CRITICAL: Clear ALL possible conflicting intervals
    if (typeof beatportRebuildSliderState !== 'undefined' && beatportRebuildSliderState.autoPlayInterval) {
        clearInterval(beatportRebuildSliderState.autoPlayInterval);
        console.log('🛑 Cleared main rebuild slider auto-play interval');
    }

    // Initialize global slider state for genre hero slider
    window.genreHeroSliderState = {
        currentSlide: 0,
        totalSlides: releases.length,
        autoPlayInterval: null
    };

    console.log(`🎠 Initializing genre hero slider with ${releases.length} slides`);

    // Set up navigation button handlers
    const prevBtn = document.getElementById('genre-hero-prev-btn');
    const nextBtn = document.getElementById('genre-hero-next-btn');

    if (prevBtn) {
        prevBtn.addEventListener('click', () => {
            window.genreHeroSliderState.currentSlide = window.genreHeroSliderState.currentSlide > 0
                ? window.genreHeroSliderState.currentSlide - 1
                : window.genreHeroSliderState.totalSlides - 1;
            updateGenreHeroSlide(window.genreHeroSliderState.currentSlide);
            console.log(`⬅️ Previous: Moving to slide ${window.genreHeroSliderState.currentSlide}`);
        });
    }

    if (nextBtn) {
        nextBtn.addEventListener('click', () => {
            window.genreHeroSliderState.currentSlide = (window.genreHeroSliderState.currentSlide + 1) % window.genreHeroSliderState.totalSlides;
            updateGenreHeroSlide(window.genreHeroSliderState.currentSlide);
            console.log(`➡️ Next: Moving to slide ${window.genreHeroSliderState.currentSlide}`);
        });
    }

    // Set up indicator handlers
    const indicators = document.querySelectorAll('#genre-hero-slider .beatport-rebuild-indicator');
    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => {
            window.genreHeroSliderState.currentSlide = index;
            updateGenreHeroSlide(index);
            console.log(`🎯 Indicator: Jumping to slide ${index}`);
        });
    });

    // Set up individual slide click handlers (like the main hero slider)
    const slides = document.querySelectorAll('#genre-hero-slider .beatport-rebuild-slide[data-url]');
    console.log(`🔗 Found ${slides.length} slides to set up click handlers for`);

    slides.forEach((slide, index) => {
        const releaseUrl = slide.getAttribute('data-url');
        if (releaseUrl && releaseUrl !== '#' && releaseUrl !== '') {
            const release = releases[index];
            if (release) {
                // Ensure we use the absolute URL and match the expected data structure
                const releaseData = {
                    url: releaseUrl, // This is already the absolute URL from data-url
                    title: release.title || 'Unknown Title',
                    artist: release.artists_string || 'Unknown Artist', // handleBeatportReleaseCardClick expects 'artist'
                    label: release.label || 'Unknown Label',
                    image_url: release.image_url || '',
                    // Include all original data for completeness
                    artists_string: release.artists_string,
                    type: release.type,
                    source: release.source,
                    badges: release.badges || []
                };

                slide.addEventListener('click', async (event) => {
                    // Prevent navigation button clicks from triggering this
                    if (event.target.closest('.beatport-rebuild-nav-btn') ||
                        event.target.closest('.beatport-rebuild-indicator')) {
                        return;
                    }

                    console.log(`🎵 Genre hero slide clicked: ${releaseData.title} by ${releaseData.artist}`);

                    // Use the exact same functionality as the main hero slider
                    await handleBeatportReleaseCardClick(slide, releaseData);
                });

                slide.style.cursor = 'pointer';
            }
        }
    });

    // Ensure first slide is active BEFORE starting auto-play
    updateGenreHeroSlide(0);

    // Delay auto-play start to let DOM settle
    setTimeout(() => {
        startGenreHeroSliderAutoPlay();
    }, 100);

    // Pause on hover
    const sliderContainer = document.querySelector('#genre-hero-slider');
    if (sliderContainer) {
        sliderContainer.addEventListener('mouseenter', () => {
            if (window.genreHeroSliderState.autoPlayInterval) {
                clearInterval(window.genreHeroSliderState.autoPlayInterval);
                console.log('⏸️ Paused auto-play on hover');
            }
        });

        sliderContainer.addEventListener('mouseleave', () => {
            // Delay restart to avoid rapid state changes
            setTimeout(() => {
                startGenreHeroSliderAutoPlay();
            }, 100);
            console.log('▶️ Resumed auto-play after hover');
        });
    }

    console.log(`✅ Set up slider functionality for ${releases.length} genre hero releases`);
}

function updateGenreHeroSlide(slideIndex) {
    if (!window.genreHeroSliderState) {
        console.error('❌ Genre hero slider state not initialized');
        return;
    }

    // First update the state
    window.genreHeroSliderState.currentSlide = slideIndex;

    // Update slide visibility - use the exact same logic as main slider
    const slides = document.querySelectorAll('#genre-hero-slider .beatport-rebuild-slide');
    console.log(`🔄 Updating slide to index ${slideIndex}, found ${slides.length} slides`);

    if (slideIndex >= slides.length || slideIndex < 0) {
        console.error(`❌ Invalid slide index ${slideIndex}, max is ${slides.length - 1}`);
        return;
    }

    slides.forEach((slide, index) => {
        slide.classList.remove('active', 'prev', 'next');

        if (index === slideIndex) {
            slide.classList.add('active');
            console.log(`✅ Activated slide ${index}: ${slide.getAttribute('data-slide')} - Title: ${slide.querySelector('.beatport-rebuild-track-title')?.textContent}`);
        } else if (index < slideIndex) {
            slide.classList.add('prev');
        } else {
            slide.classList.add('next');
        }
    });

    // Update indicators
    const indicators = document.querySelectorAll('#genre-hero-slider .beatport-rebuild-indicator');
    indicators.forEach((indicator, index) => {
        indicator.classList.toggle('active', index === slideIndex);
    });

    console.log(`Genre slide updated to: ${window.genreHeroSliderState.currentSlide}`);
}

function startGenreHeroSliderAutoPlay() {
    if (!window.genreHeroSliderState) {
        console.error('❌ Cannot start auto-play: Genre hero slider state not initialized');
        return;
    }

    // Clear any existing intervals first
    if (window.genreHeroSliderState.autoPlayInterval) {
        clearInterval(window.genreHeroSliderState.autoPlayInterval);
        console.log('🧹 Cleared existing auto-play interval');
    }

    window.genreHeroSliderState.autoPlayInterval = setInterval(() => {
        if (!window.genreHeroSliderState) {
            console.error('❌ Auto-play fired but state is gone, clearing interval');
            clearInterval(window.genreHeroSliderState.autoPlayInterval);
            return;
        }

        const currentSlide = window.genreHeroSliderState.currentSlide;
        const totalSlides = window.genreHeroSliderState.totalSlides;
        const nextSlide = (currentSlide + 1) % totalSlides;

        console.log(`⏰ Auto-play: Current=${currentSlide}, Total=${totalSlides}, Next=${nextSlide}`);

        // Validate the next slide index
        if (nextSlide >= 0 && nextSlide < totalSlides) {
            updateGenreHeroSlide(nextSlide);
        } else {
            console.error(`❌ Invalid nextSlide calculated: ${nextSlide}, resetting to 0`);
            updateGenreHeroSlide(0);
        }
    }, 5000); // 5 second intervals like the main slider

    console.log(`▶️ Started auto-play for genre hero slider (${window.genreHeroSliderState.totalSlides} slides)`);
}

/**
 * Load Top 10 lists for a specific genre (Beatport + Hype)
 */
async function loadGenreTop10Lists(genreSlug, genreId, genreName) {
    console.log(`🎵 Loading Top 10 lists for ${genreName}...`);

    const container = document.getElementById('genre-top10-lists-container');
    if (!container) {
        console.error('❌ Genre Top 10 lists container not found');
        return;
    }

    try {
        const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/top-10-lists`);
        const data = await response.json();

        if (!data.success) {
            throw new Error(data.error || 'Failed to load Top 10 lists');
        }

        console.log(`✅ Loaded ${data.beatport_count} Beatport + ${data.hype_count} Hype Top 10 tracks for ${genreName}`);

        // Generate HTML using exact same structure as main page (but unique IDs)
        const top10ListsHTML = createGenreTop10ListsHTML(data, genreName);
        container.innerHTML = top10ListsHTML;

        // Add container-level click handlers exactly like main page
        addGenreTop10ClickHandlers();

        console.log(`✅ Successfully populated genre Top 10 lists for ${genreName}`);

    } catch (error) {
        console.error(`❌ Error loading Top 10 lists for ${genreName}:`, error);

        // Show error state
        container.innerHTML = `
            <div class="genre-top10-error">
                <h3>❌ Error Loading Top 10 Lists</h3>
                <p>Could not load Top 10 tracks for ${genreName}</p>
                <p class="error-detail">${error.message}</p>
            </div>
        `;
    }
}

/**
 * Create HTML for genre Top 10 lists (exact structure as main page, unique IDs)
 */
function createGenreTop10ListsHTML(data, genreName) {
    const { beatport_top10, hype_top10, has_hype_section } = data;

    // Use exact same structure as main page but with genre-specific IDs
    let html = `
        <div class="beatport-top10-section">
            <div class="beatport-top10-header">
                <h2 class="beatport-top10-title">🏆 ${genreName} Top 10 Lists</h2>
                <p class="beatport-top10-subtitle">Current trending ${genreName.toLowerCase()} tracks</p>
            </div>

            <div class="beatport-top10-container"${!has_hype_section ? ' style="grid-template-columns: 1fr; justify-items: center; max-width: 700px;"' : ''}>
                <!-- Beatport Top 10 List (same classes, unique ID) -->
                <div class="beatport-top10-list" id="genre-beatport-top10-list">
                    <div class="beatport-top10-list-header">
                        <h3 class="beatport-top10-list-title">🎵 Beatport Top 10</h3>
                        <p class="beatport-top10-list-subtitle">Most popular ${genreName.toLowerCase()} tracks</p>
                    </div>
                    <div class="beatport-top10-tracks">
    `;

    // Add Beatport Top 10 tracks (same classes as main page)
    beatport_top10.forEach((track, index) => {
        const cleanTitle = cleanTrackText(track.title || 'Unknown Title');
        const cleanArtist = cleanTrackText(track.artist || 'Unknown Artist');
        const cleanLabel = cleanTrackText(track.label || 'Unknown Label');

        html += `
            <div class="beatport-top10-card" data-url="${track.url || '#'}">
                <div class="beatport-top10-card-rank">${track.rank || index + 1}</div>
                <div class="beatport-top10-card-artwork">
                    ${track.artwork_url ?
                `<img src="${track.artwork_url}" alt="${cleanTitle}" loading="lazy">` :
                '<div class="beatport-top10-card-placeholder">🎵</div>'
            }
                </div>
                <div class="beatport-top10-card-info">
                    <h4 class="beatport-top10-card-title">${cleanTitle}</h4>
                    <p class="beatport-top10-card-artist">${cleanArtist}</p>
                    <p class="beatport-top10-card-label">${cleanLabel}</p>
                </div>
            </div>
        `;
    });

    html += `
                    </div>
                </div>
    `;

    // Add Hype Top 10 section (same classes, unique ID)
    if (has_hype_section && hype_top10.length > 0) {
        html += `
                <!-- Hype Top 10 List (same classes, unique ID) -->
                <div class="beatport-hype10-list" id="genre-beatport-hype10-list">
                    <div class="beatport-hype10-list-header">
                        <h3 class="beatport-hype10-list-title">🔥 Hype Top 10</h3>
                        <p class="beatport-hype10-list-subtitle">Editor's trending ${genreName.toLowerCase()} picks</p>
                    </div>
                    <div class="beatport-hype10-tracks">
        `;

        // Add Hype Top 10 tracks (same classes as main page)
        hype_top10.forEach((track, index) => {
            const cleanTitle = cleanTrackText(track.title || 'Unknown Title');
            const cleanArtist = cleanTrackText(track.artist || 'Unknown Artist');
            const cleanLabel = cleanTrackText(track.label || 'Unknown Label');

            html += `
                <div class="beatport-hype10-card" data-url="${track.url || '#'}">
                    <div class="beatport-hype10-card-rank">${track.rank || index + 1}</div>
                    <div class="beatport-hype10-card-artwork">
                        ${track.artwork_url ?
                    `<img src="${track.artwork_url}" alt="${cleanTitle}" loading="lazy">` :
                    '<div class="beatport-hype10-card-placeholder">🔥</div>'
                }
                    </div>
                    <div class="beatport-hype10-card-info">
                        <h4 class="beatport-hype10-card-title">${cleanTitle}</h4>
                        <p class="beatport-hype10-card-artist">${cleanArtist}</p>
                        <p class="beatport-hype10-card-label">${cleanLabel}</p>
                    </div>
                </div>
            `;
        });

        html += `
                    </div>
                </div>
        `;
    }
    // No else block - completely hide hype section when no hype tracks available

    html += `
            </div>
        </div>
    `;

    return html;
}

/**
 * Add container-level click handlers for genre Top 10 lists (exact parity with main page)
 */
function addGenreTop10ClickHandlers() {
    console.log('🔗 Adding container-level click handlers for genre Top 10 lists...');

    // Add container-level click handler for Beatport Top 10 (exact match to main page)
    const beatportContainer = document.getElementById('genre-beatport-top10-list');
    if (beatportContainer) {
        beatportContainer.addEventListener('click', () => {
            console.log('🎵 Genre Beatport Top 10 container clicked');
            handleGenreBeatportTop10Click();
        });
        console.log('✅ Added Beatport Top 10 container click handler');
    }

    // Add container-level click handler for Hype Top 10 (exact match to main page)
    const hypeContainer = document.getElementById('genre-beatport-hype10-list');
    if (hypeContainer) {
        hypeContainer.addEventListener('click', () => {
            console.log('🔥 Genre Hype Top 10 container clicked');
            handleGenreHypeTop10Click();
        });
        console.log('✅ Added Hype Top 10 container click handler');
    }

    console.log(`✅ Set up container-level click handlers for genre Top 10 lists`);
}

/**
 * Handle genre Beatport Top 10 container click (exact parity with main page)
 */
async function handleGenreBeatportTop10Click() {
    console.log('🎵 Handling Genre Beatport Top 10 click');

    // Get the actual genre name from the page title
    const genreName = document.querySelector('.genre-page-title')?.textContent?.trim() || 'Genre';

    // Use actual genre name in chart title
    await handleGenreChartClick('genre_beatport_top10', `${genreName} Beatport Top 10`, 'genre_beatport_top10');
}

/**
 * Handle genre Hype Top 10 container click (exact parity with main page)
 */
async function handleGenreHypeTop10Click() {
    console.log('🔥 Handling Genre Hype Top 10 click');

    // Get the actual genre name from the page title
    const genreName = document.querySelector('.genre-page-title')?.textContent?.trim() || 'Genre';

    // Use actual genre name in chart title
    await handleGenreChartClick('genre_hype_top10', `${genreName} Hype Top 10`, 'genre_hype_top10');
}

/**
 * Handle genre chart click (based on main page handleRebuildChartClick)
 */
async function handleGenreChartClick(trackDataKey, chartName, chartType) {
    if (_beatportModalOpening) return;
    _beatportModalOpening = true;
    setTimeout(() => { _beatportModalOpening = false; }, 2000);

    try {
        // Extract track data from DOM cards
        const trackData = await getGenrePageTrackData(trackDataKey);
        if (!trackData || trackData.length === 0) {
            throw new Error(`No track data found for ${chartName}`);
        }

        console.log(`✅ Got ${trackData.length} tracks from ${chartName}, enriching one-by-one...`);
        showLoadingOverlay(`Fetching track metadata... (0/${trackData.length})`);

        const enrichedTracks = await _enrichTracksWithProgress(trackData, chartName);

        console.log(`✅ Enriched ${enrichedTracks.length} tracks`);
        hideLoadingOverlay();
        openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);

    } catch (error) {
        hideLoadingOverlay();
        console.error(`❌ Error handling ${chartName} click:`, error);
        showToast(`Error loading ${chartName}: ${error.message}`, 'error');
    }
}

/**
 * Extract track data from genre page DOM (based on main page getRebuildPageTrackData)
 */
async function getGenrePageTrackData(trackDataKey) {
    console.log(`🔍 Extracting ${trackDataKey} data from genre page DOM`);

    let containerSelector, cardSelector;
    if (trackDataKey === 'genre_beatport_top10') {
        containerSelector = '#genre-beatport-top10-list';
        cardSelector = '.beatport-top10-card[data-url]';
    } else if (trackDataKey === 'genre_hype_top10') {
        containerSelector = '#genre-beatport-hype10-list';
        cardSelector = '.beatport-hype10-card[data-url]';
    } else {
        throw new Error(`Unknown track data key: ${trackDataKey}`);
    }

    const container = document.querySelector(containerSelector);
    if (!container) {
        throw new Error(`Container ${containerSelector} not found`);
    }

    const trackCards = container.querySelectorAll(cardSelector);
    if (trackCards.length === 0) {
        throw new Error(`No track cards found in ${containerSelector}`);
    }

    // Extract track data from DOM cards (exact same pattern as main page)
    const tracks = Array.from(trackCards).map(card => {
        const title = card.querySelector('.beatport-top10-card-title, .beatport-hype10-card-title')?.textContent?.trim() || 'Unknown Title';
        const artist = card.querySelector('.beatport-top10-card-artist, .beatport-hype10-card-artist')?.textContent?.trim() || 'Unknown Artist';
        const label = card.querySelector('.beatport-top10-card-label, .beatport-hype10-card-label')?.textContent?.trim() || 'Unknown Label';
        const url = card.getAttribute('data-url') || '';
        const rank = card.querySelector('.beatport-top10-card-rank, .beatport-hype10-card-rank')?.textContent?.trim() || '';

        return {
            title: title,
            artist: artist,
            label: label,
            url: url,
            rank: rank
        };
    });

    console.log(`📋 Extracted ${tracks.length} tracks from ${containerSelector}`);
    return tracks;
}

/**
 * Handle genre-specific Top 100 button click - create discovery process for genre top 100 tracks
 */
async function handleGenreTop100Click(genreSlug, genreId, genreName) {
    if (_beatportModalOpening) return;
    _beatportModalOpening = true;
    setTimeout(() => { _beatportModalOpening = false; }, 2000);

    console.log(`💯 Genre Top 100 button clicked for ${genreName}`);

    const chartName = `${genreName} Top 100`;

    try {
        showLoadingOverlay(`Scraping ${chartName}...`);

        // Use the genre tracks endpoint without enrichment
        const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/tracks?enrich=false`, { method: 'GET' });
        const data = await response.json();

        if (!data.success || !data.tracks || data.tracks.length === 0) {
            throw new Error(`No tracks found in ${chartName}`);
        }

        console.log(`✅ Fetched ${data.tracks.length} tracks, enriching one-by-one...`);

        // Enrich one-by-one with live progress
        const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);

        hideLoadingOverlay();
        openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);

    } catch (error) {
        console.error(`❌ Error handling ${chartName} click:`, error);
        hideLoadingOverlay();
        showToast(`Error loading ${chartName}: ${error.message}`, 'error');
    }
}

/**
 * Load Top 10 releases for a specific genre
 */
async function loadGenreTop10Releases(genreSlug, genreId, genreName) {
    console.log(`💿 Loading Top 10 releases for ${genreName}...`);

    const container = document.getElementById('genre-top10-releases-container');
    if (!container) {
        console.error('❌ Genre Top 10 releases container not found');
        return;
    }

    try {
        const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/top-10-releases`);
        const data = await response.json();

        if (!data.success) {
            throw new Error(data.error || 'Failed to load Top 10 releases');
        }

        console.log(`💿 Loaded ${data.releases.length} Top 10 releases for ${genreName}`);
        createGenreTop10ReleasesHTML(data.releases, genreName);

    } catch (error) {
        console.error(`❌ Error loading Top 10 releases for ${genreName}:`, error);
        showGenreTop10ReleasesError(error.message || 'Failed to load Top 10 releases');
    }
}

/**
 * Create HTML for genre Top 10 releases section (exact parity with main page)
 */
function createGenreTop10ReleasesHTML(releases, genreName) {
    const container = document.getElementById('genre-top10-releases-container');
    if (!container || !releases || releases.length === 0) return;

    // Create section with unique ID but exact same structure as main page
    const sectionHtml = `
        <div class="beatport-releases-top10-section">
            <div class="beatport-releases-top10-header">
                <h2 class="beatport-releases-top10-title">💿 Top 10 ${genreName} Releases</h2>
                <p class="beatport-releases-top10-subtitle">Most popular albums and EPs for ${genreName}</p>
            </div>
            <div class="beatport-releases-top10-container">
                <div class="beatport-releases-top10-list" id="genre-beatport-releases-top10-list">
                    ${createGenreTop10ReleasesCardsHTML(releases)}
                </div>
            </div>
        </div>
    `;

    container.innerHTML = sectionHtml;

    // Add background images and click handlers
    addGenreTop10ReleasesInteractivity(releases);
}

/**
 * Create release cards HTML for genre Top 10 releases
 */
function createGenreTop10ReleasesCardsHTML(releases) {
    let cardsHtml = '<div class="beatport-releases-top10-tracks">';

    releases.forEach((release, index) => {
        cardsHtml += `
            <div class="beatport-releases-top10-card" data-url="${release.url || '#'}" data-bg-image="${release.image_url || ''}">
                <div class="beatport-releases-top10-card-rank">${release.rank || index + 1}</div>
                <div class="beatport-releases-top10-card-artwork">
                    ${release.image_url ?
                `<img src="${release.image_url}" alt="${release.title}" loading="lazy">` :
                '<div class="beatport-releases-top10-card-placeholder">💿</div>'
            }
                </div>
                <div class="beatport-releases-top10-card-info">
                    <h4 class="beatport-releases-top10-card-title">${release.title || 'Unknown Title'}</h4>
                    <p class="beatport-releases-top10-card-artist">${release.artist || 'Unknown Artist'}</p>
                    <p class="beatport-releases-top10-card-label">${release.label || 'Unknown Label'}</p>
                </div>
            </div>
        `;
    });

    cardsHtml += '</div>';
    return cardsHtml;
}

/**
 * Add interactivity to genre Top 10 releases cards
 */
function addGenreTop10ReleasesInteractivity(releases) {
    const container = document.getElementById('genre-beatport-releases-top10-list');
    if (!container) return;

    // Set background images for cards
    const cards = container.querySelectorAll('.beatport-releases-top10-card[data-bg-image]');
    cards.forEach(card => {
        const bgImage = card.getAttribute('data-bg-image');
        if (bgImage) {
            // Transform image URL from 95x95 to 500x500 for higher quality background
            const highResImage = bgImage.replace('/image_size/95x95/', '/image_size/500x500/');
            card.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('${highResImage}')`;
            card.style.backgroundSize = 'cover';
            card.style.backgroundPosition = 'center';
        }
    });

    // Add click handlers for individual release discovery (exact same pattern as main page)
    const releaseCards = container.querySelectorAll('.beatport-releases-top10-card[data-url]');
    releaseCards.forEach((card, index) => {
        card.addEventListener('click', () => handleGenreReleaseCardClick(card, releases[index]));
        card.style.cursor = 'pointer';
    });
}

/**
 * Handle click on individual genre Top 10 Release card (exact parity with main page)
 */
async function handleGenreReleaseCardClick(cardElement, release) {
    if (_beatportModalOpening) return;
    _beatportModalOpening = true;

    console.log(`💿 Individual genre release card clicked: ${release.title} by ${release.artist}`);

    if (!release.url || release.url === '#') {
        _beatportModalOpening = false;
        showToast('No release URL available', 'error');
        return;
    }

    try {
        showToast(`Loading ${release.title}...`, 'info');
        showLoadingOverlay(`Getting tracks from ${release.title}...`);

        // Fetch structured release metadata for direct download modal
        console.log(`🎵 Fetching release metadata: ${release.url}`);
        const response = await fetch('/api/beatport/release-metadata', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ release_url: release.url })
        });

        const data = await response.json();

        if (!data.success || !data.tracks || data.tracks.length === 0) {
            throw new Error(data.error || 'No tracks found in this release');
        }

        console.log(`✅ Got ${data.tracks.length} tracks from ${data.album.name}`);

        const formattedTracks = data.tracks.map(track => ({
            ...track,
            artists: track.artists.map(a => typeof a === 'object' ? a.name : a)
        }));

        const virtualPlaylistId = `beatport_release_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
        const playlistName = data.album.name;

        await openDownloadMissingModalForArtistAlbum(
            virtualPlaylistId,
            playlistName,
            formattedTracks,
            data.album,
            data.artist,
            false
        );

        hideLoadingOverlay();
        _beatportModalOpening = false;
        console.log(`✅ Opened download modal for ${playlistName}`);

    } catch (error) {
        console.error(`❌ Error handling release click for ${release.title}:`, error);
        hideLoadingOverlay();
        _beatportModalOpening = false;
        showToast(`Error loading ${release.title}: ${error.message}`, 'error');
    }
}

/**
 * Show error message for genre Top 10 releases
 */
function showGenreTop10ReleasesError(errorMessage) {
    const container = document.getElementById('genre-top10-releases-container');

    const errorHtml = `
        <div class="beatport-releases-top10-section">
            <div class="beatport-releases-top10-header">
                <h2 class="beatport-releases-top10-title">💿 Top 10 Releases</h2>
                <p class="beatport-releases-top10-subtitle">Error loading releases</p>
            </div>
            <div class="beatport-releases-top10-container">
                <div class="beatport-releases-top10-error">
                    <h3>❌ Error Loading Releases</h3>
                    <p>${errorMessage}</p>
                </div>
            </div>
        </div>
    `;

    if (container) container.innerHTML = errorHtml;
}

// Initialize the Genre Browser Modal when the page loads
document.addEventListener('DOMContentLoaded', () => {
    initializeGenreBrowserModal();
});

// ============ Plex Music Library Selection ============

async function loadPlexMusicLibraries() {
    try {
        const response = await fetch('/api/plex/music-libraries');
        const data = await response.json();

        if (data.success && data.libraries && data.libraries.length > 0) {
            const selector = document.getElementById('plex-music-library');
            const container = document.getElementById('plex-library-selector-container');

            // Clear existing options
            selector.innerHTML = '';

            // Add options for each library. ``value`` is the canonical
            // identifier the backend expects (real libraries: title;
            // synthetic "All Libraries" entry: the sentinel string).
            // ``title`` stays the human-readable label.
            data.libraries.forEach(library => {
                const option = document.createElement('option');
                const optionValue = library.value || library.title;
                option.value = optionValue;
                option.textContent = library.title;

                // Pre-select match: compare ``value`` against the saved
                // DB pref (``data.selected``) AND ``title`` against the
                // live-active library name (``data.current``). Covers
                // both the sentinel case and the legacy single-library
                // case.
                if (optionValue === data.selected
                        || library.title === data.current
                        || library.title === data.selected) {
                    option.selected = true;
                }

                selector.appendChild(option);
            });

            // Show the container
            container.style.display = 'block';
        } else {
            // Hide if no libraries found or not connected
            document.getElementById('plex-library-selector-container').style.display = 'none';
        }
    } catch (error) {
        console.error('Error loading Plex music libraries:', error);
        document.getElementById('plex-library-selector-container').style.display = 'none';
    }
}

async function selectPlexLibrary() {
    const selector = document.getElementById('plex-music-library');
    const selectedLibrary = selector.value;

    if (!selectedLibrary) return;

    try {
        const response = await fetch('/api/plex/select-music-library', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                library_name: selectedLibrary
            })
        });

        const data = await response.json();

        if (data.success) {
            console.log(`Plex music library switched to: ${selectedLibrary}`);
        } else {
            console.error('Failed to switch library:', data.error);
            alert(`Failed to switch library: ${data.error}`);
        }
    } catch (error) {
        console.error('Error selecting Plex library:', error);
        alert('Error selecting library. Please try again.');
    }
}

// ============ Jellyfin User Selection ============

async function loadJellyfinUsers() {
    try {
        const response = await fetch('/api/jellyfin/users');
        const data = await response.json();

        if (data.success && data.users && data.users.length > 0) {
            const selector = document.getElementById('jellyfin-user');
            const container = document.getElementById('jellyfin-user-selector-container');

            // Clear existing options
            selector.innerHTML = '';

            // Add options for each user
            data.users.forEach(user => {
                const option = document.createElement('option');
                option.value = user.name;
                option.textContent = user.name;

                // Mark the currently selected user
                if (user.name === data.current || user.name === data.selected) {
                    option.selected = true;
                }

                selector.appendChild(option);
            });

            // Show the container
            container.style.display = 'block';
        } else {
            // Hide if no users found or not connected
            document.getElementById('jellyfin-user-selector-container').style.display = 'none';
        }
    } catch (error) {
        console.error('Error loading Jellyfin users:', error);
        document.getElementById('jellyfin-user-selector-container').style.display = 'none';
    }
}

async function selectJellyfinUser() {
    const selector = document.getElementById('jellyfin-user');
    const selectedUser = selector.value;

    if (!selectedUser) return;

    try {
        const response = await fetch('/api/jellyfin/select-user', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                username: selectedUser
            })
        });

        const data = await response.json();

        if (data.success) {
            console.log(`Jellyfin user switched to: ${selectedUser}`);
            // Refresh library dropdown for the new user
            loadJellyfinMusicLibraries();
        } else {
            console.error('Failed to switch user:', data.error);
            alert(`Failed to switch user: ${data.error}`);
        }
    } catch (error) {
        console.error('Error selecting Jellyfin user:', error);
        alert('Error selecting user. Please try again.');
    }
}

// ============ Jellyfin Music Library Selection ============

async function loadJellyfinMusicLibraries() {
    try {
        const response = await fetch('/api/jellyfin/music-libraries');
        const data = await response.json();

        if (data.success && data.libraries && data.libraries.length > 0) {
            const selector = document.getElementById('jellyfin-music-library');
            const container = document.getElementById('jellyfin-library-selector-container');

            // Clear existing options
            selector.innerHTML = '';

            // Add options for each library
            data.libraries.forEach(library => {
                const option = document.createElement('option');
                option.value = library.title;
                option.textContent = library.title;

                // Mark the currently selected library
                if (library.title === data.current || library.title === data.selected) {
                    option.selected = true;
                }

                selector.appendChild(option);
            });

            // Show the container
            container.style.display = 'block';
        } else {
            // Hide if no libraries found or not connected
            document.getElementById('jellyfin-library-selector-container').style.display = 'none';
        }
    } catch (error) {
        console.error('Error loading Jellyfin music libraries:', error);
        document.getElementById('jellyfin-library-selector-container').style.display = 'none';
    }
}

async function selectJellyfinLibrary() {
    const selector = document.getElementById('jellyfin-music-library');
    const selectedLibrary = selector.value;

    if (!selectedLibrary) return;

    try {
        const response = await fetch('/api/jellyfin/select-music-library', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                library_name: selectedLibrary
            })
        });

        const data = await response.json();

        if (data.success) {
            console.log(`Jellyfin music library switched to: ${selectedLibrary}`);
        } else {
            console.error('Failed to switch library:', data.error);
            alert(`Failed to switch library: ${data.error}`);
        }
    } catch (error) {
        console.error('Error selecting Jellyfin library:', error);
        alert('Error selecting library. Please try again.');
    }
}

// ============ Navidrome Music Folder Selection ============

async function loadNavidromeMusicFolders() {
    try {
        const response = await fetch('/api/navidrome/music-folders');
        const data = await response.json();

        if (data.success && data.folders && data.folders.length > 0) {
            const selector = document.getElementById('navidrome-music-folder');
            const container = document.getElementById('navidrome-folder-selector-container');

            selector.innerHTML = '<option value="">All Libraries</option>';

            data.folders.forEach(folder => {
                const option = document.createElement('option');
                option.value = folder.title;
                option.textContent = folder.title;

                if (folder.title === data.current || folder.title === data.selected) {
                    option.selected = true;
                }

                selector.appendChild(option);
            });

            container.style.display = 'block';
        } else {
            document.getElementById('navidrome-folder-selector-container').style.display = 'none';
        }
    } catch (error) {
        console.error('Error loading Navidrome music folders:', error);
        document.getElementById('navidrome-folder-selector-container').style.display = 'none';
    }
}

async function selectNavidromeMusicFolder() {
    const selector = document.getElementById('navidrome-music-folder');
    const selectedFolder = selector.value;

    try {
        const response = await fetch('/api/navidrome/select-music-folder', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ folder_name: selectedFolder })
        });

        const data = await response.json();

        if (data.success) {
            showToast(data.message, 'success');
        } else {
            console.error('Failed to set music folder:', data.error);
            showToast(`Failed to set music folder: ${data.error}`, 'error', 'set-media');
        }
    } catch (error) {
        console.error('Error selecting Navidrome music folder:', error);
        showToast('Error selecting music folder. Please try again.', 'error', 'set-media');
    }
}

// ============================================