{{--
    Duplicar una versión para preparar la siguiente.

    **Lo que se enseña es el número**, porque es lo que decide a quién le llegará: la API
    sirve la versión más alta que no supere el plugin instalado en cada sitio. Antes se
    generaba solo y no se veía hasta después de crearla.
--}}
<div class="p-6">
    <div class="flex items-start gap-3">
        <div class="flex-none rounded-lg p-2" style="background:var(--surface-sunken);">
            <x-icono-de-accion nombre="duplicar" :tamano="20" />
        </div>
        <div class="min-w-0">
            <h2 class="text-lg font-bold" style="color:var(--text-strong);">
                Duplicar {{ $this->comoSeLlama() }} {{ $version->version }}
            </h2>
            <p class="mt-0.5 text-[12.5px]" style="color:var(--text-muted);">
                {{ $product->name }} · se copia {{ $this->queSeCopia() }}
            </p>
        </div>
    </div>

    {{-- ============ El número ============ --}}
    <div class="mt-5">
        <label for="numero-version" class="block text-[12.5px] font-semibold" style="color:var(--text-body);">
            Número de la versión nueva
        </label>
        <p class="mt-0.5 text-[12px]" style="color:var(--text-muted);">
            Diez dígitos, <span class="font-mono">AAAAMMDDNN</span>. Se propone el siguiente al de
            origen; cámbialo si esta versión tiene que alcanzar a otros sitios.
        </p>

        <input type="text" id="numero-version" wire:model.live.debounce.400ms="numero"
               inputmode="numeric" maxlength="10" autocomplete="off"
               class="mt-2 w-[190px] rounded-lg border px-3 py-2 font-mono text-[15px] font-bold tracking-wide"
               style="border-color:{{ $errors->has('numero') ? 'var(--danger-500)' : 'var(--border-default)' }};
                      background:var(--surface-page); color:var(--text-strong);">

        @error('numero')
            <p class="mt-1.5 text-[12.5px] font-semibold" style="color:var(--danger-500);">{{ $message }}</p>
        @enderror
    </div>

    {{-- ============ A quién alcanzaría ============ --}}
    @if (! $alcance['valido'])
        <div class="mt-4 rounded-lg border px-4 py-3 text-[12.5px]"
             style="border-color:var(--border-default); background:var(--surface-alt); color:var(--text-muted);">
            Escribe los diez dígitos para ver a cuántos entornos podría llegarles.
        </div>
    @elseif ($alcance['existe'])
        <div class="mt-4 rounded-lg border px-4 py-3 text-[12.5px] font-semibold"
             style="border-color:var(--danger-500); background:var(--danger-50, var(--surface-alt)); color:var(--danger-500);">
            Ya existe una versión {{ $numero }} de {{ $this->comoSeLlama() }} en este producto.
        </div>
    @elseif ($alcance['conPlugin'] === 0)
        <div class="mt-4 rounded-lg border px-4 py-3 text-[12.5px]"
             style="border-color:var(--border-default); background:var(--surface-alt); color:var(--text-body);">
            Ningún entorno de este producto tiene el plugin instalado todavía, así que de momento
            este número no cambia nada para nadie.
        </div>
    @elseif ($alcance['alcanzan'] === 0)
        {{-- **El aviso que no da ninguna otra pantalla.** Con este número la versión se
             quedará ahí sin llegarle a nadie cuando se publique, y eso no es un error: no
             falla nada y no avisa nada. Aquí todavía se puede cambiar el número. --}}
        <div class="mt-4 rounded-lg border px-4 py-3 text-[12.5px]"
             style="border-color:var(--warning-500); background:var(--warning-50, var(--surface-alt)); color:var(--text-body);">
            <strong class="font-semibold">Con este número no le llegaría a ningún entorno</strong>, ni
            siquiera después de publicarla: está por encima del plugin instalado en los
            {{ $alcance['conPlugin'] }}
            {{ $alcance['conPlugin'] === 1 ? 'sitio que lo tiene' : 'sitios que lo tienen' }}.
            Le llegará cuando actualicen el plugin.
        </div>
    @else
        <div class="mt-4 rounded-lg border px-4 py-3 text-[12.5px]"
             style="border-color:var(--border-default); background:var(--surface-alt); color:var(--text-body);">
            Con este número, al publicarla podría llegarle a
            <strong class="font-semibold" style="color:var(--text-strong);">{{ $alcance['alcanzan'] }}</strong>
            de los {{ $alcance['conPlugin'] }}
            {{ $alcance['conPlugin'] === 1 ? 'entorno con el plugin' : 'entornos con el plugin' }}
            —los que ya lo tienen en {{ $numero }} o más alto—.
        </div>
    @endif

    {{-- ============ Y que no sale a producción ============ --}}
    <div class="mt-4 flex items-start gap-2 rounded-lg px-3.5 py-2.5 text-[12px]"
         style="background:var(--surface-sunken); color:var(--text-muted);">
        <x-icono-de-accion nombre="bloqueado" :tamano="13" />
        <span>
            <strong class="font-semibold" style="color:var(--text-body);">Se crea sin publicar.</strong>
            Nadie la recibe hasta que la publiques, así que copiar no le cambia nada a ningún
            cliente: se duplica para preparar la siguiente con calma.
        </span>
    </div>

    <div class="mt-6 flex items-center justify-end gap-3">
        <button type="button" wire:click="$dispatch('closeModal')"
                class="rounded-lg border px-4 py-2 text-sm font-medium"
                style="border-color:var(--border-default); color:var(--text-body);">
            Cancelar
        </button>
        <button type="button" wire:click="duplicar" wire:loading.attr="disabled"
                @disabled(! $alcance['valido'] || $alcance['existe'])
                class="inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-semibold text-white transition-colors disabled:opacity-50"
                style="background:var(--orange-500);">
            <span wire:loading.remove wire:target="duplicar" class="inline-flex items-center gap-1.5">
                <x-icono-de-accion nombre="duplicar" />
                Crear la {{ $alcance['valido'] ? $numero : 'versión' }}
            </span>
            <span wire:loading wire:target="duplicar">Creando…</span>
        </button>
    </div>
</div>