document.addEventListener('DOMContentLoaded', function() {
    const uploadForm = document.getElementById('uploadForm');
    const fileInput = document.getElementById('fileInput');
    const message = document.getElementById('message');
    const progressContainer = document.getElementById('progressContainer');
    const progressBar = document.getElementById('progressBar');
    const progressText = document.getElementById('progressText');
    const fileNameDisplay = document.getElementById('fileName');
    
    const dropArea = uploadForm.querySelector('div[role="dropzone"]') || uploadForm.querySelector('div');

    // Handle drag and drop events
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, unhighlight, false);
    });

    function highlight() {
        dropArea.classList.add('drag-active');
    }

    function unhighlight() {
        dropArea.classList.remove('drag-active');
    }

    // Handle dropped files
    dropArea.addEventListener('drop', handleDrop, false);

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        fileInput.files = files;
        updateFileDisplay(files);
    }

    // Handle file selection via click
    fileInput.addEventListener('change', function() {
        updateFileDisplay(this.files);
    });

    function updateFileDisplay(files) {
        if (files.length > 0) {
            const fileList = Array.from(files).map(file => file.name).join(', ');
            message.textContent = `${files.length} file(s) selected: ${fileList}`;
            message.classList.remove('hidden');
        }
    }

    // Form submission
    uploadForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const files = fileInput.files;
        const category = document.getElementById('category').value;
        const description = document.getElementById('description').value;
        
        if (files.length === 0) {
            showMessage('Please select at least one file to upload', 'error');
            return;
        }

        // Simulate upload progress
        simulateUpload(files, category, description);
    });

    function simulateUpload(files, category, description) {
        progressContainer.classList.remove('hidden');
        let uploaded = 0;
        
        Array.from(files).forEach((file, index) => {
            fileNameDisplay.textContent = file.name;
            
            // Simulate upload progress for each file
            let progress = 0;
            const interval = setInterval(() => {
                progress += Math.random() * 10;
                if (progress >= 100) {
                    progress = 100;
                    clearInterval(interval);
                    uploaded++;
                    
                    if (uploaded === files.length) {
                        showMessage(`Successfully uploaded ${files.length} file(s) to ${category} category!`, 'success');
                        progressContainer.classList.add('hidden');
                    }
                }
                progressBar.style.width = `${progress}%`;
            }, 100);
        });
    }

    function showMessage(text, type) {
        message.textContent = text;
        message.className = ''; // Reset classes
        message.classList.add('text-center', 'success-message');
        
        if (type === 'success') {
            message.classList.add('text-green-600');
        } else {
            message.classList.add('text-red-600');
        }
        
        message.classList.remove('hidden');
    }
});