Image To IMDB Information Fetcher

async function processImage(originalImg, lang = 'eng') {
    // This function performs OCR on an image to guess a movie/show title,
    // then fetches information from the OMDb API.
    // NOTE: It dynamically loads the Tesseract.js library for OCR.

    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.textAlign = 'center';
    container.style.maxWidth = '600px';
    container.style.margin = 'auto';

    const statusDiv = document.createElement('div');
    statusDiv.textContent = 'Initializing recognition engine...';
    statusDiv.style.padding = '20px';
    container.appendChild(statusDiv);

    // 1. Dynamically load the Tesseract.js library from a CDN
    try {
        if (typeof Tesseract === 'undefined') {
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
            await new Promise((resolve, reject) => {
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }
    } catch (error) {
        statusDiv.textContent = 'Error: Could not load the OCR library. Please check your internet connection and try again.';
        console.error('Failed to load Tesseract.js:', error);
        return container;
    }

    // 2. Perform OCR on the provided image
    statusDiv.textContent = 'Analyzing image for text (this may take a moment)...';
    let recognizedText = '';
    try {
        const worker = await Tesseract.createWorker(lang);
        const {
            data: {
                text
            }
        } = await worker.recognize(originalImg);
        await worker.terminate();

        // A simple heuristic to find the title: pick the longest line of detected text.
        const lines = text.split('\n').filter(line => line.trim().length > 2);
        recognizedText = lines.sort((a, b) => b.length - a.length)[0] || 'Unknown';
        recognizedText = recognizedText.trim().replace(/[^a-zA-Z0-9\s]/g, '');
    } catch (error) {
        console.error('OCR Error:', error);
        recognizedText = 'Could not read text';
    }

    // 3. Build the interactive UI for searching
    container.innerHTML = ''; // Clear loading status

    const titleHeader = document.createElement('h3');
    titleHeader.textContent = 'Detected Title (edit if incorrect):';
    container.appendChild(titleHeader);

    const input = document.createElement('input');
    input.type = 'text';
    input.value = recognizedText;
    input.style.width = '90%';
    input.style.padding = '10px';
    input.style.fontSize = '16px';
    input.style.marginBottom = '10px';
    input.style.textAlign = 'center';
    container.appendChild(input);

    const button = document.createElement('button');
    button.textContent = 'Fetch IMDB Info';
    button.style.padding = '10px 20px';
    button.style.fontSize = '16px';
    button.style.cursor = 'pointer';
    container.appendChild(button);

    const resultDiv = document.createElement('div');
    resultDiv.style.marginTop = '20px';
    resultDiv.style.textAlign = 'left';
    resultDiv.style.padding = '15px';
    resultDiv.style.border = '1px solid #ddd';
    resultDiv.style.borderRadius = '8px';
    resultDiv.style.display = 'none'; // Hidden until a search is performed
    container.appendChild(resultDiv);

    const imgContainer = document.createElement('div');
    imgContainer.style.marginTop = '20px';
    const p = document.createElement('p');
    p.textContent = 'Original Image:';
    p.style.fontWeight = 'bold';
    originalImg.style.maxWidth = '300px';
    originalImg.style.maxHeight = '400px';
    originalImg.style.border = '1px solid #ccc';
    imgContainer.appendChild(p);
    imgContainer.appendChild(originalImg);
    container.appendChild(imgContainer);


    // 4. Define the function to fetch data when the button is clicked
    button.onclick = async () => {
        const searchTerm = input.value.trim();
        if (!searchTerm) {
            resultDiv.innerHTML = 'Please enter a title to search.';
            resultDiv.style.display = 'block';
            return;
        }

        resultDiv.style.display = 'block';
        resultDiv.innerHTML = 'Fetching information...';
        const encodedTitle = encodeURIComponent(searchTerm);

        // This is a public, rate-limited API key for demonstration via OMDb API.
        // For a real application, you should get your own free key from omdbapi.com.
        const apiKey = '7c2e3381';
        const url = `https://www.omdbapi.com/?t=${encodedTitle}&plot=full&apikey=${apiKey}`;

        // Helper function to render a fallback search link
        const renderFallback = (message) => {
            resultDiv.innerHTML = `
                <p>${message}</p>
                <p>You can try searching directly:</p>
                <a href="https://www.imdb.com/find?q=${encodedTitle}" target="_blank" rel="noopener noreferrer">
                    Search for "${searchTerm}" on IMDB
                </a>`;
        };

        try {
            const response = await fetch(url);
            if (!response.ok) {
                throw new Error(`Network response was not ok (status: ${response.status})`);
            }
            const data = await response.json();

            if (data.Response === "True") {
                // Display the fetched data in a structured format
                resultDiv.innerHTML = `
                    <div style="display: flex; gap: 20px; flex-wrap: wrap;">
                        <div style="flex: 1; min-width: 150px; text-align:center;">
                            <img src="${data.Poster !== 'N/A' ? data.Poster : ''}" alt="Poster" style="max-width: 100%; border-radius: 5px;">
                        </div>
                        <div style="flex: 2; min-width: 250px;">
                            <h2 style="margin-top: 0; margin-bottom: 5px;">${data.Title} (${data.Year})</h2>
                            <p style="margin: 0; color: #666; font-size: 0.9em;">
                                ${data.Rated} | ${data.Runtime} | ${data.Genre}
                            </p>
                            <p style="margin-top: 10px;"><strong>IMDB Rating:</strong> ${data.imdbRating} (${data.imdbVotes} votes)</p>
                            <hr>
                            <p><strong>Plot:</strong> ${data.Plot}</p>
                            <p><strong>Director:</strong> ${data.Director}</p>
                            <p><strong>Actors:</strong> ${data.Actors}</p>
                            <a href="https://www.imdb.com/title/${data.imdbID}/" target="_blank" rel="noopener noreferrer">View on IMDB</a>
                        </div>
                    </div>`;
            } else {
                renderFallback(`Could not find information for "${searchTerm}". Error: ${data.Error}`);
            }
        } catch (error) {
            console.error('Fetch error:', error);
            renderFallback('An error occurred while fetching data. The API might be down or your request was blocked.');
        }
    };

    // 5. Return the fully constructed, interactive HTML element
    return container;
}