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) {
                    // Try to get error message from JSON response, otherwise use status text
                    return response.json().then(err => {
                        throw new Error(err.message || response.statusText);
                    }).catch(() => {
                        throw new Error(response.statusText);
                    });
                }
                return response.json();
            })
            .then(data => {
                processingMessage.style.display = 'none';

                if (data.status === 'success') {
                    const translatedText = data.data.translatedText;
                    const outputContainer = document.getElementById('translation-output-container');
                    const outputElement = document.getElementById('translation-output');

                    if (outputElement && outputContainer) {
                        outputElement.textContent = translatedText;
                        outputContainer.style.display = 'block';
                    }
                    
                    responseMessageDiv.innerHTML = `<div class="alert alert-success" role="alert">${data.message}</div>`;
                    responseMessageDiv.style.display = 'block';

                } else {
                    responseMessageDiv.innerHTML = `<div class="alert alert-danger" role="alert"><strong>Error:</strong> ${data.message}</div>`;
                    responseMessageDiv.style.display = 'block';
                }
            })
            .catch(error => {
                processingMessage.style.display = 'none';
                responseMessageDiv.innerHTML = `<div class="alert alert-danger" role="alert">An unexpected error occurred: ${error.message}</div>`;
                responseMessageDiv.style.display = 'block';
                console.error('Fetch Error:', error);
            })
            .finally(() => {
                if(translateBtn) {
                    translateBtn.disabled = false;
                    translateBtn.innerHTML = '<i class="bi bi-stars"></i> Translate';
                }
            });
        });
    }

    // Handle copy and download buttons
    const copyBtn = document.getElementById('copy-btn');
    const downloadBtn = document.getElementById('download-btn');
    const translationOutput = document.getElementById('translation-output');

    if (copyBtn) {
        copyBtn.addEventListener('click', () => {
            if (translationOutput && navigator.clipboard) {
                navigator.clipboard.writeText(translationOutput.textContent).then(() => {
                    const originalText = copyBtn.innerHTML;
                    copyBtn.innerHTML = '<i class="bi bi-check-lg"></i> Copied!';
                    copyBtn.classList.add('btn-success');
                    copyBtn.classList.remove('btn-secondary');
                    setTimeout(() => {
                        copyBtn.innerHTML = originalText;
                        copyBtn.classList.remove('btn-success');
                        copyBtn.classList.add('btn-secondary');
                    }, 2000);
                }).catch(err => {
                    console.error('Failed to copy text: ', err);
                    alert('Failed to copy text. Please try again.');
                });
            }
        });
    }

    if (downloadBtn) {
        downloadBtn.addEventListener('click', () => {
            if (translationOutput && window.jspdf) {
                try {
                    const { jsPDF } = window.jspdf;
                    const doc = new jsPDF();

                    // Set font that supports a wide range of characters
                    doc.setFont('Helvetica');
                    doc.setFontSize(12);

                    const text = translationOutput.textContent;
                    const lines = doc.splitTextToSize(text, 180);

                    doc.text(lines, 15, 20);
                    doc.save('translation.pdf');
                } catch (error) {
                    console.error('Failed to generate PDF:', error);
                    alert('Failed to generate PDF. An error occurred.');
                }
            } else if (!window.jspdf) {
                alert('The PDF generation library is not loaded.');
            }
        });
    }
});