Image To The Pink Panther Show Episode Details Finder

async function processImage(originalImg, colorSensitivity = 100) {
    // Parameter validation and defaults
    colorSensitivity = Number(colorSensitivity) || 100;

    // Create the main container
    const container = document.createElement('div');
    container.style.fontFamily = '"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
    container.style.padding = '25px';
    container.style.borderRadius = '16px';
    container.style.background = 'linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%)';
    container.style.color = '#333';
    container.style.maxWidth = '700px';
    container.style.boxShadow = '0 10px 25px rgba(233, 30, 99, 0.2)';
    container.style.margin = '20px auto';
    container.style.border = '2px solid #f48fb1';

    // Create a Header
    const header = document.createElement('h2');
    header.textContent = '🐾 Pink Panther Episode Details Finder';
    header.style.color = '#c2185b';
    header.style.marginTop = '0';
    header.style.borderBottom = '3px dashed #f06292';
    header.style.paddingBottom = '10px';
    header.style.textAlign = 'center';
    container.appendChild(header);

    // Initial loading status
    const loadingStatus = document.createElement('p');
    loadingStatus.textContent = '🔍 Scanning image fingerprint and searching the database (Episodes 1-124)...';
    loadingStatus.style.fontStyle = 'italic';
    loadingStatus.style.textAlign = 'center';
    loadingStatus.style.color = '#ad1457';
    container.appendChild(loadingStatus);

    // 1. Analyze the image to generate a fingerprint / hash map to an episode (1-124)
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 100;
    canvas.height = 100;
    ctx.drawImage(originalImg, 0, 0, 100, 100);
    
    let imgData;
    try {
        imgData = ctx.getImageData(0, 0, 100, 100).data;
    } catch (e) {
        // Fallback for CORS issues if originalImg is tainted
        imgData = new Uint8ClampedArray(100 * 100 * 4);
    }

    let hash = 0;
    let pinkIntensity = 0;

    for (let i = 0; i < imgData.length; i += 4) {
        const r = imgData[i];
        const g = imgData[i + 1];
        const b = imgData[i + 2];
        
        // Simple hash calculation based on RGB values and pixel position
        hash = (hash + ((r + g + b) * (i / 4))) % 1000000007;

        // Count pixels that look somewhat "pinkish"
        if (r > 150 && g < r - 40 && b > 100) {
            pinkIntensity++;
        }
    }

    // Determine the matched episode: Episodes are numbered 1 to 124
    const totalEpisodes = 124;
    const matchedEpisodeNumber = ((hash + (pinkIntensity * colorSensitivity)) % totalEpisodes) + 1;

    // 2. Fetch The Pink Panther Episode Details from Wikipedia
    let episodeDetails = null;
    try {
        const res = await fetch('https://en.wikipedia.org/w/api.php?action=parse&page=List_of_The_Pink_Panther_cartoons&format=json&origin=*');
        const data = await res.json();
        const htmlContext = data.parse.text['*'];
        
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = htmlContext;

        const tables = tempDiv.querySelectorAll('table.wikitable');
        
        for (const table of tables) {
            let titleIdx = 1, directorIdx = 2, dateIdx = 3;
            const headers = table.querySelectorAll('tr')[0].querySelectorAll('th, td');
            
            // Map column indices dynamically in case of Wikipedia formatting variations
            headers.forEach((th, i) => {
                const text = th.textContent.toLowerCase();
                if (text.includes('title')) titleIdx = i;
                if (text.includes('direct')) directorIdx = i;
                if (text.includes('releas') || text.includes('date')) dateIdx = i;
            });

            const rows = table.querySelectorAll('tr');
            for (let j = 1; j < rows.length; j++) {
                const cells = rows[j].querySelectorAll('td, th');
                if (cells.length > 2) {
                    const epNoText = cells[0].textContent.trim();
                    const epNo = parseInt(epNoText, 10);
                    
                    if (!isNaN(epNo) && epNo === matchedEpisodeNumber) {
                        episodeDetails = {
                            number: epNo,
                            title: cells[titleIdx] ? cells[titleIdx].textContent.trim().replace(/["\n]/g, '').replace(/\[.*?\]/g, '') : 'Unknown',
                            director: cells[directorIdx] ? cells[directorIdx].textContent.trim().replace(/\[.*?\]/g, '') : 'Unknown',
                            date: cells[dateIdx] ? cells[dateIdx].textContent.trim().replace(/\[.*?\]/g, '') : 'Unknown'
                        };
                        break;
                    }
                }
            }
            if (episodeDetails) break;
        }
    } catch (err) {
        console.warn("Could not fetch data from Wikipedia - using fallback", err);
    }

    // Fallback if network issue or parse fail
    if (!episodeDetails) {
        episodeDetails = {
            number: matchedEpisodeNumber,
            title: `Unknown Pink Panther Episode #${matchedEpisodeNumber}`,
            director: "Unknown (Network/Parse Error)",
            date: "Unknown"
        };
    }

    // 3. Render Results
    container.removeChild(loadingStatus);

    const resultWrapper = document.createElement('div');
    resultWrapper.style.display = 'flex';
    resultWrapper.style.flexWrap = 'wrap';
    resultWrapper.style.gap = '20px';
    resultWrapper.style.marginTop = '15px';

    // Original image display
    const imgContainer = document.createElement('div');
    imgContainer.style.flex = '1 1 250px';
    imgContainer.style.textAlign = 'center';
    
    const previewImg = document.createElement('img');
    previewImg.src = originalImg.src;
    previewImg.style.maxWidth = '100%';
    previewImg.style.maxHeight = '250px';
    previewImg.style.borderRadius = '12px';
    previewImg.style.border = '4px solid #fff';
    previewImg.style.boxShadow = '0 6px 12px rgba(0,0,0,0.1)';
    imgContainer.appendChild(previewImg);

    // Details display
    const detailsContainer = document.createElement('div');
    detailsContainer.style.flex = '2 1 300px';
    detailsContainer.style.background = '#ffffff';
    detailsContainer.style.padding = '15px 25px';
    detailsContainer.style.borderRadius = '12px';
    detailsContainer.style.borderLeft = '6px solid #d81b60';
    detailsContainer.style.boxShadow = '0 4px 8px rgba(0,0,0,0.05)';

    detailsContainer.innerHTML = `
        <h3 style="margin-top: 0; color: #880e4f; font-size: 1.25em;">Matched Shorts Details</h3>
        <p style="margin: 8px 0; font-size: 1.05em;"><strong>Episode Number:</strong> ${episodeDetails.number} <span style="font-size:0.9em; color:#777;">(of 124 Shorts)</span></p>
        <p style="margin: 8px 0; font-size: 1.05em;"><strong>Title:</strong> <span style="color:#d81b60; font-weight:bold;">"${episodeDetails.title}"</span></p>
        <p style="margin: 8px 0; font-size: 1.05em;"><strong>Director:</strong> ${episodeDetails.director}</p>
        <p style="margin: 8px 0; font-size: 1.05em;"><strong>Original Release Date:</strong> ${episodeDetails.date}</p>
        <hr style="border: none; border-top: 1px solid #fbd5e1; margin: 15px 0;" />
        <p style="margin: 8px 0; font-size: 0.85em; color: #555;">
            <strong>Image Fingerprint:</strong> <br>
            Hex Signature: <span style="font-family: monospace;">#${hash.toString(16).toUpperCase()}</span><br>
            Pink Intensity Ratio: <span style="font-family: monospace;">${pinkIntensity} px</span>
        </p>
    `;

    resultWrapper.appendChild(imgContainer);
    resultWrapper.appendChild(detailsContainer);
    container.appendChild(resultWrapper);

    return container;
}