{{-- ============================================================
     Listado de licencias — implementado desde `Licencias.dc.html` (Claude Design).

     Lo que resuelve respecto a la versión anterior:

     - **No había un solo filtro.** La pregunta de Comercial es «a quién le caduca en 30
       días» y se respondía leyendo la tabla entera.
     - **«Caducada» y «apagada» estaban en la misma columna** sin poder separarlas, y son
       cosas distintas: una se renueva, la otra se vuelve a encender.
     - **El token, que es lo que más se copia, era lo más difícil de leer**: 36
       caracteres en una celda, sin recorte y sin botón de copiar.
     - **La columna «Entornos» salía vacía en todas las filas** (MGR-055): la consulta
       calculaba `environments_count` y la plantilla imprimía `sites_count`, que no
       existe.

     Ver briefs/licencias.md.
     ============================================================ --}}
<div class="w-full" style="font-size:14px; display:flex; flex-direction:column; gap:14px;">

    {{-- ============ Cabecera ============
         El resumen dice **qué está cortando servicio ahora mismo**, que es lo que
         importa de esta pantalla, y no cuántas licencias hay. --}}
    <x-cabecera
        rotulo="Negocio"
        titulo="Licencias"
        descripcion="El contrato técnico de cada cliente: el token que se pega en su Moodle, qué productos incluye y hasta cuándo. Entra en una para renovarla, apagarla, o ver qué entornos la están usando.">

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

        <x-slot:acciones>
    @can('admin.license-tokens.create')
                <a href="{{ route('license_tokens.create') }}" wire:navigate
                   class="flex flex-none items-center gap-2 rounded-lg px-4 py-2.5 text-[13.5px] font-semibold text-white"
                   style="background:var(--orange-500);"
                   onmouseover="this.style.background='var(--orange-600)'"
                   onmouseout="this.style.background='var(--orange-500)'">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
                    Nueva licencia
                </a>
            @endcan
        </x-slot:acciones>
    </x-cabecera>

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

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

    {{-- ============ Filtros ============ --}}
    <div class="flex flex-wrap items-center gap-3 rounded-xl border p-3 px-4"
         style="background:var(--surface-card); border-color:var(--border-subtle);">

        <div class="flex min-w-[220px] flex-1 items-center gap-2 rounded-lg border px-3 py-1.5"
             style="border-color:var(--border-default); background:var(--surface-page);">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-subtle)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="flex-none"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
            <input type="text" wire:model.live.debounce.300ms="search"
                   placeholder="Token, nombre o cliente"
                   class="min-w-0 flex-1 border-none bg-transparent p-0 text-[13px] focus:ring-0"
                   style="color:var(--text-body);">
            <div wire:loading wire:target="search" class="flex-none">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--text-subtle)" stroke-width="2" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.22-8.56"/></svg>
            </div>
        </div>

        {{-- Los tres estados, separados. --}}
        <div class="flex flex-none gap-0.5 rounded-lg border p-[3px]"
             style="background:var(--surface-page); border-color:var(--border-default);">
            @foreach (['todas' => 'Todas', 'activas' => 'Activas', 'caducadas' => 'Caducadas', 'apagadas' => 'Apagadas'] as $clave => $etiqueta)
                <button type="button" wire:click="$set('estado', '{{ $clave }}')"
                        class="rounded-md px-3 py-[5px] text-[12.5px] font-semibold transition-colors"
                        @style([
                            'background:var(--neutral-800); color:#fff' => $estado === $clave,
                            'background:transparent; color:var(--text-muted)' => $estado !== $clave,
                        ])>
                    {{ $etiqueta }}
                </button>
            @endforeach
        </div>

        <div class="flex flex-none items-center gap-2">
            <span class="text-[11px] font-semibold uppercase tracking-[0.04em]" style="color:var(--text-subtle);">
                Producto
            </span>
            <select wire:model.live="producto"
                    class="rounded-lg border py-1.5 pl-2.5 pr-9 text-[12.5px] font-semibold focus:ring-0"
                    style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                <option value="">Todos</option>
                @foreach ($productos as $p)
                    <option value="{{ $p->id }}">{{ $p->name }}</option>
                @endforeach
            </select>
        </div>

        <button type="button" wire:click="$toggle('soloPronto')"
                class="flex-none rounded-full border px-[11px] py-1 text-[12px] font-semibold transition-colors"
                @style([
                    'border-color:var(--warning-500); background:var(--warning-50); color:var(--warning-500)' => $soloPronto,
                    'border-color:var(--border-default); background:var(--surface-page); color:var(--text-muted)' => ! $soloPronto,
                ])>
            Caduca en ≤ 30 días{{ $resumen['pronto'] > 0 ? ' (' . $resumen['pronto'] . ')' : '' }}
        </button>

        {{-- Un contrato firmado que nadie ha instalado. Es una conversación comercial
             pendiente, y hasta ahora no había forma de encontrarlos. --}}
        <button type="button" wire:click="$toggle('soloSinEntornos')"
                class="flex-none rounded-full border px-[11px] py-1 text-[12px] font-semibold transition-colors"
                @style([
                    'border-color:var(--orange-500); background:var(--surface-brand-subtle); color:var(--orange-600)' => $soloSinEntornos,
                    'border-color:var(--border-default); background:var(--surface-page); color:var(--text-muted)' => ! $soloSinEntornos,
                ])>
            Sin ningún entorno{{ $resumen['sinUso'] > 0 ? ' (' . $resumen['sinUso'] . ')' : '' }}
        </button>

        <div class="ml-auto flex flex-none items-center gap-2.5 text-[12.5px]" style="color:var(--text-muted);">
            <span>
                <strong class="font-bold" style="color:var(--text-strong);">{{ $tokens->total() }}</strong>
                de {{ $resumen['total'] }}
            </span>
            @if ($hayFiltros)
                <button type="button" wire:click="limpiarFiltros"
                        class="inline-flex items-center gap-1.5 border-none bg-transparent p-0 text-[12.5px] font-semibold hover:underline"
                        style="color:var(--text-link);">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-none"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                    Limpiar filtros
                </button>
            @endif
        </div>
    </div>

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

        <div class="lic-grid hidden border-b py-2 pl-[17px] pr-5 text-[11px] font-semibold uppercase tracking-[0.06em] lg:grid"
             style="color:var(--text-muted); border-color:var(--divider);">
            <span>Licencia</span>
            <span>Cliente</span>
            <span>Vigencia</span>
            <span>Productos</span>
            <span>Entornos</span>
            <span></span>
        </div>

        @forelse ($tokens as $token)
            @php
                // El estado del modelo tiene cuatro valores y el diseño tres: «vence
                // pronto» no es un estado, es un aviso sobre una licencia activa. Se
                // traduce aquí y no en el modelo, que es el que usan las otras dos
                // pantallas.
                $estadoToken = $token->estado();
                $apagada = $estadoToken === 'desactivada';
                $caducada = $estadoToken === 'vencida';
                $pronto = $estadoToken === 'pronto';

                $dias = $token->end_at
                    ? (int) now()->startOfDay()->diffInDays($token->end_at->copy()->startOfDay(), false)
                    : null;

                // La franja de la izquierda: lo que está mal se ve antes de leer.
                $franja = match (true) {
                    $apagada => 'var(--neutral-700)',
                    $caducada => 'var(--danger-500)',
                    $pronto => 'var(--warning-500)',
                    default => 'transparent',
                };
            @endphp

            <div class="lic-grid items-center border-b transition-colors hover:bg-[var(--surface-alt)]"
                 style="border-color:var(--divider); border-left:3px solid {{ $franja }}; padding:9px 20px 9px 14px;"
                 x-data="{ copiado: false }">

                {{-- Licencia: nombre, estado y el token --}}
                <div class="min-w-0">
                    <div class="flex min-w-0 items-center gap-2">
                        <a href="{{ route('license_tokens.show', $token) }}" wire:navigate
                           class="truncate text-[13.5px] font-semibold" style="color:var(--text-strong);">
                            {{ $token->name ?: 'Sin nombre' }}
                        </a>

                        @if ($apagada)
                            <span class="flex-none rounded-full px-2 py-px text-[10.5px] font-semibold"
                                  style="color:#fff; background:var(--neutral-700);">Apagada</span>
                        @elseif ($caducada)
                            <span class="flex-none rounded-full px-2 py-px text-[10.5px] font-semibold"
                                  style="color:var(--danger-500); background:var(--danger-50);">Caducada</span>
                        @else
                            <span class="flex-none rounded-full px-2 py-px text-[10.5px] font-semibold"
                                  style="color:var(--success-500); background:var(--success-50);">Activa</span>
                        @endif
                    </div>

                    <div class="mt-0.5 flex items-center gap-1.5">
                        <span class="truncate rounded px-2 py-px font-mono text-[11.5px]"
                              style="color:var(--text-muted); background:var(--surface-sunken);"
                              title="El token completo está en la ficha de la licencia y en el botón de copiar, no en esta lista.">
                            {{ $token->token_corto }}
                        </span>
                        <button type="button" title="Copiar el token completo"
                                @click="copiarAlPortapapeles('{{ $token->token }}').then(ok => { if (ok) { copiado = true; setTimeout(() => copiado = false, 1500) } })"
                                class="flex flex-none border-none bg-transparent p-0.5" style="color:var(--text-subtle);">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                        </button>
                        <span x-show="copiado" x-cloak class="flex-none text-[11px] font-semibold" style="color:var(--success-500);">
                            Copiado
                        </span>
                    </div>
                </div>

                {{-- Cliente --}}
                <span class="truncate text-[12.5px]" style="color:var(--text-body);">
                    @if ($token->client)
                        <a href="{{ route('clients.show', $token->client) }}" wire:navigate style="color:var(--text-body);">
                            {{ $token->client->name }}
                        </a>
                    @else
                        <span style="color:var(--text-subtle);">Sin cliente</span>
                    @endif
                </span>

                {{-- Vigencia --}}
                <div class="min-w-0 text-[12.5px]">
                    <div style="color:var(--text-body);">
                        {{ $token->start_at?->format('d/m/Y') ?? '—' }}
                        –
                        {{ $token->end_at?->format('d/m/Y') ?? 'sin caducidad' }}
                    </div>
                    @if ($caducada)
                        <div class="mt-px text-[11.5px] font-semibold" style="color:var(--danger-500);">
                            Caducó hace {{ abs($dias) }} día(s)
                        </div>
                    @elseif ($pronto)
                        <div class="mt-px text-[11.5px] font-semibold" style="color:var(--warning-500);">
                            Caduca en {{ $dias }} día(s)
                        </div>
                    @elseif ($apagada)
                        <div class="mt-px text-[11.5px] font-semibold" style="color:var(--text-muted);">
                            Apagada a mano
                        </div>
                    @endif
                </div>

                {{-- Productos: el mismo componente que Entornos y Clientes. --}}
                <x-product-icons :products="$token->products" empty="Ninguno" />

                {{-- Entornos. Esta celda salía **vacía en todas las filas** (MGR-055). --}}
                <div class="text-[12.5px]">
                    @if ($token->environments_count > 0)
                        <span class="font-semibold" style="color:var(--text-strong);">{{ $token->environments_count }}</span>
                    @else
                        <span class="rounded-full px-2 py-px text-[11px] font-semibold"
                              style="color:var(--warning-500); background:var(--warning-50);"
                              title="Ningún entorno usa esta licencia: un contrato que nadie ha instalado">
                            Sin uso
                        </span>
                    @endif
                </div>

                <a href="{{ route('license_tokens.show', $token) }}" wire:navigate
                   class="hidden justify-self-end lg:block" title="Ver la licencia">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-subtle)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                </a>
            </div>
        @empty
            <div class="px-6 py-8 text-center text-[13px]" style="color:var(--text-muted);">
                @if ($hayFiltros)
                    Ninguna licencia coincide con los filtros.
                    <button type="button" wire:click="limpiarFiltros"
                            class="border-none bg-transparent p-0 text-[13px] font-semibold"
                            style="color:var(--text-link);">Limpiar filtros</button>
                @else
                    Ninguna licencia todavía.
                @endif
            </div>
        @endforelse

        @if ($tokens->hasPages())
            <div class="px-5 py-2.5">{{ $tokens->links() }}</div>
        @endif
    </div>
</div>