<div class="relative">
    <button wire:click="closeModal"
            class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors z-10"
            aria-label="Cerrar">
        <svg class="w-6 h-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">
        <h2 class="text-lg font-semibold text-gray-900">
            Borrar el entorno {{ $environment->name }}
        </h2>
        <p class="mt-1 font-mono text-xs text-gray-500">
            {{ $environment->domain }}
        </p>

        @if ($motivos !== [])
            {{-- ============ No se puede, y se dice por qué ============ --}}
            {{-- **La regla**: solo se borra un entorno limpio. Lo que hay que dar es el
                 camino: si estuvo funcionando, lo que toca es apagarlo, que se deshace. --}}
            <div class="mt-5 rounded-xl border border-amber-300 bg-amber-50 px-4 py-3">
                <div class="flex items-start gap-2.5">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--warning-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-px flex-none">
                        <rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                    </svg>
                    <div>
                        <p class="text-sm font-semibold text-amber-900">
                            Este entorno no se puede borrar.
                        </p>
                        <p class="mt-1 text-xs text-amber-800">
                            Solo se borran los entornos <strong>limpios</strong>: sin licencia y
                            sin nada que cuelgue de ellos. Este:
                        </p>
                        <ul class="mt-1.5 list-disc space-y-0.5 pl-4 text-xs text-amber-800">
                            @foreach ($motivos as $motivo)
                                <li>{{ ucfirst($motivo) }}.</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>

            <div class="mt-4 rounded-xl border border-gray-200 bg-white px-4 py-3">
                <p class="text-xs text-gray-600">
                    Un entorno con historial <strong>estuvo dado de alta y funcionando</strong>, y
                    borrarlo dejaría ese historial sin entorno. Si ya no se usa, lo que toca es
                    <strong>apagarlo</strong>: corta el servicio, guarda el motivo y se puede
                    volver a encender.
                </p>
            </div>

            <div class="mt-5 flex flex-wrap items-center gap-2.5">
                <button type="button" wire:click="closeModal"
                        class="rounded-lg border-none px-4 py-2 text-sm font-semibold text-white"
                        style="background:var(--orange-500);">
                    Entendido
                </button>
            </div>

        @else
            {{-- ============ Se puede: está limpio ============ --}}
            <div class="mt-5 rounded-xl border border-gray-200 bg-gray-50 px-4 py-3">
                <p class="text-sm text-gray-700">
                    Este entorno <strong>no tiene licencia</strong> y <strong>nada cuelga de
                    él</strong>: ni plugins, ni datos de uso, ni contratos, ni peticiones a la
                    API. Borrarlo no le cambia nada a nadie.
                </p>
                <p class="mt-2 text-xs text-gray-600">
                    Cliente: {{ $environment->client?->name ?? 'sin cliente' }} · Uso: {{ $environment->env }}
                </p>
                <p class="mt-2 text-xs font-semibold text-gray-900">
                    Se borra del todo, no va a la papelera: su dominio queda libre para darlo de
                    alta otra vez. Esto no se puede deshacer.
                </p>
            </div>

            <div class="mt-5 flex flex-wrap items-center gap-2.5">
                <button type="button" wire:click="borrar"
                        wire:loading.attr="disabled" wire:target="borrar"
                        class="rounded-lg border-none px-4 py-2 text-sm font-semibold text-white disabled:opacity-60"
                        style="background:var(--danger-500);">
                    <span wire:loading.remove wire:target="borrar">Borrar el entorno</span>
                    <span wire:loading wire:target="borrar">Borrando…</span>
                </button>
                <button type="button" wire:click="closeModal"
                        class="rounded-lg border px-3.5 py-2 text-sm font-semibold"
                        style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                    Cancelar
                </button>
            </div>
        @endif
    </div>
</div>
