document.addEventListener('DOMContentLoaded', function() {
    // Sample data - in a real app you would fetch this from an API
    const currentDate = new Date();
    const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
    const daysArray = Array.from({length: daysInMonth}, (_, i) => i + 1);
    // Generate data with usage until day 10 then flat
    let tokenData = [];
    let dailyData = [];
    let lastValue = 0;
    let maxDayValue = 0;
    let abstinenceDays = 0;
    
    for (let i = 0; i < daysInMonth; i++) {
        let dailyUsage = 0;
        if (i < 10) {
            dailyUsage = Math.floor(Math.random() * 600) + 100; // Random increment 100-700
            lastValue += dailyUsage;
        } else {
            abstinenceDays++;
        }
        
        if (dailyUsage > maxDayValue) {
            maxDayValue = dailyUsage;
        }
        
        tokenData.push(lastValue);
        dailyData.push(dailyUsage);
    }

    // Update stats in the UI
    document.querySelector('div:nth-child(4) div.text-2xl').textContent = maxDayValue.toLocaleString();
    document.querySelector('div:nth-child(5) div.text-2xl').textContent = abstinenceDays;
// Chart setup
    const ctx = document.getElementById('tokenChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: daysArray.map(day => `${day}`),
            datasets: [{
                label: 'Tokens Used',
                data: tokenData,
                borderColor: '#6366F1',
                backgroundColor: 'rgba(99, 102, 241, 0.1)',
                borderWidth: 3,
                tension: 0.1,
                fill: true,
                pointBackgroundColor: '#6366F1',
                pointRadius: 4,
                pointHoverRadius: 6
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `Tokens: ${context.raw.toLocaleString()}`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    },
                    ticks: {
                        callback: function(value) {
                            return value.toLocaleString();
                        }
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            }
        }
    });
});