@php
    use App\Support\CursoBanner;
@endphp

<x-app-layout compact>
    <x-page :titleUser="$user" :breadcrumbs="[['label' => 'Inicio']]">
        <x-slot name="subtitle">
            {{ $user->grado?->nombre ?? 'Sin grado' }}@if($user->cursos->count()) · {{ $user->cursos->pluck('nombre')->join(', ') }}@endif
        </x-slot>
        <x-slot name="actions">
            <a href="{{ route('aula.index') }}" class="mdl-btn mdl-btn-primary">Mis cursos</a>
            <a href="{{ route('profile.edit') }}" class="mdl-btn">Mi perfil</a>
        </x-slot>

        <div class="space-y-6">
            <div class="grid sm:grid-cols-2 xl:grid-cols-4 gap-4">
                <div class="eva-stat-card">
                    <p class="eva-stat-label">Mis cursos</p>
                    <p class="eva-stat-value">{{ $cursos->count() }}</p>
                    <a href="{{ route('aula.index') }}" class="mdl-link eva-stat-link">Ir al aula →</a>
                </div>
                <div class="eva-stat-card">
                    <p class="eva-stat-label">Actividades pendientes</p>
                    <p class="eva-stat-value" style="color: var(--eva-primary);">{{ $resumenActividades['pendientes'] ?? 0 }}</p>
                    <p class="text-xs text-slate-400 mt-1">Tareas, talleres y evaluaciones</p>
                </div>
                <div class="eva-stat-card">
                    <p class="eva-stat-label">Esta semana</p>
                    <p class="eva-stat-value text-sky-700">{{ $resumenActividades['esta_semana'] ?? 0 }}</p>
                    <p class="text-xs text-slate-400 mt-1">Planeadas en tus cursos</p>
                </div>
                <div class="eva-stat-card">
                    <p class="eva-stat-label">Promedio en cursos</p>
                    <p class="eva-stat-value" style="color: var(--eva-primary);">
                        {{ $promedioGeneral !== null ? \App\Support\EscalaValorativa::formatear(round($promedioGeneral, 1), $colegio ?? null) : '—' }}
                    </p>
                    <p class="text-xs text-slate-400 mt-1">Según actividades calificables del aula</p>
                </div>
            </div>

            <x-calendario-evaluaciones :eventos="$eventosCalendario" titulo="Calendario de actividades" />

            @if(($actividadesUrgentes ?? collect())->isNotEmpty())
                <div>
                    <div class="eva-section-head">
                        <div>
                            <h3>Requieren tu atención</h3>
                            <p>Entregas y evaluaciones que debes completar pronto</p>
                        </div>
                    </div>
                    <div class="eva-card p-4">
                        @include('dashboard.partials.proximas-entregas', ['items' => $actividadesUrgentes])
                    </div>
                </div>
            @endif

            @if(($proximasActividades ?? collect())->isNotEmpty())
                <div>
                    <div class="eva-section-head">
                        <div>
                            <h3>Próximas actividades</h3>
                            <p>Tareas, talleres y cuestionarios de tus cursos</p>
                        </div>
                    </div>
                    <div class="eva-card p-4">
                        @include('dashboard.partials.proximas-entregas', ['items' => $proximasActividades])
                    </div>
                </div>
            @endif

            @if($cursos->isNotEmpty())
                <div>
                    <div class="eva-section-head">
                        <div>
                            <h3>Mis cursos</h3>
                            <p>Contenido, tareas y calificaciones por curso</p>
                        </div>
                        <a href="{{ route('aula.index') }}" class="mdl-link text-sm">Ver todos</a>
                    </div>
                    <div class="grid sm:grid-cols-2 xl:grid-cols-3 gap-4">
                        @foreach($cursos->take(6) as $curso)
                            @php
                                $bannerStyle = CursoBanner::estilo($curso);
                                $bannerEsImagen = CursoBanner::esImagen($curso);
                                $prog = $progresos[$curso->id] ?? ['porcentaje' => 0, 'completadas' => 0, 'total' => 0];
                                $resumen = $resumenCursos[$curso->id] ?? ['promedio' => null, 'calificadas' => 0, 'total' => 0];
                            @endphp
                            <div class="eva-card overflow-hidden flex flex-col">
                                <div @class([
                                    'h-16 px-4 flex items-end pb-3 text-white font-semibold text-sm bg-cover bg-center',
                                    'mdl-course-banner--image' => $bannerEsImagen,
                                ]) style="background-image: {{ $bannerEsImagen ? $bannerStyle : $bannerStyle }};">
                                    {{ $curso->nombre }}
                                </div>
                                <div class="p-4 flex-1 flex flex-col gap-3">
                                    <div class="text-sm text-slate-500">
                                        {{ $curso->grado?->nombre ?? 'Sin grado' }}
                                        @if($curso->docente)
                                            · <x-user-name :user="$curso->docente" size="xs" nameClass="text-slate-500 font-normal text-sm inline" class="inline-flex align-middle" />
                                        @endif
                                    </div>
                                    @if($prog['total'] > 0)
                                        <div>
                                            <div class="h-2 rounded-full bg-slate-100 overflow-hidden">
                                                <div class="h-full rounded-full bg-[var(--eva-primary)]" style="width: {{ $prog['porcentaje'] }}%"></div>
                                            </div>
                                            <p class="text-xs text-slate-500 mt-1">Progreso {{ $prog['porcentaje'] }}% ({{ $prog['completadas'] }}/{{ $prog['total'] }})</p>
                                        </div>
                                    @endif
                                    @if($resumen['total'] > 0)
                                        <p class="text-xs text-slate-500">
                                            Calificaciones: {{ $resumen['calificadas'] }}/{{ $resumen['total'] }}
                                            @if($resumen['promedio'] !== null)
                                                · Promedio <strong style="color: var(--eva-primary);">{{ \App\Support\EscalaValorativa::formatear($resumen['promedio'], $curso->colegio()) }}</strong>
                                            @endif
                                        </p>
                                    @endif
                                    <div class="flex flex-wrap gap-2 mt-auto pt-1">
                                        <a href="{{ route('aula.show', $curso) }}" class="mdl-btn mdl-btn-primary">Entrar al aula</a>
                                        <a href="{{ route('aula.show', [$curso, 'tab' => 'calificaciones']) }}" class="mdl-btn">Calificaciones</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            @if($user->grado_id)
                <div class="eva-card p-5" x-data="{ abierto: false }">
                    <button type="button" class="w-full flex items-center justify-between gap-3" @click="abierto = !abierto">
                        <div class="text-left">
                            <h3 class="text-lg font-semibold text-slate-800">Ranking de {{ $user->grado?->nombre }}</h3>
                            <p class="text-sm text-slate-500 mt-1">
                                @if($rankingGrado['puesto'])
                                    Vas en el puesto <strong style="color: var(--eva-primary);">#{{ $rankingGrado['puesto'] }}</strong>
                                    de {{ $rankingGrado['total'] }} compañeros con nota en evaluaciones.
                                @else
                                    Aún no apareces en el ranking. ¡Completa una evaluación!
                                @endif
                            </p>
                        </div>
                        <span class="text-slate-400 text-sm" x-text="abierto ? 'Ocultar' : 'Ver'"></span>
                    </button>

                    <div class="mt-4 space-y-2" x-show="abierto" x-cloak>
                        @forelse($rankingGrado['ranking'] as $row)
                            <div @class([
                                'flex items-center gap-3 p-2.5 border transition rounded-xl',
                                'border-[var(--eva-primary)] bg-[var(--eva-primary-soft)]' => (int) $row['user_id'] === (int) $user->id,
                                'border-slate-100' => (int) $row['user_id'] !== (int) $user->id,
                            ])>
                                <div @class([
                                    'w-8 text-center font-bold text-sm shrink-0',
                                    'text-amber-500' => $row['puesto'] <= 3,
                                    'text-slate-400' => $row['puesto'] > 3,
                                ])>
                                    @if($row['puesto'] === 1) 🥇
                                    @elseif($row['puesto'] === 2) 🥈
                                    @elseif($row['puesto'] === 3) 🥉
                                    @else #{{ $row['puesto'] }}
                                    @endif
                                </div>
                                @if($row['foto'])
                                    <img src="{{ $row['foto'] }}" alt="" class="h-7 w-7 rounded-full object-cover shrink-0 ring-1 ring-white">
                                @else
                                    <span class="h-7 w-7 rounded-full bg-teal-600 text-white text-[10px] font-semibold inline-flex items-center justify-center shrink-0">{{ $row['iniciales'] }}</span>
                                @endif
                                <div class="min-w-0 flex-1">
                                    <p class="font-medium text-slate-800 truncate text-sm">
                                        {{ $row['nombre'] }}
                                        @if((int) $row['user_id'] === (int) $user->id)
                                            <span class="text-xs font-semibold" style="color: var(--eva-primary);">· Tú</span>
                                        @endif
                                    </p>
                                    <p class="text-xs text-slate-500 truncate">{{ $row['cuestionario'] }}</p>
                                </div>
                                <div class="text-right shrink-0">
                                    <p class="font-semibold text-sm" style="color: var(--eva-primary);">{{ $row['porcentaje'] }}%</p>
                                </div>
                            </div>
                        @empty
                            <p class="text-sm text-slate-500 text-center py-6">Todavía no hay puntajes en tu grado.</p>
                        @endforelse
                    </div>
                </div>
            @endif

            @if($user->tieneEvaluacionesVisibles())
                <div>
                    <div class="eva-section-head">
                        <h3>Mis evaluaciones (cuestionarios)</h3>
                        <a href="{{ route('cuestionarios.index') }}" class="mdl-link text-sm">Ver listado completo</a>
                    </div>
                    <div class="grid gap-4">
                        @forelse($asignados->take(4) as $item)
                            @include('dashboard.partials.evaluacion-estudiante', ['item' => $item, 'user' => $user])
                        @empty
                            <p class="text-sm text-slate-500">No tienes cuestionarios asignados por ahora.</p>
                        @endforelse
                    </div>
                </div>
            @endif
        </div>
    </x-page>
</x-app-layout>