{{-- Gráficas laterales de Programación de Arribos (kit ui-ctc). Highcharts lo carga la pantalla (pantallas.importaciones
     .programacion-arribos); textos y colores salen de los tokens, así siguen el modo claro u oscuro. --}}
<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-1">
    @foreach (['grTipoCargas' => 'Tipos de carga', 'grPuertosArribo' => 'Puertos de arribo', 'grTransportes' => 'Distribución transporte'] as $id => $titulo)
        <x-tarjeta :titulo="$titulo">
            <div id="{{ $id }}" wire:ignore class="min-h-[210px] w-full"></div>
        </x-tarjeta>
    @endforeach

    <script>
        (function () {
            var graficos = {};
            var ultimas = null;

            function tema(config) {
                var css = getComputedStyle(document.documentElement);
                var texto = css.getPropertyValue('--texto').trim() || '#16161A';
                var suave = css.getPropertyValue('--texto-suave').trim() || '#6E6E7A';
                config = JSON.parse(JSON.stringify(config));
                config.colors = ['#3b82f6', '#f59e0b', '#10b981', '#8b5cf6', '#ef4444', '#06b6d4', '#94a3b8', '#ec4899'];
                config.chart.style = { fontFamily: css.getPropertyValue('--fuente').trim() || 'sans-serif' };
                // La columna es angosta: leyenda debajo de la dona, no al lado.
                // Más porciones, más líneas de leyenda: la gráfica crece para que la dona no se encoja.
                var puntos = (config.series && config.series[0] && config.series[0].data) ? config.series[0].data.length : 0;
                config.chart.height = 210 + 18 * Math.max(0, puntos - 3);
                delete config.chart.margin;
                config.chart.spacing = [4, 4, 4, 4];
                config.plotOptions.pie.size = '88%';
                Object.assign(config.legend, { layout: 'horizontal', align: 'center', verticalAlign: 'bottom', itemMarginTop: 2, itemMarginBottom: 2, margin: 8 });
                config.legend.itemStyle = Object.assign({}, config.legend.itemStyle, { color: suave, fontWeight: '500' });
                config.legend.itemHoverStyle = { color: texto };
                if (config.plotOptions && config.plotOptions.series && config.plotOptions.series.dataLabels) {
                    config.plotOptions.series.dataLabels.forEach(function (d) { d.style = Object.assign({}, d.style, { color: texto, textOutline: 'none' }); });
                }
                config.plotOptions.pie.borderColor = css.getPropertyValue('--superficie').trim() || '#FFFFFF';
                return config;
            }

            function dibujar(configuraciones) {
                if (!window.Highcharts) { return; }
                ultimas = configuraciones;
                Object.keys(configuraciones).forEach(function (id) {
                    if (!document.getElementById(id)) { return; }
                    if (graficos[id]) { graficos[id].destroy(); }
                    graficos[id] = Highcharts.chart(id, tema(configuraciones[id]));
                });
            }

            dibujar(@json($configuraciones));
            window.addEventListener('graficos-arribos:actualizar', function (evento) { dibujar(evento.detail); });
            window.addEventListener('tema-cambiado', function () { if (ultimas) { dibujar(ultimas); } });
        })();
    </script>
</div>