<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">Pedir los datos de uso</h2>
        <p class="mt-1 text-sm text-gray-500">
            {{ $environment->name }} — <span class="font-mono text-xs">{{ $environment->domain }}</span>
        </p>

        {{-- ============ Antes de pedirlo ============ --}}
        @if ($ok === null)
            @if ($this->tieneToken())
                <div class="mt-5 rounded-xl border border-gray-200 bg-gray-50 px-4 py-3">
                    <p class="text-sm text-gray-700">
                        El Manager le va a pedir a este Moodle que <strong>envíe ahora su foto de
                        uso</strong> —usuarios, cursos, matrículas—, que es lo mismo que hace su
                        tarea programada de madrugada.
                    </p>
                    {{-- **Lo que hay que decir y no cabe en un botón.** La respuesta del
                         Moodle no trae los datos: los manda él después, en una llamada
                         aparte a nuestra API. Sin esto, quien pulse verá «correcto» y la
                         pantalla igual de vacía, y pensará que no ha funcionado. --}}
                    <p class="mt-2 text-xs text-gray-600">
                        Los datos <strong>no vuelven en esta respuesta</strong>: el Moodle contesta
                        que acepta el encargo y nos los envía acto seguido, en una petición aparte.
                        Suelen tardar unos segundos.
                    </p>
                </div>

                <div class="mt-5 flex flex-wrap items-center gap-2.5">
                    <button type="button" wire:click="pedir"
                            wire:loading.attr="disabled" wire:target="pedir"
                            class="rounded-lg border-none px-4 py-2 text-sm font-semibold text-white disabled:opacity-60"
                            style="background:var(--orange-500);">
                        <span wire:loading.remove wire:target="pedir">Pedirlos ahora</span>
                        <span wire:loading wire:target="pedir">Pidiéndolos…</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>
            @else
                {{-- **No es una avería: falta un dato.** Y la acción a tomar es otra, así
                     que no se ofrece el botón que va a fallar seguro. --}}
                <div class="mt-5 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3">
                    <p class="text-sm font-medium text-amber-900">
                        Este entorno no tiene guardado su token de servicios web.
                    </p>
                    <p class="mt-1 text-xs text-amber-800">
                        Sin él el Manager <strong>no puede pedirle nada</strong> a este Moodle. El
                        token se guarda en <strong>«Conexión con el Moodle»</strong>, en la ficha del
                        entorno; y si no se tiene a mano, la otra salida es esperar a que el plugin
                        envíe la foto por su cuenta con su tarea de madrugada.
                    </p>
                </div>

                <div class="mt-5 flex flex-wrap items-center gap-2.5">
                    @can('admin.environments.index')
                        <a href="{{ route('environments.show', $environment) }}" wire:navigate
                           class="rounded-lg border-none px-4 py-2 text-sm font-semibold text-white"
                           style="background:var(--orange-500);">
                            Ir a la ficha del entorno
                        </a>
                    @endcan
                    <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);">
                        Cerrar
                    </button>
                </div>
            @endif

        {{-- ============ Salió bien ============ --}}
        @elseif ($ok)
            <div class="mt-5 rounded-xl border border-green-200 bg-green-50 px-4 py-3">
                <p class="text-sm font-medium text-green-900">{{ $resultado }}</p>
                <p class="mt-1 text-xs text-green-800">
                    Recarga la pantalla en unos segundos para ver la foto. Si sigue vacía, mira
                    las peticiones de este sitio en Monitorización: puede que el Moodle haya
                    intentado enviarla y algo la haya rechazado.
                </p>
            </div>

            <div class="mt-5 flex flex-wrap items-center gap-2.5">
                <button type="button" onclick="window.location.reload()"
                        class="rounded-lg border-none px-4 py-2 text-sm font-semibold text-white"
                        style="background:var(--orange-500);">
                    Recargar
                </button>
                @can('admin.api-logs.index')
                    <a href="{{ route('api-logs.index', ['host' => $environment->domain]) }}"
                       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);">
                        Ver sus peticiones
                    </a>
                @endcan
                <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);">
                    Cerrar
                </button>
            </div>

        {{-- ============ Salió mal ============ --}}
        @else
            <div class="mt-5 rounded-xl border border-red-200 bg-red-50 px-4 py-3">
                <p class="text-sm font-medium text-red-900">{{ $resultado }}</p>
            </div>

            {{-- El detalle técnico se puede leer y copiar: es lo que se pega en un ticket
                 o se le manda al cliente. Plegado, porque no es para todo el mundo. --}}
            @if ($detalle)
                <details class="mt-3 rounded-xl border border-gray-200 bg-gray-50 px-4 py-3">
                    <summary class="cursor-pointer text-xs font-semibold text-gray-700">
                        Detalle técnico
                    </summary>
                    <pre class="mt-2 max-h-56 overflow-auto whitespace-pre-wrap break-all font-mono text-[11px] text-gray-700">{{ $detalle }}</pre>
                </details>
            @endif

            <div class="mt-5 flex flex-wrap items-center gap-2.5">
                <button type="button" wire:click="pedir"
                        wire:loading.attr="disabled" wire:target="pedir"
                        class="rounded-lg border px-3.5 py-2 text-sm font-semibold disabled:opacity-60"
                        style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                    <span wire:loading.remove wire:target="pedir">Volver a intentarlo</span>
                    <span wire:loading wire:target="pedir">Pidiéndolos…</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);">
                    Cerrar
                </button>
            </div>
        @endif
    </div>
</div>
