(function ($) {
    'use strict';

    function formatEuro(value) {
        return Number(value || 0).toLocaleString('fr-FR', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }) + ' €';
    }

    $(function () {
        let chartElement = document.getElementById('order-stats-chart');

        if (!chartElement || typeof echarts === 'undefined') {
            return;
        }

        let chartPayload = chartElement.getAttribute('data-chart');
        if (!chartPayload) {
            return;
        }

        let chartData = {};

        try {
            chartData = JSON.parse(chartPayload);
        } catch (error) {
            return;
        }

        let chart = echarts.init(chartElement);

        chart.setOption({
            color: ['#274c77', '#d97706', '#6b7280'],
            animationDuration: 250,
            grid: {
                top: 40,
                right: 24,
                bottom: 70,
                left: 70
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    let lines = [params[0] ? params[0].axisValue : ''];

                    params.forEach(function (item) {
                        if (item.seriesName === 'Commandes') {
                            lines.push(item.marker + ' ' + item.seriesName + ' : ' + item.value);
                            return;
                        }

                        lines.push(item.marker + ' ' + item.seriesName + ' : ' + formatEuro(item.value));
                    });

                    return lines.join('<br>');
                }
            },
            legend: {
                top: 0,
                selected: {
                    'Panier moyen': false
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                },
                {
                    type: 'slider',
                    height: 20,
                    bottom: 16
                }
            ],
            xAxis: {
                type: 'category',
                data: chartData.categories || [],
                axisLabel: {
                    rotate: 35
                }
            },
            yAxis: [
                {
                    type: 'value',
                    name: 'Commandes',
                    minInterval: 1
                },
                {
                    type: 'value',
                    name: 'CA / panier',
                    axisLabel: {
                        formatter: function (value) {
                            return formatEuro(value);
                        }
                    }
                }
            ],
            series: [
                {
                    name: 'Commandes',
                    type: 'bar',
                    yAxisIndex: 0,
                    barMaxWidth: 38,
                    data: chartData.orders || []
                },
                {
                    name: 'Chiffre d\'affaire',
                    type: 'line',
                    yAxisIndex: 1,
                    smooth: true,
                    symbolSize: 8,
                    data: chartData.revenue || []
                },
                {
                    name: 'Panier moyen',
                    type: 'line',
                    yAxisIndex: 1,
                    smooth: true,
                    lineStyle: {
                        type: 'dashed'
                    },
                    symbolSize: 6,
                    data: chartData.average_basket || []
                }
            ]
        });

        $(window).on('resize', function () {
            chart.resize();
        });
    });
})(jQuery);
