main.js

// Main application entry point
import { ExamApplication } from './exam.js';

// Initialize the exam application
const examApp = new ExamApplication();

// Make examApp globally available for onclick handlers
window.examApp = examApp;

// Initialize the welcome screen
examApp.renderWelcome();

// Add some utility functions for enhanced user experience
document.addEventListener('DOMContentLoaded', () => {
    // Add loading indicator
    const showLoading = () => {
        document.getElementById('loading').style.display = 'flex';
    };
    
    const hideLoading = () => {
        document.getElementById('loading').style.display = 'none';
    };
    
    // Intercept navigation to show loading
    const originalMethods = {
        startExam: examApp.startExam.bind(examApp),
        goToQuestion: examApp.goToQuestion.bind(examApp),
        nextQuestion: examApp.nextQuestion.bind(examApp),
        previousQuestion: examApp.previousQuestion.bind(examApp),
        submitExam: examApp.submitExam.bind(examApp)
    };
    
    // Wrap methods with loading indicator
    examApp.startExam = function() {
        showLoading();
        setTimeout(() => {
            originalMethods.startExam();
            hideLoading();
        }, 500);
    };
    
    examApp.goToQuestion = function(index) {
        showLoading();
        setTimeout(() => {
            originalMethods.goToQuestion(index);
            hideLoading();
        }, 300);
    };
    
    examApp.nextQuestion = function() {
        // Skip loading indicator for mobile performance
        if (/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            originalMethods.nextQuestion();
        } else {
            showLoading();
            setTimeout(() => {
                originalMethods.nextQuestion();
                hideLoading();
            }, 300);
        }
    };
    
    examApp.previousQuestion = function() {
        // Skip loading indicator for mobile performance
        if (/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            originalMethods.previousQuestion();
        } else {
            showLoading();
            setTimeout(() => {
                originalMethods.previousQuestion();
                hideLoading();
            }, 300);
        }
    };
    
    examApp.submitExam = function() {
        // Always show loading for submit to give user feedback
        showLoading();
        
        // Debug log for mobile
        console.log('Submit exam called', {
            userAgent: navigator.userAgent,
            isMobile: /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
        });
        
        setTimeout(() => {
            try {
                originalMethods.submitExam();
            } catch (error) {
                console.error('Error submitting exam:', error);
                hideLoading();
                alert('Error submitting exam. Please try again.');
            }
            hideLoading();
        }, 800);
    };
    
    // Add keyboard shortcuts info
    const keyboardShortcuts = `
        Keyboard Shortcuts:
        • Arrow Left/Right: Navigate between questions
        • 1-4: Select answer options
        • Esc: Pause exam (if implemented)
    `;
    
    // Add keyboard shortcuts to console for developers
    console.log(keyboardShortcuts);
    
    // Add accessibility improvements
    document.body.setAttribute('tabindex', '0');
    
    // Focus management for accessibility
    const focusManagement = {
        currentFocus: 0,
        
        setFocus(index) {
            this.currentFocus = index;
            const focusableElements = document.querySelectorAll(
                'button, input[type="radio"], a, [tabindex]:not([tabindex="-1"])'
            );
            
            if (focusableElements[index]) {
                focusableElements[index].focus();
            }
        },
        
        moveFocus(direction) {
            const focusableElements = document.querySelectorAll(
                'button, input[type="radio"], a, [tabindex]:not([tabindex="-1"])'
            );
            
            let newIndex = this.currentFocus + direction;
            if (newIndex < 0) newIndex = focusableElements.length - 1;
            if (newIndex >= focusableElements.length) newIndex = 0;
            
            this.setFocus(newIndex);
        }
    };
    
    // Handle keyboard navigation for accessibility
    document.addEventListener('keydown', (e) => {
        if (e.altKey || e.ctrlKey || e.metaKey) return;
        
        switch (e.key) {
            case 'Tab':
                // Handle tab navigation normally
                break;
            case 'ArrowUp':
                e.preventDefault();
                focusManagement.moveFocus(-1);
                break;
            case 'ArrowDown':
                e.preventDefault();
                focusManagement.moveFocus(1);
                break;
        }
    });
    
    // Add touch/swipe support for mobile devices
    let touchStartX = 0;
    let touchEndX = 0;
    
    document.addEventListener('touchstart', (e) => {
        touchStartX = e.changedTouches[0].screenX;
    });
    
    document.addEventListener('touchend', (e) => {
        touchEndX = e.changedTouches[0].screenX;
        handleSwipe();
    });
    
    function handleSwipe() {
        const swipeThreshold = 50;
        const diff = touchStartX - touchEndX;
        
        if (Math.abs(diff) > swipeThreshold) {
            if (diff > 0) {
                // Swipe left - next question
                if (!examApp.isCompleted && examApp.questions.length > 0) {
                    examApp.nextQuestion();
                }
            } else {
                // Swipe right - previous question
                if (!examApp.isCompleted && examApp.questions.length > 0) {
                    examApp.previousQuestion();
                }
            }
        }
    }
    
    // Add beforeunload warning when exam is in progress
    window.addEventListener('beforeunload', (e) => {
        if (examApp.questions.length > 0 && !examApp.isCompleted) {
            e.preventDefault();
            e.returnValue = 'Are you sure you want to leave? Your exam progress will be lost.';
            return e.returnValue;
        }
    });
    
    // Add service worker for offline support (optional)
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/sw.js')
                .then((registration) => {
                    console.log('SW registered: ', registration);
                })
                .catch((registrationError) => {
                    console.log('SW registration failed: ', registrationError);
                });
        });
    }
    
    // Add performance monitoring
    const performanceObserver = new PerformanceObserver((list) => {
        list.getEntries().forEach((entry) => {
            if (entry.entryType === 'measure') {
                console.log(`Performance: ${entry.name} took ${entry.duration}ms`);
            }
        });
    });
    
    if ('PerformanceObserver' in window) {
        performanceObserver.observe({ entryTypes: ['measure'] });
    }
    
    // Add error handling
    window.addEventListener('error', (e) => {
        console.error('Application error:', e.error);
        
        // Show user-friendly error message
        const errorContainer = document.createElement('div');
        errorContainer.className = 'error-notification';
        errorContainer.innerHTML = `
            <div class="error-content">
                <h3>Oops! Something went wrong</h3>
                <p>Please refresh the page and try again.</p>
                <button onclick="location.reload()" class="btn btn-primary">Refresh Page</button>
            </div>
        `;
        
        // Add error notification styles if not already present
        if (!document.querySelector('#error-styles')) {
            const style = document.createElement('style');
            style.id = 'error-styles';
            style.textContent = `
                .error-notification {
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: white;
                    padding: 2rem;
                    border-radius: 10px;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                    z-index: 10000;
                    text-align: center;
                }
                
                .error-content h3 {
                    color: #e74c3c;
                    margin-bottom: 1rem;
                }
                
                .error-content p {
                    color: #7f8c8d;
                    margin-bottom: 1.5rem;
                }
            `;
            document.head.appendChild(style);
        }
        
        document.body.appendChild(errorContainer);
        
        // Remove error notification after 5 seconds
        setTimeout(() => {
            if (errorContainer.parentNode) {
                errorContainer.parentNode.removeChild(errorContainer);
            }
        }, 5000);
    });
    
    // Add unhandled promise rejection handling
    window.addEventListener('unhandledrejection', (e) => {
        console.error('Unhandled promise rejection:', e.reason);
        e.preventDefault();
    });
    
    console.log('CEH v13 Mock Exam Application initialized successfully');
});

// Export for potential testing or external access
export { examApp };