Image To TMDb Metadata Fetcher

async function processImage(originalImg, tmdbApiKey = 'YOUR_TMDB_API_KEY', language = 'eng') {
    // Create the main container for the UI
    const container = document.createElement('div');
    container.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
    container.style.maxWidth = '600px';
    container.style.margin = '20px auto';
    container.style.padding = '24px';
    container.style.boxShadow = '0 10px 25px rgba(0,0,0,0.1)';
    container.style.borderRadius = '12px';
    container.style.backgroundColor = '#ffffff';
    container.style.lineHeight = '1.6';

    // Status / Loading Indicator
    const statusBox = document.createElement('div');
    statusBox.style.padding = '15px';
    statusBox.style.borderRadius = '8px';
    statusBox.style.backgroundColor = '#f8f9fa';
    statusBox.style.color = '#333';
    statusBox.style.fontWeight = 'bold';
    statusBox.style.textAlign = 'center';
    statusBox.style.marginBottom = '20px';
    statusBox.style.border = '1px solid #dee2e6';
    statusBox.textContent = 'Initializing engine...';
    container.appendChild(statusBox);

    // Results Container
    const resultsContainer = document.createElement('div');
    container.appendChild(resultsContainer);

    // Validate API Key
    if (!tmdbApiKey || tmdbApiKey === 'YOUR_TMDB_API_KEY' || tmdbApiKey.trim() === '') {
        statusBox.textContent = 'Error: Please provide a valid TMDb API Key to search metadata.';
        statusBox.style.backgroundColor = '#fdf3f2';
        statusBox.style.color = '#d92cc';
        statusBox.style.borderColor = '#fad7d4';
        return container;
    }

    // Helper to log status updates
    const updateStatus = (text, isError = false) => {
        statusBox.textContent = text;
        if (isError) {
            statusBox.style.backgroundColor = '#fdf3f2';
            statusBox.style.color = '#e74c3c';
            statusBox.style.borderColor = '#fad7d4';
        }
    };

    // Main Async Flow
    (async () => {
        try {
            updateStatus('Loading OCR Engine (Tesseract.js)...');

            // 1. Dynamically Load Tesseract.js if not available
            await new Promise((resolve, reject) => {
                if (window.Tesseract) return resolve();
                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);
            });

            updateStatus('Extracting text from image...');

            // 2. Perform OCR on the provided image
            const result = await window.Tesseract.recognize(originalImg, language, {
                logger: m => {
                    if (m.status === 'recognizing text') {
                        updateStatus(`Analyzing image text... ${Math.round(m.progress * 100)}%`);
                    }
                }
            });

            const lines = result.data.lines;
            
            // 3. Heuristic text processor: Find the largest blocks of text (likely the title)
            const validLines = lines.map(l => ({
                text: l.text.trim(),
                height: l.bbox.y1 - l.bbox.y0,
                y0: l.bbox.y0,
                // Count alphabet characters to ignore completely non-alphanumeric noise lines
                alphanumericCount: l.text.replace(/[^a-zA-Z0-9]/g, '').length
            })).filter(l => l.alphanumericCount > 0);

            if (validLines.length === 0) {
                updateStatus('No legible text could be found. Please use an image showing a movie title (like a poster).', true);
                return;
            }

            // Find the maximum height line
            const maxHeight = Math.max(...validLines.map(l => l.height));
            
            // Group lines that are similar in height (at least 65% of the largest text size)
            const titleLines = validLines.filter(l => l.height >= maxHeight * 0.65);
            
            // Sort grouped lines vertically (top to bottom)
            titleLines.sort((a, b) => a.y0 - b.y0);

            // Construct title string
            const extractedTitleQuery = titleLines.map(l => l.text)
                .join(' ')
                .replace(/[^a-zA-Z0-9\s]/g, ' ') // Strip weird characters
                .replace(/\s+/g, ' ')            // Normalize spaces
                .trim();

            if (!extractedTitleQuery) {
                updateStatus('Extracted text was not clear enough to perform a search.', true);
                return;
            }

            updateStatus(`Searching TMDb for: "${extractedTitleQuery}"...`);

            // 4. Fetch the TMDb Metadata
            const tmdbEndpoint = `https://api.themoviedb.org/3/search/multi?api_key=${encodeURIComponent(tmdbApiKey.trim())}&query=${encodeURIComponent(extractedTitleQuery)}`;
            
            const response = await fetch(tmdbEndpoint);
            const data = await response.json();

            if (data.status_code && data.status_code !== 1 && data.status_code !== 12) {
                updateStatus(`TMDb API Error: ${data.status_message}`, true);
                return;
            }

            if (!data.results || data.results.length === 0) {
                updateStatus(`No results found on TMDb for "${extractedTitleQuery}".`, true);
                return;
            }

            // 5. Render Success & Results
            statusBox.style.display = 'none'; // Hide loader

            const header = document.createElement('h3');
            header.textContent = `Metadata for "${extractedTitleQuery}"`;
            header.style.marginTop = '0';
            header.style.color = '#032541'; // TMDb Brand Color
            header.style.borderBottom = '2px solid #032541';
            header.style.paddingBottom = '10px';
            resultsContainer.appendChild(header);

            // Show top 3 results
            const topResults = data.results.slice(0, 3);

            topResults.forEach(item => {
                const card = document.createElement('div');
                card.style.display = 'flex';
                card.style.marginBottom = '20px';
                card.style.border = '1px solid #e3e3e3';
                card.style.borderRadius = '8px';
                card.style.overflow = 'hidden';
                card.style.boxShadow = '0 2px 8px rgba(0,0,0,0.06)';

                // Image Fallback
                const fallbackSVG = 'data:image/svg+xml;charset=UTF-8,%3Csvg width="120" height="180" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="100%25" height="100%25" fill="%23dbdbdb" /%3E%3Ctext x="50%25" y="50%25" fill="%237e7e7e" font-family="Arial" font-size="14" text-anchor="middle" dy=".3em"%3ENo Image%3C/text%3E%3C/svg%3E';
                const posterPath = item.poster_path || item.profile_path;
                
                const img = document.createElement('img');
                img.src = posterPath ? `https://image.tmdb.org/t/p/w200${posterPath}` : fallbackSVG;
                img.style.width = '120px';
                img.style.minHeight = '180px';
                img.style.objectFit = 'cover';
                card.appendChild(img);

                // Meta Container
                const textInfo = document.createElement('div');
                textInfo.style.padding = '16px';
                textInfo.style.display = 'flex';
                textInfo.style.flexDirection = 'column';

                const title = document.createElement('div');
                title.textContent = item.title || item.name || 'Unknown Title';
                title.style.fontSize = '1.1rem';
                title.style.fontWeight = 'bold';
                title.style.color = '#000';
                title.style.marginBottom = '4px';
                textInfo.appendChild(title);

                const dateText = item.release_date || item.first_air_date;
                const releaseYear = dateText ? new Date(dateText).getFullYear() : 'Unknown Year';
                const mediaTypeLabel = item.media_type ? item.media_type.toUpperCase() : 'UNKNOWN MEDIA';

                const subtext = document.createElement('div');
                subtext.textContent = `${releaseYear} • ${mediaTypeLabel}`;
                subtext.style.color = '#888';
                subtext.style.fontSize = '0.9rem';
                subtext.style.marginBottom = '12px';
                textInfo.appendChild(subtext);

                const overview = document.createElement('div');
                if (item.overview) {
                    overview.textContent = item.overview.length > 140 
                        ? item.overview.substring(0, 140) + '...'
                        : item.overview;
                } else {
                    overview.textContent = 'No overview available.';
                }
                overview.style.fontSize = '0.95rem';
                overview.style.color = '#444';
                overview.style.marginBottom = '10px';
                textInfo.appendChild(overview);
                
                if (item.vote_average) {
                    const rating = document.createElement('div');
                    rating.innerHTML = `<strong>★ ${item.vote_average.toFixed(1)}</strong> / 10`;
                    rating.style.fontSize = '0.9rem';
                    rating.style.color = '#f1c40f'; // Star Color
                    rating.style.marginTop = 'auto';
                    textInfo.appendChild(rating);
                }

                card.appendChild(textInfo);
                resultsContainer.appendChild(card);
            });

            // TMDb Attribution (TMDb Guidelines requirement)
            const attribution = document.createElement('div');
            attribution.innerHTML = `<small style="color: #666;">Data provided by <a href="https://www.themoviedb.org/" target="_blank" style="color: #01b4e4; text-decoration: none; font-weight: bold;">TMDb</a>.</small>`;
            attribution.style.textAlign = 'right';
            attribution.style.marginTop = '10px';
            resultsContainer.appendChild(attribution);

        } catch (error) {
            updateStatus(`Execution Error: ${error.message}`, true);
        }
    })();

    return container;
}