document.addEventListener('DOMContentLoaded', function() {
    // DOM Elements
    const dropZone = document.getElementById('drop-zone');
    const pdfDropZone = document.getElementById('pdf-drop-zone');
    const fileList = document.getElementById('file-list');
    const processBtn = document.getElementById('process-btn');
    const pdfProcessBtn = document.getElementById('pdf-process-btn');
    const transporterSection = document.getElementById('transporter-section');
    const transporterStatus = document.getElementById('transporter-status');
    const completedSection = document.getElementById('completed-section');
    const completedFiles = document.getElementById('completed-files');
    
    // File storage
    let filesToProcess = [];
    let currentPdfFile = null;
    
    // Initialize Feather Icons
    feather.replace();
    
    // File type icons mapping
    const fileTypeIcons = {
        'text/plain': 'file-text',
        'application/msword': 'file-text',
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'file-text',
        'image/png': 'image',
        'image/jpeg': 'image',
        'image/gif': 'image',
        'application/pdf': 'file'
    };
    
    // Supported file types
    const supportedTypes = [
        'text/plain',
        'application/msword',
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        'text/markdown',
        'image/png',
        'image/jpeg',
        'image/gif'
    ];
    
    // Setup drag and drop for file upload
    setupDragAndDrop(dropZone, handleFiles);
    
    // Setup drag and drop for PDF upload
    setupDragAndDrop(pdfDropZone, handlePdfFiles);
    
    // Process button event
    processBtn.addEventListener('click', processFiles);
    
    // PDF process button event
    pdfProcessBtn.addEventListener('click', processPdfFile);
    
    // Setup drag and drop functionality
    function setupDragAndDrop(zone, handler) {
        zone.addEventListener('dragover', (e) => {
            e.preventDefault();
            zone.classList.add('drop-zone-active');
        });
        
        zone.addEventListener('dragleave', () => {
            zone.classList.remove('drop-zone-active');
        });
        
        zone.addEventListener('drop', (e) => {
            e.preventDefault();
            zone.classList.remove('drop-zone-active');
            const files = e.dataTransfer.files;
            handler(files);
        });
        
        zone.addEventListener('click', () => {
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.multiple = true;
            fileInput.accept = supportedTypes.join(',');
            
            fileInput.addEventListener('change', (e) => {
                handler(e.target.files);
            });
            
            fileInput.click();
        });
    }
    
    // Handle file selection for document creation
    function handleFiles(files) {
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            
            // Check if file type is supported
            if (supportedTypes.includes(file.type) && filesToProcess.length < 30) {
                // Check for duplicates
                if (!filesToProcess.some(f => f.name === file.name && f.size === file.size)) {
                    filesToProcess.push(file);
                    renderFileItem(file);
                }
            } else if (filesToProcess.length >= 30) {
                alert('Maximum of 30 files allowed');
                break;
            }
        }
    }
    
    // Handle PDF file selection
    function handlePdfFiles(files) {
        if (files.length > 0) {
            const file = files[0];
            if (file.type === 'application/pdf') {
                currentPdfFile = file;
                pdfDropZone.innerHTML = `
                    <i data-feather="file" class="w-12 h-12 mx-auto text-fuchsia-400 mb-4"></i>
                    <p class="mb-2">${file.name}</p>
                    <p class="text-sm text-gray-400">${(file.size / 1024 / 1024).toFixed(2)} MB</p>
                `;
                feather.replace();
            } else {
                alert('Please select a PDF file');
            }
        }
    }
    
    // Render file item in the list
    function renderFileItem(file) {
        const fileItem = document.createElement('div');
        fileItem.className = 'file-item mb-2';
        fileItem.dataset.fileName = file.name;
        
        const fileType = file.type.split('/')[1] || 'file';
        const iconType = fileTypeIcons[file.type] || 'file';
        
        fileItem.innerHTML = `
            <div class="file-icon bg-lime-500">
                <i data-feather="${iconType}" class="text-gray-900"></i>
            </div>
            <div class="file-info">
                <div class="file-name">${file.name}</div>
                <div class="file-size">${(file.size / 1024).toFixed(1)} KB</div>
            </div>
            <button class="remove-file" data-file-name="${file.name}">
                <i data-feather="x"></i>
            </button>
        `;
        
        fileList.appendChild(fileItem);
        feather.replace();
        
        // Add remove event
        fileItem.querySelector('.remove-file').addEventListener('click', () => {
            filesToProcess = filesToProcess.filter(f => f.name !== file.name);
            fileItem.remove();
        });
    }
    
    // Process files to create PDF
    function processFiles() {
        if (filesToProcess.length === 0) {
            alert('Please add files to process');
            return;
        }
        
        // Show transporter animation
        transporterSection.classList.remove('hidden');
        transporterStatus.textContent = 'Initializing transport sequence...';
        
        // Simulate processing with transporter animation
        simulateTransporterAnimation(() => {
            // Create a mock PDF file
            const fileName = `replicated_document_${Date.now()}.pdf`;
            const mockPdf = new Blob(['Mock PDF content'], { type: 'application/pdf' });
            
            // Add to completed files
            addCompletedFile(fileName, mockPdf, 'PDF Document');
            
            // Reset
            filesToProcess = [];
            fileList.innerHTML = '';
            transporterSection.classList.add('hidden');
        });
    }
    
    // Process PDF file
    function processPdfFile() {
        if (!currentPdfFile) {
            alert('Please select a PDF file to process');
            return;
        }
        
        const format = document.querySelector('input[name="output-format"]:checked').value;
        const fileName = currentPdfFile.name.replace('.pdf', `.${format}`);
        
        // Show transporter animation
        transporterSection.classList.remove('hidden');
        transporterStatus.textContent = 'Decomposing document...';
        
        // Simulate processing
        simulateTransporterAnimation(() => {
            // Create mock output file
            const content = format === 'md' ? '# Mock Markdown Content' : '{"content": "Mock JSON Content"}';
            const mimeType = format === 'md' ? 'text/markdown' : 'application/json';
            const mockFile = new Blob([content], { type: mimeType });
            
            // Add to completed files
            addCompletedFile(fileName, mockFile, `${format.toUpperCase()} Document`);
            
            // Reset
            currentPdfFile = null;
            pdfDropZone.innerHTML = `
                <i data-feather="file" class="w-12 h-12 mx-auto text-fuchsia-400 mb-4"></i>
                <p class="mb-2">Drag & drop PDF files here or click to browse</p>
                <p class="text-sm text-gray-400">Convert PDF to MD or JSON format</p>
            `;
            feather.replace();
            transporterSection.classList.add('hidden');
        });
    }
    
    // Simulate transporter animation
    function simulateTransporterAnimation(callback) {
        const messages = [
            'Initializing transport sequence...',
            'Locking coordinates...',
            'Energizing pattern buffer...',
            'Dematerializing subject...',
            'Transport in progress...',
            'Rematerializing at destination...',
            'Transport complete!'
        ];
        
        let index = 0;
        const interval = setInterval(() => {
            transporterStatus.textContent = messages[index];
            index++;
            
            if (index >= messages.length) {
                clearInterval(interval);
                setTimeout(callback, 500);
            }
        }, 800);
        
        // Create sparkle effects
        createSparkles(20);
    }
    
    // Create sparkle effects
    function createSparkles(count) {
        const transporterAnimation = document.getElementById('transporter-animation');
        for (let i = 0; i < count; i++) {
            setTimeout(() => {
                const sparkle = document.createElement('div');
                sparkle.className = 'sparkle';
                sparkle.style.left = `${Math.random() * 100}%`;
                sparkle.style.top = `${Math.random() * 100}%`;
                sparkle.style.animation = `sparkle 0.8s ease-out`;
                transporterAnimation.appendChild(sparkle);
                
                setTimeout(() => {
                    sparkle.remove();
                }, 800);
            }, i * 100);
        }
    }
    
    // Add completed file to the display
    function addCompletedFile(fileName, blob, fileType) {
        completedSection.classList.remove('hidden');
        
        const fileElement = document.createElement('div');
        fileElement.className = 'completed-file';
        fileElement.innerHTML = `
            <div class="ribbon"></div>
            <div class="mb-4">
                <i data-feather="file" class="w-16 h-16 mx-auto text-yellow-400"></i>
            </div>
            <h3 class="font-bold text-lg mb-2 truncate">${fileName}</h3>
            <p class="text-gray-400 text-sm mb-4">${fileType}</p>
            <div class="flex justify-center space-x-2">
                <button class="download-btn bg-lime-500 hover:bg-lime-600 text-gray-900 py-2 px-4 rounded flex items-center">
                    <i data-feather="download" class="mr-1"></i> Save
                </button>
                <button class="open-btn bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded flex items-center">
                    <i data-feather="eye" class="mr-1"></i> View
                </button>
            </div>
        `;
        
        completedFiles.appendChild(fileElement);
        feather.replace();
        
        // Add event listeners
        const downloadBtn = fileElement.querySelector('.download-btn');
        const openBtn = fileElement.querySelector('.open-btn');
        
        downloadBtn.addEventListener('click', () => {
            showSaveModal(fileName, blob);
        });
        
        openBtn.addEventListener('click', () => {
            const url = URL.createObjectURL(blob);
            window.open(url, '_blank');
        });
    }
    
    // Show save modal
    function showSaveModal(fileName, blob) {
        // Create modal overlay
        const overlay = document.createElement('div');
        overlay.className = 'modal-overlay';
        document.body.appendChild(overlay);
        
        // Create modal
        const modal = document.createElement('div');
        modal.className = 'save-modal';
        modal.innerHTML = `
            <div class="modal-header">
                <h3>Save Document</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="file-name">File Name</label>
                    <input type="text" id="file-name" class="form-control" value="${fileName}">
                </div>
                <div class="form-group">
                    <label for="save-location">Save Location</label>
                    <select id="save-location" class="form-control">
                        <option value="downloads">Downloads Folder</option>
                        <option value="documents">Documents Folder</option>
                        <option value="desktop">Desktop</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary cancel-btn">Cancel</button>
                <button class="btn btn-success save-btn">Save Now</button>
                <button class="btn btn-primary consume-btn">Consume Now</button>
            </div>
        `;
        
        document.body.appendChild(modal);
        
        // Add event listeners
        const closeBtn = modal.querySelector('.close-modal');
        const cancelBtn = modal.querySelector('.cancel-btn');
        const saveBtn = modal.querySelector('.save-btn');
        const consumeBtn = modal.querySelector('.consume-btn');
        
        const closeModal = () => {
            overlay.remove();
            modal.remove();
        };
        
        closeBtn.addEventListener('click', closeModal);
        cancelBtn.addEventListener('click', closeModal);
        overlay.addEventListener('click', closeModal);
        
        saveBtn.addEventListener('click', () => {
            const fileName = document.getElementById('file-name').value;
            saveFile(blob, fileName);
            closeModal();
        });
        
        consumeBtn.addEventListener('click', () => {
            const fileName = document.getElementById('file-name').value;
            saveFile(blob, fileName);
            const url = URL.createObjectURL(blob);
            window.open(url, '_blank');
            closeModal();
        });
    }
    
    // Save file to user's device
    function saveFile(blob, fileName) {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }
});