import { modalManager } from './ModalManager.js';
import { showToast } from '../utils/uiHelpers.js';
import { LoadingManager } from './LoadingManager.js';
import { getStorageItem } from '../utils/storageHelpers.js';

export class ImportManager {
    constructor() {
        this.recipeImage = null;
        this.recipeData = null;
        this.recipeName = '';
        this.recipeTags = [];
        this.missingLoras = [];
        
        // Add initialization check
        this.initialized = false;
        this.selectedFolder = '';

        // Add LoadingManager instance
        this.loadingManager = new LoadingManager();
        this.folderClickHandler = null;
        this.updateTargetPath = this.updateTargetPath.bind(this);
        
        // 添加对注入样式的引用
        this.injectedStyles = null;
        
        // Add import mode tracking
        this.importMode = 'upload'; // Default mode: 'upload' or 'url'
    }

    showImportModal(recipeData = null, recipeId = null) {
        if (!this.initialized) {
            // Check if modal exists
            const modal = document.getElementById('importModal');
            if (!modal) {
                console.error('Import modal element not found');
                return;
            }
            this.initialized = true;
        }
        
        // Always reset the state when opening the modal
        this.resetSteps();
        if (recipeData) {
            this.downloadableLoRAs = recipeData.loras;
            this.recipeId = recipeId;
        }
        
        // Show the modal
        modalManager.showModal('importModal', null, () => {
            // Cleanup handler when modal closes
            this.cleanupFolderBrowser();
            
            // Remove any injected styles
            this.removeInjectedStyles();
        });
        
        // Verify the modal is properly shown
        setTimeout(() => {
            this.ensureModalVisible();
        }, 50);
    }

    // 添加移除注入样式的方法
    removeInjectedStyles() {
        if (this.injectedStyles && this.injectedStyles.parentNode) {
            this.injectedStyles.parentNode.removeChild(this.injectedStyles);
            this.injectedStyles = null;
        }
        
        // Also reset any inline styles that might have been set with !important
        document.querySelectorAll('.import-step').forEach(step => {
            step.style.cssText = '';
        });
    }

    resetSteps() {
        // Remove any existing injected styles
        this.removeInjectedStyles();
        
        // Show the first step
        this.showStep('uploadStep');
        
        // Reset file input
        const fileInput = document.getElementById('recipeImageUpload');
        if (fileInput) {
            fileInput.value = '';
        }
        
        // Reset URL input
        const urlInput = document.getElementById('imageUrlInput');
        if (urlInput) {
            urlInput.value = '';
        }
        
        // Reset error messages
        const uploadError = document.getElementById('uploadError');
        if (uploadError) {
            uploadError.textContent = '';
        }
        
        const urlError = document.getElementById('urlError');
        if (urlError) {
            urlError.textContent = '';
        }
        
        // Reset recipe name input
        const recipeName = document.getElementById('recipeName');
        if (recipeName) {
            recipeName.value = '';
        }
        
        // Reset tags container
        const tagsContainer = document.getElementById('tagsContainer');
        if (tagsContainer) {
            tagsContainer.innerHTML = '<div class="empty-tags">No tags added</div>';
        }
        
        // Reset state variables
        this.recipeImage = null;
        this.recipeData = null;
        this.recipeName = '';
        this.recipeTags = [];
        this.missingLoras = [];
        this.downloadableLoRAs = [];
        
        // Reset import mode to upload
        this.importMode = 'upload';
        this.toggleImportMode('upload');
        
        // Clear selected folder and remove selection from UI
        this.selectedFolder = '';
        const folderBrowser = document.getElementById('importFolderBrowser');
        if (folderBrowser) {
            folderBrowser.querySelectorAll('.folder-item').forEach(f => 
                f.classList.remove('selected'));
        }
        
        // Clear missing LoRAs list if it exists
        const missingLorasList = document.getElementById('missingLorasList');
        if (missingLorasList) {
            missingLorasList.innerHTML = '';
        }
        
        // Reset total download size
        const totalSizeDisplay = document.getElementById('totalDownloadSize');
        if (totalSizeDisplay) {
            totalSizeDisplay.textContent = 'Calculating...';
        }
        
        // Remove any existing deleted LoRAs warning
        const deletedLorasWarning = document.getElementById('deletedLorasWarning');
        if (deletedLorasWarning) {
            deletedLorasWarning.remove();
        }
        
        // Remove any existing early access warning
        const earlyAccessWarning = document.getElementById('earlyAccessWarning');
        if (earlyAccessWarning) {
            earlyAccessWarning.remove();
        }
    }

    toggleImportMode(mode) {
        this.importMode = mode;
        
        // Update toggle buttons
        const uploadBtn = document.querySelector('.toggle-btn[data-mode="upload"]');
        const urlBtn = document.querySelector('.toggle-btn[data-mode="url"]');
        
        if (uploadBtn && urlBtn) {
            if (mode === 'upload') {
                uploadBtn.classList.add('active');
                urlBtn.classList.remove('active');
            } else {
                uploadBtn.classList.remove('active');
                urlBtn.classList.add('active');
            }
        }
        
        // Show/hide appropriate sections
        const uploadSection = document.getElementById('uploadSection');
        const urlSection = document.getElementById('urlSection');
        
        if (uploadSection && urlSection) {
            if (mode === 'upload') {
                uploadSection.style.display = 'block';
                urlSection.style.display = 'none';
            } else {
                uploadSection.style.display = 'none';
                urlSection.style.display = 'block';
            }
        }
        
        // Clear error messages
        const uploadError = document.getElementById('uploadError');
        const urlError = document.getElementById('urlError');
        
        if (uploadError) uploadError.textContent = '';
        if (urlError) urlError.textContent = '';
    }

    handleImageUpload(event) {
        const file = event.target.files[0];
        const errorElement = document.getElementById('uploadError');
        
        if (!file) {
            return;
        }
        
        // Validate file type
        if (!file.type.match('image.*')) {
            errorElement.textContent = 'Please select an image file';
            return;
        }
        
        // Reset error
        errorElement.textContent = '';
        this.recipeImage = file;
        
        // Auto-proceed to next step if file is selected
        this.uploadAndAnalyzeImage();
    }

    async handleUrlInput() {
        const urlInput = document.getElementById('imageUrlInput');
        const errorElement = document.getElementById('urlError');
        const url = urlInput.value.trim();
        
        // Validate URL
        if (!url) {
            errorElement.textContent = 'Please enter a URL';
            return;
        }
        
        // Basic URL validation
        if (!url.startsWith('http://') && !url.startsWith('https://')) {
            errorElement.textContent = 'Please enter a valid URL';
            return;
        }
        
        // Reset error
        errorElement.textContent = '';
        
        // Show loading indicator
        this.loadingManager.showSimpleLoading('Fetching image from URL...');
        
        try {
            // Call API to analyze the URL
            await this.analyzeImageFromUrl(url);
        } catch (error) {
            errorElement.textContent = error.message || 'Failed to fetch image from URL';
        } finally {
            this.loadingManager.hide();
        }
    }

    async analyzeImageFromUrl(url) {
        try {
            // Call the API with URL data
            const response = await fetch('/api/recipes/analyze-image', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ url: url })
            });
            
            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.error || 'Failed to analyze image from URL');
            }
            
            // Get recipe data from response
            this.recipeData = await response.json();
            
            // Check if we have an error message
            if (this.recipeData.error) {
                throw new Error(this.recipeData.error);
            }
            
            // Check if we have valid recipe data
            if (!this.recipeData || !this.recipeData.loras || this.recipeData.loras.length === 0) {
                throw new Error('No LoRA information found in this image');
            }
            
            // Find missing LoRAs
            this.missingLoras = this.recipeData.loras.filter(lora => !lora.existsLocally);
            
            // Proceed to recipe details step
            this.showRecipeDetailsStep();
            
        } catch (error) {
            console.error('Error analyzing URL:', error);
            throw error;
        }
    }

    async uploadAndAnalyzeImage() {
        if (!this.recipeImage) {
            showToast('Please select an image first', 'error');
            return;
        }
        
        try {
            this.loadingManager.showSimpleLoading('Analyzing image metadata...');
            
            // Create form data for upload
            const formData = new FormData();
            formData.append('image', this.recipeImage);
            
            // Upload image for analysis
            const response = await fetch('/api/recipes/analyze-image', {
                method: 'POST',
                body: formData
            });
             
            // Get recipe data from response
            this.recipeData = await response.json();

            console.log('Recipe data:', this.recipeData);
            
            // Check if we have an error message
            if (this.recipeData.error) {
                throw new Error(this.recipeData.error);
            }
            
            // Check if we have valid recipe data
            if (!this.recipeData || !this.recipeData.loras || this.recipeData.loras.length === 0) {
                throw new Error('No LoRA information found in this image');
            }
            
            // Store generation parameters if available
            if (this.recipeData.gen_params) {
                console.log('Generation parameters found:', this.recipeData.gen_params);
            }
            
            // Find missing LoRAs
            this.missingLoras = this.recipeData.loras.filter(lora => !lora.existsLocally);
            
            // Proceed to recipe details step
            this.showRecipeDetailsStep();
            
        } catch (error) {
            document.getElementById('uploadError').textContent = error.message;
        } finally {
            this.loadingManager.hide();
        }
    }

    showRecipeDetailsStep() {
        this.showStep('detailsStep');
        
        // Set default recipe name from prompt or image filename
        const recipeName = document.getElementById('recipeName');
        
        // Check if we have recipe metadata from a shared recipe
        if (this.recipeData && this.recipeData.from_recipe_metadata) {
            // Use title from recipe metadata
            if (this.recipeData.title) {
                recipeName.value = this.recipeData.title;
                this.recipeName = this.recipeData.title;
            }
            
            // Use tags from recipe metadata
            if (this.recipeData.tags && Array.isArray(this.recipeData.tags)) {
                this.recipeTags = [...this.recipeData.tags];
                this.updateTagsDisplay();
            }
        } else if (this.recipeData && this.recipeData.gen_params && this.recipeData.gen_params.prompt) {
            // Use the first 10 words from the prompt as the default recipe name
            const promptWords = this.recipeData.gen_params.prompt.split(' ');
            const truncatedPrompt = promptWords.slice(0, 10).join(' ');
            recipeName.value = truncatedPrompt;
            this.recipeName = truncatedPrompt;
            
            // Set up click handler to select all text for easy editing
            if (!recipeName.hasSelectAllHandler) {
                recipeName.addEventListener('click', function() {
                    this.select();
                });
                recipeName.hasSelectAllHandler = true;
            }
        } else if (this.recipeImage && !recipeName.value) {
            // Fallback to image filename if no prompt is available
            const fileName = this.recipeImage.name.split('.')[0];
            recipeName.value = fileName;
            this.recipeName = fileName;
        }
        
        // Always set up click handler for easy editing if not already set
        if (!recipeName.hasSelectAllHandler) {
            recipeName.addEventListener('click', function() {
                this.select();
            });
            recipeName.hasSelectAllHandler = true;
        }
        
        // Display the uploaded image in the preview
        const imagePreview = document.getElementById('recipeImagePreview');
        if (imagePreview) {
            if (this.recipeImage) {
                // For file upload mode
                const reader = new FileReader();
                reader.onload = (e) => {
                    imagePreview.innerHTML = `<img src="${e.target.result}" alt="Recipe preview">`;
                };
                reader.readAsDataURL(this.recipeImage);
            } else if (this.recipeData && this.recipeData.image_base64) {
                // For URL mode - use the base64 image data returned from the backend
                imagePreview.innerHTML = `<img src="data:image/jpeg;base64,${this.recipeData.image_base64}" alt="Recipe preview">`;
            } else if (this.importMode === 'url') {
                // Fallback for URL mode if no base64 data
                const urlInput = document.getElementById('imageUrlInput');
                if (urlInput && urlInput.value) {
                    imagePreview.innerHTML = `<img src="${urlInput.value}" alt="Recipe preview" crossorigin="anonymous">`;
                }
            }
        }

        // Update LoRA count information
        const totalLoras = this.recipeData.loras.length;
        const existingLoras = this.recipeData.loras.filter(lora => lora.existsLocally).length;
        const loraCountInfo = document.getElementById('loraCountInfo');
        if (loraCountInfo) {
            loraCountInfo.textContent = `(${existingLoras}/${totalLoras} in library)`;
        }
        
        // Display LoRAs list
        const lorasList = document.getElementById('lorasList');
        if (lorasList) {
            lorasList.innerHTML = this.recipeData.loras.map(lora => {
                const existsLocally = lora.existsLocally;
                const isDeleted = lora.isDeleted;
                const isEarlyAccess = lora.isEarlyAccess;
                const localPath = lora.localPath || '';
                
                // Create status badge based on LoRA status
                let statusBadge;
                if (isDeleted) {
                    statusBadge = `<div class="deleted-badge">
                        <i class="fas fa-exclamation-circle"></i> Deleted from Civitai
                    </div>`;
                } else {
                    statusBadge = existsLocally ? 
                        `<div class="local-badge">
                            <i class="fas fa-check"></i> In Library
                            <div class="local-path">${localPath}</div>
                        </div>` :
                        `<div class="missing-badge">
                            <i class="fas fa-exclamation-triangle"></i> Not in Library
                        </div>`;
                }

                // Early access badge (shown additionally with other badges)
                let earlyAccessBadge = '';
                if (isEarlyAccess) {
                    // Format the early access end date if available
                    let earlyAccessInfo = 'This LoRA requires early access payment to download.';
                    if (lora.earlyAccessEndsAt) {
                        try {
                            const endDate = new Date(lora.earlyAccessEndsAt);
                            const formattedDate = endDate.toLocaleDateString();
                            earlyAccessInfo += ` Early access ends on ${formattedDate}.`;
                        } catch (e) {
                            console.warn('Failed to format early access date', e);
                        }
                    }
                    
                    earlyAccessBadge = `<div class="early-access-badge">
                        <i class="fas fa-clock"></i> Early Access
                        <div class="early-access-info">${earlyAccessInfo} Verify that you have purchased early access before downloading.</div>
                    </div>`;
                }

                // Format size if available
                const sizeDisplay = lora.size ? 
                    `<div class="size-badge">${this.formatFileSize(lora.size)}</div>` : '';

                return `
                    <div class="lora-item ${existsLocally ? 'exists-locally' : isDeleted ? 'is-deleted' : 'missing-locally'} ${isEarlyAccess ? 'is-early-access' : ''}">
                        <div class="lora-thumbnail">
                            <img src="${lora.thumbnailUrl || '/loras_static/images/no-preview.png'}" alt="LoRA preview">
                        </div>
                        <div class="lora-content">
                            <div class="lora-header">
                                <h3>${lora.name}</h3>
                                <div class="badge-container">
                                    ${statusBadge}
                                    ${earlyAccessBadge}
                                </div>
                            </div>
                            ${lora.version ? `<div class="lora-version">${lora.version}</div>` : ''}
                            <div class="lora-info">
                                ${lora.baseModel ? `<div class="base-model">${lora.baseModel}</div>` : ''}
                                ${sizeDisplay}
                                <div class="weight-badge">Weight: ${lora.weight || 1.0}</div>
                            </div>
                        </div>
                    </div>
                `;
            }).join('');
        }
        
        // Check for early access loras and show warning if any exist
        const earlyAccessLoras = this.recipeData.loras.filter(lora => 
            lora.isEarlyAccess && !lora.existsLocally && !lora.isDeleted);
        if (earlyAccessLoras.length > 0) {
            // Show a warning about early access loras
            const warningMessage = `
                <div class="early-access-warning">
                    <div class="warning-icon"><i class="fas fa-clock"></i></div>
                    <div class="warning-content">
                        <div class="warning-title">${earlyAccessLoras.length} LoRA(s) require Early Access</div>
                        <div class="warning-text">
                            These LoRAs require a payment to access. Download will fail if you haven't purchased access.
                            You may need to log in to your Civitai account in browser settings.
                        </div>
                    </div>
                </div>
            `;
            
            // Show the warning message
            const buttonsContainer = document.querySelector('#detailsStep .modal-actions');
            if (buttonsContainer) {
                // Remove existing warning if any
                const existingWarning = document.getElementById('earlyAccessWarning');
                if (existingWarning) {
                    existingWarning.remove();
                }
                
                // Add new warning
                const warningContainer = document.createElement('div');
                warningContainer.id = 'earlyAccessWarning';
                warningContainer.innerHTML = warningMessage;
                buttonsContainer.parentNode.insertBefore(warningContainer, buttonsContainer);
            }
        }
        
        // Update Next button state based on missing LoRAs
        this.updateNextButtonState();
    }
    
    updateNextButtonState() {
        const nextButton = document.querySelector('#detailsStep .primary-btn');
        if (!nextButton) return;
        
        // Always clean up previous warnings first
        const existingWarning = document.getElementById('deletedLorasWarning');
        if (existingWarning) {
            existingWarning.remove();
        }
        
        // Count deleted LoRAs
        const deletedLoras = this.recipeData.loras.filter(lora => lora.isDeleted).length;
        
        // If we have deleted LoRAs, show a warning and update button text
        if (deletedLoras > 0) {
            // Create a new warning container above the buttons
            const buttonsContainer = document.querySelector('#detailsStep .modal-actions') || nextButton.parentNode;
            const warningContainer = document.createElement('div');
            warningContainer.id = 'deletedLorasWarning';
            warningContainer.className = 'deleted-loras-warning';
            
            // Create warning message
            warningContainer.innerHTML = `
                <div class="warning-icon"><i class="fas fa-exclamation-triangle"></i></div>
                <div class="warning-content">
                    <div class="warning-title">${deletedLoras} LoRA(s) have been deleted from Civitai</div>
                    <div class="warning-text">These LoRAs cannot be downloaded. If you continue, they will remain in the recipe but won't be included when used.</div>
                </div>
            `;
            
            // Insert before the buttons container
            buttonsContainer.parentNode.insertBefore(warningContainer, buttonsContainer);
        }
            
        // If we have missing LoRAs (not deleted), show "Download Missing LoRAs"
        // Otherwise show "Save Recipe"
        const missingNotDeleted = this.recipeData.loras.filter(
            lora => !lora.existsLocally && !lora.isDeleted
        ).length;
        
        if (missingNotDeleted > 0) {
            nextButton.textContent = 'Download Missing LoRAs';
        } else {
            nextButton.textContent = 'Save Recipe';
        }
    }

    handleRecipeNameChange(event) {
        this.recipeName = event.target.value.trim();
    }

    addTag() {
        const tagInput = document.getElementById('tagInput');
        const tag = tagInput.value.trim();
        
        if (!tag) return;
        
        if (!this.recipeTags.includes(tag)) {
            this.recipeTags.push(tag);
            this.updateTagsDisplay();
        }
        
        tagInput.value = '';
    }
    
    removeTag(tag) {
        this.recipeTags = this.recipeTags.filter(t => t !== tag);
        this.updateTagsDisplay();
    }
    
    updateTagsDisplay() {
        const tagsContainer = document.getElementById('tagsContainer');
        
        if (this.recipeTags.length === 0) {
            tagsContainer.innerHTML = '<div class="empty-tags">No tags added</div>';
            return;
        }
        
        tagsContainer.innerHTML = this.recipeTags.map(tag => `
            <div class="recipe-tag">
                ${tag}
                <i class="fas fa-times" onclick="importManager.removeTag('${tag}')"></i>
            </div>
        `).join('');
    }

    proceedFromDetails() {
        // Validate recipe name
        if (!this.recipeName) {
            showToast('Please enter a recipe name', 'error');
            return;
        }
        
        // Automatically mark all deleted LoRAs as excluded
        if (this.recipeData && this.recipeData.loras) {
            this.recipeData.loras.forEach(lora => {
                if (lora.isDeleted) {
                    lora.exclude = true;
                }
            });
        }
        
        // Update missing LoRAs list to exclude deleted LoRAs
        this.missingLoras = this.recipeData.loras.filter(lora => 
            !lora.existsLocally && !lora.isDeleted);
            
        // Check for early access loras and show warning if any exist
        const earlyAccessLoras = this.missingLoras.filter(lora => lora.isEarlyAccess);
        if (earlyAccessLoras.length > 0) {
            // Show a warning about early access loras
            const warningMessage = `
                <div class="early-access-warning">
                    <div class="warning-icon"><i class="fas fa-clock"></i></div>
                    <div class="warning-content">
                        <div class="warning-title">${earlyAccessLoras.length} LoRA(s) require Early Access</div>
                        <div class="warning-text">
                            These LoRAs require a payment to access. Download will fail if you haven't purchased access.
                            You may need to log in to your Civitai account in browser settings.
                        </div>
                    </div>
                </div>
            `;
            
            // Show the warning message
            const buttonsContainer = document.querySelector('#detailsStep .modal-actions');
            if (buttonsContainer) {
                // Remove existing warning if any
                const existingWarning = document.getElementById('earlyAccessWarning');
                if (existingWarning) {
                    existingWarning.remove();
                }
                
                // Add new warning
                const warningContainer = document.createElement('div');
                warningContainer.id = 'earlyAccessWarning';
                warningContainer.innerHTML = warningMessage;
                buttonsContainer.parentNode.insertBefore(warningContainer, buttonsContainer);
            }
        }
        
        // If we have downloadable missing LoRAs, go to location step
        if (this.missingLoras.length > 0) {
            // Store only downloadable LoRAs for the download step
            this.downloadableLoRAs = this.missingLoras;
            this.proceedToLocation();
        } else {
            // Otherwise, save the recipe directly
            this.saveRecipe();
        }
    }

    async proceedToLocation() {
        
        // Show the location step with special handling
        this.showStep('locationStep');
        
        // Double-check after a short delay to ensure the step is visible
        setTimeout(() => {
            const locationStep = document.getElementById('locationStep');
            if (locationStep.style.display !== 'block' || 
                window.getComputedStyle(locationStep).display !== 'block') {
                // Force display again
                locationStep.style.display = 'block';
                
                // If still not visible, try with injected style
                if (window.getComputedStyle(locationStep).display !== 'block') {
                    this.injectedStyles = document.createElement('style');
                    this.injectedStyles.innerHTML = `
                        #locationStep {
                            display: block !important;
                            opacity: 1 !important;
                            visibility: visible !important;
                        }
                    `;
                    document.head.appendChild(this.injectedStyles);
                }
            }
        }, 100);
        
        try {
            // Display missing LoRAs that will be downloaded
            const missingLorasList = document.getElementById('missingLorasList');
            if (missingLorasList && this.downloadableLoRAs.length > 0) {
                // Calculate total size
                const totalSize = this.downloadableLoRAs.reduce((sum, lora) => {
                    return sum + (lora.size ? parseInt(lora.size) : 0);
                }, 0);
                
                // Update total size display
                const totalSizeDisplay = document.getElementById('totalDownloadSize');
                if (totalSizeDisplay) {
                    totalSizeDisplay.textContent = this.formatFileSize(totalSize);
                }
                
                // Update header to include count of missing LoRAs
                const missingLorasHeader = document.querySelector('.summary-header h3');
                if (missingLorasHeader) {
                    missingLorasHeader.innerHTML = `Missing LoRAs <span class="lora-count-badge">(${this.downloadableLoRAs.length})</span> <span id="totalDownloadSize" class="total-size-badge">${this.formatFileSize(totalSize)}</span>`;
                }
                
                // Generate missing LoRAs list
                missingLorasList.innerHTML = this.downloadableLoRAs.map(lora => {
                    const sizeDisplay = lora.size ? this.formatFileSize(lora.size) : 'Unknown size';
                    const baseModel = lora.baseModel ? `<span class="lora-base-model">${lora.baseModel}</span>` : '';
                    const isEarlyAccess = lora.isEarlyAccess;
                    
                    // Early access badge
                    let earlyAccessBadge = '';
                    if (isEarlyAccess) {
                        earlyAccessBadge = `<span class="early-access-badge">
                            <i class="fas fa-clock"></i> Early Access
                        </span>`;
                    }
                    
                    return `
                        <div class="missing-lora-item ${isEarlyAccess ? 'is-early-access' : ''}">
                            <div class="missing-lora-info">
                                <div class="missing-lora-name">${lora.name}</div>
                                ${baseModel}
                                ${earlyAccessBadge}
                            </div>
                            <div class="missing-lora-size">${sizeDisplay}</div>
                        </div>
                    `;
                }).join('');
                
                // Set up toggle for missing LoRAs list
                const toggleBtn = document.getElementById('toggleMissingLorasList');
                if (toggleBtn) {
                    toggleBtn.addEventListener('click', () => {
                        missingLorasList.classList.toggle('collapsed');
                        const icon = toggleBtn.querySelector('i');
                        if (icon) {
                            icon.classList.toggle('fa-chevron-down');
                            icon.classList.toggle('fa-chevron-up');
                        }
                    });
                }
            }
            
            // Fetch LoRA roots
            const rootsResponse = await fetch('/api/lora-roots');
            if (!rootsResponse.ok) {
                throw new Error(`Failed to fetch LoRA roots: ${rootsResponse.status}`);
            }
            
            const rootsData = await rootsResponse.json();
            const loraRoot = document.getElementById('importLoraRoot');
            if (loraRoot) {
                loraRoot.innerHTML = rootsData.roots.map(root => 
                    `<option value="${root}">${root}</option>`
                ).join('');
                
                // Set default lora root if available
                const defaultRoot = getStorageItem('settings', {}).default_loras_root;
                if (defaultRoot && rootsData.roots.includes(defaultRoot)) {
                    loraRoot.value = defaultRoot;
                }
            }
            
            // Fetch folders
            const foldersResponse = await fetch('/api/folders');
            if (!foldersResponse.ok) {
                throw new Error(`Failed to fetch folders: ${foldersResponse.status}`);
            }
            
            const foldersData = await foldersResponse.json();
            const folderBrowser = document.getElementById('importFolderBrowser');
            if (folderBrowser) {
                folderBrowser.innerHTML = foldersData.folders.map(folder => 
                    folder ? `<div class="folder-item" data-folder="${folder}">${folder}</div>` : ''
                ).join('');
            }

            // Initialize folder browser after loading data
            this.initializeFolderBrowser();
        } catch (error) {
            console.error('Error in API calls:', error);
            showToast(error.message, 'error');
        }
    }

    backToUpload() {
        this.showStep('uploadStep');
        
        // Reset file input to ensure it can trigger change events again
        const fileInput = document.getElementById('recipeImageUpload');
        if (fileInput) {
            fileInput.value = '';
        }
        
        // Reset URL input
        const urlInput = document.getElementById('imageUrlInput');
        if (urlInput) {
            urlInput.value = '';
        }
        
        // Clear any previous error messages
        const uploadError = document.getElementById('uploadError');
        if (uploadError) {
            uploadError.textContent = '';
        }
        
        const urlError = document.getElementById('urlError');
        if (urlError) {
            urlError.textContent = '';
        }
    }

    backToDetails() {
        this.showStep('detailsStep');
    }

    async saveRecipe() {
        // Check if we're in download-only mode (for existing recipe)
        const isDownloadOnly = !!this.recipeId;

        console.log("isDownloadOnly", isDownloadOnly);
        
        if (!isDownloadOnly && !this.recipeName) {
            showToast('Please enter a recipe name', 'error');
            return;
        }
        
        try {
            this.loadingManager.showSimpleLoading(isDownloadOnly ? 'Preparing download...' : 'Saving recipe...');
            
            // If we're only downloading LoRAs for an existing recipe, skip the recipe save step
            if (!isDownloadOnly) {
                // First save the recipe
                // Create form data for save request
                const formData = new FormData();
                
                // Handle image data - either from file upload or from URL mode
                if (this.recipeImage) {
                    // File upload mode
                    formData.append('image', this.recipeImage);
                } else if (this.recipeData && this.recipeData.image_base64) {
                    // URL mode with base64 data
                    formData.append('image_base64', this.recipeData.image_base64);
                } else if (this.importMode === 'url') {
                    // Fallback for URL mode - tell backend to fetch the image again
                    const urlInput = document.getElementById('imageUrlInput');
                    if (urlInput && urlInput.value) {
                        formData.append('image_url', urlInput.value);
                    } else {
                        throw new Error('No image data available');
                    }
                } else {
                    throw new Error('No image data available');
                }
                
                formData.append('name', this.recipeName);
                formData.append('tags', JSON.stringify(this.recipeTags));
                
                // Prepare complete metadata including generation parameters
                const completeMetadata = {
                    base_model: this.recipeData.base_model || "",
                    loras: this.recipeData.loras || [],
                    gen_params: this.recipeData.gen_params || {},
                    raw_metadata: this.recipeData.raw_metadata || {}
                };
                
                formData.append('metadata', JSON.stringify(completeMetadata));
            
                // Send save request
                const response = await fetch('/api/recipes/save', {
                    method: 'POST',
                    body: formData
                });
                
                const result = await response.json();

                if (!result.success) {
                    // Handle save error
                    console.error("Failed to save recipe:", result.error);
                    showToast(result.error, 'error');
                    // Close modal
                    modalManager.closeModal('importModal');
                    return;
                }
            }

            // Check if we need to download LoRAs
            let failedDownloads = 0;
            if (this.downloadableLoRAs && this.downloadableLoRAs.length > 0) {
                // For download, we need to validate the target path
                const loraRoot = document.getElementById('importLoraRoot')?.value;
                if (!loraRoot) {
                    throw new Error('Please select a LoRA root directory');
                }
                
                // Build target path
                let targetPath = loraRoot;
                if (this.selectedFolder) {
                    targetPath += '/' + this.selectedFolder;
                }
                
                const newFolder = document.getElementById('importNewFolder')?.value?.trim();
                if (newFolder) {
                    targetPath += '/' + newFolder;
                }
                
                // Set up WebSocket for progress updates
                const wsProtocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
                const ws = new WebSocket(`${wsProtocol}${window.location.host}/ws/fetch-progress`);
                
                // Show enhanced loading with progress details for multiple items
                const updateProgress = this.loadingManager.showDownloadProgress(this.downloadableLoRAs.length);
                
                let completedDownloads = 0;
                let accessFailures = 0;
                let currentLoraProgress = 0;
                
                // Set up progress tracking for current download
                ws.onmessage = (event) => {
                    const data = JSON.parse(event.data);
                    if (data.status === 'progress') {
                        // Update current LoRA progress
                        currentLoraProgress = data.progress;
                        
                        // Get current LoRA name
                        const currentLora = this.downloadableLoRAs[completedDownloads + failedDownloads];
                        const loraName = currentLora ? currentLora.name : '';
                        
                        // Update progress display
                        updateProgress(currentLoraProgress, completedDownloads, loraName);
                        
                        // Add more detailed status messages based on progress
                        if (currentLoraProgress < 3) {
                            this.loadingManager.setStatus(
                                `Preparing download for LoRA ${completedDownloads + failedDownloads + 1}/${this.downloadableLoRAs.length}`
                            );
                        } else if (currentLoraProgress === 3) {
                            this.loadingManager.setStatus(
                                `Downloaded preview for LoRA ${completedDownloads + failedDownloads + 1}/${this.downloadableLoRAs.length}`
                            );
                        } else if (currentLoraProgress > 3 && currentLoraProgress < 100) {
                            this.loadingManager.setStatus(
                                `Downloading LoRA ${completedDownloads + failedDownloads + 1}/${this.downloadableLoRAs.length}`
                            );
                        } else {
                            this.loadingManager.setStatus(
                                `Finalizing LoRA ${completedDownloads + failedDownloads + 1}/${this.downloadableLoRAs.length}`
                            );
                        }
                    }
                };
                
                for (let i = 0; i < this.downloadableLoRAs.length; i++) {
                    const lora = this.downloadableLoRAs[i];
                    
                    // Reset current LoRA progress for new download
                    currentLoraProgress = 0;
                    
                    // Initial status update for new LoRA
                    this.loadingManager.setStatus(`Starting download for LoRA ${i+1}/${this.downloadableLoRAs.length}`);
                    updateProgress(0, completedDownloads, lora.name);
                    
                    try {
                        // Download the LoRA
                        const response = await fetch('/api/download-lora', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({
                                download_url: lora.downloadUrl,
                                model_version_id: lora.modelVersionId,
                                model_hash: lora.hash,
                                lora_root: loraRoot,
                                relative_path: targetPath.replace(loraRoot + '/', '')
                            })
                        });
                        
                        if (!response.ok) {
                            const errorText = await response.text();
                            console.error(`Failed to download LoRA ${lora.name}: ${errorText}`);
                            
                            // Check if this is an early access error (status 401 is the key indicator)
                            if (response.status === 401) {
                                accessFailures++;
                                this.loadingManager.setStatus(
                                    `Failed to download ${lora.name}: Access restricted`
                                );
                            }
                            
                            failedDownloads++;
                            // Continue with next download
                        } else {
                            completedDownloads++;
                            
                            // Update progress to show completion of current LoRA
                            updateProgress(100, completedDownloads, '');
                            
                            if (completedDownloads + failedDownloads < this.downloadableLoRAs.length) {
                                this.loadingManager.setStatus(
                                    `Completed ${completedDownloads}/${this.downloadableLoRAs.length} LoRAs. Starting next download...`
                                );
                            }
                        }
                    } catch (downloadError) {
                        console.error(`Error downloading LoRA ${lora.name}:`, downloadError);
                        failedDownloads++;
                        // Continue with next download
                    }
                }
                
                // Close WebSocket
                ws.close();
                
                // Show appropriate completion message based on results
                if (failedDownloads === 0) {
                    showToast(`All ${completedDownloads} LoRAs downloaded successfully`, 'success');
                } else {
                    if (accessFailures > 0) {
                        showToast(
                            `Downloaded ${completedDownloads} of ${this.downloadableLoRAs.length} LoRAs. ${accessFailures} failed due to access restrictions. Check your API key in settings or early access status.`,
                            'error'
                        );
                    } else {
                        showToast(`Downloaded ${completedDownloads} of ${this.downloadableLoRAs.length} LoRAs`, 'error');
                    }
                }
            }

            // Show success message
            if (isDownloadOnly) {
                if (failedDownloads === 0) {    
                    showToast('LoRAs downloaded successfully', 'success');
                }
            } else {
                showToast(`Recipe "${this.recipeName}" saved successfully`, 'success');
            }
            
            // Close modal
            modalManager.closeModal('importModal');
            
            // Refresh the recipe
            window.recipeManager.loadRecipes(this.recipeId);
            
        } catch (error) {
            console.error('Error:', error);
            showToast(error.message, 'error');
        } finally {
            this.loadingManager.hide();
        }
    }

    initializeFolderBrowser() {
        const folderBrowser = document.getElementById('importFolderBrowser');
        if (!folderBrowser) return;

        // Cleanup existing handler if any
        this.cleanupFolderBrowser();

        // Create new handler
        this.folderClickHandler = (event) => {
            const folderItem = event.target.closest('.folder-item');
            if (!folderItem) return;

            if (folderItem.classList.contains('selected')) {
                folderItem.classList.remove('selected');
                this.selectedFolder = '';
            } else {
                folderBrowser.querySelectorAll('.folder-item').forEach(f => 
                    f.classList.remove('selected'));
                folderItem.classList.add('selected');
                this.selectedFolder = folderItem.dataset.folder;
            }
            
            // Update path display after folder selection
            this.updateTargetPath();
        };

        // Add the new handler
        folderBrowser.addEventListener('click', this.folderClickHandler);
        
        // Add event listeners for path updates
        const loraRoot = document.getElementById('importLoraRoot');
        const newFolder = document.getElementById('importNewFolder');
        
        if (loraRoot) loraRoot.addEventListener('change', this.updateTargetPath);
        if (newFolder) newFolder.addEventListener('input', this.updateTargetPath);
        
        // Update initial path
        this.updateTargetPath();
    }

    cleanupFolderBrowser() {
        if (this.folderClickHandler) {
            const folderBrowser = document.getElementById('importFolderBrowser');
            if (folderBrowser) {
                folderBrowser.removeEventListener('click', this.folderClickHandler);
                this.folderClickHandler = null;
            }
        }
        
        // Remove path update listeners
        const loraRoot = document.getElementById('importLoraRoot');
        const newFolder = document.getElementById('importNewFolder');
        
        if (loraRoot) loraRoot.removeEventListener('change', this.updateTargetPath);
        if (newFolder) newFolder.removeEventListener('input', this.updateTargetPath);
    }
    
    updateTargetPath() {
        const pathDisplay = document.getElementById('importTargetPathDisplay');
        if (!pathDisplay) return;
        
        const loraRoot = document.getElementById('importLoraRoot')?.value || '';
        const newFolder = document.getElementById('importNewFolder')?.value?.trim() || '';
        
        let fullPath = loraRoot || 'Select a LoRA root directory'; 
        
        if (loraRoot) {
            if (this.selectedFolder) {
                fullPath += '/' + this.selectedFolder;
            }
            if (newFolder) {
                fullPath += '/' + newFolder;
            }
        }
    
        pathDisplay.innerHTML = `<span class="path-text">${fullPath}</span>`;
    }

    showStep(stepId) {
        
        // First, remove any injected styles to prevent conflicts
        this.removeInjectedStyles();
        
        // Hide all steps first
        document.querySelectorAll('.import-step').forEach(step => {
            step.style.display = 'none';
        });
        
        // Show target step with a monitoring mechanism
        const targetStep = document.getElementById(stepId);
        if (targetStep) {
            // Use direct style setting
            targetStep.style.display = 'block';
            
            // For the locationStep specifically, we need additional measures
            if (stepId === 'locationStep') {
                // Create a more persistent style to override any potential conflicts
                this.injectedStyles = document.createElement('style');
                this.injectedStyles.innerHTML = `
                    #locationStep {
                        display: block !important;
                        opacity: 1 !important;
                        visibility: visible !important;
                    }
                `;
                document.head.appendChild(this.injectedStyles);
                
                // Force layout recalculation
                targetStep.offsetHeight;
                
                // Set up a monitor to ensure the step remains visible
                setTimeout(() => {
                    if (targetStep.style.display !== 'block') {
                        targetStep.style.display = 'block';
                    }
                    
                    // Check dimensions again after a short delay
                    const newRect = targetStep.getBoundingClientRect();
                }, 50);
            }
            
            // Scroll modal content to top
            const modalContent = document.querySelector('#importModal .modal-content');
            if (modalContent) {
                modalContent.scrollTop = 0;
            }
        }
    }

    // Add a helper method to format file sizes
    formatFileSize(bytes) {
        if (!bytes || isNaN(bytes)) return '';
        
        const sizes = ['B', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(1024));
        return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i];
    }

    // Add this method to ensure the modal is fully visible and initialized
    ensureModalVisible() {
        const importModal = document.getElementById('importModal');
        if (!importModal) {
            console.error('Import modal element not found');
            return false;
        }
        
        // Check if modal is actually visible
        const modalDisplay = window.getComputedStyle(importModal).display;
        if (modalDisplay !== 'block') {
            console.error('Import modal is not visible, display: ' + modalDisplay);
            return false;
        }
        
        return true;
    }

    // Add new method to handle downloading missing LoRAs from a recipe
    downloadMissingLoras(recipeData, recipeId) {
        // Store the recipe data and ID
        this.recipeData = recipeData;
        this.recipeId = recipeId;
        
        // Show the location step directly
        this.showImportModal(recipeData, recipeId);
        this.proceedToLocation();
        
        // Update the modal title to reflect we're downloading for an existing recipe
        const modalTitle = document.querySelector('#importModal h2');
        if (modalTitle) {
            modalTitle.textContent = 'Download Missing LoRAs';
        }
        
        // Update the save button text
        const saveButton = document.querySelector('#locationStep .primary-btn');
        if (saveButton) {
            saveButton.textContent = 'Download Missing LoRAs';
        }
        
        // Hide the back button since we're skipping steps
        const backButton = document.querySelector('#locationStep .secondary-btn');
        if (backButton) {
            backButton.style.display = 'none';
        }
    }
}