{{-- ============================================================
     Plugins Tresipunt — pantalla propia desde el 2026-09-15.

     Era la primera pestaña de una pantalla de cuatro, y además cargaba dentro un
     bloque de «Licenciado y sin instalar» que responde a otra pregunta: uno se mira
     pensando en versiones, el otro en lo que factura un cliente.
     ============================================================ --}}
<div class="w-full" style="font-size:14px; display:flex; flex-direction:column; gap:14px;">

    <x-cabecera
        rotulo="Plugins"
        titulo="Plugins Tresipunt"
        descripcion="Qué versión de lo nuestro tiene cada cliente. Un componente que convive en dos versiones distintas es lo que decide una actualización.">

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

        <x-slot:pie>
            @include('livewire.plugins.components.menu', ['selected' => 'nuestros'])
        </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;">
                            Plugins Tresipunt
                        </h2>
                        {{-- **La cobertura va donde están los números que condiciona**, no en
                             la cabecera: ahí era un dato suelto que no se sabía a qué se
                             refería. Aquí dice de cuántos sitios se sabe lo que se está
                             mirando, que es lo que cambia cómo se lee la tabla. --}}
                        <div class="mt-0.5 text-[12.5px]" style="color:var(--text-muted);">
                            Los que damos soporte nosotros, del catálogo de Plugins propios y de Productos.
                            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' }}: de los demás no sabemos qué tienen instalado.
                        </div>
                    </div>

                    <div class="flex flex-wrap items-center gap-2">
                        {{-- Los filtros de **esta** pestaña. Son diez u once filas: aquí no
                             hace falta buscador, hace falta ver de un golpe qué está mal. --}}
                        @php
                            $cortes = [
                                ['', 'Todos', null],
                                ['desalineados', 'Desalineados', $resumenNuestros['desalineados']],
                                ['actualizables', 'Con actualización', $resumenNuestros['actualizables']],
                                ['ausentes', 'Ausentes en algún sitio', $resumenNuestros['ausentes']],
                            ];
                        @endphp
                        @foreach ($cortes as [$clave, $etiqueta, $cuantos])
                            @if ($clave === '' || $cuantos > 0)
                                <button type="button" wire:click="$set('focoNuestros', '{{ $clave }}')"
                                        class="rounded-lg border px-2.5 py-1 text-[12.5px] font-semibold"
                                        style="border-color:{{ $focoNuestros === $clave ? 'var(--text-strong)' : 'var(--border-subtle)' }};
                                               color:{{ $focoNuestros === $clave ? 'var(--text-strong)' : 'var(--text-muted)' }};">
                                    {{ $etiqueta }}@if ($cuantos !== null) <span style="color:var(--warning-500);">{{ $cuantos }}</span>@endif
                                </button>
                            @endif
                        @endforeach
                        @can('admin.configs.index')
                            <a href="{{ route('configurations.own-plugins') }}" wire:navigate
                               class="text-[12.5px] font-semibold" style="color:var(--text-link);">Editar el catálogo</a>
                        @endcan
                    </div>
                </div>

                @if ($nuestros === [])
                    <div class="border-t px-5 py-8 text-center text-[13px]" style="border-color:var(--border-subtle); color:var(--text-muted);">
                        @if ($focoNuestros !== '')
                            Ninguno encaja con este filtro.
                            <button type="button" wire:click="$set('focoNuestros', '')" class="font-semibold" style="color:var(--text-link);">Quitarlo</button>
                        @else
                            Ninguno de los plugins del catálogo aparece en el inventario de los entornos que lo envían.
                            @can('admin.configs.index')
                                <a href="{{ route('configurations.own-plugins') }}" wire:navigate class="font-semibold" style="color:var(--text-link);">Revisar el catálogo</a>
                            @endcan
                        @endif
                    </div>
                @else
                    <div class="pq-nuestros-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>Entornos</div>
                        <div>Versiones</div>
                        <div>Estado</div>
                    </div>

                    @foreach ($nuestros as $mio)
                        <div class="pq-nuestros-grid px-5 py-2 text-[12.5px] {{ ! $loop->first ? 'border-t' : '' }}"
                             style="border-color:var(--border-subtle); {{ $mio['orquestador'] ? 'background:var(--orange-50);' : '' }}">
                            <div class="min-w-0">
                                <div class="flex min-w-0 flex-wrap items-center gap-2">
                                    <span class="truncate font-semibold" style="color:var(--text-strong);">{{ $mio['name'] }}</span>
                                    @if ($mio['orquestador'])
                                        {{-- **No es un plugin nuestro más.** Es el que hace
                                             todas las llamadas a la API: si falta en un sitio
                                             o va viejo, ese sitio deja de recibir licencias y
                                             de enviar datos, y ninguna otra pantalla lo
                                             explicaría. --}}
                                        <span class="flex-none rounded px-1.5 py-px text-[10.5px] font-semibold"
                                              style="color:var(--orange-600); background:var(--orange-100);">Orquestador</span>
                                    @endif
                                </div>
                                <div class="truncate text-[11.5px]" style="font-family:ui-monospace,monospace; color:var(--text-muted);">{{ $mio['component'] }}</div>
                            </div>

                            {{-- Dos destinos y los dos hacen falta: el número despliega aquí
                                 mismo con qué versión está en cada sitio, y el enlace lleva
                                 al listado de Entornos **filtrado por este plugin**, que es
                                 donde están el cliente, la licencia y el soporte. --}}
                            <div class="flex items-baseline gap-2">
                                <button type="button" wire:click="alternar('{{ $mio['component'] }}')"
                                        class="font-semibold" style="color:var(--text-link);">
                                    {{ $mio['entornos'] }} {{ $mio['entornos'] === 1 ? 'entorno' : 'entornos' }}
                                </button>
                                @can('admin.environments.index')
                                    <a href="{{ route('environments.index', ['plugin' => [$mio['component']]]) }}" wire:navigate
                                       class="tip flex-none" data-tip="Ver estos entornos en el listado">
                                        <svg width="13" height="13" 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:{{ $mio['versiones'] > 1 ? 'var(--warning-500)' : 'var(--text-muted)' }};">
                                {{ $mio['versiones'] === 1 ? 'una, igual en todos' : $mio['versiones'] . ' distintas' }}
                            </div>

                            <div class="min-w-0">
                                @if ($mio['versiones'] > 1)
                                    <span class="font-semibold" style="color:var(--warning-500);">Desalineado entre clientes</span>
                                @elseif ($mio['actualizables'] > 0)
                                    <span style="color:var(--info-500);">
                                        Actualización en {{ $mio['actualizables'] }} {{ $mio['actualizables'] === 1 ? 'entorno' : 'entornos' }}
                                    </span>
                                @elseif ($cobertura['envian'] > 0 && $mio['entornos'] < $cobertura['envian'])
                                    {{-- No está en todos los que hablan. En los que no envían
                                         inventario la ausencia no significa nada, así que se
                                         compara contra los que sí. --}}
                                    <span style="color:var(--text-muted);">
                                        No está en {{ $cobertura['envian'] - $mio['entornos'] }} de {{ $cobertura['envian'] }}
                                    </span>
                                @else
                                    <span style="color:var(--success-500);">Alineado</span>
                                @endif
                            </div>
                        </div>

                        @if ($abierto === $mio['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
                    @endforeach
                @endif
            </section>
    @endunless
</div>