Image Torrent Download Manager

/**
 * Creates a mock torrent download manager UI for a given image.
 *
 * @param {Image} originalImg The original JavaScript Image object.
 * @param {string} [fileName='image-file.zip'] The desired file name to display for the download.
 * @param {number} [fileSizeInMB=25.8] The total file size in megabytes to simulate.
 * @returns {HTMLElement} A div element containing the complete, self-contained download manager UI.
 */
async function processImage(originalImg, fileName = 'image-file.zip', fileSizeInMB = 25.8) {
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, "Helvetica Neue", Helvetica, sans-serif';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '8px';
    container.style.padding = '15px';
    container.style.maxWidth = '500px';
    container.style.display = 'flex';
    container.style.gap = '15px';
    container.style.backgroundColor = '#f9f9f9';
    container.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)';
    container.style.overflow = 'hidden';

    // --- 1. Thumbnail Column ---
    const thumbnailContainer = document.createElement('div');
    const thumbnailImg = document.createElement('img');
    thumbnailImg.src = originalImg.src;
    thumbnailImg.alt = 'Image thumbnail';
    thumbnailImg.style.width = '100px';
    thumbnailImg.style.height = '100px';
    thumbnailImg.style.objectFit = 'cover';
    thumbnailImg.style.borderRadius = '4px';
    thumbnailImg.style.border = '1px solid #ddd;';
    thumbnailContainer.appendChild(thumbnailImg);

    // --- 2. Details Column ---
    const detailsContainer = document.createElement('div');
    detailsContainer.style.flex = '1';
    detailsContainer.style.display = 'flex';
    detailsContainer.style.flexDirection = 'column';
    detailsContainer.style.gap = '8px';
    detailsContainer.style.minWidth = '0'; // Prevents flex item from overflowing

    // File Name
    const nameEl = document.createElement('div');
    nameEl.textContent = fileName;
    nameEl.title = fileName;
    nameEl.style.fontWeight = 'bold';
    nameEl.style.fontSize = '16px';
    nameEl.style.whiteSpace = 'nowrap';
    nameEl.style.overflow = 'hidden';
    nameEl.style.textOverflow = 'ellipsis';

    // Progress Bar
    const progressWrapper = document.createElement('div');
    progressWrapper.style.position = 'relative';

    const progressContainer = document.createElement('div');
    progressContainer.style.width = '100%';
    progressContainer.style.backgroundColor = '#e0e0e0';
    progressContainer.style.borderRadius = '4px';
    progressContainer.style.overflow = 'hidden';
    progressContainer.style.height = '20px';

    const progressBar = document.createElement('div');
    progressBar.style.width = '0%';
    progressBar.style.height = '100%';
    progressBar.style.backgroundColor = '#4caf50'; // Green for downloading
    progressBar.style.transition = 'width 0.1s linear, background-color 0.5s ease';

    const progressText = document.createElement('div');
    progressText.textContent = 'Connecting to peers...';
    progressText.style.position = 'absolute';
    progressText.style.inset = '0';
    progressText.style.display = 'flex';
    progressText.style.alignItems = 'center';
    progressText.style.justifyContent = 'center';
    progressText.style.color = 'white';
    progressText.style.textShadow = '0 0 2px rgba(0,0,0,0.7)';
    progressText.style.fontSize = '12px';

    progressContainer.appendChild(progressBar);
    progressWrapper.appendChild(progressContainer);
    progressWrapper.appendChild(progressText);

    // Stats
    const statsEl = document.createElement('div');
    statsEl.style.fontSize = '12px';
    statsEl.style.color = '#555';
    statsEl.innerHTML = `
        <span>Size: ${fileSizeInMB.toFixed(2)} MB</span> | 
        <span class="speed">Speed: 0 KB/s</span> | 
        <span class="peers">Peers: 0 S / 0 L</span>
    `;
    const speedSpan = statsEl.querySelector('.speed');
    const peersSpan = statsEl.querySelector('.peers');

    // Controls
    const controlsContainer = document.createElement('div');
    controlsContainer.style.display = 'flex';
    controlsContainer.style.gap = '10px';
    controlsContainer.style.marginTop = 'auto';

    const createButton = (text) => {
        const button = document.createElement('button');
        button.textContent = text;
        button.style.padding = '5px 10px';
        button.style.border = '1px solid #ccc';
        button.style.borderRadius = '4px';
        button.style.cursor = 'pointer';
        button.style.backgroundColor = '#f0f0f0';
        return button;
    };
    const pauseButton = createButton('Pause');
    const stopButton = createButton('Stop');

    controlsContainer.appendChild(pauseButton);
    controlsContainer.appendChild(stopButton);

    detailsContainer.appendChild(nameEl);
    detailsContainer.appendChild(progressWrapper);
    detailsContainer.appendChild(statsEl);
    detailsContainer.appendChild(controlsContainer);

    // --- 3. Assemble Main Container ---
    container.appendChild(thumbnailContainer);
    container.appendChild(detailsContainer);

    // --- 4. Animation & Interaction Logic ---
    let progress = 0;
    let isPaused = false;
    let downloadInterval;

    const stopDownload = () => {
        clearInterval(downloadInterval);
        downloadInterval = null;
        stopButton.disabled = true;
        pauseButton.disabled = true;
        progressText.textContent = 'Stopped';
        progressBar.style.backgroundColor = '#f44336'; // Red for stopped
        speedSpan.textContent = `Speed: 0 KB/s`;
    };

    pauseButton.onclick = () => {
        isPaused = !isPaused;
        pauseButton.textContent = isPaused ? 'Resume' : 'Pause';
        if (!isPaused) speedSpan.textContent = `Speed: ...`;
        else speedSpan.textContent = `Speed: 0 KB/s`;
    };
    stopButton.onclick = stopDownload;

    // Simulate "connecting" for a short period before starting
    setTimeout(() => {
        if (!downloadInterval && downloadInterval !== null) return; // a check in case it was stopped early
        const seeders = Math.floor(Math.random() * 50) + 5;
        const leechers = Math.floor(Math.random() * 20) + 2;
        peersSpan.textContent = `Peers: ${seeders} S / ${leechers} L`;

        downloadInterval = setInterval(() => {
            if (isPaused) return;

            // Complete simulation when progress reaches 100%
            if (progress >= 100) {
                clearInterval(downloadInterval);
                progressText.textContent = 'Completed';
                speedSpan.textContent = `Speed: 0 KB/s`;
                progressBar.style.backgroundColor = '#0d6efd'; // Blue for completed
                pauseButton.style.display = 'none';
                stopButton.textContent = 'Clear';
                stopButton.onclick = () => container.remove();
                return;
            }

            // Increment progress with some randomness
            const progressIncrement = Math.random() * 0.5 + 0.1;
            progress = Math.min(100, progress + progressIncrement);
            progressBar.style.width = `${progress}%`;

            // Update text labels
            const downloadedMB = (fileSizeInMB * (progress / 100)).toFixed(2);
            progressText.textContent = `Downloading... ${Math.floor(progress)}% (${downloadedMB} MB)`;

            // Simulate fluctuating download speed
            const speed = (Math.random() * 500 + 800) * (progress / 100 + 0.1);
            speedSpan.textContent = `Speed: ${speed.toFixed(1)} KB/s`;

        }, 100);
    }, 1500);

    return container;
}