// Initialize charts when the document is ready
document.addEventListener('DOMContentLoaded', function() {
    // Weekly Performance Chart
    const weeklyPerformanceCtx = document.getElementById('weeklyPerformanceChart').getContext('2d');
    new Chart(weeklyPerformanceCtx, {
        type: 'line',
        data: {
            labels: ['TU', 'WE', 'TH', 'FR', 'SA', 'SU', 'MO'],
            datasets: [{
                label: 'Performance',
                data: [0, 1, 2, 1, 3, 2, 0],
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1,
                fill: false,
                borderWidth: 2,
                pointRadius: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            layout: {
                padding: {
                    left: 0,
                    right: 0,
                    top: 5,
                    bottom: 0
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 5,
                    ticks: {
                        stepSize: 1,
                        font: {
                            size: 10
                        }
                    },
                    grid: {
                        display: false
                    }
                },
                x: {
                    ticks: {
                        font: {
                            size: 10
                        }
                    },
                    grid: {
                        display: false
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });

    // Weekly Feedback Chart
    const weeklyFeedbackCtx = document.getElementById('weeklyFeedbackChart').getContext('2d');
    new Chart(weeklyFeedbackCtx, {
        type: 'bar',
        data: {
            labels: ['TU', 'WE', 'TH', 'FR', 'SA', 'SU', 'MO'],
            datasets: [{
                label: 'Feedback Count',
                data: [50, 50, 50, 50, 50, 50, 40],
                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                borderColor: 'rgb(54, 162, 235)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            layout: {
                padding: {
                    left: 0,
                    right: 0,
                    top: 5,
                    bottom: 0
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 60,
                    ticks: {
                        stepSize: 20,
                        font: {
                            size: 10
                        }
                    },
                    grid: {
                        display: false
                    }
                },
                x: {
                    ticks: {
                        font: {
                            size: 10
                        }
                    },
                    grid: {
                        display: false
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });

    // Subscription Chart (Left)
    const subscriptionCtx = document.getElementById('subscriptionChart').getContext('2d');
    new Chart(subscriptionCtx, {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [65, 35],
                backgroundColor: [
                    'rgba(255, 193, 7, 0.8)',
                    'rgba(200, 200, 200, 0.2)'
                ],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '40%',
            layout: {
                padding: 0
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    enabled: false
                }
            }
        }
    });

    // Performance Chart (Right)
    const performanceCtx = document.getElementById('performanceChart').getContext('2d');
    new Chart(performanceCtx, {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [80, 20],
                backgroundColor: [
                    'rgba(40, 167, 69, 0.8)',
                    'rgba(200, 200, 200, 0.2)'
                ],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '40%',
            layout: {
                padding: 0
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    enabled: false
                }
            }
        }
    });

    // Populate table data
    const stations = [
        { name: 'ADI', values: ['83.33%', '83.33%', '83.33%', '83.33%', '2,25,200'] },
        { name: 'MSH', values: ['83.33%', '83.33%', '83.33%', '83.33%', '2,25,200'] },
        { name: 'SBT', values: ['83.33%', '83.33%', '83.33%', '83.33%', '2,25,200'] },
        { name: 'PNU', values: ['83.33%', '83.33%', '83.33%', '83.33%', '2,25,200'] },
        { name: 'DHG', values: ['83.33%', '83.33%', '83.33%', '83.33%', '2,25,200'] },
        { name: 'BLDI', values: ['83.33%', '83.33%', '83.33%', '83.33%', '2,25,200'] },
        { name: 'VTA', values: ['83.33%', '83.33%', '83.33%', '83.33%', '2,25,200'] },
        { name: 'GIMB', values: ['83.33%', '83.33%', '83.33%', '83.33%', '2,25,200'] }
    ];

    const tableBody = document.querySelector('table tbody');
    tableBody.innerHTML = stations.map(station => `
        <tr>
            <td>${station.name}</td>
            ${station.values.map(value => `<td>${value}</td>`).join('')}
        </tr>
    `).join('');
});