{{-- Bloque temporalmente oculto por entrega MVP --}}
<div style="display: none; pointer-events: none; opacity: 0.5;">
    <div class="p-4">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold">Evolución de miembros</h2>
            <select wire:model="mes" class="rounded bg-zinc-800 text-zinc-100 dark:bg-zinc-200 dark:text-zinc-800 px-2 py-1" disabled>
                @foreach($meses as $m)
                    <option value="{{ $m }}" @if($m == $mes) selected @endif>
                        {{ \Illuminate\Support\Carbon::createFromFormat('Y-m', $m)->translatedFormat('F Y') }}
                    </option>
                @endforeach
            </select>
        </div>
        <canvas id="evolucionMiembrosChart" style="height: 320px; width: 100%" aria-disabled="true"></canvas>
    </div>
</div>
{{-- Fin bloque oculto --}}

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    function renderEvolucionMiembrosChart() {
        if(window.evolucionMiembrosChartInstance) window.evolucionMiembrosChartInstance.destroy();
        const ctx = document.getElementById('evolucionMiembrosChart').getContext('2d');
        window.evolucionMiembrosChartInstance = new Chart(ctx, {
            type: 'line',
            data: {
                labels: @json($labels),
                datasets: [{
                    label: 'Miembros por día',
                    data: @json($data),
                    fill: true,
                    borderColor: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#60a5fa' : '#2563eb',
                    backgroundColor: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'rgba(96,165,250,0.15)' : 'rgba(37,99,235,0.15)',
                    pointBackgroundColor: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#3b82f6' : '#1d4ed8',
                    pointBorderColor: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#60a5fa' : '#2563eb',
                    pointRadius: 4,
                    pointHoverRadius: 6,
                    tension: 0.3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `Miembros: ${context.parsed.y}`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { color: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#334155' : '#e5e7eb' },
                        ticks: { color: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#e0e7ef' : '#334155' }
                    },
                    y: {
                        beginAtZero: true,
                        grid: { color: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#334155' : '#e5e7eb' },
                        ticks: { color: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#e0e7ef' : '#334155' }
                    }
                }
            }
        });
    }

    document.addEventListener('livewire:load', renderEvolucionMiembrosChart);
    document.addEventListener('livewire:update', renderEvolucionMiembrosChart);
</script>
@endpush