@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">Atención institucional</p>
                <h2 class="font-headline-lg text-headline-lg text-primary mb-2">Buzón de quejas y sugerencias</h2>
                <p class="font-body-md text-body-md text-on-surface-variant max-w-2xl">
                    Consulta las solicitudes recibidas por la comunidad universitaria y revisa sus evidencias asociadas.
                </p>
            </div>
            <div class="flex items-center gap-3 rounded-xl border border-outline-variant bg-white px-5 py-3 shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                <span class="material-symbols-outlined text-primary">verified_user</span>
                <div>
                    <p class="font-label-md text-label-md text-on-surface">Modo consulta</p>
                    <p class="font-body-sm text-body-sm text-on-surface-variant">Sin edición de registros</p>
                </div>
            </div>
        </section>

        <section class="grid grid-cols-1 md: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 items-center justify-between mb-4">
                    <span class="material-symbols-outlined text-primary">all_inbox</span>
                    <span class="font-label-md text-label-md text-on-surface-variant">Total</span>
                </div>
                <p class="font-headline-lg text-headline-lg text-on-surface">{{ number_format($stats['total']) }}</p>
                <p class="font-body-sm text-body-sm text-on-surface-variant">Solicitudes recibidas</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 items-center justify-between mb-4">
                    <span class="material-symbols-outlined text-secondary">today</span>
                    <span class="font-label-md text-label-md text-on-surface-variant">Hoy</span>
                </div>
                <p class="font-headline-lg text-headline-lg text-on-surface">{{ number_format($stats['today']) }}</p>
                <p class="font-body-sm text-body-sm text-on-surface-variant">Nuevos registros</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 items-center justify-between mb-4">
                    <span class="material-symbols-outlined text-primary">attach_file</span>
                    <span class="font-label-md text-label-md text-on-surface-variant">Evidencias</span>
                </div>
                <p class="font-headline-lg text-headline-lg text-on-surface">{{ number_format($stats['with_evidence']) }}</p>
                <p class="font-body-sm text-body-sm text-on-surface-variant">Con archivos adjuntos</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 items-center justify-between mb-4">
                    <span class="material-symbols-outlined text-tertiary">shield_person</span>
                    <span class="font-label-md text-label-md text-on-surface-variant">Anónimas</span>
                </div>
                <p class="font-headline-lg text-headline-lg text-on-surface">{{ number_format($stats['anonymous']) }}</p>
                <p class="font-body-sm text-body-sm text-on-surface-variant">Sin datos de contacto</p>
            </div>
        </section>

        <section class="bg-white rounded-xl border border-outline-variant shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
            <form class="grid grid-cols-1 gap-4 p-6 lg:grid-cols-12" method="GET" action="{{ route('admin.buzon.index') }}">
                <div class="lg:col-span-5">
                    <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="search">Buscar</label>
                    <div class="relative mt-2">
                        <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">search</span>
                        <input
                            class="w-full rounded-lg border-outline-variant bg-surface-container-lowest pl-10 py-3 font-body-sm text-body-sm focus:border-primary focus:ring-primary"
                            id="search" name="search" placeholder="Folio, persona, correo, teléfono o contenido"
                            type="search" value="{{ $filters['search'] ?? '' }}" />
                    </div>
                </div>
                <div class="lg:col-span-2">
                    <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="evidencias">Evidencias</label>
                    <select
                        class="mt-2 w-full rounded-lg border-outline-variant bg-surface-container-lowest py-3 font-body-sm text-body-sm focus:border-primary focus:ring-primary"
                        id="evidencias" name="evidencias">
                        <option value="all" @selected(($filters['evidencias'] ?? 'all') === 'all')>Todas</option>
                        <option value="with" @selected(($filters['evidencias'] ?? 'all') === 'with')>Con evidencia</option>
                        <option value="without" @selected(($filters['evidencias'] ?? 'all') === 'without')>Sin evidencia</option>
                    </select>
                </div>
                <div class="lg:col-span-2">
                    <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="desde">Desde</label>
                    <input
                        class="mt-2 w-full rounded-lg border-outline-variant bg-surface-container-lowest py-3 font-body-sm text-body-sm focus:border-primary focus:ring-primary"
                        id="desde" name="desde" type="date" value="{{ $filters['desde'] ?? '' }}" />
                </div>
                <div class="lg:col-span-2">
                    <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="hasta">Hasta</label>
                    <input
                        class="mt-2 w-full rounded-lg border-outline-variant bg-surface-container-lowest py-3 font-body-sm text-body-sm focus:border-primary focus:ring-primary"
                        id="hasta" name="hasta" type="date" value="{{ $filters['hasta'] ?? '' }}" />
                </div>
                <div class="lg:col-span-1 flex items-end">
                    <button
                        class="w-full rounded-lg bg-primary px-4 py-3 text-on-primary font-label-md text-label-md hover:bg-primary-container transition-colors"
                        type="submit" title="Filtrar">
                        <span class="material-symbols-outlined">tune</span>
                    </button>
                </div>
            </form>
        </section>

        <section class="space-y-4">
            @forelse ($complaints as $complaint)
                <article id="complaint-{{ $complaint->id }}"
                    class="bg-white rounded-xl border {{ (int) request('complaint') === $complaint->id ? 'border-primary ring-2 ring-primary/20' : 'border-outline-variant' }} shadow-[0px_4px_20px_rgba(0,0,0,0.04)] overflow-hidden">
                    <div class="grid grid-cols-1 lg:grid-cols-12">
                        <div class="lg:col-span-4 border-b lg:border-b-0 lg:border-r border-outline-variant bg-surface-container-lowest p-6">
                            <div class="flex items-start justify-between gap-4 mb-5">
                                <div>
                                    <p class="font-label-md text-label-md text-secondary uppercase tracking-wider">Folio #{{ $complaint->id }}</p>
                                    <h3 class="font-title-md text-title-md text-primary mt-1">
                                        {{ $complaint->persona ?: 'Reporte anónimo' }}
                                    </h3>
                                </div>
                                <span class="rounded-full bg-tertiary-fixed px-3 py-1 font-label-md text-[10px] uppercase tracking-wider text-on-tertiary-fixed-variant">
                                    {{ $complaint->created_at->format('d/m/Y') }}
                                </span>
                            </div>

                            <div class="space-y-3 font-body-sm text-body-sm text-on-surface-variant">
                                <p class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-[18px] text-outline">schedule</span>
                                    {{ $complaint->created_at->format('H:i') }} hrs
                                </p>
                                <p class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-[18px] text-outline">mail</span>
                                    {{ $complaint->email ?: 'Sin correo' }}
                                </p>
                                <p class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-[18px] text-outline">call</span>
                                    {{ $complaint->telefono ?: 'Sin teléfono' }}
                                </p>
                                <p class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-[18px] text-outline">attach_file</span>
                                    {{ $complaint->evidencias_count }} evidencia(s)
                                </p>
                            </div>
                        </div>

                        <div class="lg:col-span-8 p-6 space-y-5">
                            <div>
                                <p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider mb-2">Mensaje</p>
                                <p class="font-body-md text-body-md text-on-surface leading-relaxed whitespace-pre-line">{{ $complaint->queja }}</p>
                            </div>

                            <div>
                                <p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider mb-3">Evidencias</p>
                                @if ($complaint->evidencias->isNotEmpty())
                                    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
                                        @foreach ($complaint->evidencias as $evidence)
                                            @php
                                                $url = route('admin.buzon.evidence', $evidence);
                                                $isImage = str_starts_with($evidence->tipo, 'image/');
                                            @endphp
                                            <a class="flex items-center gap-3 rounded-lg border border-outline-variant bg-surface-container-lowest p-3 hover:border-primary hover:bg-surface-container-low transition-colors"
                                                href="{{ $url }}" target="_blank" rel="noopener">
                                                @if ($isImage)
                                                    <img class="h-12 w-12 rounded object-cover border border-outline-variant"
                                                        src="{{ $url }}" alt="Evidencia de la queja #{{ $complaint->id }}" />
                                                @else
                                                    <span class="material-symbols-outlined text-primary text-[32px]">picture_as_pdf</span>
                                                @endif
                                                <span class="min-w-0">
                                                    <span class="block truncate font-label-md text-label-md text-on-surface">
                                                        {{ strtoupper($evidence->extension) }}
                                                    </span>
                                                    <span class="block font-body-sm text-body-sm text-on-surface-variant">
                                                        {{ number_format(((int) $evidence->size) / 1024, 0) }} KB
                                                    </span>
                                                </span>
                                            </a>
                                        @endforeach
                                    </div>
                                @else
                                    <div class="rounded-lg border border-dashed border-outline-variant bg-surface-container-lowest p-4 text-on-surface-variant font-body-sm text-body-sm">
                                        Esta solicitud no incluye evidencias.
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </article>
            @empty
                <div class="bg-white rounded-xl border border-outline-variant p-10 text-center shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                    <span class="material-symbols-outlined text-primary text-[48px] mb-3">inbox</span>
                    <h3 class="font-title-md text-title-md text-primary">No hay solicitudes para mostrar</h3>
                    <p class="font-body-md text-body-md text-on-surface-variant mt-2">Ajusta los filtros o vuelve cuando existan nuevos registros.</p>
                </div>
            @endforelse
        </section>

        @if ($complaints->hasPages())
            <div class="rounded-xl border border-outline-variant bg-white p-4">
                {{ $complaints->links() }}
            </div>
        @endif
    </div>
@endsection