(function () {
    'use strict';

    function cssVar(name, fallback) {
        let value = getComputedStyle(document.documentElement).getPropertyValue(name);
        return value && value.trim() !== '' ? value.trim() : fallback;
    }

    function palette() {
        return [
            cssVar('--wms-chart-primary', '#0f766e'),
            cssVar('--wms-chart-secondary', '#2563eb'),
            cssVar('--wms-chart-accent', '#f59e0b'),
            cssVar('--wms-chart-danger', '#dc2626'),
            cssVar('--wms-chart-muted', '#64748b'),
            cssVar('--wms-chart-purple', '#7c3aed')
        ];
    }

    function enrichDataset(dataset, index, type) {
        let colours = palette();
        let colour = colours[index % colours.length];

        if (type === 'doughnut' || type === 'pie') {
            dataset.backgroundColor = colours;
            dataset.borderColor = '#ffffff';
            dataset.borderWidth = dataset.borderWidth || 2;
            return dataset;
        }

        dataset.borderColor = colour;
        dataset.backgroundColor = type === 'line' ? 'rgba(15, 118, 110, 0.14)' : colour;
        dataset.pointBackgroundColor = colour;
        dataset.pointBorderColor = '#ffffff';
        dataset.pointHoverRadius = 6;
        dataset.borderWidth = 2;

        return dataset;
    }

    function optionsFor(type) {
        let textColour = cssVar('--wms-chart-text', '#334155');
        let gridColour = cssVar('--wms-chart-grid', 'rgba(148, 163, 184, 0.25)');

        let options = {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                intersect: false,
                mode: 'index'
            },
            plugins: {
                legend: {
                    position: type === 'doughnut' || type === 'pie' ? 'bottom' : 'top',
                    labels: {
                        color: textColour,
                        boxWidth: 12,
                        usePointStyle: true,
                        padding: 18
                    }
                },
                tooltip: {
                    backgroundColor: 'rgba(15, 23, 42, 0.94)',
                    padding: 12,
                    titleColor: '#ffffff',
                    bodyColor: '#ffffff',
                    cornerRadius: 10
                }
            }
        };

        if (type !== 'doughnut' && type !== 'pie') {
            options.scales = {
                x: {
                    ticks: {
                        color: textColour
                    },
                    grid: {
                        display: false
                    }
                },
                y: {
                    beginAtZero: true,
                    ticks: {
                        color: textColour,
                        precision: 0
                    },
                    grid: {
                        color: gridColour
                    }
                }
            };
        }

        if (type === 'doughnut') {
            options.cutout = '68%';
        }

        return options;
    }

    function normaliseConfig(rawConfig, type) {
        let config = rawConfig || {};
        config.labels = config.labels || [];
        config.datasets = (config.datasets || []).map(function (dataset, index) {
            return enrichDataset(dataset, index, type);
        });

        return config;
    }

    document.addEventListener('DOMContentLoaded', function () {
        if (typeof Chart === 'undefined') {
            return;
        }

        document.querySelectorAll('[data-wms-chart]').forEach(function (canvas) {
            let type = canvas.dataset.chartType || 'line';
            let raw = canvas.dataset.chartConfig || '{}';
            let config = {};

            try {
                config = JSON.parse(raw);
            } catch (error) {
                config = { labels: [], datasets: [] };
            }

            canvas.wmsChart = new Chart(canvas, {
                type: type,
                data: normaliseConfig(config, type),
                options: optionsFor(type)
            });
        });
    });
}());