script.js

document.addEventListener('DOMContentLoaded', function() {
    initThemeToggle();
    feather.replace();
    initTooltips();
    loadMockData();
    initMobileMenu();
    initSmoothScrolling();
});

function initThemeToggle() {
    const themeToggle = document.createElement('button');
    themeToggle.className = 'metro-btn flex items-center space-x-2';
    themeToggle.innerHTML = `
        <i data-feather="moon" class="w-4 h-4"></i>
        <span class="hidden md:inline">Toggle Theme</span>
    `;
    
    themeToggle.addEventListener('click', function() {
        document.documentElement.classList.toggle('dark');
        const icon = themeToggle.querySelector('i');
        if (document.documentElement.classList.contains('dark')) {
            icon.setAttribute('data-feather', 'sun');
        } else {
            icon.setAttribute('data-feather', 'moon');
        }
        feather.replace();
    });
}

function initTooltips() {
    const tooltipElements = document.querySelectorAll('[data-tooltip]');
    
    tooltipElements.forEach(element => {
        element.addEventListener('mouseenter', function(e) {
            const tooltipText = this.getAttribute('data-tooltip');
            const tooltip = document.createElement('div');
            tooltip.className = 'fixed z-50 px-3 py-2 text-sm bg-gray-900 text-white rounded-lg shadow-lg';
            tooltip.textContent = tooltipText;
            document.body.appendChild(tooltip);
            
            const rect = this.getBoundingClientRect();
            tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`;
            tooltip.style.top = `${rect.top - tooltip.offsetHeight - 10}px`;
            
            this._tooltip = tooltip;
        });
        
        element.addEventListener('mouseleave', function() {
            if (this._tooltip) {
                this._tooltip.remove();
                delete this._tooltip;
            }
        });
    });
}

function loadMockData() {
    console.log('Loading mock data for MetroPulse dashboard...');
    
    setTimeout(() => {
        const stats = {
            users: '12,847',
            revenue: '$84,520',
            sessions: '3,245',
            responseTime: '124ms'
        };
        
        document.querySelectorAll('.stat-value').forEach((el, index) => {
            const values = Object.values(stats);
            if (index < values.length) {
                el.textContent = values[index];
            }
        });
    }, 1000);
}

function initMobileMenu() {
    const mobileMenuBtn = document.querySelector('[data-mobile-menu-toggle]');
    const mobileMenu = document.querySelector('[data-mobile-menu]');
    
    if (mobileMenuBtn && mobileMenu) {
        mobileMenuBtn.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
            this.setAttribute('aria-expanded', 
                mobileMenu.classList.contains('hidden') ? 'false' : 'true'
            );
        });
        
        document.addEventListener('click', function(e) {
            if (!mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
                mobileMenu.classList.add('hidden');
                mobileMenuBtn.setAttribute('aria-expanded', 'false');
            }
        });
    }
}

function initSmoothScrolling() {
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    });
}

function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    const colors = {
        info: 'bg-primary-600',
        success: 'bg-green-600',
        warning: 'bg-yellow-600',
        error: 'bg-red-600'
    };
    
    notification.className = `fixed top-4 right-4 z-50 px-6 py-4 rounded-lg text-white shadow-lg transform translate-x-full opacity-0 transition-all duration-300 ${colors[type]}`;
    notification.textContent = message;
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.classList.remove('translate-x-full', 'opacity-0');
        notification.classList.add('translate-x-0', 'opacity-100');
    }, 10);
    
    setTimeout(() => {
        notification.classList.remove('translate-x-0', 'opacity-100');
        notification.classList.add('translate-x-full', 'opacity-0');
        
        setTimeout(() => {
            notification.remove();
        }, 300);
    }, 5000);
}

window.MetroPulse = {
    showNotification,
    initThemeToggle,
    loadMockData
};