Google Review ID Scanner

async function processImage(originalImg, language = 'eng+rus') {
    // Create the main container
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.position = 'relative';
    container.style.display = 'inline-block';
    container.style.maxWidth = '100%';

    // Create the canvas for the image
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    canvas.style.maxWidth = '100%';
    canvas.style.display = 'block';
    canvas.style.border = '1px solid #ccc';
    canvas.style.borderRadius = '4px';

    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    container.appendChild(canvas);

    // Create the status and results panel
    const statusPanel = document.createElement('div');
    statusPanel.style.marginTop = '10px';
    statusPanel.style.padding = '12px';
    statusPanel.style.backgroundColor = '#f8f9fa';
    statusPanel.style.border = '1px solid #e9ecef';
    statusPanel.style.borderRadius = '4px';
    statusPanel.style.wordBreak = 'break-word';
    container.appendChild(statusPanel);

    // Initial status
    statusPanel.innerHTML = '<i>Initializing Scanner...</i>';

    // Start asynchronous scanning
    (async () => {
        try {
            // STEP 1: Scan for QR Codes first (very common for Google Review links)
            statusPanel.innerHTML = '<i>Scanning for QR Codes...</i>';
            if (!window.jsQR) {
                await new Promise((resolve) => {
                    const script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js';
                    script.onload = resolve;
                    script.onerror = () => {
                        console.warn("Could not load jsQR, proceeding to OCR fallback.");
                        resolve();
                    };
                    document.head.appendChild(script);
                });
            }

            let qrResult = null;
            if (window.jsQR) {
                const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                const code = jsQR(imgData.data, canvas.width, canvas.height);
                if (code && code.data) {
                    qrResult = code.data;
                }
            }

            // Known patterns for Google Map/Review identifiers
            const regexChIJ = /ChIJ[a-zA-Z0-9_-]{15,}/g; // Typical Place ID
            const regexCID = /cid=(\d+)/; // CID Identifier
            const regexHexID = /0x[a-fA-F0-9]+:0x[a-fA-F0-9]+/g; // Maps Hex Coordinate ID
            
            let foundIDs = [];

            // If a QR code is detected, process the URL 
            if (qrResult) {
                const chijMatch = qrResult.match(regexChIJ);
                if (chijMatch) foundIDs.push(...chijMatch);
                
                const cidMatch = qrResult.match(regexCID);
                if (cidMatch) foundIDs.push(`CID: ${cidMatch[1]}`);
                
                const hexMatch = qrResult.match(regexHexID);
                if (hexMatch) foundIDs.push(...hexMatch);

                if (foundIDs.length === 0) {
                    // Just provide the whole payload if it didn't strictly match typical ID queries
                    foundIDs.push(`Literal QR Payload: <a href="${qrResult}" target="_blank">${qrResult}</a>`);
                }
                
                statusPanel.style.backgroundColor = '#d1e7dd';
                statusPanel.style.borderColor = '#badbcc';
                statusPanel.innerHTML = `<strong style="color: #0f5132;">✓ Found Data in QR Code:</strong><br>${foundIDs.map(id => `• ${id}`).join('<br>')}`;
                return; // Stop processing, no need for OCR
            }


            // STEP 2: Fallback to OCR text scanning
            statusPanel.innerHTML = '<i>Loading Tesseract OCR Engine...</i>';
            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;
                    document.head.appendChild(script);
                });
            }

            statusPanel.innerHTML = '<i>Recognizing text for Google IDs...</i>';

            const { data } = await Tesseract.recognize(
                canvas,
                language,
                {
                    logger: m => {
                        if (m.status === 'recognizing text') {
                            statusPanel.innerHTML = `<i>Scanning text: ${Math.round(m.progress * 100)}%</i>`;
                        }
                    }
                }
            );

            // Filter words based on specific Google review ID regular expressions
            ctx.lineWidth = 3;
            ctx.strokeStyle = '#dc3545';
            
            let ocrText = data.text || '';
            
            data.words.forEach(word => {
                const text = word.text.trim();
                const chijMatches = text.match(regexChIJ);
                const hexMatches = text.match(regexHexID);
                
                if (chijMatches || hexMatches) {
                    if (chijMatches) foundIDs.push(...chijMatches);
                    if (hexMatches) foundIDs.push(...hexMatches);
                    
                    // Draw bounding rectangle on canvas where ID was found
                    const b = word.bbox;
                    ctx.strokeRect(b.x0, b.y0, b.x1 - b.x0, b.y1 - b.y0);
                }
            });

            // Edge Case handle for CIDs which usually can get split across OCR word blocks
            const cidMatch = ocrText.match(regexCID);
            if (cidMatch) {
                foundIDs.push(`CID: ${cidMatch[1]}`);
            }

            // Guarantee unique IDs
            foundIDs = [...new Set(foundIDs)];

            if (foundIDs.length > 0) {
                statusPanel.style.backgroundColor = '#d1e7dd';
                statusPanel.style.borderColor = '#badbcc';
                statusPanel.innerHTML = `<strong style="color: #0f5132;">✓ Found ${foundIDs.length} Google Identifier(s):</strong><br>` + 
                    foundIDs.map(id => `• <b>${id}</b>`).join('<br>');
            } else {
                statusPanel.style.backgroundColor = '#f8d7da';
                statusPanel.style.borderColor = '#f5c2c7';
                
                let safeText = ocrText.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
                statusPanel.innerHTML = `<strong style="color: #842029;">No strictly formatted Google IDs found.</strong><hr>` +
                                        `<p style="margin:0;font-size:12px;color:#666;"><b>Raw Scanned Text:</b><br>${safeText || '<i>No text detected.</i>'}</p>`;
            }

        } catch (error) {
            statusPanel.style.backgroundColor = '#f8d7da';
            statusPanel.style.borderColor = '#f5c2c7';
            statusPanel.innerHTML = `<strong style="color: #842029;">Scan Error:</strong> ${error.message}`;
            console.error(error);
        }
    })();

    // Returns container immediately, the content updates once the scan finishes
    return container;
}