{{--
    Borrar un tipo de soporte del catálogo.

    **No pregunta «¿seguro?»: dice a qué afecta.** Y cuando lo usa algún contrato no
    ofrece borrar: explica por qué no y qué hacer antes. Es la misma forma que la del tipo
    de entorno y la del borrado de una versión de contenido.
--}}
<div class="p-6">
    <div class="flex items-start gap-3">
        <div class="flex-none rounded-lg p-2"
             style="background:{{ $enUso ? 'var(--surface-alt)' : 'var(--danger-50)' }};">
            @if ($enUso)
                {{-- El candado, que es el mismo lenguaje que en el borrado de versiones. --}}
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)"
                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                </svg>
            @else
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--danger-500)"
                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
                </svg>
            @endif
        </div>
        <div class="min-w-0">
            <h2 class="text-lg font-bold" style="color:var(--text-strong);">
                @if ($enUso)
                    «{{ $support->name }}» no se puede borrar
                @else
                    Borrar «{{ $support->name }}» del catálogo
                @endif
            </h2>
            <p class="mt-0.5 font-mono text-[12px]" style="color:var(--text-muted);">
                {{ $support->shortname }}
            </p>
        </div>
    </div>

    @if ($enUso)
        <div class="mt-5 rounded-lg border px-4 py-4"
             style="border-color:var(--border-default); background:var(--surface-alt);">
            <p class="text-sm font-semibold" style="color:var(--text-body);">
                Lo usan {{ $impacto['contratos'] }} contrato(s) de soporte,
                en {{ $impacto['entornos'] }} entorno(s) de {{ $impacto['clientes'] }} cliente(s).
            </p>

            @if ($impacto['vigentes'] > 0)
                <p class="mt-1.5 text-[12.5px]" style="color:var(--text-body);">
                    Y <strong>{{ $impacto['vigentes'] }} sigue(n) en vigor</strong> — cubriendo a un
                    cliente ahora mismo.
                </p>
            @endif
        </div>

        {{-- **Por qué se bloquea y no se avisa.** Borrarlo no daría ningún error: dejaría
             los contratos apuntando a un tipo que ya no se puede leer. --}}
        <div class="mt-4 text-[12px]" style="color:var(--text-muted);">
            <p><strong class="font-semibold" style="color:var(--text-body);">Qué pasaría si se borrara:</strong>
                nada visible, y eso es el problema. Los contratos seguirían ahí apuntando a un
                tipo borrado, la pantalla de soportes de cada entorno diría
                <em>«sin tipo»</em> sin explicar por qué, y los avisos de caducidad seguirían
                contándolos con el hueco en el nombre.</p>
            <p class="mt-1.5"><strong class="font-semibold" style="color:var(--text-body);">Qué hacer antes:</strong>
                cambiarles el tipo a esos contratos, o quitarlos si ya no valen. Un contrato
                caducado también cuenta: es el histórico de lo que se le vendió a un cliente.</p>
        </div>

        <div class="mt-6 flex justify-end">
            <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);">
                Entendido
            </button>
        </div>
    @else
        <div class="mt-5 rounded-lg border px-4 py-4"
             style="border-color:var(--border-default); background:var(--danger-50);">
            <p class="text-sm font-semibold" style="color:var(--danger-500);">
                Ningún contrato usa este tipo, así que se puede quitar del catálogo.
            </p>
            <p class="mt-1.5 text-[12.5px]" style="color:var(--text-body);">
                El borrado es <strong>lógico</strong>: la fila se queda en la base marcada como
                borrada y un administrador puede recuperarla. No desaparece ningún dato.
            </p>
        </div>

        <div class="mt-4 text-[12px]" style="color:var(--text-muted);">
            Dejará de poder elegirse al dar de alta un contrato de soporte. Nada de lo que ya
            está registrado cambia.
        </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="borrar" wire:loading.attr="disabled"
                    class="rounded-lg px-4 py-2 text-sm font-semibold text-white"
                    style="background:var(--danger-500);">
                <span wire:loading.remove wire:target="borrar">Borrar del catálogo</span>
                <span wire:loading wire:target="borrar">Borrando…</span>
            </button>
        </div>
    @endif
</div>