// Performance Chart Implementation
class PerformanceChart {
    constructor(canvasId, data) {
        this.ctx = document.getElementById(canvasId).getContext('2d');
        this.chart = new Chart(this.ctx, {
            type: 'line',
            data: {
                labels: data.labels,
                datasets: [{
                    label: 'Performance Score',
                    data: data.performance,
                    borderColor: '#22c55e',
                    backgroundColor: 'rgba(34, 197, 94, 0.1)',
                    tension: 0.4,
                    fill: true
                }, {
                    label: 'Units Per Hour',
                    data: data.uph,
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                interaction: {
                    intersect: false,
                },
                scales: {
                    x: {
                        display: true,
                        title: {
                            display: true,
                            text: 'Time Period'
                        }
                    },
                    y: {
                        display: true,
                        title: {
                            display: true,
                            text: 'Performance Metrics'
                        }
                    }
                },
                animation: {
                    duration: 1000,
                    easing: 'easeInOutQuart'
                }
            }
        });
    }

    updateData(newData) {
        this.chart.data.datasets[0].data = newData.performance;
        this.chart.data.datasets[1].data = newData.uph;
        this.chart.update('active');
    }
}

// Real-time data update system
class DashboardManager {
    constructor() {
        this.updateInterval = 30000; // 30 seconds
        this.charts = {};
        this.initializeCharts();
        this.startRealTimeUpdates();
    }

    async fetchLatestData() {
        try {
            const response = await fetch('/api/performance-data');
            const data = await response.json();
            return data;
        } catch (error) {
            console.error('Error fetching performance data:', error);
            return null;
        }
    }

    startRealTimeUpdates() {
        setInterval(async () => {
            const latestData = await this.fetchLatestData();
            if (latestData) {
                this.updateAllCharts(latestData);
                this.updateDataTable(latestData);
            }
        }, this.updateInterval);
    }
}