{{-- ============================================================
     Apagar o encender una licencia. El diseño (`Licencias.dc.html`) la pide con el
     impacto en números y motivo obligatorio, igual que la baja de un cliente.
     ============================================================ --}}
<div class="relative">
    <button wire:click="closeModal"
            class="absolute right-4 top-4 z-10 text-gray-400 transition-colors hover:text-gray-600"
            aria-label="Cerrar">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
    </button>

    <div class="p-6 pr-10">
        @if ($licenseToken->active)
            {{-- ============ APAGAR ============ --}}
            <div class="flex items-start gap-3">
                <span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-red-100">
                    <svg class="h-5 w-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
                    </svg>
                </span>
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">
                        Desactivar «{{ $licenseToken->name ?: $licenseToken->token_corto }}»
                    </h2>
                    <p class="mt-0.5 text-sm text-gray-500">Esto corta el servicio en la siguiente sincronización.</p>
                </div>
            </div>

            {{-- El impacto, en números y antes de nada. Con 0 entornos el mensaje es
                 distinto: no es «no pasa nada», es «no la usa ninguno de los entornos
                 registrados, pero cualquier sitio que tenga el token pegado responderá». --}}
            <div class="mt-5 rounded-xl border px-4 py-3
                        {{ $entornos > 0 ? 'border-red-200 bg-red-50' : 'border-amber-200 bg-amber-50' }}">
                @if ($entornos > 0)
                    <div class="text-xs uppercase tracking-wide text-red-700">Entornos que dejan de recibir contenido</div>
                    <div class="text-2xl font-bold text-red-900">{{ $entornos }}</div>
                @else
                    <div class="text-sm text-amber-900">
                        <strong>Ningún entorno registrado usa esta licencia</strong>, así que el panel no
                        verá diferencia. Pero cualquier sitio que tenga el token pegado en su
                        configuración empezará a recibir «Licencia desactivada».
                    </div>
                @endif
            </div>

            <div class="mt-4 rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-xs text-gray-600">
                <p class="font-semibold text-gray-700">Qué va a pasar exactamente</p>
                <ul class="mt-2 list-disc space-y-1 pl-5">
                    <li>
                        Los Moodles que usen este token recibirán <strong>«Licencia desactivada»</strong>
                        en su siguiente sincronización: dejan de recibir contenido.
                    </li>
                    <li>
                        <strong>Los productos y sus fechas no se tocan.</strong> Al volver a encenderla,
                        todo sigue donde estaba: no hay que reasignar nada.
                    </li>
                    <li>
                        Los entornos <strong>siguen asociados</strong> a la licencia. No se desasocia
                        nada.
                    </li>
                    <li>
                        Es distinto de <strong>caducar</strong>: una licencia caducada necesita
                        renovación; una apagada solo necesita volver a encenderse.
                    </li>
                </ul>
            </div>

            <div class="mt-4">
                <label for="motivo-licencia" class="block text-sm font-medium text-gray-700">
                    Motivo <span class="text-red-600">*</span>
                </label>
                <input type="text" id="motivo-licencia" wire:model="motivo"
                       placeholder="p. ej. impago, fin del periodo de prueba, baja del cliente…"
                       class="mt-1 w-full rounded-lg border-2 border-gray-200 px-4 py-2 text-sm focus:border-gray-300">
                @error('motivo')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
                <p class="mt-1 text-xs text-gray-500">
                    Queda guardado con tu nombre y la fecha. Es lo que responde, seis meses después,
                    «¿por qué está apagada esta licencia?».
                </p>
            </div>

            <div class="mt-6 flex justify-end gap-2">
                <button type="button" wire:click="closeModal"
                        class="rounded-lg border-2 border-gray-200 px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50">
                    Cancelar
                </button>
                <button type="button" wire:click="desactivar" wire:loading.attr="disabled"
                        class="rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700 disabled:opacity-50">
                    Desactivar licencia
                </button>
            </div>
        @else
            {{-- ============ ENCENDER ============ --}}
            @php
                $caducada = $licenseToken->end_at !== null && $licenseToken->end_at->startOfDay()->isPast();
            @endphp

            <div class="flex items-start gap-3">
                <span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-green-100">
                    <svg class="h-5 w-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/>
                    </svg>
                </span>
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">
                        Volver a activar «{{ $licenseToken->name ?: $licenseToken->token_corto }}»
                    </h2>
                    <p class="mt-0.5 text-sm text-gray-500">Los productos y sus fechas siguen como estaban.</p>
                </div>
            </div>

            @if ($licenseToken->deactivated_at)
                <div class="mt-4 rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-600">
                    Se apagó el <strong>{{ $licenseToken->deactivated_at->format('d/m/Y') }}</strong>
                    @if ($licenseToken->deactivatedBy)
                        por <strong>{{ $licenseToken->deactivatedBy->name }}</strong>
                    @endif
                    @if ($licenseToken->deactivation_reason)
                        <div class="mt-1 italic">«{{ $licenseToken->deactivation_reason }}»</div>
                    @endif
                </div>
            @endif

            {{-- **La trampa de este botón.** El middleware mira las dos cosas: activa y en
                 fecha. Encender una licencia caducada no la hace servir, y si no se dice
                 aquí, alguien pulsa y se va pensando que ya está. --}}
            @if ($caducada)
                <div class="mt-4 rounded-xl border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-900">
                    <strong>Ojo: esta licencia está caducada</strong>
                    ({{ $licenseToken->end_at->format('d/m/Y') }}). Encenderla no la hace servir —el
                    servicio mira las dos cosas—. Hay que <strong>renovarla</strong>.
                </div>
            @else
                <div class="mt-4 rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-xs text-gray-600">
                    <p class="font-semibold text-gray-700">Qué va a pasar</p>
                    <ul class="mt-2 list-disc space-y-1 pl-5">
                        <li>
                            {{ $entornos }} entorno(s) volverán a recibir contenido en su siguiente
                            sincronización.
                        </li>
                        <li>Los productos y sus vigencias no cambian: nada que reasignar.</li>
                    </ul>
                </div>
            @endif

            <div class="mt-6 flex justify-end gap-2">
                <button type="button" wire:click="closeModal"
                        class="rounded-lg border-2 border-gray-200 px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50">
                    Cancelar
                </button>
                <button type="button" wire:click="reactivar" wire:loading.attr="disabled"
                        class="rounded-lg bg-green-600 px-4 py-2 text-sm font-semibold text-white hover:bg-green-700 disabled:opacity-50">
                    Volver a activar
                </button>
            </div>
        @endif
    </div>
</div>