document.addEventListener('DOMContentLoaded', () => {
    // Initialize tooltips
    const initTooltips = () => {
        const tooltipElements = document.querySelectorAll('[data-tooltip]');
        tooltipElements.forEach(el => {
            const tooltipText = el.getAttribute('data-tooltip');
            el.addEventListener('mouseenter', () => {
                const tooltip = document.createElement('div');
                tooltip.className = 'absolute z-50 bg-graphite-800 text-white text-xs px-2 py-1 rounded-md shadow-lg';
                tooltip.textContent = tooltipText;
                document.body.appendChild(tooltip);
                
                const rect = el.getBoundingClientRect();
                tooltip.style.top = `${rect.top - 30}px`;
                tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`;
                
                el._tooltip = tooltip;
            });
            
            el.addEventListener('mouseleave', () => {
                if (el._tooltip) {
                    document.body.removeChild(el._tooltip);
                    delete el._tooltip;
                }
            });
        });
    };

    // Toggle dark/light mode
    const themeToggle = document.getElementById('theme-toggle');
    if (themeToggle) {
        themeToggle.addEventListener('click', () => {
            document.documentElement.classList.toggle('dark');
            localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
        });
    }

    // Initialize components
    initTooltips();
    feather.replace();
});

// Mock API fetch (would be replaced with real fetch in production)
async function fetchMetrics() {
    try {
        const response = await fetch('/api/metrics');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching metrics:', error);
        return null;
    }
}

// Periodically update status
setInterval(async () => {
    const metrics = await fetchMetrics();
    if (metrics) {
        // Update UI with new metrics
        console.log('Metrics updated:', metrics);
    }
}, 30000); // Update every 30 seconds