document.addEventListener('DOMContentLoaded', function () {
    const fileInput = document.getElementById('file-input');
    const uploadUi = document.getElementById('upload-ui');
    const imageUploader = document.getElementById('image-uploader');
    const imagePreviewContainer = document.getElementById('image-preview-container');
    const imagePreview = document.getElementById('image-preview');
    const clearImageBtn = document.getElementById('clear-image-btn');
    const generationControls = document.getElementById('generation-controls');

    // Trigger file input click
    if(uploadUi) {
        uploadUi.addEventListener('click', () => fileInput.click());
    }

    // Handle file selection
    if(fileInput) {
        fileInput.addEventListener('change', (event) => {
            const files = event.target.files;
            if (files && files.length > 0) {
                handleFile(files[0]);
            }
        });
    }

    // Handle drag and drop
    if(imageUploader) {
        imageUploader.addEventListener('dragover', (event) => {
            event.preventDefault();
            uploadUi.style.backgroundColor = '#f1f3f5';
            uploadUi.style.borderColor = 'var(--primary-color)';
        });

        imageUploader.addEventListener('dragleave', (event) => {
            event.preventDefault();
            uploadUi.style.backgroundColor = 'transparent';
            uploadUi.style.borderColor = '#dee2e6';
        });

        imageUploader.addEventListener('drop', (event) => {
            event.preventDefault();
            uploadUi.style.backgroundColor = 'transparent';
            uploadUi.style.borderColor = '#dee2e6';
            const files = event.dataTransfer.files;
            if (files && files.length > 0) {
                fileInput.files = files; // Assign dropped files to input
                handleFile(files[0]);
            }
        });
    }

    function handleFile(file) {
        if (!file.type.startsWith('image/')) {
            alert('Please select an image file (PNG, JPG).');
            return;
        }

        const reader = new FileReader();
        reader.onload = function (e) {
            imagePreview.src = e.target.result;
            imageUploader.classList.add('d-none');
            imagePreviewContainer.classList.remove('d-none');
            // In a future step, we can enable the controls:
            // generationControls.disabled = false; 
        };
        reader.readAsDataURL(file);
    }

    // Handle clear image
    if(clearImageBtn) {
        clearImageBtn.addEventListener('click', () => {
            fileInput.value = ''; // Clear the file input
            imagePreview.src = '#';
            imagePreviewContainer.classList.add('d-none');
            imageUploader.classList.remove('d-none');
            // generationControls.disabled = true;
        });
    }
});