document.addEventListener('DOMContentLoaded', function() {
    const dropzone = document.querySelector('.pdfu-dropzone');
    const input = document.querySelector('#pdfu-file-input');
    const queueList = document.querySelector('.pdfu-queue-list');
    const gallery = document.querySelector('.pdfu-gallery');
    
    if(window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.documentElement.setAttribute('data-theme', 'dark');
    }

    // Drag & Drop
    dropzone.addEventListener('click', () => input.click());
    dropzone.addEventListener('dragover', (e) => { e.preventDefault(); dropzone.classList.add('drag-over'); });
    dropzone.addEventListener('dragleave', () => dropzone.classList.remove('drag-over'));
    
    dropzone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropzone.classList.remove('drag-over');
        handleFiles(e.dataTransfer.files);
    });

    input.addEventListener('change', () => handleFiles(input.files));

    function handleFiles(files) {
        const fileArray = Array.from(files);
        // Determine if this is a bulk upload
        const isBulk = fileArray.length > 1;

        fileArray.forEach(file => {
            if (file.type !== 'application/pdf') return alert('PDF only!');
            uploadFile(file, isBulk);
        });
    }

    async function uploadFile(file, isBulk) {
        // Create UI Card
        const card = document.createElement('div');
        card.className = 'pdfu-job-card';
        card.innerHTML = `
            <div style="flex-grow:1; margin-right:15px;">
                <strong>${file.name}</strong>
                <div class="pdfu-progress"><div class="pdfu-bar" style="width:0%"></div></div>
                <div class="pdfu-status-text" style="font-size:12px; opacity:0.7;">Uploading...</div>
            </div>
            <div class="pdfu-actions">
                <button class="pdfu-cancel-btn">Cancel</button>
            </div>
        `;
        queueList.appendChild(card);

        const formData = new FormData();
        formData.append('file', file);
        
        const formats = Array.from(document.querySelectorAll('input[name="pdfu_format"]:checked')).map(cb => cb.value);
        formData.append('formats', JSON.stringify(formats.length ? formats : ['jpg']));

        try {
            const uploadRes = await fetch(pdfu_vars.root + 'pdfu/v1/upload', {
                method: 'POST',
                headers: { 'X-WP-Nonce': pdfu_vars.nonce },
                body: formData
            });
            const data = await uploadRes.json();
            
            if (data.success) {
                processJob(data.job_id, card, isBulk);
            } else {
                card.querySelector('.pdfu-status-text').innerText = 'Upload Failed';
            }
        } catch (err) {
            console.error(err);
            card.querySelector('.pdfu-status-text').innerText = 'Error';
        }
    }

    async function processJob(jobId, card, isBulk) {
        let completed = false;
        const cancelBtn = card.querySelector('.pdfu-cancel-btn');
        const statusText = card.querySelector('.pdfu-status-text');
        const actionsDiv = card.querySelector('.pdfu-actions');
        let isCancelled = false;
        
        cancelBtn.addEventListener('click', async () => {
            isCancelled = true;
            await fetch(pdfu_vars.root + 'pdfu/v1/cancel', {
                method: 'POST',
                headers: { 'X-WP-Nonce': pdfu_vars.nonce, 'Content-Type': 'application/json' },
                body: JSON.stringify({ job_id: jobId })
            });
            card.remove();
        });

        while (!completed && !isCancelled) {
            const res = await fetch(pdfu_vars.root + 'pdfu/v1/process', {
                method: 'POST',
                headers: { 'X-WP-Nonce': pdfu_vars.nonce, 'Content-Type': 'application/json' },
                body: JSON.stringify({ job_id: jobId })
            });
            
            const statusData = await res.json();
            
            if (statusData.status === 'processing') {
                const bar = card.querySelector('.pdfu-bar');
                bar.style.width = statusData.progress + '%';
                statusText.innerText = `Processing page ${statusData.current_page}...`;
                
                // Add preview images to gallery
                if(statusData.images) {
                    statusData.images.forEach(img => {
                        const imgEl = document.createElement('img');
                        imgEl.src = img.url;
                        gallery.appendChild(imgEl);
                    });
                }

            } else if (statusData.status === 'completed') {
                completed = true;
                card.querySelector('.pdfu-bar').style.width = '100%';
                statusText.innerText = 'Completed!';
                
                // Remove Cancel Button
                cancelBtn.remove();

                // HANDLE DOWNLOADS
                if (statusData.zip_url) {
                    if (isBulk) {
                        // Bulk Mode: Show Download Button
                        const downloadBtn = document.createElement('a');
                        downloadBtn.href = statusData.zip_url;
                        downloadBtn.className = 'button button-primary'; // WP Button style
                        downloadBtn.style.cssText = "text-decoration:none; padding: 5px 10px; background:#4F46E5; color:white; border-radius:4px;";
                        downloadBtn.innerText = 'Download ZIP';
                        actionsDiv.appendChild(downloadBtn);
                    } else {
                        // Single Mode: Auto Download
                        statusText.innerText = 'Downloading...';
                        const link = document.createElement('a');
                        link.href = statusData.zip_url;
                        link.setAttribute('download', '');
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        
                        // Optional: Fade out card after auto-download
                        setTimeout(() => card.remove(), 4000);
                    }
                }

            } else if (statusData.status === 'failed') {
                completed = true;
                statusText.innerText = 'Failed: ' + (statusData.error || 'Unknown error');
                card.style.border = '1px solid red';
            }
        }
    }
});