Image To Movie Identifier

async function processImage(originalImg, maxDimension = "640") {
    const maxDim = parseInt(maxDimension, 10) || 640;

    // Create the main container
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.maxWidth = '700px';
    container.style.margin = '0 auto';
    container.style.padding = '20px';
    container.style.backgroundColor = '#ffffff';
    container.style.borderRadius = '12px';
    container.style.boxShadow = '0 8px 16px rgba(0,0,0,0.1)';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.gap = '20px';
    container.style.alignItems = 'center';
    container.style.boxSizing = 'border-box';

    // Title
    const title = document.createElement('h2');
    title.textContent = 'Movie & Scene Identifier';
    title.style.margin = '0';
    title.style.color = '#2c3e50';
    title.style.textAlign = 'center';
    container.appendChild(title);

    // Draw original image on a scaled canvas
    const imgWidth = originalImg.width;
    const imgHeight = originalImg.height;
    const scale = Math.min(1, maxDim / Math.max(imgWidth, imgHeight));
    const targetWidth = Math.round(imgWidth * scale);
    const targetHeight = Math.round(imgHeight * scale);

    const canvas = document.createElement('canvas');
    canvas.width = targetWidth;
    canvas.height = targetHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0, targetWidth, targetHeight);

    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.borderRadius = '8px';
    canvas.style.border = '1px solid #e2e8f0';
    canvas.style.boxShadow = '0 4px 6px rgba(0,0,0,0.05)';
    container.appendChild(canvas);

    // Result box
    const resultBox = document.createElement('div');
    resultBox.style.padding = '20px';
    resultBox.style.backgroundColor = '#f8fafc';
    resultBox.style.border = '1px solid #e2e8f0';
    resultBox.style.borderRadius = '8px';
    resultBox.style.width = '100%';
    resultBox.style.textAlign = 'center';
    resultBox.style.boxSizing = 'border-box';
    
    // Loading state
    const loadingBox = document.createElement('div');
    loadingBox.innerHTML = `
        <style>
            @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        </style>
        <div style="display: inline-block; width: 40px; height: 40px; border: 4px solid #cbd5e1; border-radius: 50%; border-top: 4px solid #3b82f6; animation: spin 1s linear infinite; margin-bottom: 12px;"></div>
        <div style="color: #64748b; font-style: italic;">Analyzing image and searching public visual databases...</div>
    `;
    resultBox.appendChild(loadingBox);
    container.appendChild(resultBox);

    // Helper to format timestamps securely
    const formatTime = (seconds) => {
        if (!seconds || isNaN(seconds)) return '0m 0s';
        const m = Math.floor(seconds / 60);
        const s = Math.floor(seconds % 60);
        return `${m}m ${s}s`;
    };

    // Perform API lookups via IIFE
    (async () => {
        try {
            // Get JPEG blob from canvas
            const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.8));
            
            // --- 1. Search via Trace.moe ---
            // A well-known public API specifically for Reverse Image Search of Animated Movies & Series.
            const formData = new FormData();
            formData.append('image', blob);

            const searchResponse = await fetch('https://api.trace.moe/search', {
                method: 'POST',
                body: formData
            });

            if (!searchResponse.ok) {
                throw new Error(`Search API responded with status: ${searchResponse.status}`);
            }

            const searchData = await searchResponse.json();
            
            if (searchData.error) {
                throw new Error(searchData.error);
            }

            if (!searchData.result || searchData.result.length === 0) {
                resultBox.innerHTML = `
                    <p style="color: #ef4444; font-weight: bold; font-size: 1.1em;">No matches found.</p>
                    <p style="font-size: 14px; color: #64748b;">(Note: The currently available free API backend primarily indexes Animated Movies and Series. Live-action films may not return results.)</p>
                `;
                return;
            }

            const bestMatch = searchData.result[0];
            const similarity = (bestMatch.similarity * 100).toFixed(1);
            const anilistId = bestMatch.anilist;
            const confidenceColor = bestMatch.similarity >= 0.8 ? '#10b981' : '#f59e0b';

            // --- 2. Enrich with Anilist GraphQL API ---
            // Retrieves the real movie/series title instead of cryptic filenames.
            const anilistQuery = `
            query ($id: Int) {
              Media (id: $id, type: ANIME) {
                title {
                  english
                  romaji
                  native
                }
                format
                startDate {
                  year
                }
              }
            }
            `;
            
            let movieTitle = bestMatch.filename;
            let formatInfo = '';
            let yearInfo = '';

            try {
                const anilistRes = await fetch('https://graphql.anilist.co', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({ query: anilistQuery, variables: { id: anilistId } })
                });
                
                if (anilistRes.ok) {
                    const anilistData = await anilistRes.json();
                    if (anilistData.data && anilistData.data.Media) {
                        const media = anilistData.data.Media;
                        if (media.title) {
                            movieTitle = media.title.english || media.title.romaji || media.title.native || movieTitle;
                        }
                        if (media.format) formatInfo = media.format.replace('_', ' ');
                        if (media.startDate && media.startDate.year) yearInfo = media.startDate.year;
                    }
                }
            } catch (e) {
                console.warn('Metadata enrichment failed. Displaying raw filename.');
            }

            // Build Result UI
            let detailsHtml = '';
            detailsHtml += `<p style="margin: 8px 0; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px;"><strong>Confidence:</strong> <span style="color:${confidenceColor}; font-weight:bold;">${similarity}%</span></p>`;
            if (formatInfo) detailsHtml += `<p style="margin: 8px 0;"><strong>Format:</strong> ${formatInfo}</p>`;
            if (yearInfo) detailsHtml += `<p style="margin: 8px 0;"><strong>Year:</strong> ${yearInfo}</p>`;
            
            if (bestMatch.episode != null && bestMatch.episode !== "") {
                detailsHtml += `<p style="margin: 8px 0;"><strong>Episode:</strong> ${bestMatch.episode}</p>`;
            }
            detailsHtml += `<p style="margin: 8px 0 0 0;"><strong>Timestamp:</strong> ${formatTime(bestMatch.from)} - ${formatTime(bestMatch.to)}</p>`;

            const isLowConfidence = bestMatch.similarity < 0.8;

            resultBox.innerHTML = `
                <h3 style="margin-top:0; color: ${confidenceColor};">${!isLowConfidence ? 'Match Found!' : 'Low Confidence Match'}</h3>
                <p style="margin: 5px 0;"><strong>Movie/Series Title:</strong></p>
                <div style="font-size: 1.25em; font-weight: bold; color: #1e293b; margin-bottom: 15px;">${movieTitle}</div>
                
                <div style="text-align: left; background: #ffffff; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0; font-size: 14px; color: #475569; display: inline-block; min-width: 250px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);">
                    ${detailsHtml}
                </div>
                
                ${isLowConfidence ? `
                    <p style="font-size: 13px; color: #94a3b8; margin: 20px auto 0 auto; max-width: 450px; line-height: 1.4;">
                        <em>Note: The identifier database used here specializes in animated movies & series. Real-world or live-action images will generally produce a low confidence match.</em>
                    </p>
                ` : ''}
            `;

        } catch (error) {
            resultBox.innerHTML = `
                <p style="color: #ef4444; font-weight: bold; font-size: 1.1em; margin: 0 0 10px 0;">Network or identification Error</p>
                <p style="font-size: 14px; color: #64748b; margin:0;">${error.message}</p>
                <p style="font-size: 13px; color: #94a3b8; margin-top: 10px;">Please check your connection and try again.</p>
            `;
        }
    })();

    return container;
}