{{-- ============================================================
     Versiones de Moodle — pantalla propia desde el 2026-09-15.

     Recupera lo que el Manager antiguo tenía en `/admin/updates/{id}` y aquí se
     había perdido, con los dos escalares que cada sitio ya manda.
     ============================================================ --}}
<div class="w-full" style="font-size:14px; display:flex; flex-direction:column; gap:14px;">

    <x-cabecera
        rotulo="Plugins"
        titulo="Versiones de Moodle"
        descripcion="Qué sitios están por debajo de su propia rama y cuáles por debajo de la mayor disponible.">

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

        <x-slot:pie>
            @include('livewire.plugins.components.menu', ['selected' => 'core'])
        </x-slot:pie>
    </x-cabecera>

    @include('livewire.plugins.partials.sin-inventario')

    @unless ($cobertura['vacio'])
        @include('livewire.plugins.partials.atencion')
        @include('livewire.plugins.partials.apagados')

            <section class="overflow-hidden rounded-xl border"
                     style="background:var(--surface-card); border-color:var(--border-subtle);">

                <div class="flex flex-wrap items-end justify-between gap-4 px-5 py-3.5">
                    <div class="min-w-0">
                        <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong); margin:0;">
                            Versiones de Moodle
                        </h2>
                        <div class="mt-0.5 text-[12.5px]" style="color:var(--text-muted);">
                            Qué versión tiene cada sitio y qué le falta. Al contrario que las otras dos pestañas,
                            esto no depende del inventario: lo informa cada entorno al sincronizar.
                        </div>
                    </div>

                    <div class="flex flex-wrap items-center gap-2">
                        <input type="text" wire:model.live.debounce.300ms="busqueda"
                               placeholder="Buscar entorno"
                               class="w-[180px] rounded-lg border px-3 py-1.5 text-[13px]"
                               style="border-color:var(--border-subtle); background:var(--surface-card); color:var(--text-strong);">

                        @php
                            $estados = [
                                ['menor', 'Sin parches', $resumenCore['menor'], 'var(--danger-500)'],
                                ['mayor', 'Salto de rama', $resumenCore['mayor'], 'var(--info-500)'],
                                ['al-dia', 'Al día', $resumenCore['aldia'], 'var(--success-500)'],
                                ['sin-datos', 'Sin datos', $resumenCore['sindatos'], 'var(--text-muted)'],
                            ];
                        @endphp
                        @foreach ($estados as [$clave, $etiqueta, $cuantos, $color])
                            @if ($cuantos > 0)
                                <button type="button" wire:click="$set('focoCore', '{{ $focoCore === $clave ? '' : $clave }}')"
                                        class="rounded-lg border px-2.5 py-1 text-[12.5px] font-semibold"
                                        style="border-color:{{ $focoCore === $clave ? $color : 'var(--border-subtle)' }};
                                               color:{{ $focoCore === $clave ? $color : 'var(--text-muted)' }};">
                                    {{ $etiqueta }} <span style="color:{{ $color }};">{{ $cuantos }}</span>
                                </button>
                            @endif
                        @endforeach

                        @if ($hayFiltro)
                            <button type="button" wire:click="limpiarFiltros"
                                    class="text-[12.5px] font-semibold" style="color:var(--text-link);">Quitar filtros</button>
                        @endif
                    </div>
                </div>

                {{-- **En qué ramas está repartido el parque.** Es la pregunta que ninguna
                     otra pantalla responde y la que decide el trabajo de un trimestre: una
                     rama con dos sitios se sube, una con doce se planifica. Hasta ahora
                     había que contarlo a mano en el listado de entornos. --}}
                @if (count($ramas) > 1)
                    <div class="flex flex-wrap items-center gap-x-4 gap-y-1.5 border-t px-5 py-2.5 text-[12.5px]"
                         style="border-color:var(--border-subtle); background:var(--neutral-50);">
                        <span class="text-[11px] font-semibold uppercase tracking-[0.06em]" style="color:var(--text-subtle);">Repartido en</span>
                        @foreach ($ramas as $rama)
                            <span class="flex items-center gap-1.5">
                                <span class="font-semibold" style="font-family:ui-monospace,monospace; color:var(--text-strong);">{{ $rama['rama'] }}</span>
                                <span style="color:var(--text-muted);">{{ $rama['cuantos'] }} {{ $rama['cuantos'] === 1 ? 'sitio' : 'sitios' }}</span>
                                @if ($rama['sinParches'] > 0)
                                    <span class="tip" data-tip="{{ $rama['sinParches'] }} sin los parches de esta rama">
                                        <span class="h-1.5 w-1.5 rounded-full" style="display:inline-block; background:var(--danger-500);"></span>
                                    </span>
                                @endif
                            </span>
                        @endforeach
                    </div>
                @endif

                <div class="pq-core-grid border-y px-5 py-1.5 text-[11px] font-semibold uppercase tracking-[0.06em]"
                     style="border-color:var(--border-subtle); background:var(--neutral-50); color:var(--text-subtle);">
                    <div>Entorno</div>
                    <div>Instalada</div>
                    <div>Su rama</div>
                    <div>Mayor</div>
                    <div>Comprobado</div>
                    <div>Qué le falta</div>
                </div>

                @forelse ($core as $sitio)
                    {{-- **Las releases disponibles se despliegan por sitio.** Son el módulo
                         `updates` del Manager anterior, que enseñaba una tarjeta por release
                         con su madurez y su descarga; aquí la tabla existía vacía porque
                         nadie la escribía. Ya se escribe en cada `sync`.

                         Van plegadas y no en una columna: son entre una y cinco por sitio y
                         lo que se viene a mirar en esta tabla es **quién está atrasado**, no
                         el catálogo de descargas. --}}
                    <div @if ($sitio['disponibles']->isNotEmpty()) x-data="{ abierto: false }" @endif
                         class="{{ ! $loop->first ? 'border-t' : '' }}"
                         style="border-color:var(--border-subtle);">
                    <div class="pq-core-grid px-5 py-2 text-[12.5px]">
                        <div class="min-w-0">
                            @can('admin.plugins.environment')
                                <a href="{{ route('environments.plugins.index', $sitio['entorno']) }}" wire:navigate
                                   class="block truncate font-semibold" style="color:var(--text-link);">{{ $sitio['entorno']->name }}</a>
                            @else
                                <div class="truncate font-semibold" style="color:var(--text-strong);">{{ $sitio['entorno']->name }}</div>
                            @endcan
                            <div class="flex flex-wrap items-center gap-x-2 truncate text-[11.5px]" style="color:var(--text-muted);">
                                @if ($sitio['entorno']->client)
                                    <span class="truncate">{{ $sitio['entorno']->client->name }}</span>
                                @endif
                                {{-- **El tamaño, para priorizar.** Subir un sitio de 1.648
                                     usuarios no se planifica igual que uno de 12, y el dato
                                     estaba en la telemetría sin que ninguna pantalla de
                                     versiones lo usara. --}}
                                @if ($sitio['usuarios'])
                                    <span style="color:var(--border-strong);">·</span>
                                    <span>{{ number_format((int) $sitio['usuarios'], 0, ',', '.') }} usuarios</span>
                                @endif
                                @if ($sitio['cursos'])
                                    <span style="color:var(--border-strong);">·</span>
                                    <span>{{ number_format((int) $sitio['cursos'], 0, ',', '.') }} cursos</span>
                                @endif
                            </div>
                        </div>

                        <div class="min-w-0">
                            <div style="font-family:ui-monospace,monospace; color:var(--text-strong);">{{ $sitio['instalada'] }}</div>
                            {{-- **La versión completa, con su build.** El Manager antiguo
                                 enseñaba «5.1.1+ (Build: 20251219)» y aquí solo estaba el
                                 «5.1.1» de `environments.version`; la completa llega en la
                                 telemetría del sitio y no se usaba. El `+` dice que lleva
                                 parches posteriores a la etiqueta. --}}
                            @if ($sitio['completa'] && $sitio['completa'] !== $sitio['instalada'])
                                <div class="truncate text-[11px]" style="font-family:ui-monospace,monospace; color:var(--text-muted);">{{ $sitio['completa'] }}</div>
                            @endif
                        </div>

                        <div style="font-family:ui-monospace,monospace; color:{{ $sitio['estado'] === 'menor' ? 'var(--danger-500)' : 'var(--text-muted)' }};">
                            {{ $sitio['menor'] !== '' ? $sitio['menor'] : '—' }}
                        </div>

                        <div style="font-family:ui-monospace,monospace; color:{{ $sitio['estado'] === 'mayor' ? 'var(--info-500)' : 'var(--text-muted)' }};">
                            {{ $sitio['mayor'] !== '' ? $sitio['mayor'] : '—' }}
                        </div>

                        {{-- Cuándo lo comprobó **el propio Moodle**. Es lo que explica un
                             «sin datos»: mientras no lo compruebe, un sitio al día y uno
                             atrasado se ven igual. --}}
                        <div class="text-[12px]">
                            @if ($sitio['comprobado'])
                                <span class="tip" data-tip="{{ $sitio['comprobado']->format('d/m/Y H:i') }}"
                                      style="color:{{ $sitio['comprobado']->diffInDays() > 30 ? 'var(--warning-500)' : 'var(--text-muted)' }};">
                                    {{ $sitio['comprobado']->diffForHumans(['short' => true]) }}
                                </span>
                            @else
                                <span style="color:var(--warning-500);">Nunca</span>
                            @endif
                        </div>

                        <div>
                            @if ($sitio['estado'] === 'menor')
                                <span class="font-semibold" style="color:var(--danger-500);">Parches de su rama</span>
                            @elseif ($sitio['estado'] === 'mayor')
                                <span style="color:var(--info-500);">Salto de rama, a planificar</span>
                            @elseif ($sitio['estado'] === 'al-dia')
                                <span style="color:var(--success-500);">Al día</span>
                            @else
                                <span style="color:var(--text-muted);">No lo ha comprobado</span>
                            @endif

                            @if ($sitio['disponibles']->isNotEmpty())
                                <button type="button" x-on:click="abierto = ! abierto"
                                        class="mt-0.5 block border-none bg-transparent p-0 text-left text-[11.5px] font-semibold"
                                        style="color:var(--text-link);"
                                        x-text="abierto
                                            ? 'Ocultar las descargas'
                                            : 'Ver {{ $sitio['disponibles']->count() }} {{ $sitio['disponibles']->count() === 1 ? 'release disponible' : 'releases disponibles' }}'">
                                    Ver {{ $sitio['disponibles']->count() }} {{ $sitio['disponibles']->count() === 1 ? 'release disponible' : 'releases disponibles' }}
                                </button>
                            @endif
                        </div>
                    </div>

                    @if ($sitio['disponibles']->isNotEmpty())
                        <div x-show="abierto" x-collapse x-cloak class="px-5 pb-3 pt-1">
                            <div class="rounded-lg border px-4 py-3"
                                 style="border-color:var(--border-subtle); background:var(--surface-alt);">
                                <div class="text-[10.5px] font-semibold uppercase tracking-[0.05em]" style="color:var(--text-muted);">
                                    Lo que su Moodle dice tener disponible
                                </div>

                                <div class="mt-1.5 flex flex-col gap-1.5">
                                    {{-- La más nueva primero, que es la que se va a instalar. --}}
                                    @foreach ($sitio['disponibles']->sortByDesc('version') as $disponible)
                                        <div class="flex flex-wrap items-baseline gap-x-2.5 gap-y-0.5 text-[12px]">
                                            <span class="font-semibold" style="font-family:ui-monospace,monospace; color:var(--text-strong);">
                                                {{ $disponible->release ?: $disponible->version }}
                                            </span>

                                            @if ($disponible->release && $disponible->version)
                                                <span style="font-family:ui-monospace,monospace; color:var(--text-subtle);">{{ $disponible->version }}</span>
                                            @endif

                                            {{-- **La madurez decide si se instala o se espera**, y es
                                                 lo que el Manager antiguo enseñaba y aquí no había.
                                                 Moodle la manda como número. --}}
                                            @php
                                                $estable = (int) $disponible->maturity >= 200;
                                                $nombre = match ((int) $disponible->maturity) {
                                                    200 => 'Estable',
                                                    150 => 'Release candidate',
                                                    100 => 'Beta',
                                                    50 => 'Alpha',
                                                    default => null,
                                                };
                                            @endphp
                                            @if ($nombre !== null)
                                                <span class="rounded-full px-2 py-px text-[10.5px] font-semibold"
                                                      style="color:{{ $estable ? 'var(--success-500)' : 'var(--warning-500)' }}; background:{{ $estable ? 'var(--success-50)' : 'var(--warning-50)' }};">
                                                    {{ $nombre }}
                                                </span>
                                            @endif

                                            {{-- El enlace es a **la página de la release**, no al zip:
                                                 quien va a subir un Moodle quiere leer sus notas antes
                                                 de descargarlo. El zip va al lado. --}}
                                            @if ($disponible->url)
                                                <a href="{{ $disponible->url }}" target="_blank" rel="noopener noreferrer"
                                                   class="font-semibold" style="color:var(--text-link);">Notas</a>
                                            @endif
                                            @if ($disponible->download)
                                                <a href="{{ $disponible->download }}" target="_blank" rel="noopener noreferrer"
                                                   class="font-semibold" style="color:var(--text-link);">Descargar</a>
                                            @endif
                                            @if ($disponible->downloadmd5)
                                                <span class="tip text-[11px]" data-tip="MD5 del zip, para comprobar la descarga: {{ $disponible->downloadmd5 }}"
                                                      style="color:var(--text-subtle);">MD5</span>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>

                                <div class="mt-2 text-[11.5px]" style="color:var(--text-subtle);">
                                    Lo dice el comprobador de actualizaciones de ese Moodle, no nosotros:
                                    se guarda tal cual llega en cada sincronización y se reemplaza en la
                                    siguiente.
                                </div>
                            </div>
                        </div>
                    @endif
                    </div>
                @empty
                    <div class="px-5 py-8 text-center text-[13px]" style="color:var(--text-muted);">
                        Ningún entorno encaja con este filtro.
                        <button type="button" wire:click="limpiarFiltros" class="font-semibold" style="color:var(--text-link);">Quitarlo</button>
                    </div>
                @endforelse

                {{-- De dónde sale cada cosa de esta pestaña, dicho aquí y no en un comentario
                     del código. --}}
                <div class="border-t px-5 py-3 text-[12px]" style="border-color:var(--border-subtle); color:var(--text-muted);">
                    Cada Moodle informa de su versión —con su build—, de la última de su rama, de la última
                    mayor, de cuándo lo comprobó y de <strong>qué releases tiene disponibles</strong>, con su
                    madurez y su descarga. Eso último se guardaba desde el Manager anterior y aquí se
                    perdía: llegaba en cada sincronización y solo se leían dos números. Se despliega por
                    sitio.
                    @if ($sinComprobar > 0)
                        Y de {{ $sinComprobar }} {{ $sinComprobar === 1 ? 'sitio' : 'sitios' }} no se puede
                        decir si {{ $sinComprobar === 1 ? 'está' : 'están' }} al día: su Moodle no comprueba
                        actualizaciones.
                    @endif
                </div>
            </section>
    @endunless
</div>