@props([
    'id' => null,
    'type' => 'bar', // bar, line, area, pie, donut, radar
    'title' => 'Evolución',
    'data' => [], // ['Enero' => 10, 'Febrero' => 20]
    'color' => '#007bff',
    'height' => 350
])

@php
    // Identificador único (si el programador no suplió uno en Blade) para evitar pisar mapas cuando hay gráficos múltiples.
    $chartId = $id ?? 'chart_' . Str::random(8);

    // Inteligencia: Si el tipo es 'pie' o 'donut', Apex requiere arreglos simples de 1D en vez de format de Series 2D.
    $isRadial = in_array($type, ['pie', 'donut']);

    // Particionamiento: Laravel extrae Etiquetas ("Enero, Febrero") y Series (Valores Numéricos)
    $keys = array_keys($data);
    $values = array_values($data);

    // Conversión a JSON Limpio para JS
    $jsonLabels = json_encode($keys);
    
    // Si es Radial, la "serie" es simplemente el [10, 20]. Si no es radial, es un objeto con la "data" adentro.
    $jsonSeries = $isRadial 
        ? json_encode($values) 
        : json_encode([['name' => $title, 'data' => $values]]);
@endphp

<div class="card shadow-sm mb-4 border-0">
    <div class="card-header bg-white border-bottom-0 pt-3 pb-0">
        <h3 class="card-title font-weight-bold text-dark">
            <i class="fas fa-chart-{{ $isRadial ? 'pie' : $type }} text-muted mr-1"></i> {{ $title }}
        </h3>
    </div>
    <div class="card-body">
        <div id="{{ $chartId }}" style="min-height: {{ $height }}px;"></div>
    </div>
</div>

@pushonce('js')
    {{-- Dependencia Oficial de ApexCharts (Ligera y Estéticamente superior a Chart.js) --}}
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
@endpushonce

@push('js')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        
        let type = '{{ $type }}';
        let isRadial = {{ $isRadial ? 'true' : 'false' }};

        // Generar Opciones dinámicamente según lo inyectado por el Componente Blade
        let options = {
            series: {!! $jsonSeries !!},
            chart: {
                type: type,
                height: {{ $height }},
                fontFamily: 'inherit', // Respeta el font de AdminLTE (Source Sans Pro / Roboto)
                toolbar: {
                    show: true, // Auto-Añade el botón de "Descargar en Excel/PNG" en la esquina
                    tools: { download: true, selection: false, zoom: false, pan: false }
                },
                animations: { enabled: true, easing: 'easeinout', speed: 800 }
            },
            colors: ['{{ $color }}', '#28a745', '#ffc107', '#dc3545', '#17a2b8'], // Paleta Bootstrap en caso de Multi-Series
            dataLabels: {
                enabled: false // Desactivado para que no ensucie la gráfica, visible al hacer Hover
            },
            stroke: {
                curve: 'smooth', // Líneas redondeadas si es un gráfico de Línea/Área
                width: isRadial ? 1 : 3
            },
            grid: {
                borderColor: '#e7e7e7',
                row: { opacity: 0.5 }
            },
            // Inteligencia UI: Si es Gráfico circular, las etiquetas van en la raíz de 'labels', si es XY van en 'xaxis'
        };

        // Configuración Condicional X/Y
        if (isRadial) {
            options.labels = {!! $jsonLabels !!};
        } else {
            options.xaxis = { categories: {!! $jsonLabels !!} };
            options.yaxis = { title: { text: 'Valores' } };
        }

        // Si es de Área, poner un lindo difuminado gradiente debajo de la curva
        if (type === 'area') {
            options.fill = {
                type: 'gradient',
                gradient: { shadeIntensity: 1, opacityFrom: 0.7, opacityTo: 0.2, stops: [0, 90, 100] }
            };
        }

        // Renderizado Final en el DIV Target
        let chart = new ApexCharts(document.querySelector("#{{ $chartId }}"), options);
        chart.render();
    });
</script>
@endpush