{{-- ============================================================
     Editar un ajuste — desde `Configuración.dc.html`.

     Uno de cada vez, y diciendo qué vale ahora, qué va a valer y qué pasa al guardarlo.
     Ver el docblock del componente.
     ============================================================ --}}
<div class="relative" style="font-size:14px;">
    <button wire:click="closeModal"
            class="absolute right-4 top-4 z-10 text-gray-400 transition-colors hover:text-gray-600"
            aria-label="Cerrar">
        <svg class="h-6 w-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">
        <h3 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:17px; font-weight:700; color:var(--text-strong); margin:0;">
            {{ $meta['desc'] }}
        </h3>

        {{-- Qué vale ahora mismo, antes de tocar nada: es lo que permite decidir si el
             cambio hace falta. --}}
        <div class="mt-1.5 flex flex-wrap items-center gap-2">
            <span class="rounded px-1.5 py-px font-mono text-[11px]"
                  style="color:var(--text-subtle); background:var(--surface-sunken);">
                {{ $ficha['clave'] }}
            </span>
            <span class="text-[12px]" style="color:var(--text-muted);">
                Ahora mismo:
                <strong class="font-semibold" style="color:var(--text-body);">
                    @if ($ficha['heredado'])
                        heredado del servidor{{ $ficha['efectivo'] ? ' (' . $ficha['efectivo'] . ')' : '' }}
                    @else
                        {{ $ficha['valor'] }}
                    @endif
                </strong>
            </span>
        </div>

        <div class="mt-4">
            @if ($meta['tipo'] === 'bool')
                {{-- ============ Activado / desactivado ============ --}}
                <div class="flex flex-col gap-2">
                    <button type="button" wire:click="$set('activo', true)"
                            class="flex items-start gap-3 rounded-[10px] border-[1.5px] px-3.5 py-3 text-left"
                            style="border-color:{{ $activo ? 'var(--orange-500)' : 'var(--border-default)' }}; background:{{ $activo ? 'var(--surface-brand-subtle)' : 'var(--surface-page)' }};">
                        <span class="mt-px h-4 w-4 flex-none rounded-full border-2 box-border"
                              style="border-color:{{ $activo ? 'var(--orange-500)' : 'var(--border-default)' }}; background:{{ $activo ? 'var(--orange-500)' : 'transparent' }};"></span>
                        <div>
                            <div class="text-[13px] font-bold" style="color:var(--text-strong);">Activado</div>
                            <div class="mt-0.5 text-[12px]" style="color:var(--text-muted);">
                                Se envían los correos a las direcciones configuradas, en los días de
                                antelación marcados.
                            </div>
                        </div>
                    </button>
                    <button type="button" wire:click="$set('activo', false)"
                            class="flex items-start gap-3 rounded-[10px] border-[1.5px] px-3.5 py-3 text-left"
                            style="border-color:{{ !$activo ? 'var(--orange-500)' : 'var(--border-default)' }}; background:{{ !$activo ? 'var(--surface-brand-subtle)' : 'var(--surface-page)' }};">
                        <span class="mt-px h-4 w-4 flex-none rounded-full border-2 box-border"
                              style="border-color:{{ !$activo ? 'var(--orange-500)' : 'var(--border-default)' }}; background:{{ !$activo ? 'var(--orange-500)' : 'transparent' }};"></span>
                        <div>
                            <div class="text-[13px] font-bold" style="color:var(--text-strong);">Desactivado</div>
                            <div class="mt-0.5 text-[12px]" style="color:var(--text-muted);">
                                Se deja de avisar
                                <strong class="font-semibold" style="color:var(--warning-500);">sin ningún error visible</strong>:
                                nadie recibirá estos correos hasta volver a activarlo.
                            </div>
                        </div>
                    </button>
                </div>

            @elseif ($meta['tipo'] === 'modo')
                {{-- ============ Observar / cortar ============ --}}
                {{-- Es el único ajuste del panel que corta servicio a clientes. Las dos
                     opciones dicen qué pasa, no cómo se llaman. --}}
                <div class="flex flex-col gap-2">
                    <button type="button" wire:click="$set('modo', 'observar')"
                            class="flex items-start gap-3 rounded-[10px] border-[1.5px] px-3.5 py-3 text-left"
                            style="border-color:{{ $modo === 'observar' ? 'var(--orange-500)' : 'var(--border-default)' }}; background:{{ $modo === 'observar' ? 'var(--surface-brand-subtle)' : 'var(--surface-page)' }};">
                        <span class="mt-px h-4 w-4 flex-none rounded-full border-2 box-border"
                              style="border-color:{{ $modo === 'observar' ? 'var(--orange-500)' : 'var(--border-default)' }}; background:{{ $modo === 'observar' ? 'var(--orange-500)' : 'transparent' }};"></span>
                        <div>
                            <div class="text-[13px] font-bold" style="color:var(--text-strong);">Observar</div>
                            <div class="mt-0.5 text-[12px]" style="color:var(--text-muted);">
                                Los excesos se anotan en Monitorización y
                                <strong class="font-semibold">nadie deja de recibir nada</strong>. Es el
                                modo seguro: sirve para ver quién se pasaría antes de cortar de verdad.
                            </div>
                        </div>
                    </button>
                    <button type="button" wire:click="$set('modo', 'cortar')"
                            class="flex items-start gap-3 rounded-[10px] border-[1.5px] px-3.5 py-3 text-left"
                            style="border-color:{{ $modo === 'cortar' ? 'var(--orange-500)' : 'var(--border-default)' }}; background:{{ $modo === 'cortar' ? 'var(--surface-brand-subtle)' : 'var(--surface-page)' }};">
                        <span class="mt-px h-4 w-4 flex-none rounded-full border-2 box-border"
                              style="border-color:{{ $modo === 'cortar' ? 'var(--orange-500)' : 'var(--border-default)' }}; background:{{ $modo === 'cortar' ? 'var(--orange-500)' : 'transparent' }};"></span>
                        <div>
                            <div class="text-[13px] font-bold" style="color:var(--text-strong);">Cortar</div>
                            <div class="mt-0.5 text-[12px]" style="color:var(--text-muted);">
                                Quien supere el tope <strong class="font-semibold" style="color:var(--danger-500);">deja
                                de recibir licencias y contenido</strong> hasta que baje de él, y eso
                                pasa de inmediato en todos los sitios de los clientes.
                                @can('admin.api-logs.index')
                                    Antes de activarlo, mira en
                                    <a href="{{ route('monitoring.traffic') }}" class="font-semibold"
                                       style="color:var(--text-link);">Monitorización</a>
                                    quién está superando límites hoy.
                                @endcan
                            </div>
                        </div>
                    </button>
                </div>

            @else
                {{-- ============ Un valor: correos, días o número ============ --}}
                <label for="valor-del-ajuste" class="text-[12px] font-semibold" style="color:var(--text-muted);">
                    Nuevo valor
                </label>
                {{-- **La unidad dentro del campo**, y aquí es donde más importa: escribir
                     `3600` pensando en días es un error que no falla, no avisa y no se nota
                     hasta mucho después. La descripción lo dice arriba; el número se teclea
                     aquí. --}}
                @php $unidad = $this->unidad(); @endphp
                <div class="relative mt-1.5">
                    <input id="valor-del-ajuste" type="text" wire:model="valor"
                           @if ($meta['tipo'] === 'correos') placeholder="correo@dominio.com, otro@dominio.com" @endif
                           @if ($meta['tipo'] === 'dias') placeholder="30, 15, 7, 0" @endif
                           class="w-full rounded-lg border py-2.5 pl-3 text-[13.5px] outline-none focus:ring-0 {{ $unidad ? 'pr-24' : 'pr-3' }}"
                           style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                    @if ($unidad)
                        <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-[12.5px] font-semibold"
                              style="color:var(--text-muted);">{{ $unidad }}</span>
                    @endif
                </div>

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

                <div class="mt-2 text-[12px] leading-[1.5]" style="color:var(--text-muted);">
                    @if ($meta['tipo'] === 'correos')
                        Varios destinatarios separados por comas. Si lo dejas vacío, se deja de
                        avisar sin ningún error visible.
                    @elseif ($meta['tipo'] === 'dias')
                        Días antes de la caducidad en los que se envía aviso, separados por comas.
                        El 0 es el aviso del mismo día. Se guardan como máximo seis.
                    @else
                        Solo números, entre {{ $meta['min'] ?? 0 }} y
                        {{ number_format($meta['max'] ?? 0, 0, ',', '.') }}.
                    @endif
                </div>

                {{-- **El 0 no es cero: es «heredado».** Era invisible, y es la diferencia
                     entre «lo he puesto a cero» y «que decida el servidor». --}}
                @if ($meta['heredable'] ?? false)
                    <div class="mt-2 rounded-lg px-3 py-2.5 text-[12px]"
                         style="background:var(--surface-alt); color:var(--text-muted);">
                        Con un <strong class="font-semibold">0</strong> no pones valor tú: se usa el que
                        trae el servidor
                        @if ($ficha['efectivo'])
                            —ahora, <strong class="font-semibold">{{ $ficha['efectivo'] }}</strong>—
                        @endif
                        . Escribe un número para sobrescribirlo.
                    </div>
                @endif
            @endif
        </div>

        {{-- ============ Qué va a pasar ============ --}}
        @if ($consecuencia['aviso'])
            <div class="mt-4 flex items-start gap-2.5 rounded-[10px] border px-3.5 py-3 text-[12.5px]"
                 style="border-color:{{ $consecuencia['grave'] ? 'var(--warning-500)' : 'var(--border-default)' }}; background:{{ $consecuencia['grave'] ? 'var(--warning-50)' : 'var(--surface-alt)' }}; color:var(--text-body);">
                @if ($consecuencia['grave'])
                    <svg width="15" height="15" 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"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
                @endif
                <span>{{ $consecuencia['aviso'] }}</span>
            </div>
        @endif

        <div class="mt-[18px] flex flex-wrap items-center justify-between gap-3">
            <span class="text-[11.5px]" style="color:var(--text-subtle);">
                Se aplica al momento de guardar.
            </span>
            <div class="flex flex-none gap-2">
                <button type="button" wire:click="closeModal"
                        class="rounded-lg border px-3.5 py-2 text-[13px] font-semibold"
                        style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                    Cancelar
                </button>
                <button type="button" wire:click="guardar" wire:loading.attr="disabled"
                        class="rounded-lg px-4 py-2 text-[13px] font-semibold text-white disabled:opacity-50"
                        style="background:{{ $consecuencia['grave'] ? 'var(--danger-500)' : 'var(--orange-500)' }};">
                    Guardar
                </button>
            </div>
        </div>
    </div>
</div>