YouTube Video Thumbnail Image Downloader

async function processImage(originalImg, youtubeUrlOrVideoId = "https://www.youtube.com/watch?v=dQw4w9WgXcQ", resolution = "Highest Available") {
    // Extract YouTube Video ID from standard URL, or use directly if it's already an 11-char ID
    let videoId = typeof youtubeUrlOrVideoId === 'string' ? youtubeUrlOrVideoId.trim() : "";
    
    if (!videoId) {
        videoId = "dQw4w9WgXcQ";
    } else {
        const match = videoId.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i);
        if (match) {
            videoId = match[1];
        } else if (videoId.length !== 11) {
            // Fallback ID to prevent broken layout if an invalid string is provided
            videoId = "dQw4w9WgXcQ"; 
        }
    }

    // Map the requested resolution setting
    let targetRes = null;
    if (typeof resolution === 'string') {
        const r = resolution.toLowerCase();
        if (r.includes('1080') || r.includes('max')) targetRes = "maxresdefault.jpg";
        else if (r.includes('720') || r.includes('sd')) targetRes = "sddefault.jpg";
        else if (r.includes('480') || r.includes('high') || r.includes('hq')) targetRes = "hqdefault.jpg";
        else if (r.includes('320') || r.includes('medium') || r.includes('mq')) targetRes = "mqdefault.jpg";
        else if (r.includes('120') || r.includes('default')) targetRes = "default.jpg";
    }
    
    let finalUrl = "";

    // If specific resolution is asked, use it; otherwise automatically verify highest available
    if (targetRes) {
        finalUrl = `https://img.youtube.com/vi/${videoId}/${targetRes}`;
    } else {
        const resolutionsToCheck = ['maxresdefault.jpg', 'sddefault.jpg', 'hqdefault.jpg', 'mqdefault.jpg', 'default.jpg'];
        for (const res of resolutionsToCheck) {
            const url = `https://img.youtube.com/vi/${videoId}/${res}`;
            try {
                const isValid = await new Promise((resolve) => {
                    const img = new Image();
                    img.onload = () => {
                        // YouTube returns a generic 120x90 warning box if maxres/sd are missing. Skip those.
                        if ((res === 'maxresdefault.jpg' || res === 'sddefault.jpg') && img.width === 120 && img.height === 90) {
                            resolve(false);
                        } else {
                            resolve(true);
                        }
                    };
                    img.onerror = () => resolve(false);
                    img.src = url;
                });
                
                if (isValid) {
                    finalUrl = url;
                    break;
                }
            } catch (e) {
                // Ignore and proceed to next resolution
            }
        }
        
        // Final fallback just in case
        if (!finalUrl) {
            finalUrl = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
        }
    }

    // Build user interface container
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.gap = '15px';
    container.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif';
    container.style.padding = '20px';
    container.style.boxSizing = 'border-box';
    container.style.backgroundColor = '#f9f9f9';
    container.style.borderRadius = '10px';
    container.style.width = '100%';

    const title = document.createElement('h3');
    title.style.margin = '0';
    title.style.color = '#333';
    title.textContent = 'YouTube Thumbnail Download';
    
    const dlInfo = document.createElement('p');
    dlInfo.textContent = "Click the button below to view the full resolution image, then right-click and select 'Save image as...'.";
    dlInfo.style.fontSize = "14px";
    dlInfo.style.color = "#555";
    dlInfo.style.textAlign = "center";
    dlInfo.style.margin = "0";
    
    const dlWrapper = document.createElement('div');
    dlWrapper.style.display = 'flex';
    dlWrapper.style.gap = '15px';

    const imgElem = document.createElement('img');
    imgElem.crossOrigin = "anonymous"; // Request cleanly
    imgElem.style.maxWidth = '100%';
    imgElem.style.maxHeight = '65vh';
    imgElem.style.border = '1px solid #ddd';
    imgElem.style.borderRadius = '8px';
    imgElem.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
    imgElem.style.objectFit = 'contain';
    imgElem.style.backgroundColor = '#000';
    
    imgElem.onerror = () => {
        imgElem.style.display = 'none';
        title.textContent = 'Failed to load thumbnail.';
        title.style.color = '#c00';
        dlInfo.textContent = 'Please check the video URL or Video ID.';
        dlWrapper.style.display = 'none';
    };

    imgElem.src = finalUrl;

    const openBtn = document.createElement('a');
    openBtn.href = finalUrl;
    openBtn.target = '_blank';
    openBtn.textContent = 'Open Full Size Image';
    openBtn.style.padding = '12px 24px';
    openBtn.style.backgroundColor = '#FF0000';
    openBtn.style.color = '#ffffff';
    openBtn.style.textDecoration = 'none';
    openBtn.style.borderRadius = '6px';
    openBtn.style.fontWeight = 'bold';
    openBtn.style.transition = 'background-color 0.2s';
    openBtn.style.cursor = 'pointer';
    openBtn.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
    
    openBtn.onmouseover = () => openBtn.style.backgroundColor = '#CC0000';
    openBtn.onmouseout = () => openBtn.style.backgroundColor = '#FF0000';

    dlWrapper.appendChild(openBtn);
    
    container.appendChild(title);
    container.appendChild(imgElem);
    container.appendChild(dlInfo);
    container.appendChild(dlWrapper);

    return container;
}