{{-- ============================================================
     Catálogo de plugins propios — Configuración → Catálogos.

     La lista de «esto es de Tresipunt». Existe porque el Manager lo adivinaba buscando
     palabras en el identificador del plugin, y eso fallaba en las dos direcciones. Ver el
     docblock del componente.
     ============================================================ --}}
<div class="w-full" style="font-size:14px; display:flex; flex-direction:column; gap:14px;">

    {{-- ============ Cabecera ============ --}}
    <x-cabecera
        {{-- La vuelta a la portada de la sección: estas hojas se abren desde allí y
             sin este enlace la única salida es el menú lateral, que lleva a la portada
             de otra sección. --}}
        :volver="['ruta' => route('configurations.index'), 'texto' => 'Configuración']"
        rotulo="Configuración"
        titulo="Plugins propios"
        descripcion="La lista de identificadores de Moodle que son nuestros. Es lo que hace que en el inventario de cada entorno se distingan nuestros plugins de los de terceros, y lo único que hay que rellenar es el identificador.">

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

    @foreach (['success' => 'success', 'warning' => 'warning', 'error' => 'danger'] as $clave => $color)
        @if (session($clave))
            <div class="rounded-lg px-4 py-2.5 text-[13px]"
                 style="background:var(--{{ $color }}-50); color:var(--{{ $color }}-500);">
                {{ session($clave) }}
            </div>
        @endif
    @endforeach

    {{-- ============ Añadir uno ============ --}}
    @can('admin.configs.edit')
        <section class="rounded-xl border px-5 pb-4 pt-3.5"
                 style="background:var(--surface-card); border-color:var(--border-subtle);">
            <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong); margin:0;">
                Añadir un plugin nuestro
            </h2>
            <div class="mt-0.5 text-[12px]" style="color:var(--text-muted);">
                El identificador es obligatorio; el nombre y la nota, no. Si lo dejas sin nombre se
                coge el que declare el propio plugin.
            </div>

            <form wire:submit="anadir" class="mt-3 flex flex-wrap items-start gap-3">
                <div class="min-w-[220px] flex-1">
                    <label for="op-component" class="text-[11px] font-semibold uppercase tracking-[0.05em]"
                           style="color:var(--text-muted);">
                        Identificador de Moodle
                    </label>
                    <input id="op-component" type="text" wire:model="component"
                           placeholder="local_tresipunt"
                           class="mt-1 w-full rounded-lg border px-3 py-2 font-mono text-[13px] outline-none focus:ring-0"
                           style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                    @error('component')
                        <div class="mt-1 text-[12px]" style="color:var(--danger-500);">{{ $message }}</div>
                    @enderror
                </div>

                <div class="min-w-[160px] flex-1">
                    <label for="op-name" class="text-[11px] font-semibold uppercase tracking-[0.05em]"
                           style="color:var(--text-muted);">
                        Nombre <span class="font-normal normal-case">(opcional)</span>
                    </label>
                    <input id="op-name" type="text" wire:model="name" placeholder="3iPunt"
                           class="mt-1 w-full rounded-lg border px-3 py-2 text-[13px] outline-none focus:ring-0"
                           style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                    @error('name')
                        <div class="mt-1 text-[12px]" style="color:var(--danger-500);">{{ $message }}</div>
                    @enderror
                </div>

                <div class="min-w-[180px] flex-1">
                    <label for="op-notes" class="text-[11px] font-semibold uppercase tracking-[0.05em]"
                           style="color:var(--text-muted);">
                        Nota <span class="font-normal normal-case">(opcional)</span>
                    </label>
                    <input id="op-notes" type="text" wire:model="notes" placeholder="Solo en pre, lo mantiene…"
                           class="mt-1 w-full rounded-lg border px-3 py-2 text-[13px] outline-none focus:ring-0"
                           style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                </div>

                <button type="submit" wire:loading.attr="disabled"
                        class="mt-[22px] flex-none rounded-lg px-4 py-2 text-[13px] font-semibold text-white disabled:opacity-60"
                        style="background:var(--orange-500);">
                    Añadir
                </button>
            </form>
        </section>
    @endcan

    {{-- ============ Los declarados ============ --}}
    <section class="overflow-hidden rounded-xl border"
             style="background:var(--surface-card); border-color:var(--border-subtle);">
        <div class="flex flex-wrap items-baseline justify-between gap-4 px-5 pb-2.5 pt-3.5">
            <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong); margin:0;">
                Declarados a mano
            </h2>
            <span class="text-[12px]" style="color:var(--text-muted);">
                {{ $declarados->count() }}
                {{ $declarados->count() === 1 ? 'plugin' : 'plugins' }}
            </span>
        </div>

        @forelse ($declarados as $plugin)
            <div class="op-grid border-t px-5 py-2.5 text-[12.5px] hover:bg-[var(--surface-alt)]"
                 style="border-color:var(--divider);">
                <div class="min-w-0">
                    <div class="truncate font-semibold" style="color:var(--text-strong);">
                        {{ $plugin['name'] ?: $plugin['component'] }}
                    </div>
                    <div class="truncate font-mono text-[11px]" style="color:var(--text-subtle);">
                        {{ $plugin['component'] }}
                    </div>
                </div>

                <div class="min-w-0 text-[12px]" style="color:var(--text-muted);">
                    {{ $plugin['notes'] ?: '' }}
                    @if ($plugin['producto'])
                        {{-- Que además sea un producto significa que tiene ficha, licencias y
                             contenido detrás: conviene saberlo antes de quitarlo de aquí. --}}
                        <span class="whitespace-nowrap rounded-full px-2 py-px text-[11px] font-semibold"
                              style="color:var(--teal-700); background:var(--teal-100);">
                            también es producto
                        </span>
                    @endif
                </div>

                <div class="text-[12px]" style="color:var(--text-muted);">
                    @if ($plugin['entornos'] > 0)
                        instalado en {{ $plugin['entornos'] }}
                        {{ $plugin['entornos'] === 1 ? 'entorno' : 'entornos' }}
                    @else
                        <span style="color:var(--text-subtle);">sin instalaciones detectadas</span>
                    @endif
                </div>

                @can('admin.configs.edit')
                    <button type="button" wire:click="quitar({{ $plugin['id'] }})"
                            class="justify-self-start text-[12px] font-semibold lg:justify-self-end"
                            style="color:var(--danger-500);"
                            title="Deja de contar como nuestro. No borra nada del entorno.">
                        Quitar
                    </button>
                @else
                    <span></span>
                @endcan
            </div>
        @empty
            <div class="border-t px-5 py-6 text-center text-[13px]"
                 style="border-color:var(--divider); color:var(--text-muted);">
                Todavía no hay ninguno declarado a mano. Los productos del catálogo ya cuentan como
                nuestros sin estar aquí.
            </div>
        @endforelse
    </section>

    {{-- ============ Los que ya cuentan por ser productos ============ --}}
    @if ($porSerProducto->isNotEmpty())
        <section class="overflow-hidden rounded-xl border"
                 style="background:var(--surface-card); border-color:var(--border-subtle);">
            <div class="px-5 pb-2 pt-3.5">
                <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong); margin:0;">
                    Y estos ya cuentan, por ser productos
                </h2>
                {{-- Se enseñan para que nadie los añada dos veces ni piense que faltan. --}}
                <div class="mt-0.5 max-w-2xl text-[12px]" style="color:var(--text-muted);">
                    Un producto del catálogo es nuestro por definición: no hace falta declararlo aquí.
                </div>
            </div>
            <div class="flex flex-wrap gap-2 px-5 pb-4 pt-1">
                @foreach ($porSerProducto as $producto)
                    <span class="rounded-full px-2.5 py-1 text-[12px]"
                          style="background:var(--surface-sunken); color:var(--text-body);">
                        <span class="font-semibold">{{ $producto['name'] }}</span>
                        <span class="font-mono text-[11px]" style="color:var(--text-subtle);">{{ $producto['component'] }}</span>
                    </span>
                @endforeach
            </div>
        </section>
    @endif

    {{-- ============ Sugerencias de lo que ya está instalado ============ --}}
    @if ($sugerencias->isNotEmpty())
        <section class="overflow-hidden rounded-xl border"
                 style="background:var(--surface-card); border-color:var(--border-subtle);">
            <div class="px-5 pb-2 pt-3.5">
                <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong); margin:0;">
                    De lo que hay instalado, ¿falta alguno?
                </h2>
                {{-- Ordenadas por parecido con nuestras marcas: en un Moodle hay 464 plugins
                     y casi ninguno es nuestro, así que una lista alfabética no serviría. --}}
                <div class="mt-0.5 max-w-2xl text-[12px]" style="color:var(--text-muted);">
                    Plugins que aparecen en el inventario de algún entorno y no están declarados.
                    Los que suenan a nuestros van primero. Añadirlos desde aquí evita escribir el
                    identificador a mano, que es donde se cometen los dedazos.
                </div>
            </div>

            @foreach ($sugerencias as $sugerencia)
                <div class="flex flex-wrap items-center justify-between gap-3 border-t px-5 py-2 text-[12.5px]"
                     style="border-color:var(--divider);">
                    <div class="flex min-w-0 flex-wrap items-center gap-2">
                        <span class="font-semibold" style="color:var(--text-strong);">
                            {{ $sugerencia['name'] ?: '—' }}
                        </span>
                        <span class="rounded px-1.5 py-px font-mono text-[11px]"
                              style="color:var(--text-muted); background:var(--surface-sunken);">
                            {{ $sugerencia['component'] }}
                        </span>
                        @if ($sugerencia['suena'])
                            <span class="rounded px-1.5 py-px text-[10px] font-bold"
                                  style="color:var(--orange-600); background:var(--orange-100);">SUENA A NUESTRO</span>
                        @endif
                        <span class="text-[11.5px]" style="color:var(--text-subtle);">
                            en {{ $sugerencia['entornos'] }}
                            {{ $sugerencia['entornos'] === 1 ? 'entorno' : 'entornos' }}
                        </span>
                    </div>
                    @can('admin.configs.edit')
                        <button type="button" wire:click="anadirSugerido('{{ $sugerencia['component'] }}')"
                                class="flex-none text-[12px] font-semibold" style="color:var(--text-link);">
                            Es nuestro
                        </button>
                    @endcan
                </div>
            @endforeach
        </section>
    @endif
</div>