script.js

// Main JavaScript for Quantum Code Weaver Engine Dashboard

document.addEventListener('DOMContentLoaded', function() {
    // Initialize feather icons
    feather.replace();
    
    // Initialize system metrics with random data
    initializeMetrics();
    
    // Setup event listeners
    setupEventListeners();
    
    // Simulate real-time updates
    simulateLiveUpdates();
});

function initializeMetrics() {
    // Initialize metrics with initial values
    const metrics = {
        'queue-tasks': Math.floor(Math.random() * 100),
        'queue-results': Math.floor(Math.random() * 50),
        'verified-states': Math.floor(Math.random() * 1000),
        'workers-active': Math.floor(Math.random() * 8) + 2,
        'avg-score': (Math.random() * 20 + 80).toFixed(1),
        'processing-rate': Math.floor(Math.random() * 500) + 100
    };
    
    // Update all metric elements
    Object.keys(metrics).forEach(key => {
        const element = document.getElementById(key);
        if (element) {
            element.textContent = metrics[key];
        }
    });
}

function setupEventListeners() {
    // Add click handlers for status cards
    document.querySelectorAll('.status-card').forEach(card => {
        card.addEventListener('click', function() {
            const status = this.getAttribute('data-status');
            const system = this.getAttribute('data-system');
            showStatusDetails(system, status);
        });
    });
    
    // Add refresh handler
    const refreshBtn = document.getElementById('refresh-metrics');
    if (refreshBtn) {
        refreshBtn.addEventListener('click', function() {
            refreshMetrics();
            this.classList.add('animate-spin');
            setTimeout(() => {
                this.classList.remove('animate-spin');
            }, 1000);
        });
    }
}

function showStatusDetails(system, status) {
    const statusColors = {
        'operational': 'text-green-400',
        'degraded': 'text-yellow-400',
        'offline': 'text-red-400'
    };
    
    const statusMessages = {
        'operational': 'All systems nominal',
        'degraded': 'Performance degradation detected',
        'offline': 'System offline or unreachable'
    };
    
    alert(`System: ${system.toUpperCase()}\nStatus: ${status.toUpperCase()}\n${statusMessages[status]}`);
}

function refreshMetrics() {
    // Simulate refreshing metrics with new random values
    const metrics = document.querySelectorAll('.metric-value');
    metrics.forEach(metric => {
        const current = parseInt(metric.textContent);
        const change = Math.floor(Math.random() * 10) - 5;
        const newValue = Math.max(0, current + change);
        
        // Animate the change
        metric.style.opacity = '0.5';
        setTimeout(() => {
            metric.textContent = newValue;
            metric.style.opacity = '1';
        }, 300);
    });
}

function simulateLiveUpdates() {
    // Update queue counts randomly
    setInterval(() => {
        const tasksEl = document.getElementById('queue-tasks');
        const resultsEl = document.getElementById('queue-results');
        
        if (tasksEl && resultsEl) {
            // Simulate queue movement
            const tasks = parseInt(tasksEl.textContent);
            const results = parseInt(resultsEl.textContent);
            
            const newTasks = Math.max(0, tasks + Math.floor(Math.random() * 3) - 1);
            const newResults = Math.max(0, results + Math.floor(Math.random() * 2));
            
            tasksEl.textContent = newTasks;
            resultsEl.textContent = newResults;
            
            // Add visual feedback
            if (newTasks > tasks) tasksEl.classList.add('text-green-400');
            else if (newTasks < tasks) tasksEl.classList.add('text-red-400');
            
            if (newResults > results) resultsEl.classList.add('text-green-400');
            else if (newResults < results) resultsEl.classList.add('text-red-400');
            
            setTimeout(() => {
                tasksEl.classList.remove('text-green-400', 'text-red-400');
                resultsEl.classList.remove('text-green-400', 'text-red-400');
            }, 1000);
        }
    }, 3000);
    
    // Update active workers
    setInterval(() => {
        const workersEl = document.getElementById('workers-active');
        if (workersEl) {
            const current = parseInt(workersEl.textContent);
            const change = Math.random() > 0.7 ? (Math.random() > 0.5 ? 1 : -1) : 0;
            const newCount = Math.min(10, Math.max(2, current + change));
            
            if (newCount !== current) {
                workersEl.textContent = newCount;
                workersEl.classList.add('float-animation');
                setTimeout(() => {
                    workersEl.classList.remove('float-animation');
                }, 1000);
            }
        }
    }, 5000);
}

// Utility function for formatting numbers
function formatNumber(num) {
    if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M';
    }
    if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'K';
    }
    return num.toString();
}

// Export functions for use in web components
window.QCWEUtils = {
    formatNumber,
    refreshMetrics
};