{{-- ============================================================
     Alta y edición de un uso del entorno. **Una sola vista para los dos**: el formulario
     es el mismo y tenerlo dos veces es la forma segura de que un campo acabe validándose
     en una pantalla y no en la otra.

     Lo que cambia entre alta y edición lo dice `$editando`.
     ============================================================ --}}
@php $esAlta = $editando === null; @endphp

<div>
    <livewire:components.clean-header :title="$esAlta ? 'Crear uso del entorno' : 'Editar uso del entorno'" />

    <div class="w-full px-6 pt-10 pb-4 sm:px-12 lg:px-20 lg:pt-16">
        <div class="mx-auto max-w-3xl">

            @if (session()->has('error'))
                <div class="mb-4 rounded bg-red-100 px-4 py-3 text-red-700">{{ session('error') }}</div>
            @endif

            <div class="mt-8 w-full rounded-lg border border-gray-200 bg-white px-8 py-6">
                <div class="flex w-full flex-col items-center justify-center">
                    <h1 class="text-3xl font-bold">
                        {{ $esAlta ? 'Crear uso del entorno' : 'Editar «' . $editando->name . '»' }}
                    </h1>
                    <p class="max-w-xl text-center text-sm text-gray-500">
                        El uso es <strong>para qué sirve un sitio</strong>: producción, su previo, desarrollo,
                        la máquina de alguien. No confundir con el <em>tipo</em>, que es la plataforma
                        —Moodle LMS, Workplace, WordPress—.
                    </p>
                </div>

                <form wire:submit="{{ $esAlta ? 'store' : 'update' }}" class="mt-8 flex w-full flex-col gap-6">

                    {{-- ============ Shortname ============ --}}
                    <div>
                        <label class="mb-2 block text-sm font-medium text-gray-700">Shortname</label>
                        <p class="mb-2 text-xs text-gray-500">
                            <strong>No es una etiqueta: es lo que manda cada Moodle.</strong> El plugin del
                            cliente envía este valor en el bloque <code>environment.env</code> de su
                            <code>sync</code> y se compara tal cual, así que tiene que ser exactamente el que
                            envíe. Los que hay son <code>pro</code>, <code>pre</code>, <code>develop</code> y
                            <code>local</code>. Solo minúsculas, números, guion y guion bajo.
                        </p>

                        @if (! $esAlta && $shortnameFijo)
                            {{-- **Fijo y con el motivo delante.** Un campo deshabilitado sin explicación se
                                 lee como un fallo de la pantalla. --}}
                            <input type="text" value="{{ $shortname }}" disabled
                                   class="w-full cursor-not-allowed rounded-lg border border-gray-300 bg-gray-100 px-4 py-2 font-mono text-gray-600">
                            <p class="mt-1.5 text-xs text-amber-700">
                                @if ($editando->esExentoDelIndice())
                                    Este shortname no se puede cambiar nunca: de la cadena literal
                                    <code>local</code> depende la columna generada <code>domain_unique</code>,
                                    que es lo que exime a los sitios locales del índice único del dominio
                                    —así varios desarrolladores pueden compartir <code>moodle.test</code>—.
                                @else
                                    No se puede cambiar: hay <strong>{{ $cuantosEntornos }}</strong>
                                    entorno(s) con este uso guardado, y cambiarlo aquí <strong>no los
                                    renombra</strong>. Se quedarían con un valor que el catálogo no reconoce:
                                    el filtro no los encontraría y su siguiente <code>sync</code> se
                                    rechazaría. Todo lo demás sí se puede editar.
                                @endif
                            </p>
                        @else
                            <input type="text" wire:model="shortname" required
                                   placeholder="staging"
                                   class="w-full rounded-lg border border-gray-300 px-4 py-2 font-mono focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 @error('shortname') border-red-500 @enderror">
                        @endif

                        @error('shortname')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- ============ Nombre ============ --}}
                    <div>
                        <label class="mb-2 block text-sm font-medium text-gray-700">Nombre</label>
                        <p class="mb-2 text-xs text-gray-500">
                            El que se lee en los formularios y en los desplegables. Aquí sí se puede escribir
                            como se hable: «Producción», «PreProducción».
                        </p>
                        <input type="text" wire:model="name" required placeholder="Staging"
                               class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 @error('name') border-red-500 @enderror">
                        @error('name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- ============ Descripción ============ --}}
                    <div>
                        <label class="mb-2 block text-sm font-medium text-gray-700">Descripción</label>
                        <textarea wire:model="description" rows="3"
                                  class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 @error('description') border-red-500 @enderror"></textarea>
                        @error('description')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- ============ Color ============ --}}
                    <div>
                        <label class="mb-2 block text-sm font-medium text-gray-700">Color de la etiqueta</label>
                        <p class="mb-2 text-xs text-gray-500">
                            <strong>Una paleta cerrada y no un color libre.</strong> Esta etiqueta se pinta en
                            el listado, en la ficha del entorno, en los botones del filtro y en cuatro
                            pantallas más; los pares son del sistema de diseño, así que siguen al tema y no
                            se quedan ilegibles en oscuro. Se ve cómo queda debajo.
                        </p>

                        <div class="flex flex-wrap gap-2">
                            @foreach ($paleta as $clave => $opcion)
                                <label class="cursor-pointer">
                                    <input type="radio" wire:model.live="color" value="{{ $clave }}" class="peer sr-only">
                                    <span class="flex items-center gap-2 rounded-lg border-2 px-3 py-1.5 text-xs peer-checked:border-blue-500 peer-checked:ring-2 peer-checked:ring-blue-200 {{ $color === $clave ? 'border-blue-500' : 'border-gray-200' }}">
                                        <span class="rounded px-2 py-0.5 text-[11px] font-bold uppercase tracking-wider"
                                              style="color:{{ $opcion['texto'] }}; background:{{ $opcion['fondo'] }};">
                                            {{ $shortname !== '' ? $shortname : 'uso' }}
                                        </span>
                                        <span class="text-gray-600">{{ $opcion['nombre'] }}</span>
                                    </span>
                                </label>
                            @endforeach
                        </div>

                        @if (! $esAlta && $editando->claveDePaleta() === null)
                            <p class="mt-1.5 text-xs text-amber-700">
                                Los colores guardados de este uso no son ninguno de la paleta, así que no hay
                                ninguno marcado de verdad: al guardar se le pondrá el que elijas.
                            </p>
                        @endif

                        @error('color')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- ============ Visible por defecto ============ --}}
                    <div class="rounded-lg border border-gray-200 bg-gray-50 px-4 py-3">
                        <label class="flex cursor-pointer items-start gap-3">
                            <input type="checkbox" wire:model="visible_por_defecto"
                                   class="mt-0.5 rounded border-gray-300 text-orange-600 focus:ring-orange-300">
                            <span class="text-sm">
                                <span class="font-medium text-gray-800">
                                    Sale marcado de entrada en el filtro del listado de entornos
                                </span>
                                <span class="mt-1 block text-xs text-gray-500">
                                    Con esto desmarcado, los entornos con este uso <strong>no salen al abrir el
                                    listado</strong> — es lo que se hace con los locales, que en el parque real
                                    son ruido de desarrollo. No se esconden en silencio: la pantalla dice
                                    cuántas filas está ocultando y ofrece verlas.
                                </span>
                            </span>
                        </label>
                    </div>

                    {{-- ============ Botones ============ --}}
                    <div class="mt-6 flex w-full items-center justify-end">
                        <a href="{{ route('configurations.catalogs') }}" wire:navigate
                           class="bg-white px-4 py-2 hover:bg-gray-100">Cancelar</a>
                        <button type="submit" wire:loading.attr="disabled"
                                class="bg-3ip hover:bg-3ip-light ml-4 rounded-lg px-4 py-2 text-white">
                            <span wire:loading.remove wire:target="{{ $esAlta ? 'store' : 'update' }}">
                                {{ $esAlta ? 'Crear uso' : 'Guardar' }}
                            </span>
                            <span wire:loading wire:target="{{ $esAlta ? 'store' : 'update' }}">Guardando...</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>