document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('file-input');
    const fileInfo = document.getElementById('file-info');
    const fileName = document.getElementById('file-name');
    const fileSize = document.getElementById('file-size');
    const removeFileBtn = document.getElementById('remove-file');
    const translateBtn = document.getElementById('translate-btn');
    const uploadSection = document.getElementById('upload-section');
    const uploadingAnimation = document.getElementById('uploading-animation');
    const processingAnimation = document.getElementById('processing-animation');
    const resultSection = document.getElementById('result-section');
    const downloadBtn = document.getElementById('download-btn');
    let editor;
    
    // Initialize CKEditor
    DecoupledEditor
        .create(document.querySelector('#editor'))
        .then(newEditor => {
            editor = newEditor;
            document.querySelector('#editor-container').appendChild(editor.ui.view.toolbar.element);
        })
        .catch(error => {
            console.error('There was a problem initializing the editor.', error);
        });
    
    // File input handling
    fileInput.addEventListener('change', function(e) {
        if (e.target.files.length > 0) {
            const file = e.target.files[0];
            
            // Validate file type
            if (!file.name.endsWith('.docx')) {
                alert('Please upload a .docx file');
                return;
            }
            
            // Display file info
            fileName.textContent = file.name;
            fileSize.textContent = formatFileSize(file.size);
            fileInfo.classList.remove('hidden');
            translateBtn.disabled = false;
        }
    });
    
    // Drag and drop functionality
    uploadSection.addEventListener('dragover', function(e) {
        e.preventDefault();
        uploadSection.querySelector('div').classList.add('border-blue-500');
    });
    
    uploadSection.addEventListener('dragleave', function() {
        uploadSection.querySelector('div').classList.remove('border-blue-500');
    });
    
    uploadSection.addEventListener('drop', function(e) {
        e.preventDefault();
        uploadSection.querySelector('div').classList.remove('border-blue-500');
        
        if (e.dataTransfer.files.length > 0) {
            fileInput.files = e.dataTransfer.files;
            const event = new Event('change');
            fileInput.dispatchEvent(event);
        }
    });
    
    // Remove file
    removeFileBtn.addEventListener('click', function() {
        fileInput.value = '';
        fileInfo.classList.add('hidden');
        translateBtn.disabled = true;
    });
    
    // Translate button click
    translateBtn.addEventListener('click', function() {
        if (!fileInput.files.length) return;
        
        // Show uploading animation
        uploadSection.classList.add('hidden');
        uploadingAnimation.classList.remove('hidden');
        
        // Simulate upload and processing (in a real app, this would be API calls)
        setTimeout(() => {
            uploadingAnimation.classList.add('hidden');
            processingAnimation.classList.remove('hidden');
            
            // Simulate processing completion
            setTimeout(() => {
                processingAnimation.classList.add('hidden');
                resultSection.classList.remove('hidden');
                
                // In a real app, you would get the translated content from your API
                // and set it in the editor like this:
                // editor.setData(translatedContent);
                
                // For demo purposes, we'll set some sample content
                editor.setData('<h2>Translated Document</h2><p>This is where your translated document content would appear.</p><p>In a real implementation, this would be the content returned from your translation API.</p>');
                
                // Scroll to result
                resultSection.scrollIntoView({ behavior: 'smooth' });
            }, 3000);
        }, 2000);
    });
    
    // Download button click
    downloadBtn.addEventListener('click', function() {
        // In a real app, this would download the translated file from your API
        alert('In a real implementation, this would download the translated DOCX file');
    });
    
    // Helper function to format file size
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
});