Image Language And ID Scanner

async function processImage(originalImg, languages = "eng+rus") {
    // Create the main container
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.position = 'relative';
    container.style.width = '100%';
    container.style.boxSizing = 'border-box';

    // Create a loading indicator
    const loadingMsg = document.createElement('div');
    loadingMsg.innerHTML = `
        <div style="display: flex; align-items: center; gap: 10px;">
            <div style="width: 20px; height: 20px; border: 3px solid #ccc; border-top-color: #007bff; border-radius: 50%; animation: spin 1s linear infinite;"></div>
            <span id="scan-status">Initializing Scanner & Loading OCR Engine...</span>
        </div>
        <style>@keyframes spin { to { transform: rotate(360deg); } }</style>
    `;
    loadingMsg.style.padding = '20px';
    loadingMsg.style.background = '#f0f4f8';
    loadingMsg.style.color = '#333';
    loadingMsg.style.borderRadius = '8px';
    loadingMsg.style.border = '1px solid #d1d5db';
    container.appendChild(loadingMsg);

    try {
        // Load Tesseract.js dynamically if it isn't already available
        if (typeof window.Tesseract === 'undefined') {
            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;
                document.head.appendChild(script);
            });
        }

        const statusNode = loadingMsg.querySelector('#scan-status');

        // Run OCR with Logger to update progress
        const result = await window.Tesseract.recognize(originalImg, languages, {
            logger: m => {
                if (m.status === 'recognizing text' && statusNode) {
                    statusNode.textContent = `Scanning Document: ${(m.progress * 100).toFixed(1)}%`;
                } else if (statusNode) {
                    statusNode.textContent = `Processing: ${m.status}...`;
                }
            }
        });

        const { data: { text, words } } = result;

        // Clear loading message
        container.innerHTML = '';

        // Create main layout wrapper
        const layout = document.createElement('div');
        layout.style.display = 'flex';
        layout.style.flexWrap = 'wrap';
        layout.style.gap = '20px';

        // 1. Image Canvas Panel (Draw scanning boxes)
        const canvasContainer = document.createElement('div');
        canvasContainer.style.flex = '1 1 400px';
        canvasContainer.style.display = 'flex';
        canvasContainer.style.flexDirection = 'column';

        const canvas = document.createElement('canvas');
        canvas.width = originalImg.width;
        canvas.height = originalImg.height;
        canvas.style.width = '100%';
        canvas.style.height = 'auto';
        canvas.style.border = '1px solid #ccc';
        canvas.style.borderRadius = '8px';
        canvas.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
        
        const ctx = canvas.getContext('2d');
        ctx.drawImage(originalImg, 0, 0);

        // Highlight detected words to simulate "ID Scanner"
        ctx.strokeStyle = 'rgba(16, 185, 129, 0.8)'; // Emerald green scanning boxes
        ctx.lineWidth = Math.max(2, originalImg.width / 400);
        ctx.fillStyle = 'rgba(16, 185, 129, 0.1)';
        
        words.forEach(w => {
            const { x0, y0, x1, y1 } = w.bbox;
            const wWidth = x1 - x0;
            const wHeight = y1 - y0;
            ctx.fillRect(x0, y0, wWidth, wHeight);
            ctx.strokeRect(x0, y0, wWidth, wHeight);
        });

        canvasContainer.innerHTML = `<h3 style="margin: 0 0 10px 0; font-size: 16px; color: #374151;">Scanned Image View</h3>`;
        canvasContainer.appendChild(canvas);

        // 2. Extracted Information Panel
        const infoContainer = document.createElement('div');
        infoContainer.style.flex = '1 1 350px';
        infoContainer.style.background = '#f9fafb';
        infoContainer.style.padding = '20px';
        infoContainer.style.borderRadius = '8px';
        infoContainer.style.border = '1px solid #e5e7eb';
        infoContainer.style.boxShadow = '0 4px 6px rgba(0,0,0,0.05)';
        infoContainer.style.boxSizing = 'border-box';

        // Regex logic to identify ID components
        const dateRegex = /\b\d{2,4}[-./]\d{2}[-./]\d{2,4}\b/g;
        const emailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/gi;
        const docNumRegex = /\b([A-Z0-9]{7,14})\b/g; 
        const mrzRegex = /([A-Z0-9<]{10,})/g; 

        const dates = (text.match(dateRegex) || []);
        const emails = (text.match(emailRegex) || []);
        
        // Filter out simple words for document numbers, looking for combinations matching typical IDs
        let docNumbers = (text.match(docNumRegex) || []).filter(n => /[A-Z]/.test(n) && /[0-9]/.test(n)); 
        let mrzLines = (text.match(mrzRegex) || []).filter(c => c.includes('<<')); 

        infoContainer.innerHTML = `
            <h3 style="margin: 0 0 5px 0; color: #111827; font-size: 18px;">Document Data</h3>
            <p style="margin: 0 0 15px 0; font-size: 13px; color: #6b7280;">Language Pack: <strong>${languages.toUpperCase()}</strong></p>
            
            <div style="background: #fff; padding: 15px; border-radius: 6px; border: 1px solid #d1d5db; margin-bottom: 20px;">
                <h4 style="margin: 0 0 10px 0; font-size: 14px; color: #2563eb;">Extracted Entities</h4>
                <div style="font-size: 14px; color: #374151; line-height: 1.6;">
                    <div style="margin-bottom: 8px;"><strong>Dates (DOB/Expiry):</strong> <br> ${[...new Set(dates)].map(d => `<span style="background:#e0e7ff; padding:2px 6px; border-radius:4px; font-size:13px;">${d}</span>`).join(' ') || '<em>None detected</em>'}</div>
                    <div style="margin-bottom: 8px;"><strong>MRZ Codes:</strong> <br> ${[...new Set(mrzLines)].map(m => `<span style="background:#fce7f3; color:#9d174d; padding:2px 6px; border-radius:4px; font-size:13px; word-break:break-all;">${m}</span>`).join('<br>') || '<em>None detected</em>'}</div>
                    <div style="margin-bottom: 8px;"><strong>ID / Passport Numbers:</strong> <br> ${[...new Set(docNumbers)].slice(0, 5).map(n => `<span style="background:#dcfce3; color:#166534; padding:2px 6px; border-radius:4px; font-size:13px;">${n}</span>`).join(' ') || '<em>None detected</em>'}</div>
                    <div style="margin-bottom: 8px;"><strong>Emails:</strong> <br> ${[...new Set(emails)].join(', ') || '<em>None detected</em>'}</div>
                </div>
            </div>

            <h4 style="margin: 0 0 10px 0; font-size: 14px; color: #374151;">Full OCR Raw Text</h4>
            <textarea readonly style="width: 100%; height: 180px; padding: 12px; border: 1px solid #d1d5db; border-radius: 6px; font-family: monospace; font-size: 13px; box-sizing: border-box; background: #f3f4f6; color: #1f2937; resize: vertical;">${text || 'No text detected.'}</textarea>
        `;

        // Assemble layout
        layout.appendChild(canvasContainer);
        layout.appendChild(infoContainer);
        container.appendChild(layout);

    } catch (error) {
        container.innerHTML = `
            <div style="background: #fee2e2; border: 1px solid #ef4444; color: #b91c1c; padding: 20px; border-radius: 8px;">
                <h3 style="margin-top: 0;">Scanner Error</h3>
                <p style="margin-bottom: 0;">Failed to process image: ${error.message}</p>
            </div>
        `;
    }

    return container;
}