Image Language Converter

async function processImage(originalImg, ocrLangCode = 'eng', translateToIso = 'es') {
    // 1. Setup the main container
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
    container.style.width = '100%';
    container.style.maxWidth = '1000px';
    container.style.margin = '0 auto';
    container.style.boxSizing = 'border-box';

    // Status / Loading indicator
    const statusDiv = document.createElement('div');
    statusDiv.style.padding = '12px 16px';
    statusDiv.style.backgroundColor = '#eff6ff';
    statusDiv.style.color = '#1e3a8a';
    statusDiv.style.borderRadius = '6px';
    statusDiv.style.border = '1px solid #bfdbfe';
    statusDiv.style.marginBottom = '16px';
    statusDiv.style.fontWeight = '500';
    statusDiv.textContent = 'Processing image... (Initializing OCR Engine)';
    container.appendChild(statusDiv);

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    if (!imgWidth || !imgHeight) {
        statusDiv.textContent = 'Error: Invalid image dimensions.';
        statusDiv.style.backgroundColor = '#fef2f2';
        statusDiv.style.color = '#991b1b';
        return container;
    }

    try {
        // 2. Dynamically load Tesseract.js (v5) if not present
        if (!window.Tesseract) {
            await new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
                script.onload = resolve;
                script.onerror = () => reject(new Error('Failed to load Tesseract.js'));
                document.head.appendChild(script);
            });
        }

        // 3. Start Text Extraction (OCR)
        statusDiv.textContent = 'Starting OCR Engine...';
        
        // Tesseract v5 Syntax
        const worker = await window.Tesseract.createWorker(ocrLangCode, 1, {
            logger: m => {
                if (m.status === 'recognizing text') {
                    statusDiv.textContent = `Extracting text... ${Math.round(m.progress * 100)}%`;
                }
            }
        });

        const { data } = await worker.recognize(originalImg);
        await worker.terminate();

        const paragraphs = data.paragraphs || [];
        
        // Filter out blocks that don't contain real words/alphanumerics
        const validParagraphs = paragraphs.filter(p => p.text && p.text.trim().match(/[a-zA-Z0-9]/));

        if (validParagraphs.length === 0) {
            statusDiv.textContent = `No ${ocrLangCode} text was found in the image.`;
            statusDiv.style.backgroundColor = '#fef3c7';
            statusDiv.style.color = '#92400e';
            statusDiv.style.border = '1px solid #fde68a';
            return container;
        }

        statusDiv.textContent = `Found ${validParagraphs.length} text blocks. Translating...`;

        // 4. Translate chunks
        // We use MyMemory Translation API (Free tier handles 500 words per day easily without API keys)
        const translatedTexts = await Promise.all(validParagraphs.map(async p => {
            const textToTranslate = p.text.replace(/\n/g, ' ').trim();
            try {
                const url = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(textToTranslate)}&langpair=Autodetect|${translateToIso}`;
                const res = await fetch(url);
                const json = await res.json();
                
                if (json && json.responseStatus === 200 && json.responseData && json.responseData.translatedText) {
                    return json.responseData.translatedText;
                }
            } catch (e) {
                console.warn('Block translation failed, falling back to original text:', e);
            }
            // Fallback strategy
            return textToTranslate;
        }));

        // 5. Finalize UI / Layout
        statusDiv.textContent = `Successfully extracted and translated ${validParagraphs.length} text blocks.`;
        statusDiv.style.backgroundColor = '#f0fdf4';
        statusDiv.style.color = '#166534';
        statusDiv.style.border = '1px solid #bbf7d0';

        // Toggle Control for Overlays
        const controls = document.createElement('div');
        controls.style.marginBottom = '12px';
        
        const toggleBtn = document.createElement('button');
        toggleBtn.textContent = 'Hide Translation Overlay';
        toggleBtn.style.padding = '8px 16px';
        toggleBtn.style.backgroundColor = '#3b82f6';
        toggleBtn.style.color = '#ffffff';
        toggleBtn.style.border = 'none';
        toggleBtn.style.borderRadius = '4px';
        toggleBtn.style.cursor = 'pointer';
        toggleBtn.style.fontWeight = '600';
        toggleBtn.style.transition = 'background-color 0.2s';
        
        controls.appendChild(toggleBtn);
        container.appendChild(controls);

        // Image & Overlay Relative Wrapper
        const imgWrapper = document.createElement('div');
        imgWrapper.style.position = 'relative';
        imgWrapper.style.display = 'inline-block';
        imgWrapper.style.maxWidth = '100%';
        imgWrapper.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
        imgWrapper.style.borderRadius = '6px';
        imgWrapper.style.overflow = 'hidden';

        const displayImg = new Image();
        displayImg.src = originalImg.src;
        displayImg.style.display = 'block';
        displayImg.style.width = '100%';
        displayImg.style.height = 'auto'; // scales dynamically
        imgWrapper.appendChild(displayImg);

        const overlayGroup = document.createElement('div');
        overlayGroup.style.position = 'absolute';
        overlayGroup.style.top = '0';
        overlayGroup.style.left = '0';
        overlayGroup.style.width = '100%';
        overlayGroup.style.height = '100%';
        
        // Draw translated boxed HTML elements over the original image bounded coordinates
        validParagraphs.forEach((p, i) => {
            const box = document.createElement('div');
            
            // Convert exact Tesseract coordinates into percentages matching the wrapper
            box.style.position = 'absolute';
            box.style.left = `${(p.bbox.x0 / imgWidth) * 100}%`;
            box.style.top = `${(p.bbox.y0 / imgHeight) * 100}%`;
            box.style.width = `${((p.bbox.x1 - p.bbox.x0) / imgWidth) * 100}%`;
            box.style.height = `${((p.bbox.y1 - p.bbox.y0) / imgHeight) * 100}%`;
            
            // Stylize the text box
            box.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
            box.style.color = '#111827';
            box.style.border = '1px solid #111827';
            box.style.boxSizing = 'border-box';
            box.style.padding = '4px';
            box.style.overflow = 'auto'; // scrollable if translation extends beyond original bounds
            box.style.display = 'flex';
            box.style.alignItems = 'center';
            box.style.justifyContent = 'center';
            box.style.textAlign = 'center';
            box.style.fontSize = 'clamp(10px, 1.2vw + 4px, 24px)';
            box.style.lineHeight = '1.3';
            
            box.textContent = translatedTexts[i];
            overlayGroup.appendChild(box);
        });

        imgWrapper.appendChild(overlayGroup);
        container.appendChild(imgWrapper);

        // Interaction logic
        let isOverlayVisible = true;
        toggleBtn.addEventListener('click', () => {
            isOverlayVisible = !isOverlayVisible;
            overlayGroup.style.display = isOverlayVisible ? 'block' : 'none';
            toggleBtn.textContent = isOverlayVisible ? 'Hide Translation Overlay' : 'Show Translation Overlay';
            toggleBtn.style.backgroundColor = isOverlayVisible ? '#3b82f6' : '#64748b';
        });

    } catch (error) {
        statusDiv.textContent = `Process failed: ${error.message}`;
        statusDiv.style.backgroundColor = '#fef2f2';
        statusDiv.style.color = '#991b1b';
        statusDiv.style.border = '1px solid #fecaca';
    }

    return container;
}