@extends('admin.layout.app')

@section('content')
    <div class="p-10 max-w-7xl mx-auto space-y-8">
        <section class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <p class="font-label-md text-label-md text-secondary uppercase tracking-wider mb-2">Panel ejecutivo</p>
                <h2 class="font-headline-lg text-headline-lg text-primary mb-2">
                    Bienvenido, {{ auth()->user()->name }}
                </h2>
                <p class="font-body-md text-body-md text-on-surface-variant max-w-2xl">
                    Indicadores operativos para seguimiento de satisfacción, atención institucional y administración del sistema.
                </p>
            </div>
            <div class="rounded-xl border border-outline-variant bg-white px-5 py-4 shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                <p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Corte</p>
                <p class="font-title-md text-title-md text-primary mt-1">{{ now()->format('d/m/Y H:i') }}</p>
            </div>
        </section>

        <section class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-gutter">
            <div class="bg-white p-6 rounded-xl border border-outline-variant shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                <div class="flex justify-between items-start mb-4">
                    <div class="p-3 rounded-lg bg-primary-container/10 text-primary">
                        <span class="material-symbols-outlined">sentiment_satisfied</span>
                    </div>
                    <span class="font-label-md text-label-md text-on-surface-variant">Promedio</span>
                </div>
                <p class="font-label-md text-label-md text-on-surface-variant">Satisfacción general</p>
                <h3 class="font-headline-lg text-headline-lg text-primary mt-1">{{ $metrics['satisfaction_average'] }}</h3>
                <p class="font-body-sm text-body-sm text-on-surface-variant mt-2">Basado en respuestas con valor numérico.</p>
            </div>

            <div class="bg-white p-6 rounded-xl border border-outline-variant shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                <div class="flex justify-between items-start mb-4">
                    <div class="p-3 rounded-lg bg-secondary-container/10 text-secondary">
                        <span class="material-symbols-outlined">groups</span>
                    </div>
                    <span class="font-label-md text-label-md text-on-surface-variant">{{ $metrics['responses'] }} respuestas</span>
                </div>
                <p class="font-label-md text-label-md text-on-surface-variant">Participantes</p>
                <h3 class="font-headline-lg text-headline-lg text-primary mt-1">{{ number_format($metrics['participants']) }}</h3>
                <p class="font-body-sm text-body-sm text-on-surface-variant mt-2">Alumnos únicos que respondieron evaluaciones.</p>
            </div>

            <div class="bg-white p-6 rounded-xl border border-outline-variant shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                <div class="flex justify-between items-start mb-4">
                    <div class="p-3 rounded-lg bg-surface-variant text-primary">
                        <span class="material-symbols-outlined">campaign</span>
                    </div>
                    <span class="font-label-md text-label-md text-green-700">{{ $metrics['active_campaigns'] }} activas</span>
                </div>
                <p class="font-label-md text-label-md text-on-surface-variant">Campañas</p>
                <h3 class="font-headline-lg text-headline-lg text-primary mt-1">{{ number_format($metrics['campaigns']) }}</h3>
                <p class="font-body-sm text-body-sm text-on-surface-variant mt-2">Evaluaciones configuradas en el sistema.</p>
            </div>

            <div class="bg-white p-6 rounded-xl border border-outline-variant shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                <div class="flex justify-between items-start mb-4">
                    <div class="p-3 rounded-lg bg-error-container text-error">
                        <span class="material-symbols-outlined">mark_email_unread</span>
                    </div>
                    <span class="font-label-md text-label-md text-secondary">{{ $metrics['complaints_today'] }} hoy</span>
                </div>
                <p class="font-label-md text-label-md text-on-surface-variant">Buzón</p>
                <h3 class="font-headline-lg text-headline-lg text-primary mt-1">{{ number_format($metrics['complaints']) }}</h3>
                <p class="font-body-sm text-body-sm text-on-surface-variant mt-2">{{ $metrics['complaints_with_evidence'] }} con evidencias.</p>
            </div>
        </section>

        <section class="grid grid-cols-1 lg:grid-cols-3 gap-gutter">
            <div class="lg:col-span-2 bg-white rounded-xl border border-outline-variant shadow-[0px_4px_20px_rgba(0,0,0,0.04)] overflow-hidden">
                <div class="p-6 border-b border-outline-variant flex items-center justify-between">
                    <div>
                        <h3 class="font-title-md text-title-md text-primary">Desempeño de evaluaciones</h3>
                        <p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Participación y promedio por campaña reciente.</p>
                    </div>
                    <a class="font-label-md text-label-md text-primary hover:underline" href="{{ route('admin.evaluaciones.index') }}">Ver módulo</a>
                </div>
                <div class="divide-y divide-outline-variant/30">
                    @forelse ($campaignPerformance as $item)
                        <div class="p-6">
                            <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                                <div>
                                    <p class="font-label-md text-label-md text-secondary uppercase tracking-wider">
                                        {{ $item['campaign']->esta_disponible ? 'Activa' : 'No activa' }}
                                    </p>
                                    <h4 class="font-title-md text-title-md text-on-surface mt-1">{{ $item['campaign']->titulo }}</h4>
                                </div>
                                <div class="flex gap-3">
                                    <div class="rounded-lg bg-surface-container-lowest border border-outline-variant px-4 py-3 text-center">
                                        <p class="font-label-md text-label-md text-on-surface-variant">Participantes</p>
                                        <p class="font-title-md text-title-md text-primary">{{ $item['participants'] }}</p>
                                    </div>
                                    <div class="rounded-lg bg-primary text-on-primary px-4 py-3 text-center">
                                        <p class="font-label-md text-label-md">Promedio</p>
                                        <p class="font-title-md text-title-md">{{ $item['average'] ?? 'N/A' }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="p-10 text-center text-on-surface-variant">Aún no hay campañas para evaluar.</div>
                    @endforelse
                </div>
            </div>

            <div class="space-y-gutter">
                <div class="bg-primary text-white p-6 rounded-xl shadow-lg">
                    <h3 class="font-title-md text-title-md mb-4">Lectura rápida</h3>
                    <div class="space-y-4">
                        <div>
                            <p class="font-label-md text-label-md text-primary-fixed-dim uppercase tracking-wider">Usuarios administrativos</p>
                            <p class="font-headline-lg text-headline-lg">{{ number_format($metrics['users']) }}</p>
                        </div>
                        <div>
                            <p class="font-label-md text-label-md text-primary-fixed-dim uppercase tracking-wider">Campañas activas</p>
                            <p class="font-headline-lg text-headline-lg">{{ number_format($metrics['active_campaigns']) }}</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl border border-outline-variant p-6 shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                    <h3 class="font-title-md text-title-md text-primary mb-5">Roles con usuarios</h3>
                    <div class="space-y-4">
                        @forelse ($topRoles as $role)
                            <div>
                                <div class="flex items-center justify-between mb-2">
                                    <p class="font-body-sm text-body-sm text-on-surface">{{ $role->pretty_name ?? $role->name }}</p>
                                    <p class="font-label-md text-label-md text-on-surface-variant">{{ $role->users_count }}</p>
                                </div>
                                <div class="h-2 rounded-full bg-surface-container overflow-hidden">
                                    <div class="h-full rounded-full bg-secondary" style="width: {{ min(100, $role->users_count * 25) }}%"></div>
                                </div>
                            </div>
                        @empty
                            <p class="font-body-sm text-body-sm text-on-surface-variant">Sin roles asignados.</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </section>

        <section class="grid grid-cols-1 lg:grid-cols-2 gap-gutter">
            <div class="bg-white rounded-xl border border-outline-variant shadow-[0px_4px_20px_rgba(0,0,0,0.04)] overflow-hidden">
                <div class="p-6 border-b border-outline-variant flex items-center justify-between">
                    <h3 class="font-title-md text-title-md text-primary">Buzón reciente</h3>
                    <a class="font-label-md text-label-md text-primary hover:underline" href="{{ route('admin.buzon.index') }}">Ver buzón</a>
                </div>
                <div class="divide-y divide-outline-variant/30">
                    @forelse ($recentComplaints as $complaint)
                        <div class="p-5">
                            <div class="flex items-start justify-between gap-4">
                                <div>
                                    <p class="font-label-md text-label-md text-secondary uppercase tracking-wider">Folio #{{ $complaint->id }}</p>
                                    <p class="font-body-md text-body-md text-on-surface mt-1 line-clamp-2">{{ $complaint->queja }}</p>
                                </div>
                                <span class="rounded-full bg-surface-container px-3 py-1 font-label-md text-[10px] uppercase tracking-wider text-on-surface-variant">
                                    {{ $complaint->evidencias_count }} evid.
                                </span>
                            </div>
                            <p class="font-body-sm text-body-sm text-on-surface-variant mt-2">{{ $complaint->created_at->format('d/m/Y H:i') }}</p>
                        </div>
                    @empty
                        <div class="p-8 text-center text-on-surface-variant">No hay quejas o sugerencias registradas.</div>
                    @endforelse
                </div>
            </div>

            <div class="bg-white rounded-xl border border-outline-variant shadow-[0px_4px_20px_rgba(0,0,0,0.04)] overflow-hidden">
                <div class="p-6 border-b border-outline-variant flex items-center justify-between">
                    <h3 class="font-title-md text-title-md text-primary">Campañas recientes</h3>
                    <a class="font-label-md text-label-md text-primary hover:underline" href="{{ route('admin.evaluaciones.index') }}">Ver evaluaciones</a>
                </div>
                <div class="divide-y divide-outline-variant/30">
                    @forelse ($recentCampaigns as $campaign)
                        <div class="p-5">
                            <div class="flex items-start justify-between gap-4">
                                <div>
                                    <p class="font-label-md text-label-md text-secondary uppercase tracking-wider">
                                        {{ $campaign->esta_disponible ? 'Activa' : 'Programada' }}
                                    </p>
                                    <p class="font-body-md text-body-md text-on-surface mt-1">{{ $campaign->titulo }}</p>
                                </div>
                                <span class="rounded-full bg-surface-container px-3 py-1 font-label-md text-[10px] uppercase tracking-wider text-on-surface-variant">
                                    {{ $campaign->preguntas_count }} preguntas
                                </span>
                            </div>
                            <p class="font-body-sm text-body-sm text-on-surface-variant mt-2">
                                {{ $campaign->inicio_at->format('d/m/Y') }} - {{ $campaign->fin_at->format('d/m/Y') }}
                            </p>
                        </div>
                    @empty
                        <div class="p-8 text-center text-on-surface-variant">No hay campañas registradas.</div>
                    @endforelse
                </div>
            </div>
        </section>
    </div>
@endsection