document.addEventListener('DOMContentLoaded', function() {
            const sourceText = document.getElementById('sourceText');
            const translatedText = document.getElementById('translatedText');
            const charCount = document.getElementById('charCount');
            const translateBtn = document.getElementById('translateBtn');
            const copyBtn = document.getElementById('copyBtn');
            const clearBtn = document.getElementById('clearBtn');
            const swapBtn = document.getElementById('swapBtn');
            const sourceLanguage = document.getElementById('sourceLanguage');
            const targetLanguage = document.getElementById('targetLanguage');
            const languageToggle = document.getElementById('languageToggle');
            const currentLang = document.getElementById('currentLang');
            const btnTextElements = document.querySelectorAll('.btn-text');
            
            let typingTimer;
            const doneTypingInterval = 1000; // 1 second delay after user stops typing
            let isArabic = false;
            
            // UI texts in both languages
            const uiTexts = {
                english: {
                    title: "KRiz - Translation",
                    detectLanguage: "Detect Language",
                    enterText: "Enter text to translate (1500+ characters supported)",
                    translationWillAppear: "Translation will appear here...",
                    characters: "characters",
                    character: "character",
                    clear: "Clear",
                    translate: "Translate",
                    copy: "Copy",
                    translating: "Translating...",
                    languageBtn: "English",
                    translationFailed: "Translation failed. Please try again.",
                    translationError: "Translation service error. Please try again later."
                },
                arabic: {
                    title: "كريز - ترجمة",
                    detectLanguage: "كشف اللغة",
                    enterText: "أدخل النص للترجمة (يدعم أكثر من 1500 حرف)",
                    translationWillAppear: "ستظهر الترجمة هنا...",
                    characters: "أحرف",
                    character: "حرف",
                    clear: "مسح",
                    translate: "ترجم",
                    copy: "نسخ",
                    translating: "جاري الترجمة...",
                    languageBtn: "العربية",
                    translationFailed: "فشلت الترجمة. يرجى المحاولة مرة أخرى.",
                    translationError: "خطأ في خدمة الترجمة. يرجى المحاولة لاحقًا."
                }
            };
            
            // Auto-resize translated textarea
            function autoResize() {
                translatedText.style.height = 'auto';
                translatedText.style.height = (translatedText.scrollHeight) + 'px';
            }
            
            // Update character count
            function updateCharCount() {
                const count = sourceText.value.length;
                const lang = isArabic ? uiTexts.arabic : uiTexts.english;
                charCount.textContent = `${count} ${count !== 1 ? lang.characters : lang.character}`;
            }
            
            // Toggle between English and Arabic UI
            function toggleLanguage() {
                isArabic = !isArabic;
                const lang = isArabic ? uiTexts.arabic : uiTexts.english;
                
                // Update UI text
                document.title = lang.title;
                currentLang.textContent = lang.languageBtn;
                sourceText.placeholder = lang.enterText;
                translatedText.placeholder = lang.translationWillAppear;
                
                // Update button text
                document.querySelectorAll('.btn-text').forEach(btn => {
                    if (btn.parentElement.id === 'clearBtn') btn.textContent = lang.clear;
                    if (btn.parentElement.id === 'translateBtn') btn.textContent = lang.translate;
                    if (btn.parentElement.id === 'copyBtn') btn.textContent = lang.copy;
                });
                
                // Update "Detect Language" option
                for (let i = 0; i < sourceLanguage.options.length; i++) {
                    if (sourceLanguage.options[i].value === 'auto') {
                        sourceLanguage.options[i].textContent = lang.detectLanguage;
                        break;
                    }
                }
                
                updateCharCount();
                
                // Add Arabic font class if needed
                if (isArabic) {
                    document.body.classList.add('arabic-font');
                } else {
                    document.body.classList.remove('arabic-font');
                }
            }
            
            // Live translation as user types
            sourceText.addEventListener('input', function() {
                updateCharCount();
                
                // Clear previous timer
                clearTimeout(typingTimer);
                
                // Start a new timer
                if (sourceText.value) {
                    typingTimer = setTimeout(translateText, doneTypingInterval);
                } else {
                    translatedText.value = '';
                    autoResize();
                }
            });
            
            // Translation function
            async function translateText() {
                if (!sourceText.value.trim()) {
                    translatedText.value = '';
                    autoResize();
                    return;
                }
                
                // Show loading indicator
                const lang = isArabic ? uiTexts.arabic : uiTexts.english;
                translatedText.value = lang.translating;
                autoResize();
                
                try {
                    let sourceLang = sourceLanguage.value;
                    const targetLang = targetLanguage.value;
                    
                    // Auto-detect language if set to 'auto'
                    if (sourceLang === 'auto') {
                        try {
                            const detectResult = await detectLanguage(sourceText.value);
                            if (detectResult) {
                                sourceLang = detectResult;
                                // Update dropdown visually without triggering change event
                                for (const option of sourceLanguage.options) {
                                    if (option.value === sourceLang) {
                                        sourceLanguage.selectedIndex = option.index;
                                        break;
                                    }
                                }
                            }
                        } catch (error) {
                            console.error('Language detection error:', error);
                            // Fall back to 'en' if detection fails
                            sourceLang = 'en';
                        }
                    }
                    
                    // Skip translation if source and target are the same
                    if (sourceLang === targetLang) {
                        translatedText.value = sourceText.value;
                        autoResize();
                        return;
                    }
                    
                    // Use Google Translate API via script trick
                    const encodedText = encodeURIComponent(sourceText.value);
                    const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${sourceLang}&tl=${targetLang}&dt=t&q=${encodedText}`;
                    
                    const response = await fetch(url);
                    const data = await response.json();
                    
                    // Process the response and extract translated text
                    let translatedResult = '';
                    if (data && data[0]) {
                        for (let i = 0; i < data[0].length; i++) {
                            if (data[0][i][0]) {
                                translatedResult += data[0][i][0];
                            }
                        }
                    }
                    
                    translatedText.value = translatedResult || lang.translationFailed;
                    autoResize();
                    
                } catch (error) {
                    console.error('Translation error:', error);
                    const lang = isArabic ? uiTexts.arabic : uiTexts.english;
                    translatedText.value = lang.translationError;
                    autoResize();
                }
            }
            
            // Language detection function
            async function detectLanguage(text) {
                // Use a small portion of text for detection
                const sampleText = text.substring(0, 100);
                const encodedText = encodeURIComponent(sampleText);
                
                try {
                    const response = await fetch(`https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=en&dt=t&q=${encodedText}`);
                    const data = await response.json();
                    
                    // The detected language is in the third part of the response
                    if (data && data[2]) {
                        return data[2];
                    }
                    return 'en'; // Default to English if detection fails
                } catch (error) {
                    console.error('Language detection error:', error);
                    return 'en'; // Default to English on error
                }
            }
            
            // Manual translation button
            translateBtn.addEventListener('click', translateText);
            
            // Language toggle button
            languageToggle.addEventListener('click', toggleLanguage);
            
            // Copy button with visual effect
            copyBtn.addEventListener('click', function() {
                if (!translatedText.value) return;
                
                // Select the text
                translatedText.select();
                translatedText.setSelectionRange(0, 99999); // For mobile devices
                
                // Copy to clipboard
                document.execCommand('copy');
                
                // Deselect
                window.getSelection().removeAllRanges();
                
                // Visual feedback
                copyBtn.classList.add('copy-effect');
                setTimeout(() => {
                    copyBtn.classList.remove('copy-effect');
                }, 500);
            });
            
            // Clear button
            clearBtn.addEventListener('click', function() {
                sourceText.value = '';
                translatedText.value = '';
                updateCharCount();
                autoResize();
            });
            
            // Swap languages and text
            swapBtn.addEventListener('click', function() {
                // Only swap if there is translated text
                if (!translatedText.value || translatedText.value === uiTexts.english.translating || 
                    translatedText.value === uiTexts.arabic.translating) return;
                
                // Swap the text content
                const tempText = sourceText.value;
                sourceText.value = translatedText.value;
                translatedText.value = tempText;
                
                // Swap the languages (if not auto)
                const tempLang = sourceLanguage.value;
                sourceLanguage.value = targetLanguage.value;
                targetLanguage.value = tempLang === 'auto' ? 'en' : tempLang;
                
                // Update character count and resize
                updateCharCount();
                autoResize();
            });
            
            // Language change events
            sourceLanguage.addEventListener('change', function() {
                if (sourceText.value) translateText();
            });
            
            targetLanguage.addEventListener('change', function() {
                if (sourceText.value) translateText();
            });
            
            // Set initial height
            translatedText.addEventListener('input', autoResize);
            
            // Initialize
            updateCharCount();
            autoResize();
        });