app.js

const widthInput = document.getElementById('width');
const heightInput = document.getElementById('height');
const formatSelect = document.getElementById('format');
const qualityInput = document.getElementById('quality');
const qualityVal = document.getElementById('quality-val');
const recursiveToggle = document.getElementById('recursive');
const selectBtn = document.getElementById('select-folder');
const progressContainer = document.getElementById('progress-container');
const progressBar = document.getElementById('progress-bar-fill');
const statusText = document.getElementById('status-text');
const progressPercent = document.getElementById('progress-percent');
const logContainer = document.getElementById('log-container');

qualityInput.addEventListener('input', () => {
    qualityVal.textContent = `${qualityInput.value}%`;
});

function log(message, type = '') {
    const entry = document.createElement('div');
    entry.className = `log-entry ${type}`;
    entry.textContent = `> ${message}`;
    logContainer.appendChild(entry);
    logContainer.scrollTop = 0;
}

async function processImage(fileHandle, destFolderHandle, targetWidth, targetHeight, format, quality) {
    const file = await fileHandle.getFile();
    const bitmap = await createImageBitmap(file);

    let finalWidth = targetWidth;
    let finalHeight = targetHeight;

    // Proportional logic
    if (!targetWidth && targetHeight) {
        finalWidth = (bitmap.width * targetHeight) / bitmap.height;
    } else if (targetWidth && !targetHeight) {
        finalHeight = (bitmap.height * targetWidth) / bitmap.width;
    } else if (!targetWidth && !targetHeight) {
        finalWidth = bitmap.width;
        finalHeight = bitmap.height;
    }

    const canvas = document.createElement('canvas');
    canvas.width = finalWidth;
    canvas.height = finalHeight;
    const ctx = canvas.getContext('2d');

    // Clear for transparency
    ctx.clearRect(0, 0, finalWidth, finalHeight);
    ctx.drawImage(bitmap, 0, 0, finalWidth, finalHeight);

    // Convert quality 0-100 to 0.0-1.0
    const qualityValue = format === 'image/png' ? undefined : quality / 100;
    const blob = await new Promise(resolve => canvas.toBlob(resolve, format, qualityValue));

    // Create new file name with correct extension
    const extension = format.split('/')[1];
    const newName = fileHandle.name.replace(/\.[^/.]+$/, "") + "." + extension;
    const newFileHandle = await destFolderHandle.getFileHandle(newName, { create: true });
    const writable = await newFileHandle.createWritable();
    await writable.write(blob);
    await writable.close();

    bitmap.close();
}

async function traverse(folderHandle, destFolderHandle, settings, stats) {
    for await (const [name, handle] of folderHandle.entries()) {
        if (handle.kind === 'directory') {
            if (name === 'resized') continue; // Skip output folder

            if (settings.recursive) {
                const newDest = await destFolderHandle.getDirectoryHandle(name, { create: true });
                await traverse(handle, newDest, settings, stats);
            }
        } else if (handle.kind === 'file') {
            const ext = name.toLowerCase().split('.').pop();
            if (['jpg', 'jpeg', 'png', 'bmp', 'webp'].includes(ext)) {
                stats.total++;
                stats.queue.push({ handle, dest: destFolderHandle });
            }
        }
    }
}

selectBtn.addEventListener('click', async () => {
    try {
        const sourceFolder = await window.showDirectoryPicker();
        const settings = {
            width: parseInt(widthInput.value) || 0,
            height: parseInt(heightInput.value) || 0,
            format: formatSelect.value,
            quality: parseInt(qualityInput.value),
            recursive: recursiveToggle.checked
        };

        progressContainer.classList.remove('hidden');
        log('Starting flow...');
        selectBtn.disabled = true;

        const resizedFolder = await sourceFolder.getDirectoryHandle('resized', { create: true });

        const stats = { total: 0, current: 0, queue: [] };
        statusText.textContent = "Scanning folder...";

        await traverse(sourceFolder, resizedFolder, settings, stats);

        log(`Found ${stats.total} images. Processing...`);

        for (const item of stats.queue) {
            try {
                await processImage(item.handle, item.dest, settings.width, settings.height, settings.format, settings.quality);
                stats.current++;
                const percent = Math.round((stats.current / stats.total) * 100);
                progressBar.style.width = `${percent}%`;
                progressPercent.textContent = `${percent}%`;
                statusText.textContent = `Processing ${stats.current}/${stats.total}`;
                log(`Resized: ${item.handle.name}`, 'log-success');
            } catch (err) {
                log(`Failed: ${item.handle.name} - ${err.message}`, 'log-error');
            }
        }

        log('Flow complete! ✨');
        statusText.textContent = "Done!";
        selectBtn.disabled = false;

    } catch (err) {
        if (err.name === 'AbortError') {
            log('Selection cancelled.');
        } else {
            log(`Error: ${err.message}`, 'log-error');
            console.error(err);
        }
        selectBtn.disabled = false;
    }
});