{{-- ============================================================
     Inventario del parque — pantalla propia desde el 2026-09-15.

     Es la lista larga y la única paginada de la sección. Responde a «¿qué hay suelto
     por ahí?», que no es la misma pregunta que «¿qué versión de lo nuestro tiene
     cada cliente?» — y durante mucho tiempo las dos se contestaban con la misma
     tabla de 470 filas.
     ============================================================ --}}
<div class="w-full" style="font-size:14px; display:flex; flex-direction:column; gap:14px;">

    <x-cabecera
        rotulo="Plugins"
        titulo="Inventario del parque"
        descripcion="Todo lo que declaran los sitios, nuestro o de terceros, con su versión y en cuántos entornos está instalado.">

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

        <x-slot:pie>
            @include('livewire.plugins.components.menu', ['selected' => 'inventario'])
        </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;">
                            Inventario del parque
                        </h2>
                        <div class="mt-0.5 text-[12.5px]" style="color:var(--text-muted);">
                            @if ($hayFiltro)
                                {{ $total }} {{ $total === 1 ? 'componente' : 'componentes' }} de {{ $resumen['componentes'] }}, en {{ $resumen['tipos'] }} {{ $resumen['tipos'] === 1 ? 'tipo' : 'tipos' }}
                            @else
                                {{ $resumen['componentes'] }} {{ $resumen['componentes'] === 1 ? 'componente' : 'componentes' }} en {{ $resumen['tipos'] }} {{ $resumen['tipos'] === 1 ? 'tipo' : 'tipos' }}, según el inventario de
                                <span class="font-semibold" style="color:{{ $cobertura['parcial'] ? 'var(--warning-500)' : 'var(--text-strong)' }};">{{ $cobertura['envian'] }} de {{ $cobertura['total'] }}</span>
                                {{ $cobertura['total'] === 1 ? 'entorno' : 'entornos' }}. Primero lo accionable.
                            @endif
                        </div>
                    </div>

                    <div class="flex flex-wrap items-center gap-2">
                        {{-- **El desplegable tiene estado, y antes no lo tenía.**

                             Se pintaba siempre que hubiera sugerencias, y las sugerencias
                             salen del texto buscado: al elegir una, `busqueda` pasaba a
                             valer ese identificador… que sigue encajando, así que la lista
                             se volvía a pintar encima de la tabla y no había forma de
                             quitarla.

                             Basta con que dos componentes compartan prefijo, que es lo
                             normal en una familia de plugins: elegir `local_coursetransfer`
                             deja también `local_coursetransfermanager`, y el desplegable se
                             quedaba abierto para siempre. --}}
                        <div class="relative"
                             x-data="{ abierto: false }"
                             @click.away="abierto = false"
                             @keydown.escape="abierto = false">
                            <input type="text" wire:model.live.debounce.300ms="busqueda"
                                   placeholder="Buscar plugin"
                                   x-on:focus="abierto = true"
                                   x-on:input="abierto = true"
                                   class="w-[200px] rounded-lg border px-3 py-1.5 text-[13px]"
                                   style="border-color:var(--border-subtle); background:var(--surface-card); color:var(--text-strong);">

                            {{-- **Sugerencias, no texto libre a ciegas.** Con 470
                                 componentes, o aciertas el identificador exacto o no
                                 encuentras nada. --}}
                            @if (($sugerencias ?? []) !== [])
                                <div x-show="abierto" x-cloak
                                     class="absolute left-0 top-full z-20 mt-1 w-[280px] overflow-hidden rounded-lg border shadow-lg"
                                     style="background:var(--surface-card); border-color:var(--border-subtle);">
                                    @foreach ($sugerencias as $sugerencia)
                                        <button type="button"
                                                wire:click="$set('busqueda', '{{ $sugerencia['component'] }}')"
                                                x-on:click="abierto = false"
                                                class="flex w-full items-center justify-between gap-3 px-3 py-1.5 text-left text-[12.5px] hover:bg-[var(--surface-alt)] {{ ! $loop->first ? 'border-t' : '' }}"
                                                style="border-color:var(--border-subtle);">
                                            <span class="min-w-0">
                                                <span class="block truncate font-semibold" style="color:var(--text-strong);">{{ $sugerencia['name'] }}</span>
                                                <span class="block truncate text-[11px]" style="font-family:ui-monospace,monospace; color:var(--text-muted);">{{ $sugerencia['component'] }}</span>
                                            </span>
                                            <span class="flex-none text-[11.5px]" style="color:var(--text-muted);">{{ $sugerencia['entornos'] }}</span>
                                        </button>
                                    @endforeach
                                </div>
                            @endif
                        </div>

                        {{-- Los 61 tipos que hay de verdad, con su cuenta. Era un `select`
                             con seis escritos a mano y los otros 55 no se podían filtrar. --}}
                        <select wire:model.live="tipo"
                                class="rounded-lg border px-3 py-1.5 text-[13px]"
                                style="border-color:var(--border-subtle); background:var(--surface-card); color:var(--text-strong);">
                            <option value="">Todos los tipos</option>
                            @foreach (($tipos ?? []) as $unTipo)
                                <option value="{{ $unTipo['tipo'] }}">{{ $unTipo['tipo'] }} ({{ $unTipo['cuantos'] }})</option>
                            @endforeach
                        </select>

                        @php
                            $focos = [
                                ['nuestros', 'Nuestros', $resumen['nuestros']],
                                ['actualizables', 'Con actualización', $resumen['actualizables']],
                                ['divergentes', 'Versiones distintas', $resumen['divergentes']],
                            ];
                        @endphp
                        @foreach ($focos as [$clave, $etiqueta, $cuantos])
                            <button type="button" wire:click="$set('foco', '{{ $foco === $clave ? '' : $clave }}')"
                                    class="rounded-lg border px-2.5 py-1 text-[12.5px] font-semibold"
                                    style="border-color:{{ $foco === $clave ? 'var(--text-strong)' : 'var(--border-subtle)' }};
                                           color:{{ $foco === $clave ? 'var(--text-strong)' : 'var(--text-muted)' }};">
                                {{ $etiqueta }} <span style="color:var(--text-subtle);">{{ $cuantos }}</span>
                            </button>
                        @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>

                {{-- **No todas las divergencias son un problema.** Los plugins que trae
                     Moodle llevan la versión del core, así que en sitios con versiones de
                     Moodle distintas divergen por definición. Se dice aquí y no en un
                     comentario del código. --}}
                @if ($foco === 'divergentes')
                    <div class="border-t px-5 py-2.5 text-[12.5px]" style="border-color:var(--border-subtle); background:var(--neutral-50); color:var(--text-muted);">
                        Los plugins que vienen con Moodle llevan la versión del core: si los sitios tienen
                        versiones de Moodle distintas, divergen por definición y no hay nada que arreglar.
                        Donde importa es en los nuestros, y eso está en la pestaña de Plugins Tresipunt.
                    </div>
                @endif

                <div class="pq-fila-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>Plugin</div>
                    <div>Identificador</div>
                    <div>Tipo</div>
                    <div>Entornos</div>
                    <div>Versiones</div>
                    <div>Actualización</div>
                    <div></div>
                </div>

                @forelse (($filas ?? []) as $fila)
                    <div class="pq-fila-grid px-5 py-2 text-[12.5px] {{ ! $loop->first ? 'border-t' : '' }} hover:bg-[var(--surface-alt)]"
                         style="border-color:var(--border-subtle);">
                        <div class="flex min-w-0 items-center gap-2">
                            <span class="truncate font-semibold" style="color:var(--text-strong);">{{ $fila['name'] }}</span>
                            @if ($fila['nuestro'])
                                <span class="flex-none rounded px-1.5 py-px text-[10px] font-semibold"
                                      style="color:var(--orange-600); background:var(--orange-100);">3iP</span>
                            @endif
                        </div>

                        <div class="truncate" style="font-family:ui-monospace,monospace; color:var(--text-muted);">{{ $fila['component'] }}</div>

                        <div style="color:var(--text-muted);">{{ $fila['type'] }}</div>

                        <div class="flex items-baseline gap-2">
                            <span style="color:var(--text-strong);">{{ $fila['entornos'] }}</span>
                            @can('admin.environments.index')
                                <a href="{{ route('environments.index', ['plugin' => [$fila['component']]]) }}" wire:navigate
                                   class="tip flex-none" data-tip="Ver estos entornos en el listado">
                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--text-subtle)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>
                                </a>
                            @endcan
                        </div>

                        <div style="color:{{ $fila['versiones'] > 1 ? 'var(--warning-500)' : 'var(--text-muted)' }};">
                            @if ($fila['versiones'] > 1)
                                <span class="font-semibold">{{ $fila['versiones'] }} distintas</span>
                            @else
                                una
                            @endif
                        </div>

                        <div style="color:{{ $fila['actualizables'] > 0 ? 'var(--info-500)' : 'var(--text-muted)' }};">
                            {{ $fila['actualizables'] > 0 ? 'en ' . $fila['actualizables'] : '—' }}
                        </div>

                        <div class="text-right">
                            <button type="button" wire:click="alternar('{{ $fila['component'] }}')"
                                    class="text-[12px] font-semibold" style="color:var(--text-link);">
                                {{ $abierto === $fila['component'] ? 'Cerrar' : 'Ver' }}
                            </button>
                        </div>
                    </div>

                    @if ($abierto === $fila['component'] && $detalle !== [])
                        <div class="border-t" style="border-color:var(--border-subtle); background:var(--surface-alt);">
                            @include('livewire.plugins.partials.detalle', ['detalle' => $detalle])
                        </div>
                    @endif
                @empty
                    <div class="px-5 py-8 text-center text-[13px]" style="color:var(--text-muted);">
                        @if ($hayFiltro)
                            Ningún componente encaja con este filtro.
                            <button type="button" wire:click="limpiarFiltros" class="font-semibold" style="color:var(--text-link);">Quitarlo</button>
                        @else
                            No hay componentes en el inventario.
                        @endif
                    </div>
                @endforelse

                @if (($paginas ?? 0) > 1)
                    <div class="flex flex-wrap items-center justify-between gap-3 border-t px-5 py-3 text-[12.5px]"
                         style="border-color:var(--border-subtle); color:var(--text-muted);">
                        <span>Página {{ $pagina }} de {{ $paginas }}</span>
                        <span class="flex items-center gap-2">
                            @if ($pagina > 1)
                                <button type="button" wire:click="previousPage" class="font-semibold" style="color:var(--text-link);">Anterior</button>
                            @endif
                            @if ($pagina < $paginas)
                                <button type="button" wire:click="nextPage" class="font-semibold" style="color:var(--text-link);">Siguiente</button>
                            @endif
                        </span>
                    </div>
                @endif
            </section>
    @endunless
</div>