// Main JavaScript file for EduCat

document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Initialize file upload functionality
    initializeFileUpload();
    
    // Initialize drag and drop
    initializeDragAndDrop();
    
    // Add fade-in animation to cards
    animateCards();
});

function initializeFileUpload() {
    const fileInput = document.getElementById('noteFile');
    const uploadBtn = document.getElementById('upload-btn');
    const fileInfo = document.getElementById('file-info');
    const fileName = document.getElementById('file-name');
    const fileSize = document.getElementById('file-size');
    const uploadProgress = document.getElementById('upload-progress');
    const uploadResult = document.getElementById('upload-result');
    const uploadArea = document.getElementById('upload-area');

    if (!fileInput) return;

    // Remove any existing event listeners to prevent duplicates
    fileInput.removeEventListener('change', handleFileChange);
    fileInput.addEventListener('change', handleFileChange);

    if (uploadBtn) {
        uploadBtn.removeEventListener('click', handleUploadClick);
        uploadBtn.addEventListener('click', handleUploadClick);
    }

    function handleFileChange(e) {
        const file = e.target.files[0];
        if (file) {
            showFileInfo(file);
            uploadBtn.disabled = false;
        }
    }

    function handleUploadClick(e) {
        e.preventDefault();
        uploadFile();
    }

    function showFileInfo(file) {
        if (fileName && fileSize && fileInfo) {
            // Define allowed file types for client-side validation
            const allowedExtensions = ['.pdf', '.txt', '.doc', '.docx', '.xlsx', '.xls', '.md', '.json', '.csv', '.xml'];
            const allowedMimeTypes = [
                'application/pdf',
                'text/plain',
                'text/markdown',
                'text/csv',
                'text/xml',
                'application/xml',
                'application/json',
                'application/msword',
                'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                'application/vnd.ms-excel',
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            ];
            
            // Get file extension
            const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
            const fileMimeType = file.type.toLowerCase();
            
            // Check if file type is allowed
            const isExtensionAllowed = allowedExtensions.includes(fileExtension);
            const isMimeTypeAllowed = allowedMimeTypes.includes(fileMimeType) || fileMimeType === '';
            
            if (!isExtensionAllowed) {
                // Show error for invalid file type
                fileInfo.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Invalid file type!</strong> "${fileExtension}" files are not supported.
                        <br><small>Only document files (PDF, Word, Excel, text files) are allowed to prevent RAG corruption.</small>
                    </div>
                `;
                fileInfo.classList.remove('d-none');
                uploadBtn.disabled = true;
                return;
            }
            
            // Show valid file info
            fileInfo.innerHTML = `
                <div class="alert alert-info">
                    <i class="fas fa-file me-2"></i>
                    <span>${file.name}</span>
                    <span class="text-muted ms-2">(${formatFileSize(file.size)})</span>
                    <div class="mt-2">
                        <small class="text-success">
                            <i class="fas fa-check-circle me-1"></i>
                            File type supported for AI processing
                        </small>
                    </div>
                </div>
            `;
            fileInfo.classList.remove('d-none');
            uploadBtn.disabled = false;
        }
    }

    function uploadFile() {
        const file = fileInput.files[0];
        if (!file) return;

        const formData = new FormData();
        formData.append('noteFile', file);

        uploadBtn.disabled = true;
        uploadProgress.classList.remove('d-none');
        uploadResult.innerHTML = '';

        fetch('/upload', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(result => {
            uploadProgress.classList.add('d-none');
            
            if (result.success) {
                if (result.processing) {
                    // Show processing status
                    uploadResult.innerHTML = `
                        <div class="alert alert-info">
                            <i class="fas fa-spinner fa-spin me-2"></i>
                            <strong>Upload Successful!</strong> ${result.message}
                            <div class="mt-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>Processing document chunks for AI analysis...</span>
                                    <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
                                </div>
                                <div class="mt-2">
                                    <small class="text-muted">This may take a few moments depending on document size.</small>
                                </div>
                            </div>
                            <div class="mt-3">
                                <button class="btn btn-sm btn-outline-primary" onclick="checkUploadStatus('${result.fileInfo.id}')">
                                    <i class="fas fa-sync me-1"></i>Check Status
                                </button>
                                <a href="/dashboard" class="btn btn-sm btn-outline-primary ms-2">
                                    <i class="fas fa-tachometer-alt me-1"></i>View Dashboard
                                </a>
                            </div>
                        </div>
                    `;
                    
                    // Start polling for status updates
                    startStatusPolling(result.fileInfo.id);
                } else {
                    // Immediate success (shouldn't happen with new flow)
                    uploadResult.innerHTML = `
                        <div class="alert alert-success">
                            <i class="fas fa-check-circle me-2"></i>
                            <strong>Success!</strong> ${result.message}
                            <div class="mt-2">
                                <a href="/revise/${result.fileInfo.id}" class="btn btn-sm btn-primary">
                                    <i class="fas fa-brain me-1"></i>Revise with AI
                                </a>
                                <a href="/dashboard" class="btn btn-sm btn-outline-primary ms-2">
                                    <i class="fas fa-tachometer-alt me-1"></i>View Dashboard
                                </a>
                            </div>
                        </div>
                    `;
                }
                
                // Reset form
                fileInput.value = '';
                fileInfo.classList.add('d-none');
                uploadBtn.disabled = true;
                
                // Add success animation
                uploadArea.classList.add('upload-success');
                setTimeout(() => {
                    uploadArea.classList.remove('upload-success');
                }, 2000);
            } else {
                uploadResult.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Error!</strong> ${result.error}
                        ${result.details ? `<br><small class="text-muted">${result.details}</small>` : ''}
                    </div>
                `;
                uploadArea.classList.add('upload-error');
                setTimeout(() => {
                    uploadArea.classList.remove('upload-error');
                }, 2000);
            }
        })
        .catch(error => {
            uploadProgress.classList.add('d-none');
            uploadResult.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Error!</strong> ${error.message}
                </div>
            `;
            uploadArea.classList.add('upload-error');
            setTimeout(() => {
                uploadArea.classList.remove('upload-error');
            }, 2000);
        })
        .finally(() => {
            uploadBtn.disabled = false;
        });
    }
}

function initializeDragAndDrop() {
    const uploadArea = document.getElementById('upload-area');
    const fileInput = document.getElementById('noteFile');
    
    if (!uploadArea || !fileInput) return;

    uploadArea.addEventListener('click', function(e) {
        // Only trigger file input if clicking on the area itself, not the button
        if (e.target === uploadArea || e.target.tagName === 'I' || e.target.tagName === 'H5' || e.target.tagName === 'P') {
            fileInput.click();
        }
    });

    uploadArea.addEventListener('dragover', function(e) {
        e.preventDefault();
        uploadArea.classList.add('dragover');
    });

    uploadArea.addEventListener('dragleave', function(e) {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
    });

    uploadArea.addEventListener('drop', function(e) {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            fileInput.dispatchEvent(new Event('change'));
        }
    });
}

function animateCards() {
    const cards = document.querySelectorAll('.card');
    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        
        setTimeout(() => {
            card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, index * 100);
    });
}

function formatFileSize(bytes) {
    if (bytes === 0) return '0 Bytes';
    
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// Utility functions
function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `toast align-items-center text-bg-${type} border-0`;
    toast.setAttribute('role', 'alert');
    toast.setAttribute('aria-live', 'assertive');
    toast.setAttribute('aria-atomic', 'true');
    
    toast.innerHTML = `
        <div class="d-flex">
            <div class="toast-body">
                ${message}
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    `;
    
    // Add to page
    let toastContainer = document.querySelector('.toast-container');
    if (!toastContainer) {
        toastContainer = document.createElement('div');
        toastContainer.className = 'toast-container position-fixed bottom-0 end-0 p-3';
        document.body.appendChild(toastContainer);
    }
    
    toastContainer.appendChild(toast);
    
    const bsToast = new bootstrap.Toast(toast);
    bsToast.show();
    
    // Remove after hiding
    toast.addEventListener('hidden.bs.toast', function() {
        toast.remove();
    });
}

function showLoading(element) {
    element.innerHTML = `
        <div class="d-flex justify-content-center align-items-center">
            <div class="spinner-border spinner-border-sm me-2" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            Loading...
        </div>
    `;
}

function hideLoading(element, originalContent) {
    element.innerHTML = originalContent;
}

// Error handling
window.addEventListener('error', function(e) {
    console.error('Global error:', e.error);
    showToast('An unexpected error occurred. Please try again.', 'danger');
});

// Handle unhandled promise rejections
window.addEventListener('unhandledrejection', function(e) {
    console.error('Unhandled promise rejection:', e.reason);
    showToast('An unexpected error occurred. Please try again.', 'danger');
});

// Add smooth scrolling for anchor links (but not for dropdown triggers)
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    const href = anchor.getAttribute('href');
    // Skip empty anchors and dropdown triggers
    if (href === '#' || anchor.hasAttribute('data-bs-toggle')) {
        return;
    }
    
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(href);
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth'
            });
        }
    });
});

// Add loading states to buttons (but not for login/register/quiz forms)
document.querySelectorAll('.btn').forEach(button => {
    if (button.type === 'submit' || button.hasAttribute('data-loading')) {
        // Skip login, register, and quiz form buttons
        const form = button.closest('form');
        if (form && (form.action.includes('/login') || form.action.includes('/register') || form.id === 'quizForm')) {
            return;
        }
        
        button.addEventListener('click', function() {
            if (!this.disabled) {
                const originalText = this.innerHTML;
                this.innerHTML = `
                    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                    Loading...
                `;
                this.disabled = true;
                
                // Re-enable after 5 seconds (fallback)
                setTimeout(() => {
                    this.innerHTML = originalText;
                    this.disabled = false;
                }, 5000);
            }
        });
    }
});

// Status polling for document processing
let statusPollingInterval = null;

function startStatusPolling(fileId) {
    // Clear any existing polling
    if (statusPollingInterval) {
        clearInterval(statusPollingInterval);
    }
    
    // Poll every 3 seconds
    statusPollingInterval = setInterval(() => {
        checkUploadStatus(fileId, true);
    }, 3000);
}

function stopStatusPolling() {
    if (statusPollingInterval) {
        clearInterval(statusPollingInterval);
        statusPollingInterval = null;
    }
}

async function checkUploadStatus(fileId, isPolling = false) {
    try {
        const response = await fetch(`/api/files/${fileId}/status`);
        const result = await response.json();
        
        if (result.success) {
            const file = result.file;
            const uploadResult = document.getElementById('upload-result');
            
            if (file.status === 'processed') {
                // Processing completed successfully
                if (uploadResult) {
                    uploadResult.innerHTML = `
                        <div class="alert alert-success">
                            <i class="fas fa-check-circle me-2"></i>
                            <strong>Processing Complete!</strong> Your document has been processed and is ready for AI analysis.
                            <div class="mt-3">
                                <div class="row">
                                    <div class="col-md-6">
                                        <small class="text-muted">
                                            <i class="fas fa-puzzle-piece me-1"></i>
                                            ${file.processingResult ? `${file.processingResult.successfulChunks}/${file.processingResult.totalChunks} chunks processed` : 'Processed successfully'}
                                        </small>
                                    </div>
                                    <div class="col-md-6">
                                        <small class="text-muted">
                                            <i class="fas fa-clock me-1"></i>
                                            ${file.processingResult && file.processingResult.processedAt ? new Date(file.processingResult.processedAt).toLocaleTimeString() : 'Just now'}
                                        </small>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3">
                                <a href="/revise/${file.id}" class="btn btn-sm btn-success">
                                    <i class="fas fa-brain me-1"></i>Revise with AI
                                </a>
                                <a href="/dashboard" class="btn btn-sm btn-outline-primary ms-2">
                                    <i class="fas fa-tachometer-alt me-1"></i>View Dashboard
                                </a>
                            </div>
                        </div>
                    `;
                }
                stopStatusPolling();
                
            } else if (file.status === 'failed') {
                // Processing failed
                if (uploadResult) {
                    uploadResult.innerHTML = `
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <strong>Processing Failed!</strong> There was an error processing your document.
                            ${file.processingError ? `<br><small class="text-muted">Error: ${file.processingError}</small>` : ''}
                            <div class="mt-3">
                                <button class="btn btn-sm btn-warning" onclick="retryDocumentProcessing('${file.id}')">
                                    <i class="fas fa-redo me-1"></i>Retry Processing
                                </button>
                                <a href="/dashboard" class="btn btn-sm btn-outline-primary ms-2">
                                    <i class="fas fa-tachometer-alt me-1"></i>View Dashboard
                                </a>
                            </div>
                        </div>
                    `;
                }
                stopStatusPolling();
                
            } else if (file.status === 'processing' && !isPolling) {
                // Still processing, manual check
                let progressInfo = '';
                if (file.processingResult) {
                    progressInfo = `<br><small class="text-muted">Progress: ${file.processingResult.successfulChunks || 0}/${file.processingResult.totalChunks || '?'} chunks</small>`;
                }
                
                if (uploadResult) {
                    uploadResult.innerHTML = `
                        <div class="alert alert-info">
                            <i class="fas fa-spinner fa-spin me-2"></i>
                            <strong>Still Processing...</strong> Your document is being processed for AI analysis.
                            ${progressInfo}
                            <div class="mt-3">
                                <button class="btn btn-sm btn-outline-primary" onclick="checkUploadStatus('${file.id}')">
                                    <i class="fas fa-sync me-1"></i>Refresh Status
                                </button>
                                <a href="/dashboard" class="btn btn-sm btn-outline-primary ms-2">
                                    <i class="fas fa-tachometer-alt me-1"></i>View Dashboard
                                </a>
                            </div>
                        </div>
                    `;
                }
                
                // Start polling if not already polling
                if (!statusPollingInterval) {
                    startStatusPolling(fileId);
                }
            }
            
        } else {
            console.error('Error checking status:', result.error);
            if (!isPolling) {
                alert('Error checking status: ' + result.error);
            }
        }
    } catch (error) {
        console.error('Error checking upload status:', error);
        if (!isPolling) {
            alert('Error checking upload status: ' + error.message);
        }
    }
}

async function retryDocumentProcessing(fileId) {
    try {
        const response = await fetch(`/api/files/${fileId}/retry`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        });
        
        const result = await response.json();
        
        if (result.success) {
            // Update UI to show retry started
            const uploadResult = document.getElementById('upload-result');
            if (uploadResult) {
                uploadResult.innerHTML = `
                    <div class="alert alert-info">
                        <i class="fas fa-spinner fa-spin me-2"></i>
                        <strong>Retry Started!</strong> Processing your document again...
                        <div class="mt-3">
                            <button class="btn btn-sm btn-outline-primary" onclick="checkUploadStatus('${fileId}')">
                                <i class="fas fa-sync me-1"></i>Check Status
                            </button>
                            <a href="/dashboard" class="btn btn-sm btn-outline-primary ms-2">
                                <i class="fas fa-tachometer-alt me-1"></i>View Dashboard
                            </a>
                        </div>
                    </div>
                `;
            }
            
            // Start polling again
            startStatusPolling(fileId);
        } else {
            alert('Error retrying processing: ' + result.error);
        }
    } catch (error) {
        console.error('Error retrying processing:', error);
        alert('Error retrying processing: ' + error.message);
    }
}

// Clean up polling when page unloads
window.addEventListener('beforeunload', function() {
    stopStatusPolling();
});