document.addEventListener('DOMContentLoaded', () => {
    const uploadArea = document.querySelector('#upload-area');
    const fileInput = document.querySelector('#file-input');
    const fileList = document.querySelector('#file-list');
    const uploadBtn = document.querySelector('#upload-btn');
    
    // Handle drag and drop events
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        uploadArea.addEventListener(eventName, preventDefaults, false);
    });
    
    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }
    
    ['dragenter', 'dragover'].forEach(eventName => {
        uploadArea.addEventListener(eventName, highlight, false);
    });
    
    ['dragleave', 'drop'].forEach(eventName => {
        uploadArea.addEventListener(eventName, unhighlight, false);
    });
    
    function highlight() {
        uploadArea.classList.add('dropzone-hover');
    }
    
    function unhighlight() {
        uploadArea.classList.remove('dropzone-hover');
    }
    
    // Handle dropped files
    uploadArea.addEventListener('drop', handleDrop, false);
    
    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        handleFiles(files);
    }
    
    // Handle selected files
    fileInput.addEventListener('change', () => {
        handleFiles(fileInput.files);
    });
    
    // Process files
    function handleFiles(files) {
        [...files].forEach(file => {
            if(!file) return;
            
            const fileItem = document.createElement('div');
            fileItem.className = 'file-item bg-white p-4 rounded-lg shadow-sm border border-gray-100 flex items-center justify-between mb-2';
            
            fileItem.innerHTML = `
                <div class="flex items-center">
                    <i data-feather="file" class="mr-3 text-indigo-400"></i>
                    <div>
                        <p class="font-medium">${file.name}</p>
                        <p class="text-sm text-gray-500">${formatBytes(file.size)}</p>
                    </div>
                </div>
                <button class="delete-btn text-gray-400 hover:text-red-400 transition">
                    <i data-feather="trash-2"></i>
                </button>
            `;
            
            fileList.appendChild(fileItem);
            feather.replace();
            
            fileItem.querySelector('.delete-btn').addEventListener('click', () => {
                fileItem.remove();
            });
        });
    }
    
    // Format file size
    function formatBytes(bytes, decimals = 2) {
        if(bytes === 0) return '0 Bytes';
        
        const k = 1024;
        const dm = decimals < 0 ? 0 : decimals;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        
        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
    }
    
    // Upload files
    uploadBtn.addEventListener('click', async () => {
        if(fileInput.files.length === 0) {
            alert('Please select files to upload');
            return;
        }
        
        uploadBtn.disabled = true;
        uploadBtn.innerHTML = '<span class="flex items-center"><i data-feather="loader" class="animate-spin mr-2"></i> Uploading...</span>';
        feather.replace();
        
        // Simulate upload with timeout
        setTimeout(() => {
            uploadBtn.innerHTML = '<i data-feather="check-circle" class="mr-2"></i> Upload Complete!';
            feather.replace();
            
            setTimeout(() => {
                uploadBtn.disabled = false;
                uploadBtn.innerHTML = '<i data-feather="upload" class="mr-2"></i> Upload Files';
                fileInput.value = '';
                fileList.innerHTML = '';
                feather.replace();
            }, 2000);
        }, 3000);
    });
});