document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');
    const browseBtn = document.getElementById('browseBtn');
    const fileInfo = document.getElementById('fileInfo');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');
    const removeFile = document.getElementById('removeFile');
    const previewSection = document.getElementById('previewSection');
    const previewBody = document.getElementById('previewBody');
    const cancelBtn = document.getElementById('cancelBtn');
    const processBtn = document.getElementById('processBtn');
    const toast = document.getElementById('toast');
    const toastMessage = document.getElementById('toastMessage');
    
    let selectedFile = null;

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

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

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

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

    function highlight() {
        dropZone.classList.add('highlight');
    }

    function unhighlight() {
        dropZone.classList.remove('highlight');
    }

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

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

    // Browse files button
    browseBtn.addEventListener('click', () => {
        fileInput.click();
    });

    fileInput.addEventListener('change', function() {
        handleFiles(this.files);
    });

    // Remove file button
    removeFile.addEventListener('click', function() {
        resetFileUpload();
    });

    // Cancel button
    cancelBtn.addEventListener('click', function() {
        resetFileUpload();
    });

    // Process button
    processBtn.addEventListener('click', function() {
        if (!selectedFile) {
            showToast('Please upload a file first', 'error');
            return;
        }

        const merchantId = document.getElementById('merchantId').value;
        if (!merchantId) {
            showToast('Please enter a merchant ID', 'error');
            return;
        }

        // Simulate processing
        showToast('Processing bulk orders...', 'success');
        setTimeout(() => {
            showToast('Bulk orders processed successfully!', 'success');
            resetFileUpload();
        }, 2000);
    });

    function handleFiles(files) {
        if (files.length === 0) return;
        
        const file = files[0];
        const validTypes = ['text/csv', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
        
        if (!validTypes.includes(file.type) && !file.name.match(/\.(csv|xlsx|xls)$/i)) {
            showToast('Invalid file type. Please upload a CSV or Excel file.', 'error');
            dropZone.classList.add('error');
            setTimeout(() => dropZone.classList.remove('error'), 2000);
            return;
        }

        selectedFile = file;
        displayFileInfo(file);
        showPreview();
    }

    function displayFileInfo(file) {
        fileName.textContent = file.name;
        
        // Format file size
        const sizeInMB = (file.size / (1024 * 1024)).toFixed(2);
        fileSize.textContent = `${sizeInMB} MB`;
        
        fileInfo.classList.remove('hidden');
        dropZone.classList.add('hidden');
    }

    function showPreview() {
        // In a real app, you would parse the file and display actual data
        // For demo purposes, we'll show mock data
        previewBody.innerHTML = '';
        
        // Add mock rows
        for (let i = 0; i < 5; i++) {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Product ${i+1}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${Math.floor(Math.random() * 10) + 1}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${(Math.random() * 100).toFixed(2)}</td>
            `;
            previewBody.appendChild(row);
        }
        
        previewSection.classList.remove('hidden');
    }

    function resetFileUpload() {
        selectedFile = null;
        fileInput.value = '';
        fileInfo.classList.add('hidden');
        previewSection.classList.add('hidden');
        dropZone.classList.remove('hidden');
    }

    function showToast(message, type = 'success') {
        toastMessage.textContent = message;
        toast.className = `fixed bottom-4 right-4 flex items-center ${type === 'success' ? 'toast-success' : 'toast-error'} px-4 py-2 rounded-md shadow-lg`;
        toast.classList.add('show');
        
        setTimeout(() => {
            toast.classList.remove('show');
            toast.classList.add('hide');
            setTimeout(() => toast.classList.add('hidden'), 300);
        }, 3000);
    }
});