{{-- ============================================================
     La portada de Monitorización.

     **La sección entraba por «Tráfico y cortes»**, o sea que la puerta de cinco
     herramientas era la más densa de las cinco y ninguna decía qué son las otras cuatro.
     Es lo mismo que le pasaba a Configuración, y se arregla igual: una portada que
     **enruta y explica**. Ver el docblock del componente.

     Cada tarjeta lleva **el número que decide si hay que entrar**, y los números de esta
     sección tienen trampa —un corte en observación no corta a nadie, y la mitad de lo que
     responde `4xx` no es un error—, así que aquí se dicen con su matiz y no a secas.
     ============================================================ --}}
<div class="w-full" style="font-size:14px;">
    <div class="flex w-full flex-col gap-3.5">

        {{-- ============ Cabecera ============ --}}
        <x-cabecera
            rotulo="Monitorización"
            titulo="Monitorización">

            <x-slot:icono>
                <x-nav-icon name="clipboard" tint="orange" />
            </x-slot:icono>

            <x-slot:descripcion>
            Aquí se mira cuando algo va mal y se demuestra qué pasó: qué pidió cada Moodle,
            qué se le respondió, a quién estamos cortando y qué avisos han salido.
            <span class="mt-0.5 block">
                Esta sección <strong class="font-semibold">solo mira</strong>. Los umbrales, los destinatarios de los avisos y
                cuánto histórico se guarda se configuran en
                @can('admin.configs.index')
                    <a href="{{ route('configurations.manager.index') }}" wire:navigate
                       class="font-semibold" style="color:var(--text-link);">Ajustes del Manager</a>.
                @else
                    Ajustes del Manager.
                @endcan
            </span>
            </x-slot:descripcion>

            <x-slot:pie>
                @include("livewire.monitoring.components.menu", ["selected" => "resumen"])
            </x-slot:pie>
        </x-cabecera>

        {{-- ============ Las herramientas ============ --}}
        {{-- Se reutiliza la rejilla de la portada de Configuración: es el mismo patrón
             —tarjeta con icono, qué es, y el dato que decide si entras— y tenerlo dos veces
             con dos maquetaciones distintas es lo que se estuvo pagando durante meses. --}}
        <div class="cfg-bloques-grid">

            {{-- ---- Tráfico y cortes ---- --}}
            <a href="{{ route('monitoring.traffic') }}" wire:navigate
               class="cfg-bloque" style="background:var(--surface-card); border:1px solid var(--border-subtle);">
                <span class="flex h-[38px] w-[38px] items-center justify-center rounded-[10px]"
                      style="background:var(--danger-50); color:var(--danger-500);">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/><circle cx="12" cy="12" r="10"/></svg>
                </span>

                <div class="flex flex-wrap items-center gap-2">
                    <span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong);">
                        Tráfico y cortes
                    </span>

                    {{-- **Rojo solo si se está cortando de verdad.** Un corte en observación
                         se apunta y la petición sigue: pintarlo igual sería decir que hay
                         clientes sin servicio cuando no los hay. --}}
                    @if ($n['cortando'] > 0)
                        <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                              style="color:#fff; background:var(--danger-500);">
                            {{ $n['cortando'] }} cortando
                        </span>
                    @elseif ($n['observando'] > 0)
                        <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                              style="color:var(--info-500); background:var(--info-50);">
                            {{ $n['observando'] }} en observación
                        </span>
                    @else
                        <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                              style="color:var(--success-500); background:var(--success-50);">
                            sin cortes
                        </span>
                    @endif
                </div>

                <div class="flex-1 text-[12.5px] leading-[1.5]" style="color:var(--text-muted);">
                    Quién está llamando de más y a quién le estamos cortando el servicio. Se
                    puede bloquear una IP a mano y levantar un corte.
                    <strong class="font-semibold">«En observación» no corta a nadie</strong>: se
                    apunta lo que se habría cortado y la petición sigue adelante.
                </div>

                <span class="text-[12.5px] font-semibold" style="color:var(--text-link);">
                    {{ $n['cortesGuardados'] }} {{ $n['cortesGuardados'] === 1 ? 'registro' : 'registros' }} guardados →
                </span>
            </a>

            {{-- ---- Peticiones API ---- --}}
            @can('admin.api-logs.index')
                <a href="{{ route('api-logs.index') }}" wire:navigate
                   class="cfg-bloque" style="background:var(--surface-card); border:1px solid var(--border-subtle);">
                    <span class="flex h-[38px] w-[38px] items-center justify-center rounded-[10px]"
                          style="background:var(--orange-100); color:var(--orange-600);">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17V9"/><path d="M10 17V5"/><path d="M16 17v-6"/><path d="M22 17V3"/></svg>
                    </span>

                    <div class="flex flex-wrap items-center gap-2">
                        <span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong);">
                            Peticiones API
                        </span>

                        @if ($n['erroresSinRevisar'] > 0)
                            <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                                  style="color:#fff; background:var(--danger-500);">
                                {{ $n['erroresSinRevisar'] }} por revisar
                            </span>
                        @else
                            <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                                  style="color:var(--success-500); background:var(--success-50);">
                                nada que arreglar
                            </span>
                        @endif
                    </div>

                    <div class="flex-1 text-[12.5px] leading-[1.5]" style="color:var(--text-muted);">
                        Una fila por llamada de cada Moodle: qué pidió, qué se le respondió y
                        <strong class="font-semibold">por qué falló</strong> si falló. Es la única
                        fuente de lo que pasó de verdad — el resto del panel dice lo que
                        <em>debería</em> recibir cada sitio.
                    </div>

                    <span class="text-[12.5px] font-semibold" style="color:var(--text-link);">
                        {{ number_format($n['peticiones'], 0, ',', '.') }} en {{ $dias }} días →
                    </span>
                </a>
            @endcan

            {{-- ---- Caducidades ---- --}}
            <a href="{{ route('monitoring.expirations') }}" wire:navigate
               class="cfg-bloque" style="background:var(--surface-card); border:1px solid var(--border-subtle);">
                <span class="flex h-[38px] w-[38px] items-center justify-center rounded-[10px]"
                      style="background:var(--warning-50); color:var(--warning-500);">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
                </span>

                <div class="flex flex-wrap items-center gap-2">
                    <span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong);">
                        Caducidades
                    </span>

                    @if ($n['caducaPronto'] > 0)
                        <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                              style="color:var(--warning-500); background:var(--warning-50);">
                            {{ $n['caducaPronto'] }} en 30 días
                        </span>
                    @else
                        <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                              style="color:var(--success-500); background:var(--success-50);">
                            nada cerca
                        </span>
                    @endif
                </div>

                <div class="flex-1 text-[12.5px] leading-[1.5]" style="color:var(--text-muted);">
                    Licencias y soportes que se acaban. Una licencia caducada
                    <strong class="font-semibold">deja al sitio sin servicio</strong>; un soporte
                    caducado no corta nada — es un acuerdo comercial.
                </div>

                <span class="text-[12.5px] font-semibold" style="color:var(--text-link);">
                    Ver el calendario →
                </span>
            </a>

            {{-- ---- Avisos ---- --}}
            <a href="{{ route('monitoring.notices') }}" wire:navigate
               class="cfg-bloque" style="background:var(--surface-card); border:1px solid var(--border-subtle);">
                <span class="flex h-[38px] w-[38px] items-center justify-center rounded-[10px]"
                      style="background:var(--info-50); color:var(--info-500);">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>
                </span>

                <div class="flex flex-wrap items-center gap-2">
                    <span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong);">
                        Avisos
                    </span>

                    @if ($n['avisosSinEntregar'] > 0)
                        <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                              style="color:var(--warning-500); background:var(--warning-50);">
                            {{ $n['avisosSinEntregar'] }} sin entregar
                        </span>
                    @else
                        <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                              style="color:var(--success-500); background:var(--success-50);">
                            todos entregados
                        </span>
                    @endif
                </div>

                <div class="flex-1 text-[12.5px] leading-[1.5]" style="color:var(--text-muted);">
                    Los correos que el Manager manda solo: licencias por caducar, soportes,
                    cortes de la API. <strong class="font-semibold">Un aviso sin entregar es un
                    aviso que nadie ha leído</strong>, y esa es la única pantalla donde se ve.
                </div>

                <span class="text-[12.5px] font-semibold" style="color:var(--text-link);">
                    Ver los avisos →
                </span>
            </a>

            {{-- ---- Acciones del panel ---- --}}
            @can('admin.logs.index')
                <a href="{{ route('monitoring.system-log') }}" wire:navigate
                   class="cfg-bloque" style="background:var(--surface-card); border:1px solid var(--border-subtle);">
                    <span class="flex h-[38px] w-[38px] items-center justify-center rounded-[10px]"
                          style="background:var(--teal-100); color:var(--teal-700);">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M15 18a3 3 0 1 0-6 0"/><path d="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4"/><circle cx="12" cy="13" r="2"/></svg>
                    </span>

                    <div style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong);">
                        Acciones del panel
                    </div>

                    <div class="flex-1 text-[12.5px] leading-[1.5]" style="color:var(--text-muted);">
                        Quién hizo qué desde el panel: apagar un entorno, borrar una versión,
                        cambiar un dominio. <strong class="font-semibold">No son peticiones de
                        Moodle</strong>, son las nuestras — y es donde se contesta «¿quién tocó
                        esto?».
                    </div>

                    <span class="text-[12.5px] font-semibold" style="color:var(--text-link);">
                        Ver el rastro →
                    </span>
                </a>
            @endcan

            {{-- ---- Tamaño de la base ---- --}}
            <a href="{{ route('monitoring.tamano') }}" wire:navigate
               class="cfg-bloque" style="background:var(--surface-card); border:1px solid var(--border-subtle);">
                <span class="flex h-[38px] w-[38px] items-center justify-center rounded-[10px]"
                      style="background:var(--surface-sunken); color:var(--text-body);">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5"/><path d="M3 12a9 3 0 0 0 18 0"/></svg>
                </span>

                <div style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong);">
                    Tamaño de la base
                </div>

                <div class="flex-1 text-[12.5px] leading-[1.5]" style="color:var(--text-muted);">
                    Cuántas filas tiene cada tabla y <strong class="font-semibold">qué se las
                    lleva</strong>. Para decidir una retención, estimar cuánto va a tardar una
                    migración, o ver que algo pequeño ha crecido porque una tarea no corre.
                </div>

                <span class="text-[12.5px] font-semibold" style="color:var(--text-link);">
                    Ver el tamaño →
                </span>
            </a>
        </div>

        {{-- ============ Los dos históricos ============ --}}
        {{-- **Lo que decía aquí dejó de ser verdad.** Este bloque avisaba de que las dos
             tablas no tenían retención ni forma de borrar nada y solo crecían. Se arregló el
             2026-09-11 —retención de 180 y 30 días, tarea nocturna, y limpieza por sujeto,
             por grupo, por rango y entera—, así que ahora dice el estado y no el problema.
             Un texto que describe algo ya resuelto es peor que ninguno: quien lo lee se pone
             a buscar un arreglo que ya está hecho. --}}
        <section class="rounded-xl border px-5 py-3.5"
                 style="background:var(--surface-card); border-color:var(--border-subtle);">
            <div class="text-[11px] font-semibold uppercase tracking-[0.06em]" style="color:var(--text-muted);">
                Lo que se está guardando
            </div>

            <div class="mt-1.5 flex flex-wrap items-baseline gap-x-6 gap-y-1 text-[12.5px]"
                 style="color:var(--text-muted);">
                <span>
                    <strong class="font-bold" style="color:var(--text-strong);">{{ number_format($n['cortesGuardados'], 0, ',', '.') }}</strong>
                    cortes registrados
                </span>
                <span>
                    <strong class="font-bold" style="color:var(--text-strong);">{{ number_format($n['ventanasGuardadas'], 0, ',', '.') }}</strong>
                    ventanas del limitador
                </span>
            </div>

            <p class="mt-1.5 max-w-[720px] text-[12px] leading-relaxed" style="color:var(--text-subtle);">
                Las dos caducan solas: los episodios revisados a los 180 días y las ventanas del
                limitador a los 30, con una tarea que corre cada noche. <strong class="font-semibold">Los
                cortes pendientes no caducan nunca</strong> —sin revisar es algo que nadie ha
                mirado— y se quitan revisándolos y borrándolos desde Tráfico y cortes.
                <a href="{{ route('monitoring.tamano') }}" wire:navigate
                   class="font-semibold" style="color:var(--text-link);">Ver el tamaño de todas las tablas</a>.
            </p>
        </section>
    </div>
</div>
