document.addEventListener('DOMContentLoaded', function () {
    feather.replace();

    // Chart data from PHP
    const chartData = window.chartData || { deals: [], volume: [] };

    // Chart 1: Deals Over Time
    const ctx1 = document.getElementById('dealsChart');
    if (ctx1 && chartData.deals) {
        const labels = chartData.deals.map(d => d.date);
        const data = chartData.deals.map(d => d.count);

        new Chart(ctx1, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Completed Deals',
                    data: data,
                    fill: false,
                    borderColor: 'rgb(0, 123, 255)',
                    tension: 0.1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                           stepSize: 1 // Ensure integer steps for counts
                        }
                    }
                }
            }
        });
    }

    // Chart 2: Volume by Currency
    const ctx2 = document.getElementById('volumeChart');
    if (ctx2 && chartData.volume) {
        const labels = chartData.volume.map(v => v.currency);
        const data = chartData.volume.map(v => v.total_volume);
        const backgroundColors = [
            'rgb(0, 123, 255)',
            'rgb(40, 167, 69)',
            'rgb(255, 193, 7)',
            'rgb(108, 117, 125)',
            'rgb(23, 162, 184)'
        ];

        new Chart(ctx2, {
            type: 'doughnut',
            data: {
                labels: labels.length > 0 ? labels : ['No data'],
                datasets: [{
                    label: 'Trade Volume',
                    data: data.length > 0 ? data : [1],
                    backgroundColor: data.length > 0 ? backgroundColors : ['#f0f0f0'],
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
            }
        });
    }
});