Image Link Address Translator

async function processImage(originalImg) {
    // The main container for the output
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.padding = '1em';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '8px';
    container.style.backgroundColor = '#fdfdfd';
    container.style.maxWidth = '100%';
    container.style.overflowWrap = 'break-word';
    container.style.wordBreak = 'break-all';

    const header = document.createElement('h3');
    header.textContent = 'Image URL Analysis';
    header.style.marginTop = '0';
    header.style.marginBottom = '1em';
    header.style.color = '#333';
    header.style.borderBottom = '2px solid #eee';
    header.style.paddingBottom = '0.5em';
    container.appendChild(header);

    // Get the fully-resolved image source URL from the Image object
    const imageUrl = originalImg.src;

    try {
        // Use the built-in URL API to parse the address
        const url = new URL(imageUrl);

        // Create a table to display the parts of the URL
        const table = document.createElement('table');
        table.style.width = '100%';
        table.style.borderCollapse = 'collapse';
        table.style.fontSize = '14px';

        const addRow = (label, value) => {
            // Don't add rows for components that don't exist (like port or hash)
            if (value === '' || value === null || value === undefined) {
                 return;
            }

            const row = table.insertRow();
            const cellLabel = row.insertCell();
            const cellValue = row.insertCell();

            cellLabel.textContent = label;
            cellLabel.style.fontWeight = 'bold';
            cellLabel.style.padding = '10px';
            cellLabel.style.border = '1px solid #ddd';
            cellLabel.style.backgroundColor = '#f9f9f9';
            cellLabel.style.width = '30%';
            cellLabel.style.textAlign = 'right';
            cellLabel.style.paddingRight = '1em';

            // For the full URL, make it a clickable link
            if (label === 'Full URL') {
                const link = document.createElement('a');
                link.href = value;
                link.textContent = value;
                link.target = '_blank';
                link.rel = 'noopener noreferrer';
                link.style.color = '#0066cc';
                cellValue.appendChild(link);
            } else {
                 cellValue.style.fontFamily = 'monospace, "Courier New", Courier';
                 cellValue.textContent = value;
            }
            cellValue.style.padding = '10px';
            cellValue.style.border = '1px solid #ddd';
        };

        // Add rows for each part of the URL
        addRow('Full URL', url.href);
        addRow('Protocol', url.protocol);
        addRow('Hostname', url.hostname);
        addRow('Port', url.port);
        addRow('Pathname', url.pathname);
        addRow('Search (Query)', url.search);
        addRow('Hash', url.hash);
        
        container.appendChild(table);

        // If there are query parameters, display them in a separate, detailed table
        if (url.searchParams && url.searchParams.size > 0) {
            const queryHeader = document.createElement('h4');
            queryHeader.textContent = 'Query Parameters Breakdown';
            queryHeader.style.marginTop = '1.5em';
            queryHeader.style.marginBottom = '0.5em';
            queryHeader.style.color = '#333';
            container.appendChild(queryHeader);

            const queryTable = document.createElement('table');
            queryTable.style.width = '100%';
            queryTable.style.borderCollapse = 'collapse';
            queryTable.style.fontSize = '14px';
            
            // Header for query table
            const queryThead = queryTable.createTHead();
            const headerRow = queryThead.insertRow();
            const th1 = document.createElement('th');
            const th2 = document.createElement('th');
            th1.textContent = 'Parameter';
            th2.textContent = 'Value';

            [th1, th2].forEach(th => {
                 th.style.padding = '10px';
                 th.style.border = '1px solid #ddd';
                 th.style.backgroundColor = '#f9f9f9';
                 th.style.textAlign = 'left';
            });
            headerRow.appendChild(th1);
            headerRow.appendChild(th2);

            const queryBody = queryTable.createTBody();
            for (const [key, value] of url.searchParams.entries()) {
                 const row = queryBody.insertRow();
                 const cellKey = row.insertCell();
                 const cellVal = row.insertCell();
                 cellKey.textContent = key;
                 cellVal.textContent = value;
                 cellKey.style.padding = '10px';
                 cellKey.style.border = '1px solid #ddd';
                 cellKey.style.fontFamily = 'monospace';
                 cellVal.style.padding = '10px';
                 cellVal.style.border = '1px solid #ddd';
                 cellVal.style.fontFamily = 'monospace';
            }
            container.appendChild(queryTable);
        }

    } catch (e) {
        // Handle cases where the src is not a valid URL (e.g., a data URI or a blob URL)
        const infoBox = document.createElement('div');
        infoBox.style.padding = '1em';
        infoBox.style.backgroundColor = '#fffbe6';
        infoBox.style.border = '1px solid #ffe58f';
        infoBox.style.borderRadius = '4px';
        infoBox.style.marginTop = '1em';

        if (imageUrl.startsWith('data:')) {
            infoBox.innerHTML = `
                <p style="margin-top:0; font-weight:bold;">This image is using a Data URI.</p>
                <p style="margin-bottom:0;">It's not a link to a file on a server. Instead, the image data is encoded directly into the URL itself.</p>
            `;
        } else if (imageUrl.startsWith('blob:')) {
             infoBox.innerHTML = `
                <p style="margin-top:0; font-weight:bold;">This image is using a Blob URL.</p>
                <p style="margin-bottom:0;">This is a temporary, local URL created by the browser to reference data in memory. It cannot be accessed from another tab or browser.</p>
            `;
        } else {
             infoBox.innerHTML = `
                <p style="margin-top:0; font-weight:bold;">Could not parse the image source.</p>
                <p style="margin-bottom:0;">The provided source attribute is not a standard, parsable web URL.</p>
            `;
        }
        
        const sourceDisplay = document.createElement('textarea');
        sourceDisplay.value = imageUrl;
        sourceDisplay.readOnly = true;
        sourceDisplay.style.width = '100%';
        sourceDisplay.style.boxSizing = 'border-box';
        sourceDisplay.style.height = '100px';
        sourceDisplay.style.resize = 'vertical';
        sourceDisplay.style.marginTop = '10px';
        sourceDisplay.style.fontFamily = 'monospace';
        sourceDisplay.style.fontSize = '12px';
        infoBox.appendChild(sourceDisplay);
        
        container.appendChild(infoBox);
    }
    
    return container;
}