/**
 * ShowcaseView.js
 * Shared showcase component for displaying examples in model modals (Lora/Checkpoint)
 */
import { showToast } from '../../../utils/uiHelpers.js';
import { state } from '../../../state/index.js';
import { modalManager } from '../../../managers/ModalManager.js';
import { translate } from '../../../utils/i18nHelpers.js';
import { NSFW_LEVELS, getMatureBlurThreshold } from '../../../utils/constants.js';
import { 
    initLazyLoading,
    initNsfwBlurHandlers, 
    initMetadataPanelHandlers,
    initMediaControlHandlers,
    positionAllMediaControls
} from './MediaUtils.js';
import { generateMetadataPanel } from './MetadataPanel.js';
import { generateImageWrapper, generateVideoWrapper } from './MediaRenderers.js';
import { getShowcaseUrl } from '../../../utils/civitaiUtils.js';
import { openMediaViewer } from '../MediaViewer.js';

export const showcaseListenerMetrics = {
    wheelListeners: 0,
    mutationObservers: 0,
    backToTopHandlers: 0,
};

export function resetShowcaseListenerMetrics() {
    showcaseListenerMetrics.wheelListeners = 0;
    showcaseListenerMetrics.mutationObservers = 0;
    showcaseListenerMetrics.backToTopHandlers = 0;
}

/**
 * Load example images asynchronously
 * @param {Array} images - Array of image objects (both regular and custom)
 * @param {string} modelHash - Model hash for fetching local files
 */
export async function loadExampleImages(images, modelHash) {
    try {
        const showcaseTab = document.getElementById('showcase-tab');
        if (!showcaseTab) return;
        
        // First fetch local example files
        let localFiles = [];

        try {
            const endpoint = '/api/lm/example-image-files';
            const params = `model_hash=${modelHash}`;
            
            const response = await fetch(`${endpoint}?${params}`);
            const result = await response.json();
            
            if (result.success) {
                localFiles = result.files;
            }
        } catch (error) {
            console.error("Failed to get example files:", error);
        }
        
        // Then render with both remote images and local files
        showcaseTab.innerHTML = renderShowcaseContent(images, localFiles);
        
        // Re-initialize the showcase event listeners
        const carousel = showcaseTab.querySelector('.carousel');
        if (carousel) {
            // Always bind scroll-indicator click events (even when collapsed)
            bindScrollIndicatorEvents(carousel);
            
            // Only initialize full showcase content when expanded
            if (!carousel.classList.contains('collapsed')) {
                initShowcaseContent(carousel);
            }
        }
        
        // Initialize the example import functionality
        initExampleImport(modelHash, showcaseTab);
    } catch (error) {
        console.error('Error loading example images:', error);
        const showcaseTab = document.getElementById('showcase-tab');
        if (showcaseTab) {
            showcaseTab.innerHTML = `
                <div class="error-message">
                    <i class="fas fa-exclamation-circle"></i>
                    Error loading example images
                </div>
            `;
        }
    }
}

/**
 * Render showcase content
 * @param {Array} images - Array of images/videos to show
 * @param {Array} exampleFiles - Local example files
 * @param {boolean} startExpanded - Whether to start in expanded state
 * @returns {string} HTML content
 */
export function renderShowcaseContent(images, exampleFiles = [], startExpanded = false) {
    if (!images?.length) {
        // Show empty state with import interface
        return renderImportInterface(true);
    }
    
    // Filter images based on SFW setting
    const showOnlySFW = state.settings.show_only_sfw;
    let filteredImages = images;
    let hiddenCount = 0;
    
    if (showOnlySFW) {
        filteredImages = images.filter(img => {
            const nsfwLevel = img.nsfwLevel !== undefined ? img.nsfwLevel : 0;
            const isSfw = nsfwLevel < NSFW_LEVELS.R;
            if (!isSfw) hiddenCount++;
            return isSfw;
        });
    }
    
    // Show message if no images are available after filtering
    if (filteredImages.length === 0) {
        return `
            <div class="no-examples">
                <p>All example images are filtered due to NSFW content settings</p>
                <p class="nsfw-filter-info">Your settings are currently set to show only safe-for-work content</p>
                <p>You can change this in Settings <i class="fas fa-cog"></i></p>
            </div>
        `;
    }
    
    // Show hidden content notification if applicable
    const hiddenNotification = hiddenCount > 0 ? 
        `<div class="nsfw-filter-notification">
            <i class="fas fa-eye-slash"></i> ${hiddenCount} ${hiddenCount === 1 ? 'image' : 'images'} hidden due to SFW-only setting
        </div>` : '';
    
    return `
        <div class="scroll-indicator">
            <i class="fas fa-chevron-${startExpanded ? 'up' : 'down'}"></i>
            <span>Scroll or click to ${startExpanded ? 'hide' : 'show'} ${filteredImages.length} examples</span>
        </div>
        <div class="carousel ${startExpanded ? '' : 'collapsed'}">
            ${hiddenNotification}
            <div class="carousel-container">
                ${filteredImages.map((img, index) => renderMediaItem(img, index, exampleFiles)).join('')}
            </div>
            
            ${renderImportInterface(false)}
        </div>
    `;
}

/**
 * Render a single media item (image or video)
 * @param {Object} img - Image/video metadata
 * @param {number} index - Index in the array
 * @param {Array} exampleFiles - Local files
 * @returns {string} HTML for the media item
 */
function renderMediaItem(img, index, exampleFiles) {
    // Find matching file in our list of actual files
    let localFile = findLocalFile(img, index, exampleFiles);

    // Get original remote URL
    const originalRemoteUrl = img.url || '';

    // Determine media type for optimization
    const isVideo = localFile ? localFile.is_video :
                  originalRemoteUrl.endsWith('.mp4') || originalRemoteUrl.endsWith('.webm');
    const mediaType = isVideo ? 'video' : 'image';

    // Optimize CivitAI URLs for showcase display (full quality)
    const remoteUrl = getShowcaseUrl(originalRemoteUrl, mediaType);

    const localUrl = localFile ? localFile.path : '';
    
    // Calculate appropriate aspect ratio
    const aspectRatio = (img.height / img.width) * 100;
    const containerWidth = 800; // modal content maximum width
    const minHeightPercent = 40; 
    const maxHeightPercent = (window.innerHeight * 0.6 / containerWidth) * 100;
    const heightPercent = Math.max(
        minHeightPercent,
        Math.min(maxHeightPercent, aspectRatio)
    );
    
    // Extract CivitAI image ID from CDN URL for import status check
    const cdnImageId = (img.url || '').match(/\/(\d+)\.(?:jpeg|jpg|png|webp|gif)(?:\?|#|$)/)?.[1] || '';

    // Check if media should be blurred
    const nsfwLevel = img.nsfwLevel !== undefined ? img.nsfwLevel : 0;
    const matureBlurThreshold = getMatureBlurThreshold(state.settings);
    const shouldBlur = state.settings.blur_mature_content && nsfwLevel >= matureBlurThreshold;
    
    // Determine NSFW warning text based on level
    let nsfwText = "Mature Content";
    if (nsfwLevel >= NSFW_LEVELS.XXX) {
        nsfwText = "XXX-rated Content";
    } else if (nsfwLevel >= NSFW_LEVELS.X) {
        nsfwText = "X-rated Content";
    } else if (nsfwLevel >= NSFW_LEVELS.R) {
        nsfwText = "R-rated Content";
    }
    
    // Extract metadata from the image
    const meta = img.meta || {};
    const prompt = meta.prompt || '';
    const negativePrompt = meta.negative_prompt || meta.negativePrompt || '';
    const size = meta.Size || `${img.width}x${img.height}`;
    const seed = meta.seed || '';
    const model = meta.Model || '';
    const steps = meta.steps || '';
    const sampler = meta.sampler || '';
    const cfgScale = meta.cfgScale || '';
    const clipSkip = meta.clipSkip || '';
    
    // Check if we have any meaningful generation parameters
    const hasParams = seed || model || steps || sampler || cfgScale || clipSkip;
    const hasPrompts = prompt || negativePrompt;
    
    // Create metadata panel content
    const metadataPanel = generateMetadataPanel(
        hasParams, hasPrompts, 
        prompt, negativePrompt, 
        size, seed, model, steps, sampler, cfgScale, clipSkip
    );
    
    // Determine if this is a custom image (has id property)
    const isCustomImage = Boolean(typeof img.id === 'string' && img.id);
    
    const hasGenMeta = img.hasMeta || (img.meta && (img.meta.prompt || img.meta.seed || img.meta.resources));

    // Create the media control buttons HTML
    const mediaControlsHtml = `
        <div class="media-controls">
            <button class="media-control-btn set-preview-btn" title="Set as preview">
                <i class="fas fa-image"></i>
            </button>
            ${hasGenMeta ? `
            <button class="media-control-btn create-recipe-btn"
                    title="Create As Recipe"
                    data-image-meta="${encodeURIComponent(JSON.stringify(img.meta || {}))}"
                    data-image-url="${img.url || ''}"
                    data-image-nsfw="${img.nsfwLevel ?? ''}"
                    data-image-id="${cdnImageId}"
                    data-local-path="${localFile ? localFile.path : ''}">
                <i class="fas fa-book-open"></i>
            </button>
            ` : ''}
            <button class="media-control-btn set-nsfw-btn" 
                    title="Set content rating"
                    data-media-index="${index}"
                    data-media-source="${isCustomImage ? 'custom' : 'civitai'}"
                    data-media-id="${img.id || ''}">
                <i class="fas fa-exclamation-triangle"></i>
            </button>
            <button class="media-control-btn example-delete-btn ${!isCustomImage ? 'disabled' : ''}" 
                    title="${isCustomImage ? 'Delete this example' : 'Only custom images can be deleted'}" 
                    data-short-id="${img.id || ''}" 
                    ${!isCustomImage ? 'aria-disabled="true"' : ''}>
                <i class="fas fa-trash-alt"></i>
                <i class="fas fa-check confirm-icon"></i>
            </button>
        </div>
    `;
    
    // Generate the appropriate wrapper based on media type
    if (isVideo) {
        return generateVideoWrapper(
            img, heightPercent, shouldBlur, nsfwText, metadataPanel, 
            localUrl, remoteUrl, mediaControlsHtml
        );
    }
    
    return generateImageWrapper(
        img, heightPercent, shouldBlur, nsfwText, metadataPanel, 
        localUrl, remoteUrl, mediaControlsHtml
    );
}

/**
 * Find the matching local file for an image
 * @param {Object} img - Image metadata
 * @param {number} index - Image index
 * @param {Array} exampleFiles - Array of local files
 * @returns {Object|null} Matching local file or null
 */
function findLocalFile(img, index, exampleFiles) {
    if (!exampleFiles || exampleFiles.length === 0) return null;
    
    let localFile = null;
    
    if (typeof img.id === 'string' && img.id) {
        // This is a custom image, find by custom_<id>
        const customPrefix = `custom_${img.id}`;
        localFile = exampleFiles.find(file => file.name.startsWith(customPrefix));
    } else {
        // This is a regular image from civitai, find by index
        localFile = exampleFiles.find(file => {
            const match = file.name.match(/image_(\d+)\./);
            return match && parseInt(match[1]) === index;
        });
    }
    
    return localFile;
}

/**
 * Render the import interface for example images
 * @param {boolean} isEmpty - Whether there are no existing examples
 * @returns {string} HTML content for import interface
 */
function renderImportInterface(isEmpty) {
    // Check if example images path is configured
    const exampleImagesPath = state.global.settings.example_images_path;
    const isPathConfigured = exampleImagesPath && exampleImagesPath.trim() !== '';
    
    // If path is not configured, show setup guidance
    if (!isPathConfigured) {
        const title = translate('uiHelpers.exampleImages.setupRequired', {}, 'Example Images Storage');
        const description = translate('uiHelpers.exampleImages.setupDescription', {}, 'To add custom example images, you need to set a download location first.');
        const usage = translate('uiHelpers.exampleImages.setupUsage', {}, 'This path is used for both downloaded and custom example images.');
        const openSettings = translate('uiHelpers.exampleImages.openSettings', {}, 'Open Settings');
        
        return `
            <div class="example-import-area ${isEmpty ? 'empty' : ''}">
                <div class="import-container import-container--needs-setup" id="exampleImportContainer">
                    <div class="import-setup-guidance">
                        <div class="setup-icon">
                            <i class="fas fa-folder-plus"></i>
                        </div>
                        <h3>${title}</h3>
                        <p class="setup-description">
                            ${description}
                        </p>
                        <p class="setup-usage">
                            ${usage}
                        </p>
                        <button class="select-files-btn setup-settings-btn" id="openExampleSettingsBtn">
                            <i class="fas fa-cog"></i> ${openSettings}
                        </button>
                    </div>
                </div>
            </div>
        `;
    }
    
    return `
        <div class="example-import-area ${isEmpty ? 'empty' : ''}">
            <div class="import-container" id="exampleImportContainer">
                <div class="import-placeholder">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <h3>${isEmpty ? 'No example images available' : 'Add more examples'}</h3>
                    <p>Drag & drop images or videos here</p>
                    <p class="sub-text">or</p>
                    <button class="select-files-btn" id="selectExampleFilesBtn">
                        <i class="fas fa-folder-open"></i> Select Files
                    </button>
                    <p class="import-formats">Supported formats: jpg, png, gif, webp, avif, jxl, mp4, webm</p>
                </div>
                <input type="file" id="exampleFilesInput" multiple accept="image/*,image/avif,image/jxl,video/mp4,video/webm" style="display: none;">
                <div class="import-progress-container" style="display: none;">
                    <div class="import-progress">
                        <div class="progress-bar"></div>
                    </div>
                    <span class="progress-text">Importing files...</span>
                </div>
            </div>
        </div>
    `;
}

/**
 * Open settings modal and scroll to example images section
 */
function openSettingsForExampleImages() {
    modalManager.showModal('settingsModal');
    
    // Wait for modal to be visible, then scroll to example images section
    setTimeout(() => {
        const exampleImagesInput = document.getElementById('exampleImagesPath');
        if (exampleImagesInput) {
            // Find the parent settings-section
            const section = exampleImagesInput.closest('.settings-section');
            if (section) {
                section.scrollIntoView({ behavior: 'smooth', block: 'center' });
                // Add a brief highlight effect
                section.style.transition = 'background-color 0.3s ease';
                section.style.backgroundColor = 'rgba(66, 153, 225, 0.1)';
                setTimeout(() => {
                    section.style.backgroundColor = '';
                }, 1500);
            }
            // Focus the input
            exampleImagesInput.focus();
        }
    }, 100);
}

/**
 * Initialize the example import functionality
 * @param {string} modelHash - The SHA256 hash of the model
 * @param {Element} container - The container element for the import area
 */
export function initExampleImport(modelHash, container) {
    if (!container) return;
    
    const importContainer = container.querySelector('#exampleImportContainer');
    const fileInput = container.querySelector('#exampleFilesInput');
    const selectFilesBtn = container.querySelector('#selectExampleFilesBtn');
    const openSettingsBtn = container.querySelector('#openExampleSettingsBtn');
    
    // Set up "Open Settings" button for setup guidance state
    if (openSettingsBtn) {
        openSettingsBtn.addEventListener('click', () => {
            openSettingsForExampleImages();
        });
    }
    
    // Set up file selection button
    if (selectFilesBtn) {
        selectFilesBtn.addEventListener('click', () => {
            fileInput.click();
        });
    }
    
    // Handle file selection
    if (fileInput) {
        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                handleImportFiles(Array.from(e.target.files), modelHash, importContainer);
            }
        });
    }
    
    // Set up drag and drop
    if (importContainer) {
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            importContainer.addEventListener(eventName, preventDefaults, false);
        });
        
        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        // Highlight drop area on drag over
        ['dragenter', 'dragover'].forEach(eventName => {
            importContainer.addEventListener(eventName, () => {
                importContainer.classList.add('highlight');
            }, false);
        });
        
        // Remove highlight on drag leave
        ['dragleave', 'drop'].forEach(eventName => {
            importContainer.addEventListener(eventName, () => {
                importContainer.classList.remove('highlight');
            }, false);
        });
        
        // Handle dropped files
        importContainer.addEventListener('drop', (e) => {
            const files = Array.from(e.dataTransfer.files);
            handleImportFiles(files, modelHash, importContainer);
        }, false);
    }
}

/**
 * Handle the file import process
 * @param {File[]} files - Array of files to import
 * @param {string} modelHash - The SHA256 hash of the model
 * @param {Element} importContainer - The container element for import UI
 */
async function handleImportFiles(files, modelHash, importContainer) {
    // Filter for supported file types
    const supportedImages = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.avif', '.jxl'];
    const supportedVideos = ['.mp4', '.webm'];
    const supportedExtensions = [...supportedImages, ...supportedVideos];
    
    const validFiles = files.filter(file => {
        const ext = '.' + file.name.split('.').pop().toLowerCase();
        return supportedExtensions.includes(ext);
    });
    
    if (validFiles.length === 0) {
        alert('No supported files selected. Please select image or video files.');
        return;
    }
    
    try {
        // Upload files one at a time to avoid exceeding server size limits
        let lastSuccessResult = null;
        let successCount = 0;
        const errors = [];

        for (const file of validFiles) {
            try {
                const formData = new FormData();
                formData.append('model_hash', modelHash);
                formData.append('files', file);

                const response = await fetch('/api/lm/import-example-images', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();

                if (!result.success) {
                    errors.push(`${file.name}: ${result.error || 'Unknown error'}`);
                } else {
                    lastSuccessResult = result;
                    successCount++;
                }
            } catch (err) {
                errors.push(`${file.name}: ${err.message}`);
            }
        }

        if (successCount === 0) {
            throw new Error(errors.join('; '));
        }

        const result = lastSuccessResult;

        // Get updated local files
        const updatedFilesResponse = await fetch(`/api/lm/example-image-files?model_hash=${modelHash}`);
        const updatedFilesResult = await updatedFilesResponse.json();

        if (!updatedFilesResult.success) {
            throw new Error(updatedFilesResult.error || 'Failed to get updated file list');
        }

        // Re-render the showcase content
        const showcaseTab = document.getElementById('showcase-tab');
        if (showcaseTab) {
            // Get the updated images from the result
            const regularImages = result.regular_images || [];
            const customImages = result.custom_images || [];
            // Combine both arrays for rendering
            const allImages = [...regularImages, ...customImages];
            showcaseTab.innerHTML = renderShowcaseContent(allImages, updatedFilesResult.files, true);

            // Re-initialize showcase functionality
            const carousel = showcaseTab.querySelector('.carousel');
            if (carousel && !carousel.classList.contains('collapsed')) {
                initShowcaseContent(carousel);
            }

            // Initialize the import UI for the new content
            initExampleImport(modelHash, showcaseTab);

            if (errors.length > 0) {
                showToast('toast.import.imagesPartial', { success: successCount, failed: errors.length }, 'warning');
            } else {
                showToast('toast.import.imagesImported', {}, 'success');
            }

            // Update VirtualScroller if available
            if (state.virtualScroller && result.model_file_path) {
                // Create an update object with only the necessary properties
                const updateData = {
                    civitai: {
                        images: regularImages,
                        customImages: customImages
                    }
                };

                // Update the item in the virtual scroller
                state.virtualScroller.updateSingleItem(result.model_file_path, updateData);
            }
        }
    } catch (error) {
        console.error('Error importing examples:', error);
        showToast('toast.import.importFailed', { message: error.message }, 'error');
    }
}

/**
 * Toggle showcase expansion
 * @param {HTMLElement} element - The scroll indicator element
 */
export function toggleShowcase(element) {
    const carousel = element.nextElementSibling;
    const isCollapsed = carousel.classList.contains('collapsed');
    const indicator = element.querySelector('span');
    const icon = element.querySelector('i');
    
    carousel.classList.toggle('collapsed');
    
    if (isCollapsed) {
        const count = carousel.querySelectorAll('.media-wrapper').length;
        indicator.textContent = `Scroll or click to hide examples`;
        icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
        initShowcaseContent(carousel);
    } else {
        const count = carousel.querySelectorAll('.media-wrapper').length;
        indicator.textContent = `Scroll or click to show ${count} examples`;
        icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
        
        // Make sure any open metadata panels get closed
        const carouselContainer = carousel.querySelector('.carousel-container');
        if (carouselContainer) {
            carouselContainer.style.height = '0';
            setTimeout(() => {
                carouselContainer.style.height = '';
            }, 300);
        }
    }
}

/**
 * Bind scroll-indicator click events (works even when carousel is collapsed)
 * @param {HTMLElement} carousel - The carousel element
 */
function bindScrollIndicatorEvents(carousel) {
    if (!carousel) return;

    const scrollIndicator = carousel.previousElementSibling;
    if (scrollIndicator && scrollIndicator.classList.contains('scroll-indicator')) {
        // Remove previous listeners to avoid duplicates
        scrollIndicator.onclick = null;
        scrollIndicator.removeEventListener('click', scrollIndicator._leftClickHandler);
        scrollIndicator.removeEventListener('mousedown', scrollIndicator._middleClickHandler);

        // Handler for left-click (button 0) - uses 'click' event
        scrollIndicator._leftClickHandler = (event) => {
            if (event.button === 0) {
                event.preventDefault();
                toggleShowcase(scrollIndicator);
            }
        };

        // Handler for middle-click (button 1) - uses 'mousedown' event
        scrollIndicator._middleClickHandler = (event) => {
            if (event.button === 1) {
                event.preventDefault();
                toggleShowcase(scrollIndicator);
            }
        };

        scrollIndicator.addEventListener('click', scrollIndicator._leftClickHandler);
        scrollIndicator.addEventListener('mousedown', scrollIndicator._middleClickHandler);
    }
}

/**
 * Initialize all showcase content interactions
 * @param {HTMLElement} carousel - The carousel element
 */
export function initShowcaseContent(carousel) {
    if (!carousel) return;
    
    initLazyLoading(carousel);
    initNsfwBlurHandlers(carousel);
    initMetadataPanelHandlers(carousel);
    initMediaControlHandlers(carousel);
    positionAllMediaControls(carousel);

    // Click-to-view: open full-size media viewer when clicking showcase images/videos
    const viewerElements = carousel.querySelectorAll('.media-wrapper img, .media-wrapper video');
    const allItems = [];
    const elementIndexMap = new Map();
    viewerElements.forEach((el) => {
        const isVideo = el.tagName === 'VIDEO';
        const url = el.src || el.dataset.localSrc || el.dataset.remoteSrc;
        if (url) {
            elementIndexMap.set(el, allItems.length);
            allItems.push({ url, type: isVideo ? 'video' : 'image' });
        }
    });
    viewerElements.forEach((mediaEl) => {
        const idx = elementIndexMap.get(mediaEl);
        if (idx === undefined) return;
        mediaEl.addEventListener('click', (e) => {
            e.stopPropagation();
            openMediaViewer(allItems, idx);
        });
    });

    // Bind scroll-indicator click events
    bindScrollIndicatorEvents(carousel);
    
    // Add window resize handler
    const resizeHandler = () => positionAllMediaControls(carousel);
    window.removeEventListener('resize', resizeHandler);
    window.addEventListener('resize', resizeHandler);
    
    // Handle images loading which might change dimensions
    const mediaElements = carousel.querySelectorAll('img, video');
    mediaElements.forEach(media => {
        media.addEventListener('load', () => positionAllMediaControls(carousel));
        if (media.tagName === 'VIDEO') {
            media.addEventListener('loadedmetadata', () => positionAllMediaControls(carousel));
        }
    });
}

/**
 * Scroll to top of modal content
 * @param {HTMLElement} button - Back to top button
 */
export function scrollToTop(button) {
    const modalContent = button.closest('.modal-content');
    if (modalContent) {
        modalContent.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    }
}

/**
 * Set up showcase scroll functionality
 * @param {string} modalId - ID of the modal element
 */
export function setupShowcaseScroll(modalId) {
    const wheelOptions = { passive: false };
    const wheelHandler = (event) => {
        const modalContent = document.querySelector(`#${modalId} .modal-content`);
        if (!modalContent) return;
        
        const showcase = modalContent.querySelector('.showcase-section');
        if (!showcase) return;
        
        const carousel = showcase.querySelector('.carousel');
        const scrollIndicator = showcase.querySelector('.scroll-indicator');
        
        if (carousel?.classList.contains('collapsed') && event.deltaY > 0) {
            const isNearBottom = modalContent.scrollHeight - modalContent.scrollTop - modalContent.clientHeight < 100;
            
            if (isNearBottom) {
                toggleShowcase(scrollIndicator);
                event.preventDefault();
            }
        }
    };
    document.addEventListener('wheel', wheelHandler, wheelOptions);
    showcaseListenerMetrics.wheelListeners += 1;
    
    // Use MutationObserver to set up back-to-top button when modal content is added
    const observer = new MutationObserver((mutations) => {
        for (const mutation of mutations) {
            if (mutation.type === 'childList' && mutation.addedNodes.length) {
                const modal = document.getElementById(modalId);
                if (modal && modal.querySelector('.modal-content')) {
                    setupBackToTopButton(modal.querySelector('.modal-content'));
                }
            }
        }
    });
    
    observer.observe(document.body, { childList: true, subtree: true });
    showcaseListenerMetrics.mutationObservers += 1;
    
    // Try to set up the button immediately in case the modal is already open
    const modalContent = document.querySelector(`#${modalId} .modal-content`);
    if (modalContent) {
        setupBackToTopButton(modalContent);
    }

    let cleanedUp = false;

    return () => {
        if (cleanedUp) {
            return;
        }
        cleanedUp = true;
        document.removeEventListener('wheel', wheelHandler, wheelOptions);
        showcaseListenerMetrics.wheelListeners -= 1;
        observer.disconnect();
        showcaseListenerMetrics.mutationObservers -= 1;
        const modalContent = document.querySelector(`#${modalId} .modal-content`);
        teardownBackToTopButton(modalContent);
    };
}

/**
 * Set up back-to-top button
 * @param {HTMLElement} modalContent - Modal content element
 */
function setupBackToTopButton(modalContent) {
    teardownBackToTopButton(modalContent);

    const handler = () => {
        const backToTopBtn = modalContent.querySelector('.back-to-top');
        if (backToTopBtn) {
            if (modalContent.scrollTop > 300) {
                backToTopBtn.classList.add('visible');
            } else {
                backToTopBtn.classList.remove('visible');
            }
        }
    };

    modalContent._backToTopScrollHandler = handler;
    modalContent.addEventListener('scroll', handler);
    showcaseListenerMetrics.backToTopHandlers += 1;
    handler();
}

function teardownBackToTopButton(modalContent) {
    if (!modalContent) {
        return;
    }

    const existingHandler = modalContent._backToTopScrollHandler;
    if (existingHandler) {
        modalContent.removeEventListener('scroll', existingHandler);
        delete modalContent._backToTopScrollHandler;
        showcaseListenerMetrics.backToTopHandlers -= 1;
    }
}