import { withCacheBuster, clamp } from './modules/utils.js';
import { createGallery } from './modules/gallery.js';
import { createReferenceSlotManager } from './modules/referenceSlots.js';
import { setupHelpPopups } from './modules/popup.js';
import { extractMetadataFromBlob } from './modules/metadata.js';
import { createTemplateGallery } from './modules/templateGallery.js';
import { i18n } from './modules/i18n.js';

const SETTINGS_STORAGE_KEY = 'gemini-image-app-settings';
const ZOOM_STEP = 0.1;
const MIN_ZOOM = 0.4;
const MAX_ZOOM = 4;
const SIDEBAR_MIN_WIDTH = 260;
const SIDEBAR_MAX_WIDTH = 520;

const infoContent = {
    title: 'Thông tin',
    sections: [
        {
            heading: 'Liên hệ',
            items: [
                'Người tạo: Phạm Hưng',
                'Group: <a href="https://www.facebook.com/groups/stablediffusion.vn/" target="_blank" rel="noreferrer">SDVN - Cộng đồng AI Art</a>',
                'Website: <a href="https://sdvn.vn" target="_blank" rel="noreferrer">sdvn.vn</a>',
            ],
        },
    ],
};

const docsContent = {
    title: 'Phím tắt và mẹo',
    sections: [
        {
            heading: 'Phím tắt',
            items: [
                'Ctrl/Cmd + Enter → Tạo ảnh mới',
                'D → Tải ảnh hiện tại',
                'T → Mở bảng template',
                'Space → Reset zoom/pan vùng hiển thị ảnh',
                'Esc → Đóng popup thông tin/docs',
            ],
        },
        {
            heading: 'Thao tác nhanh',
            items: [
                'Kéo ảnh từ lịch sử vào ô tham chiếu để tái sử dụng',
                'Tùy chỉnh tỉ lệ và độ phân giải trước khi nhấn Generate',
                'API key và prompt được lưu để lần sau không phải nhập lại',
            ],
        },
    ],
};

const helpContent = {
    title: 'Thông tin & Hướng dẫn',
    sections: [...infoContent.sections, ...docsContent.sections],
};

const POPUP_CONTENT = {
    help: helpContent,
};

document.addEventListener('DOMContentLoaded', () => {
    const generateBtn = document.getElementById('generate-btn');
    const promptInput = document.getElementById('prompt');
    const aspectRatioInput = document.getElementById('aspect-ratio');
    const resolutionInput = document.getElementById('resolution');
    const apiKeyInput = document.getElementById('api-key');
    const openApiSettingsBtn = document.getElementById('open-api-settings-btn');
    const apiSettingsOverlay = document.getElementById('api-settings-overlay');
    const apiSettingsCloseBtn = document.getElementById('api-settings-close');
    const saveApiSettingsBtn = document.getElementById('save-api-settings-btn');
    const apiKeyToggleBtn = document.getElementById('toggle-api-key-visibility');
    const apiKeyEyeIcon = apiKeyToggleBtn?.querySelector('.icon-eye');
    const apiKeyEyeOffIcon = apiKeyToggleBtn?.querySelector('.icon-eye-off');

    const placeholderState = document.getElementById('placeholder-state');
    const loadingState = document.getElementById('loading-state');
    const errorState = document.getElementById('error-state');
    const templateGalleryState = document.getElementById('template-gallery-state');
    const templateGalleryContainer = document.getElementById('template-gallery-container');
    const resultState = document.getElementById('result-state');
    const errorText = document.getElementById('error-text');
    const generatedImage = document.getElementById('generated-image');
    const downloadLink = document.getElementById('download-link');
    const galleryGrid = document.getElementById('gallery-grid');
    const imageInputGrid = document.getElementById('image-input-grid');
    const imageDisplayArea = document.querySelector('.image-display-area');
    const canvasToolbar = document.querySelector('.canvas-toolbar');
    const sidebar = document.querySelector('.sidebar');
    const resizeHandle = document.querySelector('.sidebar-resize-handle');

    // Refine Prompt Elements
    const refinePromptBtn = document.getElementById('refine-prompt-btn');
    const refineModal = document.getElementById('refine-modal');
    const closeRefineModalBtn = document.getElementById('close-refine-modal');
    const refineInstructionInput = document.getElementById('refine-instruction');
    const confirmRefineBtn = document.getElementById('confirm-refine-btn');

    let zoomLevel = 1;
    let panOffset = { x: 0, y: 0 };
    let isPanning = false;
    let lastPointer = { x: 0, y: 0 };
    let hasGeneratedImage = false; // Track if image exists

    const slotManager = createReferenceSlotManager(imageInputGrid, {
        onChange: persistSettings,
    });

    const templateGallery = createTemplateGallery({
        container: templateGalleryContainer,
        onSelectTemplate: (template) => {
            // Fill prompt field with template prompt (language-aware)
            if (template.prompt) {
                promptInput.value = i18n.getText(template.prompt);
                persistSettings();
            }
            // Stay in template gallery view - don't auto-switch
            // User will switch view by selecting image from history or generating
        }
    });

    const gallery = createGallery({
        galleryGrid,
        onSelect: async ({ imageUrl, metadata }) => {
            displayImage(imageUrl);
            if (metadata) {
                applyMetadata(metadata);
            }
        }
    });

    setupHelpPopups({
        buttonsSelector: '[data-popup-target]',
        overlayId: 'popup-overlay',
        titleId: 'popup-title',
        bodyId: 'popup-body',
        closeBtnId: 'popup-close',
        content: POPUP_CONTENT,
    });

    const openApiSettings = () => {
        if (!apiSettingsOverlay) return;
        apiSettingsOverlay.classList.remove('hidden');
        apiKeyInput?.focus();
    };

    const closeApiSettings = () => {
        if (!apiSettingsOverlay) return;
        apiSettingsOverlay.classList.add('hidden');
    };

    openApiSettingsBtn?.addEventListener('click', openApiSettings);
    apiSettingsCloseBtn?.addEventListener('click', closeApiSettings);
    saveApiSettingsBtn?.addEventListener('click', closeApiSettings);

    apiSettingsOverlay?.addEventListener('click', (event) => {
        if (event.target === apiSettingsOverlay) {
            closeApiSettings();
        }
    });

    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && apiSettingsOverlay && !apiSettingsOverlay.classList.contains('hidden')) {
            event.preventDefault();
            closeApiSettings();
        }
    });

    const savedSettings = loadSettings();
    slotManager.initialize(savedSettings.referenceImages || []);

    apiKeyInput.addEventListener('input', persistSettings);
    let isApiKeyVisible = false;

    const refreshApiKeyVisibility = () => {
        if (!apiKeyInput) return;
        apiKeyInput.type = isApiKeyVisible ? 'text' : 'password';
        if (apiKeyToggleBtn) {
            apiKeyToggleBtn.setAttribute('aria-pressed', String(isApiKeyVisible));
            apiKeyToggleBtn.setAttribute('aria-label', isApiKeyVisible ? 'Ẩn API key' : 'Hiện API key');
        }
        apiKeyEyeIcon?.classList.toggle('hidden', isApiKeyVisible);
        apiKeyEyeOffIcon?.classList.toggle('hidden', !isApiKeyVisible);
    };

    if (apiKeyToggleBtn) {
        apiKeyToggleBtn.addEventListener('click', () => {
            isApiKeyVisible = !isApiKeyVisible;
            refreshApiKeyVisibility();
        });
    }
    refreshApiKeyVisibility();
    promptInput.addEventListener('input', persistSettings);
    aspectRatioInput.addEventListener('change', persistSettings);
    resolutionInput.addEventListener('change', persistSettings);

    generateBtn.addEventListener('click', async () => {
        const prompt = promptInput.value.trim();
        const aspectRatio = aspectRatioInput.value;
        const resolution = resolutionInput.value;
        const apiKey = apiKeyInput.value.trim();

        if (!apiKey) {
            openApiSettings();
            return;
        }

        if (!prompt) {
            showError('Please enter a prompt.');
            return;
        }

        setViewState('loading');
        generateBtn.disabled = true;

        try {
            const formData = buildGenerateFormData({
                prompt,
                aspect_ratio: aspectRatio,
                resolution,
                api_key: apiKey,
            });

            const response = await fetch('/generate', {
                method: 'POST',
                body: formData,
            });

            const data = await response.json();

            if (!response.ok) {
                throw new Error(data.error || 'Failed to generate image');
            }

            if (data.image) {
                displayImage(data.image, data.image_data);
                gallery.load();
            } else {
                throw new Error('No image data received');
            }
        } catch (error) {
            showError(error.message);
        } finally {
            generateBtn.disabled = false;
        }
    });

    document.addEventListener('keydown', handleGenerateShortcut);
    document.addEventListener('keydown', handleResetShortcut);
    document.addEventListener('keydown', handleDownloadShortcut);
    document.addEventListener('keydown', handleTemplateShortcut);

    if (imageDisplayArea) {
        imageDisplayArea.addEventListener('wheel', handleCanvasWheel, { passive: false });
        imageDisplayArea.addEventListener('pointerdown', handleCanvasPointerDown);
        
        // Drag and drop support
        imageDisplayArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            imageDisplayArea.classList.add('drag-over');
        });

        imageDisplayArea.addEventListener('dragleave', (e) => {
            e.preventDefault();
            imageDisplayArea.classList.remove('drag-over');
        });

        imageDisplayArea.addEventListener('drop', async (e) => {
            e.preventDefault();
            imageDisplayArea.classList.remove('drag-over');
            
            const files = e.dataTransfer?.files;
            if (files && files.length > 0) {
                const file = files[0];
                if (file.type.startsWith('image/')) {
                    try {
                        // Display image immediately
                        const objectUrl = URL.createObjectURL(file);
                        displayImage(objectUrl);
                        
                        // Extract and apply metadata
                        const metadata = await extractMetadataFromBlob(file);
                        if (metadata) {
                            applyMetadata(metadata);
                        }
                    } catch (error) {
                        console.error('Error handling dropped image:', error);
                    }
                }
            }
            else {
                const imageUrl = e.dataTransfer?.getData('text/uri-list')
                    || e.dataTransfer?.getData('text/plain');
                if (imageUrl) {
                    await handleCanvasDropUrl(imageUrl.trim());
                }
            }
        });
    }

    if (canvasToolbar) {
        canvasToolbar.addEventListener('click', handleCanvasToolbarClick);
    }

    // Refine Prompt Logic
    if (refinePromptBtn) {
        refinePromptBtn.addEventListener('click', () => {
            refineInstructionInput.value = ''; // Clear previous instruction
            refineModal.classList.remove('hidden');
            refineInstructionInput.focus();
        });
    }

    if (closeRefineModalBtn) {
        closeRefineModalBtn.addEventListener('click', () => {
            refineModal.classList.add('hidden');
        });
    }

    // Close modal when clicking outside
    if (refineModal) {
        refineModal.addEventListener('click', (e) => {
            if (e.target === refineModal) {
                refineModal.classList.add('hidden');
            }
        });
    }

    const refineLoading = document.getElementById('refine-loading');

    if (confirmRefineBtn && refineLoading) {
        confirmRefineBtn.addEventListener('click', async () => {
            const instruction = refineInstructionInput.value.trim();
            const currentPrompt = promptInput.value.trim();
            const apiKey = apiKeyInput.value.trim();

            if (!instruction) return;
            if (!apiKey) {
                alert('Please enter your API Key first.');
                return;
            }

            // Show loading state
            confirmRefineBtn.classList.add('hidden');
            refineLoading.classList.remove('hidden');

            try {
                const response = await fetch('/refine_prompt', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        current_prompt: currentPrompt,
                        instruction: instruction,
                        api_key: apiKey
                    }),
                });

                const data = await response.json();

                if (data.error) {
                    throw new Error(data.error);
                }

                if (data.refined_prompt) {
                    promptInput.value = data.refined_prompt;
                    persistSettings(); // Save the new prompt
                    refineModal.classList.add('hidden');
                }
            } catch (error) {
                alert('Failed to refine prompt: ' + error.message);
            } finally {
                // Reset state
                confirmRefineBtn.classList.remove('hidden');
                refineLoading.classList.add('hidden');
            }
        });
    }

    // Create Template Logic
    const createTemplateBtn = document.getElementById('create-template-btn');
    const createTemplateModal = document.getElementById('create-template-modal');
    const closeTemplateModalBtn = document.getElementById('close-template-modal');
    const saveTemplateBtn = document.getElementById('save-template-btn');
    
    const templateTitleInput = document.getElementById('template-title');
    const templatePromptInput = document.getElementById('template-prompt');
    const templateModeSelect = document.getElementById('template-mode');
    const templateCategorySelect = document.getElementById('template-category-select');
    const templateCategoryInput = document.getElementById('template-category-input');
    const templatePreviewDropzone = document.getElementById('template-preview-dropzone');
    const templatePreviewImg = document.getElementById('template-preview-img');
    const dropzonePlaceholder = document.querySelector('.dropzone-placeholder');
    const templateTagList = document.getElementById('template-tag-list');
    const templateTagInput = document.getElementById('template-tags-input');

    let currentPreviewFile = null;
    let currentPreviewUrl = null;
    let editingTemplate = null; // Track if we're editing an existing template
    let editingTemplateSource = null;
    let editingBuiltinIndex = null;
    const TEMPLATE_TAG_LIMIT = 8;
    let templateTags = [];

    function normalizeRawTags(raw) {
        if (!raw) return [];
        if (Array.isArray(raw)) {
            return raw.map(tag => typeof tag === 'string' ? tag.trim() : '').filter(Boolean);
        }
        if (typeof raw === 'string') {
            return raw.split(',').map(tag => tag.trim()).filter(Boolean);
        }
        return [];
    }

    function renderTemplateTags() {
        if (!templateTagList) return;
        templateTagList.innerHTML = '';
        templateTags.forEach(tag => {
            const chip = document.createElement('span');
            chip.className = 'template-tag-chip';

            const textSpan = document.createElement('span');
            textSpan.className = 'template-tag-chip-text';
            textSpan.textContent = tag;
            chip.appendChild(textSpan);

            const removeBtn = document.createElement('button');
            removeBtn.type = 'button';
            removeBtn.className = 'template-tag-remove';
            removeBtn.setAttribute('aria-label', `Remove ${tag}`);
            removeBtn.innerHTML = '&times;';
            removeBtn.addEventListener('click', () => {
                removeTemplateTag(tag);
            });
            chip.appendChild(removeBtn);

            templateTagList.appendChild(chip);
        });
    }

    function setTemplateTags(raw) {
        const normalized = normalizeRawTags(raw);
        templateTags = normalized.slice(0, TEMPLATE_TAG_LIMIT);
        renderTemplateTags();
    }

    function addTemplateTag(value) {
        if (!value) return;
        const normalized = value.trim();
        if (!normalized || templateTags.length >= TEMPLATE_TAG_LIMIT) return;
        const exists = templateTags.some(tag => tag.toLowerCase() === normalized.toLowerCase());
        if (exists) return;
        templateTags = [...templateTags, normalized];
        renderTemplateTags();
    }

    function removeTemplateTag(tagToRemove) {
        templateTags = templateTags.filter(tag => tag.toLowerCase() !== tagToRemove.toLowerCase());
        renderTemplateTags();
    }

    function flushTemplateTagInput() {
        if (!templateTagInput) return;
        const raw = templateTagInput.value;
        if (!raw.trim()) return;
        const parts = raw.split(',').map(part => part.trim()).filter(Boolean);
        parts.forEach(part => addTemplateTag(part));
        templateTagInput.value = '';
    }

    if (templateTagInput) {
        templateTagInput.addEventListener('keydown', (event) => {
            if (event.key === 'Enter' || event.key === ',') {
                event.preventDefault();
                flushTemplateTagInput();
            }
        });
        templateTagInput.addEventListener('blur', () => {
            flushTemplateTagInput();
        });
    }

    // Global function for opening edit modal (called from templateGallery.js)
    window.openEditTemplateModal = async function(template) {
        editingTemplate = template;
        editingTemplateSource = template.isUserTemplate ? 'user' : 'builtin';
        editingBuiltinIndex = editingTemplateSource === 'builtin' ? template.builtinTemplateIndex : null;
        
        // Pre-fill with template data
        templateTitleInput.value = template.title || '';
        templatePromptInput.value = template.prompt || '';
        templateModeSelect.value = template.mode || 'generate';
        templateCategoryInput.classList.add('hidden');
        templateCategoryInput.value = '';

        // Populate categories
        try {
            const response = await fetch('/prompts');
            const data = await response.json();
            
            if (data.prompts) {
                const categories = new Set();
                data.prompts.forEach(t => {
                    if (t.category) {
                        const categoryText = typeof t.category === 'string' 
                            ? t.category 
                            : (t.category.vi || t.category.en || '');
                        if (categoryText) categories.add(categoryText);
                    }
                });
                
                templateCategorySelect.innerHTML = '';
                const sortedCategories = Array.from(categories).sort();
                sortedCategories.forEach(cat => {
                    const option = document.createElement('option');
                    option.value = cat;
                    option.textContent = cat;
                    templateCategorySelect.appendChild(option);
                });
                
                const newOption = document.createElement('option');
                newOption.value = 'new';
                newOption.textContent = '+ New Category';
                templateCategorySelect.appendChild(newOption);
                
                // Set to template's category
                const templateCategory = typeof template.category === 'string' 
                    ? template.category 
                    : (template.category.vi || template.category.en || '');
                templateCategorySelect.value = templateCategory || 'User';
            }
        } catch (error) {
            console.error('Failed to load categories:', error);
        }

        // Set preview image
        if (template.preview) {
            templatePreviewImg.src = template.preview;
            templatePreviewImg.classList.remove('hidden');
            dropzonePlaceholder.classList.add('hidden');
            currentPreviewUrl = template.preview;
        } else {
            templatePreviewImg.src = '';
            templatePreviewImg.classList.add('hidden');
            dropzonePlaceholder.classList.remove('hidden');
            currentPreviewUrl = null;
        }
        currentPreviewFile = null;

        setTemplateTags(template.tags || []);
        if (templateTagInput) {
            templateTagInput.value = '';
        }

        // Update button text
        saveTemplateBtn.innerHTML = '<span>Update Template</span><div class="btn-shine"></div>';
        
        createTemplateModal.classList.remove('hidden');
    };

    // Global function for opening create modal with empty values (called from templateGallery.js)
    window.openCreateTemplateModal = async function() {
        editingTemplate = null;
        editingTemplateSource = 'user';
        editingBuiltinIndex = null;
        
        setTemplateTags([]);
        if (templateTagInput) {
            templateTagInput.value = '';
        }

        // Clear all fields
        templateTitleInput.value = '';
        templatePromptInput.value = '';
        templateModeSelect.value = 'generate';
        templateCategoryInput.classList.add('hidden');
        templateCategoryInput.value = '';

        // Populate categories
        try {
            const response = await fetch('/prompts');
            const data = await response.json();
            
            if (data.prompts) {
                const categories = new Set();
                data.prompts.forEach(t => {
                    if (t.category) {
                        const categoryText = typeof t.category === 'string' 
                            ? t.category 
                            : (t.category.vi || t.category.en || '');
                        if (categoryText) categories.add(categoryText);
                    }
                });
                
                templateCategorySelect.innerHTML = '';
                const sortedCategories = Array.from(categories).sort();
                sortedCategories.forEach(cat => {
                    const option = document.createElement('option');
                    option.value = cat;
                    option.textContent = cat;
                    templateCategorySelect.appendChild(option);
                });
                
                const newOption = document.createElement('option');
                newOption.value = 'new';
                newOption.textContent = '+ New Category';
                templateCategorySelect.appendChild(newOption);
                
                if (sortedCategories.includes('User')) {
                    templateCategorySelect.value = 'User';
                } else if (sortedCategories.length > 0) {
                    templateCategorySelect.value = sortedCategories[0];
                }
            }
        } catch (error) {
            console.error('Failed to load categories:', error);
        }

        // Clear preview image
        templatePreviewImg.src = '';
        templatePreviewImg.classList.add('hidden');
        dropzonePlaceholder.classList.remove('hidden');
        currentPreviewUrl = null;
        currentPreviewFile = null;

        // Update button text
        saveTemplateBtn.innerHTML = '<span>Save Template</span><div class="btn-shine"></div>';
        
        createTemplateModal.classList.remove('hidden');
    };

    if (createTemplateBtn) {
        createTemplateBtn.addEventListener('click', async () => {
            // Reset editing state
            editingTemplate = null;
            editingTemplateSource = 'user';
            editingBuiltinIndex = null;
            
            // Pre-fill data
            templateTitleInput.value = '';
            templatePromptInput.value = promptInput.value;
            templateModeSelect.value = 'generate';
            templateCategoryInput.classList.add('hidden');
            templateCategoryInput.value = '';

            // Populate categories dynamically from template library
            try {
                const response = await fetch('/prompts');
                const data = await response.json();
                
                if (data.prompts) {
                    // Extract unique categories
                    const categories = new Set();
                    data.prompts.forEach(template => {
                        if (template.category) {
                            // Handle both string and object categories
                            const categoryText = typeof template.category === 'string' 
                                ? template.category 
                                : (template.category.vi || template.category.en || '');
                            if (categoryText) {
                                categories.add(categoryText);
                            }
                        }
                    });
                    
                    // Clear existing options except "new"
                    templateCategorySelect.innerHTML = '';
                    
                    // Add sorted categories
                    const sortedCategories = Array.from(categories).sort();
                    sortedCategories.forEach(cat => {
                        const option = document.createElement('option');
                        option.value = cat;
                        option.textContent = cat;
                        templateCategorySelect.appendChild(option);
                    });
                    
                    // Add "new category" option at the end
                    const newOption = document.createElement('option');
                    newOption.value = 'new';
                    newOption.textContent = '+ New Category';
                    templateCategorySelect.appendChild(newOption);
                    
                    // Set default to first category or "User" if it exists
                    if (sortedCategories.includes('User')) {
                        templateCategorySelect.value = 'User';
                    } else if (sortedCategories.length > 0) {
                        templateCategorySelect.value = sortedCategories[0];
                    }
                }
            } catch (error) {
                console.error('Failed to load categories:', error);
                // Fallback to default categories
                templateCategorySelect.innerHTML = `
                    <option value="User">User</option>
                    <option value="new">+ New Category</option>
                `;
                templateCategorySelect.value = 'User';
            }

            // Set preview image from current generated image
            if (generatedImage.src && !generatedImage.src.endsWith('placeholder.png')) {
                templatePreviewImg.src = generatedImage.src;
                templatePreviewImg.classList.remove('hidden');
                dropzonePlaceholder.classList.add('hidden');
                currentPreviewUrl = generatedImage.src;
            } else {
                templatePreviewImg.src = '';
                templatePreviewImg.classList.add('hidden');
                dropzonePlaceholder.classList.remove('hidden');
                currentPreviewUrl = null;
            }
            currentPreviewFile = null;

            setTemplateTags([]);
            if (templateTagInput) {
                templateTagInput.value = '';
            }

            // Update button text
            saveTemplateBtn.innerHTML = '<span>Save Template</span><div class="btn-shine"></div>';

            createTemplateModal.classList.remove('hidden');
        });
    }

    if (closeTemplateModalBtn) {
        closeTemplateModalBtn.addEventListener('click', () => {
            createTemplateModal.classList.add('hidden');
            editingTemplate = null;
            editingTemplateSource = null;
            editingBuiltinIndex = null;
        });
    }

    // Category select logic
    if (templateCategorySelect) {
        templateCategorySelect.addEventListener('change', (e) => {
            if (e.target.value === 'new') {
                templateCategoryInput.classList.remove('hidden');
                templateCategoryInput.focus();
            } else {
                templateCategoryInput.classList.add('hidden');
            }
        });
    }

    // Drag and drop for preview
    const templatePreviewUrlInput = document.getElementById('template-preview-url');
    let isUrlInputMode = false;

    if (templatePreviewDropzone) {
        // Click to toggle URL input mode
        templatePreviewDropzone.addEventListener('click', (e) => {
            // Don't toggle if clicking on the input itself
            if (e.target === templatePreviewUrlInput) return;
            
            if (!isUrlInputMode) {
                // Switch to URL input mode
                isUrlInputMode = true;
                templatePreviewImg.classList.add('hidden');
                dropzonePlaceholder.classList.add('hidden');
                templatePreviewUrlInput.classList.remove('hidden');
                templatePreviewUrlInput.focus();
            }
        });

        // Handle URL input
        if (templatePreviewUrlInput) {
            templatePreviewUrlInput.addEventListener('blur', async () => {
                const url = templatePreviewUrlInput.value.trim();
                if (url) {
                    try {
                        // Try to load the image from URL
                        const img = new Image();
                        img.onload = () => {
                            templatePreviewImg.src = url;
                            templatePreviewImg.classList.remove('hidden');
                            dropzonePlaceholder.classList.add('hidden');
                            templatePreviewUrlInput.classList.add('hidden');
                            currentPreviewUrl = url;
                            currentPreviewFile = null;
                            isUrlInputMode = false;
                        };
                        img.onerror = () => {
                            alert('Failed to load image from URL. Please check the URL and try again.');
                            templatePreviewUrlInput.focus();
                        };
                        img.src = url;
                    } catch (error) {
                        alert('Invalid image URL');
                        templatePreviewUrlInput.focus();
                    }
                } else {
                    // If empty, go back to placeholder
                    isUrlInputMode = false;
                    templatePreviewUrlInput.classList.add('hidden');
                    dropzonePlaceholder.classList.remove('hidden');
                }
            });

            templatePreviewUrlInput.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    templatePreviewUrlInput.blur();
                } else if (e.key === 'Escape') {
                    templatePreviewUrlInput.value = '';
                    templatePreviewUrlInput.blur();
                }
            });
        }
        
        templatePreviewDropzone.addEventListener('dragover', (e) => {
            e.preventDefault();
            templatePreviewDropzone.classList.add('drag-over');
        });

        templatePreviewDropzone.addEventListener('dragleave', (e) => {
            e.preventDefault();
            templatePreviewDropzone.classList.remove('drag-over');
        });

        templatePreviewDropzone.addEventListener('drop', (e) => {
            e.preventDefault();
            templatePreviewDropzone.classList.remove('drag-over');
            
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                const file = files[0];
                if (file.type.startsWith('image/')) {
                    currentPreviewFile = file;
                    const objectUrl = URL.createObjectURL(file);
                    templatePreviewImg.src = objectUrl;
                    templatePreviewImg.classList.remove('hidden');
                    dropzonePlaceholder.classList.add('hidden');
                    templatePreviewUrlInput.classList.add('hidden');
                    isUrlInputMode = false;
                }
            }
        });
    }

    // Save template
    if (saveTemplateBtn) {
        saveTemplateBtn.addEventListener('click', async () => {
            const title = templateTitleInput.value.trim();
            const prompt = templatePromptInput.value.trim();
            const mode = templateModeSelect.value;
            let category = templateCategorySelect.value;
            
            if (category === 'new') {
                category = templateCategoryInput.value.trim();
            }

            if (!title) {
                alert('Please enter a title for the template.');
                return;
            }
            if (!prompt) {
                alert('Please enter a prompt.');
                return;
            }
            if (!category) {
                alert('Please select or enter a category.');
                return;
            }

            saveTemplateBtn.disabled = true;
            saveTemplateBtn.textContent = editingTemplate ? 'Updating...' : 'Saving...';

            try {
                const formData = new FormData();
                formData.append('title', title);
                formData.append('prompt', prompt);
                formData.append('mode', mode);
                formData.append('category', category);
                formData.append('tags', JSON.stringify(templateTags));

                if (currentPreviewFile) {
                    formData.append('preview', currentPreviewFile);
                } else if (currentPreviewUrl) {
                    formData.append('preview_path', currentPreviewUrl);
                }

                // If editing, add the template index
                const endpoint = editingTemplate ? '/update_template' : '/save_template';
                if (editingTemplate) {
                    if (editingTemplateSource === 'user') {
                        formData.append('template_index', editingTemplate.userTemplateIndex);
                    } else if (editingTemplateSource === 'builtin' && editingBuiltinIndex !== null) {
                        formData.append('builtin_index', editingBuiltinIndex);
                    }
                }

                const response = await fetch(endpoint, {
                    method: 'POST',
                    body: formData
                });

                const data = await response.json();

                if (data.error) {
                    throw new Error(data.error);
                }

                // Success
                createTemplateModal.classList.add('hidden');
                
                // Reload template gallery
                await templateGallery.load();
                
                // Reset editing state
                editingTemplate = null;
                editingTemplateSource = null;
                editingBuiltinIndex = null;

            } catch (error) {
                alert(`Failed to ${editingTemplate ? 'update' : 'save'} template: ` + error.message);
            } finally {
                saveTemplateBtn.disabled = false;
                saveTemplateBtn.innerHTML = '<span>Save Template</span><div class="btn-shine"></div>';
            }
        });
    }

    // Close modal when clicking outside
    if (createTemplateModal) {
        createTemplateModal.addEventListener('click', (e) => {
            if (e.target === createTemplateModal) {
                createTemplateModal.classList.add('hidden');
                editingTemplate = null;
                editingTemplateSource = null;
                editingBuiltinIndex = null;
            }
        });
    }

    document.addEventListener('pointermove', handleCanvasPointerMove);
    document.addEventListener('pointerup', () => {
        if (isPanning && imageDisplayArea) {
            imageDisplayArea.style.cursor = 'grab';
        }
        isPanning = false;
    });
    document.addEventListener('pointerleave', () => {
        if (isPanning && imageDisplayArea) {
            imageDisplayArea.style.cursor = 'grab';
        }
        isPanning = false;
    });

    loadGallery();
    loadTemplateGallery();
    initializeSidebarResizer(sidebar, resizeHandle);
    
    // Setup canvas language toggle
    const canvasLangInput = document.getElementById('canvas-lang-input');
    if (canvasLangInput) {
        // Set initial state
        canvasLangInput.checked = i18n.currentLang === 'en';
        
        canvasLangInput.addEventListener('change', (e) => {
            i18n.setLanguage(e.target.checked ? 'en' : 'vi');
            // Update visual state
            const options = document.querySelectorAll('.canvas-lang-option');
            options.forEach(opt => {
                const isActive = opt.dataset.lang === i18n.currentLang;
                opt.classList.toggle('active', isActive);
            });
            // Reload template gallery with new language
            templateGallery.render();
        });
    }

    function setViewState(state) {
        placeholderState.classList.add('hidden');
        loadingState.classList.add('hidden');
        errorState.classList.add('hidden');
        templateGalleryState.classList.add('hidden');
        resultState.classList.add('hidden');

        switch (state) {
            case 'placeholder':
                placeholderState.classList.remove('hidden');
                break;
            case 'loading':
                loadingState.classList.remove('hidden');
                break;
            case 'error':
                errorState.classList.remove('hidden');
                break;
            case 'template-gallery':
                templateGalleryState.classList.remove('hidden');
                break;
            case 'result':
                resultState.classList.remove('hidden');
                break;
        }
    }

    function showError(message) {
        errorText.textContent = message;
        setViewState('error');
    }

    function displayImage(imageUrl, imageData) {
        let cacheBustedUrl = imageUrl;
        if (!imageUrl.startsWith('blob:') && !imageUrl.startsWith('data:')) {
            cacheBustedUrl = withCacheBuster(imageUrl);
        }

        if (imageData) {
            generatedImage.src = `data:image/png;base64,${imageData}`;
        } else {
            generatedImage.src = cacheBustedUrl;
        }

        downloadLink.href = imageData ? generatedImage.src : cacheBustedUrl;
        const filename = imageUrl.split('/').pop().split('?')[0];
        downloadLink.setAttribute('download', filename);

        generatedImage.onload = () => {
            resetView();
        };

        hasGeneratedImage = true; // Mark that we have an image
        setViewState('result');
    }

    async function handleCanvasDropUrl(imageUrl) {
        const cleanedUrl = imageUrl;
        displayImage(cleanedUrl);
        try {
            const response = await fetch(withCacheBuster(cleanedUrl));
            if (!response.ok) return;
            const metadata = await extractMetadataFromBlob(await response.blob());
            if (metadata) {
                applyMetadata(metadata);
            }
        } catch (error) {
            console.warn('Unable to read metadata from dropped image', error);
        }
    }

    function applyMetadata(metadata) {
        if (!metadata) return;
        if (metadata.prompt) promptInput.value = metadata.prompt;
        if (metadata.aspect_ratio) aspectRatioInput.value = metadata.aspect_ratio;
        if (metadata.resolution) resolutionInput.value = metadata.resolution;
        
        if (metadata.reference_images && Array.isArray(metadata.reference_images)) {
            slotManager.setReferenceImages(metadata.reference_images);
        }
        
        persistSettings();
    }

    async function loadGallery() {
        try {
            await gallery.load();
        } catch (error) {
            console.error('Unable to populate gallery', error);
        }
    }

    async function loadTemplateGallery() {
        try {
            await templateGallery.load();
            // Don't auto-show template gallery - let user trigger it
            // Default view will be placeholder or template gallery based on state
            if (!hasGeneratedImage) {
                setViewState('template-gallery');
            }
        } catch (error) {
            console.error('Unable to load template gallery', error);
        }
    }

    function initializeSidebarResizer(sidebar, handle) {
        if (!sidebar || !handle) return;
        const resizerQuery = window.matchMedia('(min-width: 1025px)');
        let resizerCleanup = null;

        const toggleResizer = () => {
            if (resizerQuery.matches) {
                if (!resizerCleanup) {
                    resizerCleanup = setupSidebarResizer(sidebar, handle);
                }
            } else if (resizerCleanup) {
                resizerCleanup();
                resizerCleanup = null;
                sidebar.style.width = '';
            }
        };

        toggleResizer();
        if (typeof resizerQuery.addEventListener === 'function') {
            resizerQuery.addEventListener('change', toggleResizer);
        }
        if (typeof resizerQuery.addListener === 'function') {
            resizerQuery.addListener(toggleResizer);
        }
    }

    function buildGenerateFormData(fields) {
        const formData = new FormData();

        Object.entries(fields).forEach(([key, value]) => {
            if (value !== undefined && value !== null) {
                formData.append(key, value);
            }
        });

        slotManager.getReferenceFiles().forEach(file => {
            formData.append('reference_images', file, file.name);
        });
        
        const referencePaths = slotManager.getReferencePaths();
        if (referencePaths && referencePaths.length > 0) {
            formData.append('reference_image_paths', JSON.stringify(referencePaths));
        }

        return formData;
    }

    function loadSettings() {
        if (typeof localStorage === 'undefined') return {};
        try {
            const saved = localStorage.getItem(SETTINGS_STORAGE_KEY);
            if (!saved) return {};

            const { apiKey, aspectRatio, resolution, prompt, referenceImages } = JSON.parse(saved);
            if (apiKey) apiKeyInput.value = apiKey;
            if (aspectRatio) aspectRatioInput.value = aspectRatio;
            if (resolution) resolutionInput.value = resolution;
            if (prompt) promptInput.value = prompt;
            return { apiKey, aspectRatio, resolution, prompt, referenceImages };
        } catch (error) {
            console.warn('Unable to load cached settings', error);
            return {};
        }
    }

    function persistSettings() {
        if (typeof localStorage === 'undefined') return;
        try {
            const settings = {
                apiKey: apiKeyInput.value.trim(),
                aspectRatio: aspectRatioInput.value,
                resolution: resolutionInput.value,
                prompt: promptInput.value.trim(),
                referenceImages: slotManager.serializeReferenceImages(),
            };
            localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings));
        } catch (error) {
            console.warn('Unable to persist settings', error);
        }
    }

    function handleGenerateShortcut(event) {
        if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
            event.preventDefault();
            if (generateBtn && !generateBtn.disabled) {
                generateBtn.click();
            }
        }
    }

    function handleResetShortcut(event) {
        if (event.code !== 'Space' && event.key !== ' ') return;
        if (event.ctrlKey || event.metaKey || event.altKey) return;
        const targetTag = event.target?.tagName;
        if (targetTag && ['INPUT', 'TEXTAREA', 'SELECT'].includes(targetTag)) return;
        if (event.target?.isContentEditable) return;
        if (resultState.classList.contains('hidden')) return;
        event.preventDefault();
        resetView();
    }

    function handleDownloadShortcut(event) {
        if (event.key !== 'd') return;
        if (event.ctrlKey || event.metaKey || event.altKey) return;
        const targetTag = event.target?.tagName;
        if (targetTag && ['INPUT', 'TEXTAREA', 'SELECT'].includes(targetTag)) return;
        if (event.target?.isContentEditable) return;
        if (resultState.classList.contains('hidden')) return;
        event.preventDefault();
        downloadLink.click();
    }

    function handleTemplateShortcut(event) {
        if (event.key.toLowerCase() !== 't') return;
        if (event.ctrlKey || event.metaKey || event.altKey) return;
        const targetTag = event.target?.tagName;
        if (targetTag && ['INPUT', 'TEXTAREA', 'SELECT'].includes(targetTag)) return;
        if (event.target?.isContentEditable) return;
        
        event.preventDefault();
        
        // Toggle template gallery
        if (templateGalleryState.classList.contains('hidden')) {
            setViewState('template-gallery');
        } else {
            // If we have a generated image, go back to result
            if (hasGeneratedImage) {
                setViewState('result');
            } else {
                // Otherwise go to placeholder
                setViewState('placeholder');
            }
        }
    }

    function handleCanvasWheel(event) {
        if (resultState.classList.contains('hidden')) return;
        event.preventDefault();
        const delta = event.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
        adjustZoom(delta);
    }

    function handleCanvasPointerDown(event) {
        const result = document.getElementById('result-state');
        if (result.classList.contains('hidden')) return;
        isPanning = true;
        lastPointer = { x: event.clientX, y: event.clientY };
        imageDisplayArea.style.cursor = 'grabbing';
    }

    function handleCanvasPointerMove(event) {
        if (!isPanning) return;
        const dx = event.clientX - lastPointer.x;
        const dy = event.clientY - lastPointer.y;
        panOffset.x += dx;
        panOffset.y += dy;
        lastPointer = { x: event.clientX, y: event.clientY };
        setImageTransform();
    }

    function handleCanvasToolbarClick(event) {
        const action = event.target.closest('.canvas-btn')?.dataset.action;
        if (!action) return;
        switch (action) {
            case 'zoom-in':
                adjustZoom(ZOOM_STEP);
                break;
            case 'zoom-out':
                adjustZoom(-ZOOM_STEP);
                break;
            case 'zoom-fit':
                zoomLevel = getFitZoom();
                panOffset = { x: 0, y: 0 };
                setImageTransform();
                break;
            case 'zoom-reset':
                resetView();
                break;
            case 'toggle-template':
                // Toggle between result and template gallery
                if (resultState.classList.contains('hidden')) {
                    setViewState('result');
                } else {
                    setViewState('template-gallery');
                }
                break;
        }
    }

    function adjustZoom(delta) {
        const prevZoom = zoomLevel;
        zoomLevel = clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM);
        const scale = zoomLevel / prevZoom;
        panOffset.x *= scale;
        panOffset.y *= scale;
        setImageTransform();
    }

    function setImageTransform() {
        generatedImage.style.transform = `translate(${panOffset.x}px, ${panOffset.y}px) scale(${zoomLevel})`;
    }

    function getFitZoom() {
        if (!generatedImage.naturalWidth || !generatedImage.naturalHeight || !imageDisplayArea) {
            return 1;
        }
        const rect = imageDisplayArea.getBoundingClientRect();
        const scaleX = rect.width / generatedImage.naturalWidth;
        const scaleY = rect.height / generatedImage.naturalHeight;
        const fitZoom = Math.max(scaleX, scaleY);
        return Math.max(fitZoom, MIN_ZOOM);
    }

    function resetView() {
        zoomLevel = 1;
        panOffset = { x: 0, y: 0 };
        setImageTransform();
    }

    function setupSidebarResizer(sidebar, handle) {
        if (!sidebar || !handle) return null;
        let isResizing = false;
        let activePointerId = null;

        const updateWidth = (clientX) => {
            const sidebarRect = sidebar.getBoundingClientRect();
            let newWidth = clientX - sidebarRect.left;
            newWidth = clamp(newWidth, SIDEBAR_MIN_WIDTH, SIDEBAR_MAX_WIDTH);
            sidebar.style.width = `${newWidth}px`;
        };

        const stopResize = () => {
            if (!isResizing) return;
            isResizing = false;
            if (activePointerId !== null) {
                try {
                    handle.releasePointerCapture(activePointerId);
                } catch (error) {
                    console.warn('Unable to release pointer capture', error);
                }
                activePointerId = null;
            }
            document.body.style.cursor = '';
        };

        const onPointerDown = (event) => {
            isResizing = true;
            activePointerId = event.pointerId;
            handle.setPointerCapture(activePointerId);
            document.body.style.cursor = 'ew-resize';
            event.preventDefault();
        };

        const onPointerMove = (event) => {
            if (!isResizing) return;
            updateWidth(event.clientX);
        };

        handle.addEventListener('pointerdown', onPointerDown);
        document.addEventListener('pointermove', onPointerMove);
        document.addEventListener('pointerup', stopResize);
        document.addEventListener('pointercancel', stopResize);

        return () => {
            stopResize();
            handle.removeEventListener('pointerdown', onPointerDown);
            document.removeEventListener('pointermove', onPointerMove);
            document.removeEventListener('pointerup', stopResize);
            document.removeEventListener('pointercancel', stopResize);
        };
    }

});