document.addEventListener('DOMContentLoaded', function () {
    const fileUploadInput = document.getElementById('document-upload');
    const fileUploadLabel = document.querySelector('.custom-file-upload');
    const fileNameDisplay = document.getElementById('file-upload-filename');
    const translateBtn = document.getElementById('translate-btn');
    const processingMessage = document.getElementById('processing-message');

    // Trigger file input click when the custom upload area is clicked
    if(fileUploadLabel) {
        fileUploadLabel.addEventListener('click', () => {
            if(fileUploadInput) {
                fileUploadInput.click();
            }
        });
    }

    // Update UI when a file is selected
    if(fileUploadInput) {
        fileUploadInput.addEventListener('change', () => {
            if (fileUploadInput.files.length > 0) {
                const fileName = fileUploadInput.files[0].name;
                if(fileNameDisplay) {
                    fileNameDisplay.textContent = `Selected file: ${fileName}`;
                }
                if(translateBtn) {
                    translateBtn.disabled = false;
                }
            } else {
                if(fileNameDisplay) {
                    fileNameDisplay.textContent = '';
                }
                if(translateBtn) {
                    translateBtn.disabled = true;
                }
            }
        });
    }

    // Handle form submission
    const translationForm = document.getElementById('translation-form');
    if(translationForm) {
        translationForm.addEventListener('submit', function(e) {
            e.preventDefault();

            const formData = new FormData();
            formData.append('document', fileUploadInput.files[0]);
            formData.append('source-lang', document.getElementById('source-lang').value);
            formData.append('target-lang', document.getElementById('target-lang').value);

            const responseMessageDiv = document.getElementById('response-message');

            if(processingMessage) {
                processingMessage.style.display = 'block';
            }
            if(responseMessageDiv){
                responseMessageDiv.innerHTML = '';
                responseMessageDiv.style.display = 'none';
            }

            if(translateBtn) {
                translateBtn.disabled = true;
                translateBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Translating...';
            }

            fetch('upload.php', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                if(processingMessage) {
                    processingMessage.style.display = 'none';
                }
                if(responseMessageDiv){
                    const alertClass = data.status === 'success' ? 'alert-success' : 'alert-danger';
                    responseMessageDiv.innerHTML = `<div class="alert ${alertClass}" role="alert">${data.message}</div>`;
                    responseMessageDiv.style.display = 'block';
                }
                if(translateBtn) {
                    translateBtn.disabled = false;
                    translateBtn.innerHTML = 'Translate';
                }
            })
            .catch(error => {
                if(processingMessage) {
                    processingMessage.style.display = 'none';
                }
                if(responseMessageDiv){
                    responseMessageDiv.innerHTML = `<div class="alert alert-danger" role="alert">An error occurred during the upload. Please try again.</div>`;
                    responseMessageDiv.style.display = 'block';
                }
                if(translateBtn) {
                    translateBtn.disabled = false;
                    translateBtn.innerHTML = 'Translate';
                }
                console.error('Error:', error);
            });
        });
    }
});