const chartBase = {
    chart: {
        background: 'transparent',
        foreColor: '#b8bec4',
        fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif',
        toolbar: { show: false },
        zoom: { enabled: false },
    },
    theme: { mode: 'dark' },
    grid: { borderColor: '#292c30', strokeDashArray: 4 },
    tooltip: { theme: 'dark' },
    noData: { text: 'No data yet' },
};

if (document.querySelector('[data-dashboard-chart]')) {
    import('apexcharts').then(({ default: ApexCharts }) => {
        document.querySelectorAll('[data-dashboard-chart]').forEach((element) => {
            let data;

            try {
                data = JSON.parse(element.dataset.chart);
            } catch (error) {
                console.error('Dashboard chart data is invalid', error);
                return;
            }

            const height = element.clientHeight || 256;
            let options;

            if (element.dataset.dashboardChart === 'orders') {
                options = {
                    ...chartBase,
                    chart: { ...chartBase.chart, type: 'area', height },
                    colors: ['#e3f504'],
                    series: [{ name: 'Awaiting dispatch', data: data.series }],
                    xaxis: { categories: data.labels, labels: { rotate: -45, hideOverlappingLabels: true } },
                    yaxis: { min: 0, forceNiceScale: true, labels: { formatter: (value) => Number.isInteger(value) ? value.toString() : '' } },
                    stroke: { curve: 'smooth', width: 3 },
                    fill: { type: 'gradient', gradient: { opacityFrom: 0.35, opacityTo: 0.02 } },
                    dataLabels: { enabled: false },
                    markers: { size: 3 },
                    legend: { show: false },
                };
            } else if (element.dataset.dashboardChart === 'materials') {
                options = {
                    ...chartBase,
                    chart: { ...chartBase.chart, type: 'donut', height },
                    labels: data.map((item) => item.label),
                    series: data.map((item) => item.count),
                    colors: ['#e3f504', '#7dd3a3', '#8b9df0', '#f0a46b', '#cc9df0', '#66cbd1', '#f17fa5'],
                    legend: { position: 'bottom', fontSize: '12px', labels: { colors: '#b8bec4' } },
                    plotOptions: { pie: { donut: { size: '68%', labels: { show: true, total: { show: true, label: 'Spools' } } } } },
                    dataLabels: { enabled: false },
                    stroke: { colors: ['#17191b'], width: 2 },
                };
            }

            if (options) {
                new ApexCharts(element, options).render();
            }
        });
    });
}