Image License Information Viewer

async function processImage(originalImg, fallbackDescription = "Slut license") {
    // Create the main container div
    const wrapper = document.createElement('div');
    wrapper.style.fontFamily = '"Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    wrapper.style.maxWidth = '600px';
    wrapper.style.margin = '0 auto';
    wrapper.style.backgroundColor = '#ffffff';
    wrapper.style.border = '1px solid #e0e0e0';
    wrapper.style.borderRadius = '12px';
    wrapper.style.overflow = 'hidden';
    wrapper.style.boxShadow = '0 8px 16px rgba(0,0,0,0.1)';

    // Create the header
    const header = document.createElement('div');
    header.style.backgroundColor = '#f4f4f5';
    header.style.padding = '16px 20px';
    header.style.borderBottom = '1px solid #e0e0e0';
    
    const title = document.createElement('h2');
    title.innerText = 'License Information Viewer';
    title.style.margin = '0';
    title.style.fontSize = '1.25rem';
    title.style.color = '#18181b';
    header.appendChild(title);
    wrapper.appendChild(header);

    // Create the image preview container
    const imgContainer = document.createElement('div');
    imgContainer.style.padding = '20px';
    imgContainer.style.textAlign = 'center';
    imgContainer.style.backgroundColor = '#fafafa';
    
    const imgPreview = document.createElement('img');
    imgPreview.src = originalImg.src;
    imgPreview.style.maxWidth = '100%';
    imgPreview.style.maxHeight = '300px';
    imgPreview.style.objectFit = 'contain';
    imgPreview.style.borderRadius = '8px';
    imgPreview.style.boxShadow = '0 2px 4px rgba(0,0,0,0.05)';
    imgContainer.appendChild(imgPreview);
    wrapper.appendChild(imgContainer);

    // Create the info container where metadata will be displayed
    const infoContainer = document.createElement('div');
    infoContainer.style.padding = '20px';
    infoContainer.style.borderTop = '1px solid #e0e0e0';
    
    const loadingText = document.createElement('p');
    loadingText.innerText = 'Scanning image metadata for license/copyright information...';
    loadingText.style.color = '#71717a';
    loadingText.style.margin = '0';
    infoContainer.appendChild(loadingText);
    
    wrapper.appendChild(infoContainer);

    // Extraction logic using `exifr` library
    try {
        // Dynamically import exifr for parsing standard EXIF/IPTC/XMP data
        const exifr = await import('https://cdn.jsdelivr.net/npm/exifr@7.1.3/dist/full.esm.mjs');
        
        let meta = {};
        try {
            // Read data from the src (supports Object URLs and Data URIs)
            meta = await exifr.default.parse(originalImg.src, {
                tiff: true,
                xmp: true,
                iptc: true,
                exif: true
            }) || {};
        } catch (parseErr) {
            console.warn("Could not parse image for EXIF data:", parseErr);
        }

        // Common tags across different metadata standards indicating copyright or license
        const possibleFields = [
            'Copyright', 'CopyrightNotice', 'Artist', 'Creator', 
            'Rights', 'UsageTerms', 'WebStatement', 'Credit', 
            'Source', 'License', 'ProfileCopyright', 'MakerNote'
        ];
        
        let licenseData = {};
        for (const field of possibleFields) {
            if (meta[field]) {
                licenseData[field] = meta[field];
            }
        }

        infoContainer.innerHTML = ''; // Clear loading state

        if (Object.keys(licenseData).length > 0) {
            const table = document.createElement('table');
            table.style.width = '100%';
            table.style.borderCollapse = 'collapse';
            
            for (const [key, value] of Object.entries(licenseData)) {
                const tr = document.createElement('tr');
                
                const tdKey = document.createElement('td');
                tdKey.innerText = key;
                tdKey.style.padding = '8px 0px';
                tdKey.style.fontWeight = '600';
                tdKey.style.color = '#3f3f46';
                tdKey.style.borderBottom = '1px solid #f4f4f5';
                tdKey.style.width = '35%';
                tdKey.style.verticalAlign = 'top';
                
                const tdVal = document.createElement('td');
                tdVal.innerText = typeof value === 'object' ? JSON.stringify(value) : value;
                tdVal.style.padding = '8px 0px';
                tdVal.style.color = '#52525b';
                tdVal.style.borderBottom = '1px solid #f4f4f5';
                tdVal.style.wordBreak = 'break-word';
                
                tr.appendChild(tdKey);
                tr.appendChild(tdVal);
                table.appendChild(tr);
            }
            infoContainer.appendChild(table);
        } else {
            // Display empty state w/ fallback text if no EXIF present
            const noData = document.createElement('div');
            noData.style.backgroundColor = '#fef2f2';
            noData.style.border = '1px solid #fecaca';
            noData.style.padding = '12px 16px';
            noData.style.borderRadius = '6px';
            noData.style.color = '#991b1b';
            
            noData.innerHTML = `<strong>No license metadata found.</strong><br/>
            <span style="font-size: 0.9em; margin-top: 4px; display: inline-block;">
                This image does not contain embedded Copyright, IPTC, Exif, or XMP license data.
            </span><br/>
            <span style="font-size: 0.85em; margin-top: 10px; display: inline-block; color: #b91c1c;">
                <em>Descriptor / Custom Text: ${fallbackDescription}</em>
            </span>`;
            
            infoContainer.appendChild(noData);
        }
    } catch (err) {
        infoContainer.innerHTML = '';
        const errorDiv = document.createElement('div');
        errorDiv.style.padding = '12px 16px';
        errorDiv.style.backgroundColor = '#fef2f2';
        errorDiv.style.border = '1px solid #fecaca';
        errorDiv.style.borderRadius = '6px';
        errorDiv.style.color = '#dc2626';
        errorDiv.innerText = `Error loading EXIF parser: ${err.message}`;
        infoContainer.appendChild(errorDiv);
    }

    // Return the DOM element ready for display
    return wrapper;
}