/**
 * Chart.js configurations for WeightTracker
 * Uses a consistent dark theme with accent colors
 */

const chartDefaults = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: {
            display: false,
        },
        tooltip: {
            backgroundColor: '#1a2233',
            titleColor: '#f1f5f9',
            bodyColor: '#94a3b8',
            borderColor: '#2a3548',
            borderWidth: 1,
            cornerRadius: 8,
            padding: 10,
            displayColors: false,
        },
    },
    scales: {
        x: {
            grid: { color: 'rgba(42, 53, 72, 0.5)', drawBorder: false },
            ticks: { color: '#64748b', font: { size: 11, family: 'Inter' } },
        },
        y: {
            grid: { color: 'rgba(42, 53, 72, 0.5)', drawBorder: false },
            ticks: { color: '#64748b', font: { size: 11, family: 'Inter' } },
        },
    },
};


function createWeightChart(canvasId, labels, weights) {
    const ctx = document.getElementById(canvasId);
    if (!ctx) return;

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Weight (kg)',
                data: weights,
                borderColor: '#3b82f6',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                fill: true,
                tension: 0.3,
                pointBackgroundColor: '#3b82f6',
                pointBorderColor: '#1a2233',
                pointBorderWidth: 2,
                pointRadius: 4,
                pointHoverRadius: 6,
            }],
        },
        options: {
            ...chartDefaults,
            plugins: {
                ...chartDefaults.plugins,
                tooltip: {
                    ...chartDefaults.plugins.tooltip,
                    callbacks: {
                        label: ctx => `${ctx.parsed.y} kg`,
                    },
                },
            },
        },
    });
}


function createWeeklyChangeChart(canvasId, labels, changes) {
    const ctx = document.getElementById(canvasId);
    if (!ctx) return;

    const colors = changes.map(c => c <= 0 ? '#10b981' : '#ef4444');
    const bgColors = changes.map(c => c <= 0 ? 'rgba(16, 185, 129, 0.7)' : 'rgba(239, 68, 68, 0.7)');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Change (kg)',
                data: changes,
                backgroundColor: bgColors,
                borderColor: colors,
                borderWidth: 1,
                borderRadius: 4,
            }],
        },
        options: {
            ...chartDefaults,
            plugins: {
                ...chartDefaults.plugins,
                tooltip: {
                    ...chartDefaults.plugins.tooltip,
                    callbacks: {
                        label: ctx => `${ctx.parsed.y > 0 ? '+' : ''}${ctx.parsed.y} kg`,
                    },
                },
            },
        },
    });
}


function createComparisonChart(canvasId, names, pctLost) {
    const ctx = document.getElementById(canvasId);
    if (!ctx) return;

    const hues = [210, 160, 270, 30, 340, 190];
    const bgColors = pctLost.map((_, i) => `hsla(${hues[i % hues.length]}, 70%, 55%, 0.7)`);
    const borderColors = pctLost.map((_, i) => `hsl(${hues[i % hues.length]}, 70%, 55%)`);

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: names,
            datasets: [{
                label: '% Lost',
                data: pctLost,
                backgroundColor: bgColors,
                borderColor: borderColors,
                borderWidth: 1,
                borderRadius: 6,
            }],
        },
        options: {
            ...chartDefaults,
            indexAxis: names.length > 5 ? 'y' : 'x',
            plugins: {
                ...chartDefaults.plugins,
                tooltip: {
                    ...chartDefaults.plugins.tooltip,
                    callbacks: {
                        label: ctx => `${ctx.parsed.y || ctx.parsed.x}% lost`,
                    },
                },
            },
        },
    });
}