document.addEventListener('DOMContentLoaded', function() {
    // Theme Toggle
    const themeToggle = document.getElementById('theme-toggle');
    const sunIcon = '<i data-feather="sun" class="w-5 h-5"></i>';
    const moonIcon = '<i data-feather="moon" class="w-5 h-5"></i>';
    
    if (themeToggle) {
        themeToggle.addEventListener('click', function() {
            document.body.classList.toggle('dark');
            if (document.body.classList.contains('dark')) {
                themeToggle.innerHTML = sunIcon;
            } else {
                themeToggle.innerHTML = moonIcon;
            }
            feather.replace();
        });
    }

    // Initialize tooltips
    const tooltips = document.querySelectorAll('[data-tooltip]');
    tooltips.forEach(tooltip => {
        tooltip.addEventListener('mouseenter', function() {
            const tooltipText = this.getAttribute('data-tooltip');
            const tooltipEl = document.createElement('div');
            tooltipEl.className = 'absolute z-10 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm tooltip';
            tooltipEl.textContent = tooltipText;
            document.body.appendChild(tooltipEl);
            
            const rect = this.getBoundingClientRect();
            tooltipEl.style.top = rect.bottom + 10 + 'px';
            tooltipEl.style.left = rect.left + (rect.width/2) - (tooltipEl.offsetWidth/2) + 'px';
        });
        
        tooltip.addEventListener('mouseleave', function() {
            const tooltips = document.querySelectorAll('.tooltip');
            tooltips.forEach(tip => tip.remove());
        });
    });

    // Simulate live data updates
    function updateStats() {
        const stats = document.querySelectorAll('.text-2xl.font-bold');
        stats.forEach(stat => {
            const currentValue = parseInt(stat.textContent);
            const change = Math.floor(Math.random() * 3) - 1; // -1, 0, or 1
            const newValue = Math.max(0, currentValue + change);
            stat.textContent = newValue;
        });
    }

    // Update stats every 30 seconds
    setInterval(updateStats, 30000);

    // Service status simulation
    function updateServiceStatus() {
        const services = document.querySelectorAll('.service-card');
        services.forEach(service => {
            const random = Math.random();
            if (random > 0.7) {
                service.style.borderColor = '#10B981';
                service.style.boxShadow = '0 0 10px rgba(16, 185, 129, 0.3)';
            } else if (random > 0.4) {
                service.style.borderColor = '#F59E0B';
                service.style.boxShadow = '0 0 10px rgba(245, 158, 11, 0.3)';
            } else {
                service.style.borderColor = '';
                service.style.boxShadow = '';
            }
        });
    }

    // Update service status every minute
    setInterval(updateServiceStatus, 60000);
    
    // Add hover effects to sidebar items
    const sidebarLinks = document.querySelectorAll('custom-sidebar nav a');
    sidebarLinks.forEach(link => {
        link.addEventListener('mouseenter', function() {
            if (!this.classList.contains('active')) {
                this.style.transform = 'translateX(5px)';
            }
        });
        
        link.addEventListener('mouseleave', function() {
            this.style.transform = '';
        });
    });
});