@props([
    'stats',
    'titulo' => 'Estadísticas en vivo',
    'puedeVerIntentos' => true,
])

@php
    $payload = [
        'porGrado' => $stats['por_grado'] ?? [],
        'ranking' => $stats['ranking'] ?? [],
        'actividad' => $stats['actividad'] ?? [],
        'porTipo' => $stats['por_tipo'] ?? ['evaluacion' => 0, 'saber' => 0],
        'resumen' => $stats['resumen'] ?? [],
        'puedeVerIntentos' => (bool) $puedeVerIntentos,
        'intentoBaseUrl' => url('/intentos'),
    ];
@endphp

<div
    x-data="{
        porGrado: @js($payload['porGrado']),
        ranking: @js($payload['ranking']),
        actividad: @js($payload['actividad']),
        porTipo: @js($payload['porTipo']),
        resumen: @js($payload['resumen']),
        puedeVerIntentos: @js($payload['puedeVerIntentos']),
        intentoBaseUrl: @js($payload['intentoBaseUrl']),
        gradoId: null,
        busqueda: '',
        get gradosFiltrados() {
            return this.gradoId
                ? this.porGrado.filter(g => Number(g.id) === Number(this.gradoId))
                : this.porGrado;
        },
        get rankingFiltrado() {
            const q = this.busqueda.trim().toLowerCase();
            return this.ranking.filter(r => {
                const okGrado = !this.gradoId || Number(r.grado_id) === Number(this.gradoId);
                const okTexto = !q || (r.nombre || '').toLowerCase().includes(q) || (r.grado || '').toLowerCase().includes(q);
                return okGrado && okTexto;
            });
        },
        get actividadFiltrada() {
            return this.actividad.filter(a => !this.gradoId || Number(a.grado_id) === Number(this.gradoId));
        }
    }"
    class="space-y-6"
>
    <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-4">
        <div>
            <h3 class="text-lg font-semibold text-slate-800">{{ $titulo }}</h3>
            <p class="text-sm text-slate-500 mt-1">Filtra por grado, explora el ranking y sigue la actividad reciente.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <button type="button" @click="gradoId = null"
                    class="px-3 py-1.5 rounded-full text-sm border transition"
                    :class="!gradoId ? 'bg-teal-700 text-white border-teal-700' : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50'">
                Todos los grados
            </button>
            <template x-for="g in porGrado" :key="g.id">
                <button type="button" @click="gradoId = g.id"
                        class="px-3 py-1.5 rounded-full text-sm border transition"
                        :class="Number(gradoId) === Number(g.id) ? 'bg-teal-700 text-white border-teal-700' : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50'"
                        x-text="g.nombre"></button>
            </template>
        </div>
    </div>

    <div class="grid sm:grid-cols-2 xl:grid-cols-4 gap-4">
        <div class="eva-card p-5">
            <p class="text-sm text-slate-500">Estudiantes</p>
            <p class="text-3xl font-semibold text-slate-800 mt-2" x-text="resumen.estudiantes ?? 0"></p>
        </div>
        <div class="eva-card p-5">
            <p class="text-sm text-slate-500">Intentos calificados</p>
            <p class="text-3xl font-semibold text-teal-700 mt-2" x-text="resumen.intentos ?? 0"></p>
        </div>
        <div class="eva-card p-5">
            <p class="text-sm text-slate-500">Promedio general</p>
            <p class="text-3xl font-semibold text-sky-700 mt-2">
                <span x-text="resumen.promedio_general != null ? resumen.promedio_general + '%' : '—'"></span>
            </p>
        </div>
        <div class="eva-card p-5">
            <p class="text-sm text-slate-500">Evaluación / SABER</p>
            <p class="text-3xl font-semibold text-slate-800 mt-2">
                <span x-text="porTipo.evaluacion"></span>
                <span class="text-slate-300">/</span>
                <span x-text="porTipo.saber"></span>
            </p>
        </div>
    </div>

    <div class="grid lg:grid-cols-5 gap-6">
        <div class="lg:col-span-3 eva-card p-5">
            <div class="flex items-center justify-between mb-4">
                <h4 class="font-semibold text-slate-800">Desempeño por grado</h4>
                <span class="text-xs text-slate-400" x-text="gradosFiltrados.length + ' grados'"></span>
            </div>
            <div class="space-y-4">
                <template x-for="g in gradosFiltrados" :key="'grado-' + g.id">
                    <button type="button" class="w-full text-left group" @click="gradoId = Number(gradoId) === Number(g.id) ? null : g.id">
                        <div class="flex items-center justify-between gap-3 mb-1.5">
                            <div>
                                <p class="font-medium text-slate-800 group-hover:text-teal-700 transition" x-text="g.nombre"></p>
                                <p class="text-xs text-slate-500">
                                    <span x-text="g.estudiantes"></span> estudiantes ·
                                    <span x-text="g.con_nota"></span> con nota
                                </p>
                            </div>
                            <div class="text-right">
                                <p class="font-semibold text-teal-700" x-text="g.promedio_porcentaje != null ? g.promedio_porcentaje + '%' : 'Sin datos'"></p>
                                <p class="text-xs text-slate-400" x-show="g.promedio_evaluacion != null"
                                   x-text="g.promedio_evaluacion != null ? ('≈ ' + g.promedio_evaluacion + ' / 5') : ''"></p>
                            </div>
                        </div>
                        <div class="h-2.5 rounded-full bg-slate-100 overflow-hidden">
                            <div class="h-full rounded-full bg-gradient-to-r from-teal-500 to-sky-500 transition-all duration-700"
                                 :style="'width:' + (g.promedio_porcentaje ?? 0) + '%'"></div>
                        </div>
                    </button>
                </template>
                <p class="text-sm text-slate-500" x-show="gradosFiltrados.length === 0">No hay grados para mostrar.</p>
            </div>
        </div>

        <div class="lg:col-span-2 eva-card p-5">
            <h4 class="font-semibold text-slate-800 mb-4">Mejores puntajes</h4>
            <input type="search" x-model="busqueda" placeholder="Buscar estudiante o grado…"
                   class="mb-4 w-full rounded-xl border-slate-200 text-sm focus:border-teal-500 focus:ring-teal-500">
            <div class="space-y-2 max-h-[28rem] overflow-y-auto pe-1">
                <template x-for="row in rankingFiltrado" :key="'rank-' + row.user_id">
                    <div class="flex items-center gap-3 p-2.5 rounded-xl border border-slate-100 hover:border-teal-200 hover:bg-teal-50/40 transition">
                        <div class="w-8 text-center font-bold text-sm"
                             :class="row.puesto <= 3 ? 'text-amber-500' : 'text-slate-400'"
                             x-text="row.puesto <= 3 ? ['🥇','🥈','🥉'][row.puesto-1] : '#' + row.puesto"></div>
                        <div class="h-7 w-7 rounded-full bg-slate-200 overflow-hidden flex items-center justify-center text-[10px] font-semibold text-slate-600 shrink-0">
                            <template x-if="row.foto"><img :src="row.foto" alt="" class="h-full w-full object-cover"></template>
                            <template x-if="!row.foto"><span x-text="row.iniciales"></span></template>
                        </div>
                        <div class="min-w-0 flex-1">
                            <p class="font-medium text-slate-800 truncate" x-text="row.nombre"></p>
                            <p class="text-xs text-slate-500 truncate"><span x-text="row.grado"></span> · <span x-text="row.cuestionario"></span></p>
                        </div>
                        <div class="text-right shrink-0">
                            <p class="font-semibold text-teal-700" x-text="row.porcentaje + '%'"></p>
                            <p class="text-[11px] text-slate-400" x-text="row.tipo === 'saber' ? (row.nota_saber + '/500') : (row.nota_evaluacion + '/5')"></p>
                        </div>
                    </div>
                </template>
                <p class="text-sm text-slate-500 py-6 text-center" x-show="rankingFiltrado.length === 0">Aún no hay puntajes para este filtro.</p>
            </div>
        </div>
    </div>

    <div class="eva-card p-5">
        <div class="flex items-center justify-between mb-4">
            <h4 class="font-semibold text-slate-800">Actividad reciente</h4>
            <span class="text-xs text-slate-400">Últimos envíos</span>
        </div>
        <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-3">
            <template x-for="item in actividadFiltrada" :key="'act-' + item.id">
                <a :href="puedeVerIntentos ? (intentoBaseUrl + '/' + item.intento_id) : '#'"
                   class="flex items-start gap-3 p-3 rounded-xl border border-slate-100 hover:border-teal-200 hover:bg-slate-50 transition"
                   @click="if (!puedeVerIntentos) $event.preventDefault()">
                    <div class="h-7 w-7 rounded-full bg-teal-100 text-teal-800 flex items-center justify-center text-[10px] font-semibold shrink-0 overflow-hidden">
                        <template x-if="item.foto"><img :src="item.foto" class="h-full w-full object-cover" alt=""></template>
                        <template x-if="!item.foto"><span x-text="item.iniciales"></span></template>
                    </div>
                    <div class="min-w-0">
                        <p class="font-medium text-slate-800 truncate" x-text="item.estudiante"></p>
                        <p class="text-xs text-slate-500 truncate" x-text="(item.grado ? item.grado + ' · ' : '') + item.cuestionario"></p>
                        <p class="text-xs text-teal-700 mt-1">
                            <span x-text="item.nota != null ? item.nota : '—'"></span>
                            <span x-text="item.tipo === 'saber' ? ' / 500' : ' / 5'"></span>
                            · <span x-text="item.cuando"></span>
                        </p>
                    </div>
                </a>
            </template>
        </div>
        <p class="text-sm text-slate-500 text-center py-6" x-show="actividadFiltrada.length === 0">Sin actividad reciente.</p>
    </div>
</div>