Image Web Development Platform

/**
 * Creates an interactive "Web Development Platform" widget for an image, allowing users
 * to manipulate CSS properties like border-radius, filter, and box-shadow in real-time
 * and get the generated CSS code.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} initialBorderRadius The initial border-radius in pixels. Defaults to 0.
 * @param {string} initialFilter The initial CSS filter string. Defaults to 'none'.
 * @param {string} initialBoxShadow The initial CSS box-shadow string. Defaults to 'none'.
 * @returns {HTMLElement} A self-contained HTML element representing the interactive platform.
 */
async function processImage(originalImg, initialBorderRadius = 0, initialFilter = 'none', initialBoxShadow = 'none') {
    // ---- Main Container ----
    const platformContainer = document.createElement('div');
    platformContainer.style.fontFamily = 'Arial, sans-serif';
    platformContainer.style.display = 'flex';
    platformContainer.style.flexDirection = 'column';
    platformContainer.style.gap = '20px';
    platformContainer.style.padding = '20px';
    platformContainer.style.border = '1px solid #ccc';
    platformContainer.style.borderRadius = '8px';
    platformContainer.style.backgroundColor = '#f9f9f9';
    platformContainer.style.maxWidth = '100%';
    platformContainer.style.boxSizing = 'border-box';

    // ---- Image Preview Area ----
    const imagePreviewContainer = document.createElement('div');
    imagePreviewContainer.style.display = 'flex';
    imagePreviewContainer.style.justifyContent = 'center';
    imagePreviewContainer.style.alignItems = 'center';
    imagePreviewContainer.style.padding = '20px';
    imagePreviewContainer.style.backgroundColor = '#e0e0e0';
    imagePreviewContainer.style.backgroundImage = 'linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)';
    imagePreviewContainer.style.backgroundSize = '20px 20px';
    imagePreviewContainer.style.backgroundPosition = '0 0, 0 10px, 10px -10px, -10px 0px';
    imagePreviewContainer.style.borderRadius = '8px';
    imagePreviewContainer.style.minHeight = '200px';

    const styledImg = document.createElement('img');
    styledImg.src = originalImg.src;
    styledImg.alt = 'Image Preview';
    styledImg.style.maxWidth = '100%';
    styledImg.style.maxHeight = '400px';
    styledImg.style.display = 'block';
    styledImg.style.transition = 'all 0.2s ease-in-out';
    imagePreviewContainer.appendChild(styledImg);

    // ---- Controls Area ----
    const controlsContainer = document.createElement('div');
    controlsContainer.style.display = 'grid';
    controlsContainer.style.gridTemplateColumns = 'auto 1fr auto';
    controlsContainer.style.gap = '15px';
    controlsContainer.style.alignItems = 'center';

    // ---- Code Output Area ----
    const codeContainer = document.createElement('div');
    const codeHeader = document.createElement('h3');
    codeHeader.textContent = 'Generated CSS';
    codeHeader.style.marginTop = '0';
    codeHeader.style.marginBottom = '10px';
    codeHeader.style.fontSize = '16px';
    codeHeader.style.color = '#333';

    const codeOutput = document.createElement('pre');
    codeOutput.style.backgroundColor = '#2d2d2d';
    codeOutput.style.color = '#f1f1f1';
    codeOutput.style.padding = '15px';
    codeOutput.style.borderRadius = '5px';
    codeOutput.style.whiteSpace = 'pre-wrap';
    codeOutput.style.wordBreak = 'break-all';
    codeOutput.style.fontSize = '14px';
    codeOutput.style.position = 'relative';

    const copyButton = document.createElement('button');
    copyButton.textContent = 'Copy';
    copyButton.style.position = 'absolute';
    copyButton.style.top = '10px';
    copyButton.style.right = '10px';
    copyButton.style.padding = '5px 10px';
    copyButton.style.border = '1px solid #555';
    copyButton.style.borderRadius = '4px';
    copyButton.style.backgroundColor = '#444';
    copyButton.style.color = '#fff';
    copyButton.style.cursor = 'pointer';
    copyButton.onclick = () => {
        navigator.clipboard.writeText(codeOutput.textContent).then(() => {
            copyButton.textContent = 'Copied!';
            setTimeout(() => {
                copyButton.textContent = 'Copy';
            }, 2000);
        });
    };

    codeOutput.appendChild(copyButton); // Appending button inside pre to keep it relative
    codeContainer.appendChild(codeHeader);
    codeContainer.appendChild(codeOutput);


    // ---- Helper to create controls ----
    const createControl = (labelText, inputType, id, value, min, max, step, unit = '') => {
        const label = document.createElement('label');
        label.setAttribute('for', id);
        label.textContent = labelText;
        label.style.fontWeight = 'bold';
        label.style.whiteSpace = 'nowrap';

        const input = document.createElement('input');
        input.type = inputType;
        input.id = id;
        input.value = value;
        if (inputType === 'range') {
            input.min = min;
            input.max = max;
            input.step = step;
        }
        input.style.width = '100%';
        input.style.padding = '8px';
        input.style.border = '1px solid #ccc';
        input.style.borderRadius = '4px';
        input.style.boxSizing = 'border-box';
        
        const valueDisplay = document.createElement('span');
        valueDisplay.textContent = `${value}${unit}`;
        valueDisplay.style.fontFamily = 'monospace';
        valueDisplay.style.minWidth = '50px';
        valueDisplay.style.textAlign = 'right';

        controlsContainer.appendChild(label);
        controlsContainer.appendChild(input);
        if(inputType === 'range') {
            controlsContainer.appendChild(valueDisplay);
        } else {
             const placeholder = document.createElement('span');
             controlsContainer.appendChild(placeholder); // Keep grid layout consistent
        }
        
        input.addEventListener('input', () => {
            if (valueDisplay) {
                valueDisplay.textContent = `${input.value}${unit}`;
            }
        });

        return input;
    };

    // ---- Instantiate Controls ----
    const maxRadius = Math.round(Math.min(originalImg.width, originalImg.height) / 2);
    const borderRadiusInput = createControl('Border Radius', 'range', 'borderRadius', initialBorderRadius, 0, maxRadius, 1, 'px');
    const filterInput = createControl('CSS Filter', 'text', 'filter', initialFilter);
    filterInput.placeholder = 'e.g., grayscale(1) invert(1)';
    const boxShadowInput = createControl('Box Shadow', 'text', 'boxShadow', initialBoxShadow);
    boxShadowInput.placeholder = 'e.g., 10px 10px 20px #00000080';

    // ---- Core Logic: Update Styles & Code ----
    const updateStylesAndCode = () => {
        const borderRadius = `${borderRadiusInput.value}px`;
        const filter = filterInput.value.trim() || 'none';
        const boxShadow = boxShadowInput.value.trim() || 'none';

        // Apply styles
        styledImg.style.borderRadius = borderRadius;
        styledImg.style.filter = filter;
        styledImg.style.boxShadow = boxShadow;

        // Generate and display code
        const cssCode =
`.styled-image {
    border-radius: ${borderRadius};
    filter: ${filter};
    box-shadow: ${boxShadow};
    /* Additional properties for better display */
    max-width: 100%;
    height: auto;
    display: block;
}
`;
        codeOutput.textContent = cssCode;
        codeOutput.appendChild(copyButton); // Re-append button after text change
    };

    // ---- Attach Event Listeners ----
    [borderRadiusInput, filterInput, boxShadowInput].forEach(input => {
        input.addEventListener('input', updateStylesAndCode);
    });

    // ---- Initial State ----
    updateStylesAndCode();

    // ---- Assemble the Platform ----
    platformContainer.appendChild(imagePreviewContainer);
    platformContainer.appendChild(controlsContainer);
    platformContainer.appendChild(codeContainer);

    return platformContainer;
}