// Initialize application when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    initializeApp();
});

function initializeApp() {
    initializeAnimations();
    initializeInteractions();
    initializeMobileMenu();
    initializeRealTimeUpdates();
    initializeKeyboardShortcuts();
    initializeTooltips();
    initializePerformanceMonitoring();
}

// Animation System
function initializeAnimations() {
    // Intersection Observer for scroll animations
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    });

    // Observe all fade-in elements
    document.querySelectorAll('.fade-in-up').forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(40px)';
        observer.observe(el);
    });

    // Staggered animations
    document.querySelectorAll('[class*="stagger-"]').forEach(el => {
        const delay = el.className.match(/stagger-(\d+)/);
        if (delay) {
            el.style.animationDelay = `${delay[1] * 0.1}s`;
        }
    });
}

// Interactive Elements
function initializeInteractions() {
    // Mobile navigation
    const mobileNavItems = document.querySelectorAll('.mobile-nav-item');
    mobileNavItems.forEach(item => {
        item.addEventListener('click', function(e) {
            if (!this.classList.contains('active')) {
                e.preventDefault();
                showLoadingState(this);
                
                // Remove active from all items
                mobileNavItems.forEach(i => i.classList.remove('active'));
                // Add active to clicked item
                this.classList.add('active');
                
                // Simulate navigation
                setTimeout(() => {
                    console.log('Navigating to:', this.getAttribute('href'));
                }, 1000);
            }
        });
    });

    // Header action buttons
    const actionBtns = document.querySelectorAll('.profile-btn');
    actionBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            createRipple(this);
            this.style.transform = 'translateY(-2px) scale(0.95)';
            setTimeout(() => {
                this.style.transform = '';
            }, 150);
        });
    });

    // Card hover effects
    const cards = document.querySelectorAll('.stat-card, .content-card');
    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-8px)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });

    // Survey item interactions
    const surveyItems = document.querySelectorAll('.survey-item');
    surveyItems.forEach(item => {
        item.addEventListener('click', function() {
            this.style.transform = 'translateY(-4px)';
            setTimeout(() => {
                this.style.transform = 'translateY(0)';
            }, 200);
        });
    });

    // Navigation item interactions
    document.querySelectorAll('.nav-item').forEach(item => {
        if (!item.classList.contains('active')) {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                showLoadingState(this);
                
                setTimeout(() => {
                    console.log('Navigating to:', this.getAttribute('href'));
                }, 1000);
            });
        }
    });

    // Quick action buttons
    document.querySelectorAll('.quick-action-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            createRipple(this);
            showLoadingState(this);
            
            setTimeout(() => {
                console.log('Action:', this.querySelector('span').textContent);
            }, 1000);
        });
    });
}

// Mobile Menu
function initializeMobileMenu() {
    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
    const mobileNav = document.querySelector('.mobile-nav');
    
    if (mobileMenuToggle && mobileNav) {
        mobileMenuToggle.addEventListener('click', function() {
            mobileNav.style.transform = mobileNav.style.transform === 'translateY(0px)' ? 'translateY(100%)' : 'translateY(0px)';
        });
    }
}

// Real-time Updates
function initializeRealTimeUpdates() {
    // Simulate real-time data updates
    setInterval(() => {
        updateStatValues();
        updateActivityFeed();
        updateSystemStatus();
    }, 30000); // Update every 30 seconds

    function updateStatValues() {
        const statValues = document.querySelectorAll('.stat-value');
        if (statValues.length === 0) return;
        
        const randomStat = statValues[Math.floor(Math.random() * statValues.length)];
        
        if (randomStat) {
            const currentValue = parseInt(randomStat.textContent.replace(/[^0-9]/g, ''));
            const change = Math.floor(Math.random() * 20) - 10;
            const newValue = Math.max(0, currentValue + change);
            
            // Animate the change
            randomStat.style.transform = 'scale(1.1)';
            randomStat.style.color = 'var(--primary)';
            
            setTimeout(() => {
                randomStat.textContent = newValue.toLocaleString();
                randomStat.style.transform = 'scale(1)';
                randomStat.style.color = 'var(--gray-900)';
            }, 300);
        }
    }

    function updateActivityFeed() {
        // Add a subtle pulse to recent activities
        const activityItems = document.querySelectorAll('.activity-item');
        if (activityItems.length > 0) {
            const firstActivity = activityItems[0];
            firstActivity.style.background = 'rgba(59, 130, 246, 0.05)';
            setTimeout(() => {
                firstActivity.style.background = '';
            }, 2000);
        }
    }

    function updateSystemStatus() {
        // Randomly update system status indicators
        const statusIndicators = document.querySelectorAll('.status-indicator');
        statusIndicators.forEach(indicator => {
            if (Math.random() > 0.95) { // 5% chance to change status
                const currentClass = indicator.classList.contains('active') ? 'active' : 
                                   indicator.classList.contains('warning') ? 'warning' : 'danger';
                
                // Briefly flash the indicator
                indicator.style.transform = 'scale(1.3)';
                setTimeout(() => {
                    indicator.style.transform = 'scale(1)';
                }, 200);
            }
        });
    }
}

// Keyboard Shortcuts
function initializeKeyboardShortcuts() {
    document.addEventListener('keydown', function(e) {
        // Number keys for quick navigation (1-9)
        if (e.key >= '1' && e.key <= '9' && e.altKey) {
            e.preventDefault();
            const navItems = document.querySelectorAll('.nav-item');
            const index = parseInt(e.key) - 1;
            if (navItems[index]) {
                navItems[index].click();
            }
        }
    });
}

// Tooltips
function initializeTooltips() {
    const elementsWithTooltips = document.querySelectorAll('[title]');
    
    elementsWithTooltips.forEach(element => {
        const title = element.getAttribute('title');
        element.removeAttribute('title'); // Remove default tooltip
        
        element.addEventListener('mouseenter', function(e) {
            showTooltip(e.target, title);
        });
        
        element.addEventListener('mouseleave', function() {
            hideTooltip();
        });
    });
}

function showTooltip(element, text) {
    const tooltip = document.createElement('div');
    tooltip.className = 'custom-tooltip';
    tooltip.textContent = text;
    tooltip.style.cssText = `
        position: absolute;
        background: var(--gray-800);
        color: white;
        padding: 0.5rem 0.75rem;
        border-radius: var(--radius);
        font-size: 0.75rem;
        z-index: 1000;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
    `;
    
    document.body.appendChild(tooltip);
    
    const rect = element.getBoundingClientRect();
    tooltip.style.left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2) + 'px';
    tooltip.style.top = rect.top - tooltip.offsetHeight - 8 + 'px';
    
    setTimeout(() => {
        tooltip.style.opacity = '1';
    }, 10);
}

function hideTooltip() {
    const tooltip = document.querySelector('.custom-tooltip');
    if (tooltip) {
        tooltip.style.opacity = '0';
        setTimeout(() => {
            tooltip.remove();
        }, 200);
    }
}

// Performance Monitoring
function initializePerformanceMonitoring() {
    if ('performance' in window) {
        window.addEventListener('load', function() {
            const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
            console.log('Page load time:', loadTime + 'ms');
            
            // Show performance indicator if page loads slowly
            if (loadTime > 3000) {
                console.warn('Page loaded slowly. Consider optimizing assets.');
                showPerformanceWarning();
            }
            
            // Monitor resource loading
            const resources = performance.getEntriesByType('resource');
            const slowResources = resources.filter(resource => resource.duration > 1000);
            
            if (slowResources.length > 0) {
                console.warn('Slow loading resources:', slowResources);
            }
        });
    }
}

function showPerformanceWarning() {
    const warning = document.createElement('div');
    warning.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: var(--orange);
        color: white;
        padding: 1rem;
        border-radius: var(--radius);
        z-index: 1000;
        font-size: 0.875rem;
        max-width: 300px;
    `;
    warning.textContent = 'Page loaded slowly. Some features may be delayed.';
    
    document.body.appendChild(warning);
    
    setTimeout(() => {
        warning.remove();
    }, 5000);
}

// Utility Functions
function showLoadingState(element) {
    element.classList.add('loading');
    setTimeout(() => {
        element.classList.remove('loading');
    }, 1000);
}

function createRipple(element) {
    const ripple = document.createElement('span');
    const rect = element.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
    const x = event.clientX - rect.left - size / 2;
    const y = event.clientY - rect.top - size / 2;
    
    ripple.style.cssText = `
        position: absolute;
        width: ${size}px;
        height: ${size}px;
        left: ${x}px;
        top: ${y}px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 50%;
        transform: scale(0);
        animation: ripple 600ms linear;
        pointer-events: none;
    `;
    
    ripple.className = 'ripple';
    
    // Remove existing ripple
    const existingRipple = element.querySelector('.ripple');
    if (existingRipple) {
        existingRipple.remove();
    }
    
    element.style.position = 'relative';
    element.style.overflow = 'hidden';
    element.appendChild(ripple);
    
    setTimeout(() => {
        ripple.remove();
    }, 600);
}

// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Service Worker registration (for future PWA features)
if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        // Service worker would be registered here for offline functionality
        console.log('Service Worker support detected');
    });
}

// Error handling
window.addEventListener('error', function(e) {
    console.error('JavaScript error:', e.error);
    // Could send error to logging service
});

// Visibility API for performance optimization
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        // Pause animations and updates when tab is not visible
        console.log('Tab hidden - pausing updates');
    } else {
        // Resume when tab becomes visible
        console.log('Tab visible - resuming updates');
    }
});

// Resize handler for responsive adjustments
let resizeTimer;
window.addEventListener('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        // Adjust layouts after resize
        console.log('Window resized to:', window.innerWidth, 'x', window.innerHeight);
        adjustLayoutForScreenSize();
    }, 250);
});

function adjustLayoutForScreenSize() {
    const isMobile = window.innerWidth <= 768;
    const isTablet = window.innerWidth <= 1024;
    
    // Adjust components based on screen size
    if (isMobile) {
        // Mobile-specific adjustments
        document.body.classList.add('mobile-view');
        document.body.classList.remove('tablet-view', 'desktop-view');
    } else if (isTablet) {
        // Tablet-specific adjustments
        document.body.classList.add('tablet-view');
        document.body.classList.remove('mobile-view', 'desktop-view');
    } else {
        // Desktop-specific adjustments
        document.body.classList.add('desktop-view');
        document.body.classList.remove('mobile-view', 'tablet-view');
    }
}

// Initialize screen size classes
adjustLayoutForScreenSize();

// Export functions for external use
window.AppUtils = {
    showLoadingState,
    createRipple,
    showTooltip,
    hideTooltip
};