{{-- ============================================================
     Avisos del sistema — implementado desde `Monitorización.dc.html`.

     **La pestaña se llamaba «Avisos enviados»**, y el brief señaló el problema: también
     lista **los fallidos**, que son lo único que hay que mirar de verdad —un aviso de
     caducidad que no salió es un cliente que se queda sin avisar—. El nombre escondía
     justo el caso importante.

     Ver briefs/monitorizacion.md.
     ============================================================ --}}
<div class="w-full" style="font-size:14px; display:flex; flex-direction:column; gap:14px;">

    <x-cabecera
        rotulo="Monitorización"
        titulo="Avisos enviados">

        <x-slot:icono>
            <x-nav-icon name="clipboard" tint="orange" />
        </x-slot:icono>

        {{-- Como slot: la frase lleva un <strong> y en un atributo se veria el marcado. --}}
        <x-slot:descripcion>
            Los correos automáticos que ha enviado el Manager, para responder «¿se avisó de esto?»
            sin buscar en el buzón de nadie — y sobre todo para ver los que
            <strong class="font-semibold">no llegaron</strong>.
        </x-slot:descripcion>
    </x-cabecera>

    @include('livewire.monitoring.components.menu', ['selected' => 'notices'])

    <section class="overflow-hidden rounded-xl border"
             style="background:var(--surface-card); border-color:var(--border-subtle);">

        <div class="px-5 pb-2.5 pt-3.5">
            <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong); margin:0;">
                Avisos del sistema
            </h2>
            <div class="mt-0.5 text-[12px]" style="color:var(--text-muted);">
                Correos automáticos de caducidad y bloqueo — los fallidos primero: un aviso que no
                salió es un cliente sin avisar.
            </div>
        </div>

        {{-- ============ Filtros ============ --}}
        <div class="flex flex-wrap items-center gap-2.5 px-5 pb-3">
            <div class="flex flex-none gap-0.5 rounded-lg border p-[3px]"
                 style="background:var(--surface-page); border-color:var(--border-default);">
                @php
                    $estados = [
                        'all' => 'Todos',
                        'failed' => 'Fallidos' . ($resumen['fallidos'] > 0 ? ' (' . $resumen['fallidos'] . ')' : ''),
                        'sent' => 'Enviados',
                    ];
                @endphp
                @foreach ($estados as $clave => $etiqueta)
                    <button type="button" wire:click="$set('estado', '{{ $clave }}')"
                            class="rounded-md px-3 py-[5px] text-[12.5px] font-semibold transition-colors"
                            @style([
                                'background:var(--neutral-800); color:#fff' => $estado === $clave,
                                'background:transparent; color:var(--text-muted)' => $estado !== $clave,
                            ])>
                        {{ $etiqueta }}
                    </button>
                @endforeach
            </div>

            <select wire:model.live="tipo"
                    class="flex-none rounded-lg border py-1.5 pl-2.5 pr-9 text-[12.5px] font-semibold focus:ring-0"
                    style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                @foreach ($tipos as $clave => $etiqueta)
                    <option value="{{ $clave }}">{{ $etiqueta }}</option>
                @endforeach
            </select>

            <span class="ml-auto flex-none text-[12.5px]" style="color:var(--text-muted);">
                <strong class="font-bold" style="color:var(--text-strong);">{{ $avisos->total() }}</strong>
                {{ $avisos->total() === 1 ? 'aviso' : 'avisos' }}
            </span>
        </div>

        {{-- El aviso de los fallidos, arriba y explicando qué va a pasar con ellos: sin
             esto, «fallido» se lee como «hay que reenviarlo a mano ahora». --}}
        @if ($resumen['fallidos'] > 0 && $estado !== 'sent')
            <div class="mx-5 mb-2.5 flex items-center gap-2.5 rounded-lg border px-3.5 py-2.5 text-[12.5px]"
                 style="background:var(--warning-50); border-color:var(--warning-500); color:var(--text-body);">
                <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="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>
                <span>
                    <strong class="font-semibold">{{ $resumen['fallidos'] }}
                        {{ $resumen['fallidos'] === 1 ? 'aviso sin entregar' : 'avisos sin entregar' }}.</strong>
                    Se reintenta en la siguiente pasada de la tarea; si vuelve a fallar, hay que
                    avisar a mano y revisar el correo del destinatario.
                </span>
            </div>
        @endif

        @if ($avisos->isNotEmpty())
            <div class="mon-avi-grid hidden border-b px-5 py-1.5 text-[11px] font-semibold uppercase tracking-[0.06em] lg:grid"
                 style="color:var(--text-muted); border-color:var(--divider);">
                <span>De qué</span><span>Aviso</span><span>A quién</span><span>Cuándo</span><span>Resultado</span>
            </div>

            @foreach ($avisos as $aviso)
                @php
                    $fallido = $aviso->sent_at === null;
                    $licencia = $aviso->subject_type === \App\Models\Monitoring\Notice::SUBJECT_LICENSE_TOKEN
                        ? $licencias->get($aviso->subject_id)
                        : null;
                @endphp

                <div class="mon-avi-grid items-center border-b text-[12.5px]"
                     style="border-color:var(--divider); border-left:3px solid {{ $fallido ? 'var(--warning-500)' : 'transparent' }}; padding:9px 20px 9px 17px;">

                    <div class="min-w-0">
                        <div class="truncate font-semibold" style="color:var(--text-strong);">
                            @if ($licencia)
                                {{-- **El token no se pinta entero.** Antes, una licencia sin
                                     nombre salía con su credencial completa en una lista que
                                     se lee de reojo. Ver `x-token-de-licencia`. --}}
                                <x-token-de-licencia :licencia="$licencia" />
                            @elseif ($aviso->kind === \App\Models\Monitoring\Notice::KIND_BLOCK_ALERT)
                                {{-- **El sujeto del corte sale del `payload`**, no de la fila
                                     de `api_blocks`: el episodio se puede borrar con la
                                     retención y el aviso tiene que seguir diciendo a quién se
                                     avisó. Por eso se guarda al registrarlo. --}}
                                <span class="font-mono" style="color:var(--text-strong);">
                                    {{ $aviso->payload['sujeto'] ?? ('corte #' . $aviso->subject_id) }}
                                </span>
                            @else
                                {{-- El sujeto se guarda como cadena para que la fila
                                     sobreviva al borrado: un aviso de algo ya eliminado
                                     sigue en el histórico, aunque sin nombre. --}}
                                <span style="color:var(--text-muted);">
                                    {{ $aviso->subject_type }} #{{ $aviso->subject_id }}
                                </span>
                            @endif
                        </div>
                        @if ($licencia?->client)
                            <div class="truncate text-[11.5px]" style="color:var(--text-muted);">
                                {{ $licencia->client->name }}
                            </div>
                        @elseif ($aviso->kind === \App\Models\Monitoring\Notice::KIND_BLOCK_ALERT)
                            {{-- **Si cortaba o solo observaba.** Es lo primero que se pregunta
                                 al leer un aviso de corte: en observación no se quedó nadie
                                 sin servicio, y eso cambia la urgencia por completo. --}}
                            <div class="truncate text-[11.5px]" style="color:var(--text-muted);">
                                {{ ($aviso->payload['corta'] ?? false) ? 'Cortando' : 'En observación' }}
                                @if (($aviso->payload['rechazos'] ?? 0) > 0)
                                    · {{ $aviso->payload['rechazos'] }} rechazos
                                @endif
                            </div>
                        @endif
                    </div>

                    <span class="truncate" style="color:var(--text-body);">
                        {{ $tipos[$aviso->kind] ?? $aviso->kind }}
                        @if ($aviso->threshold !== null)
                            <span style="color:var(--text-muted);">· {{ $aviso->threshold }} d</span>
                        @endif
                    </span>

                    <span class="truncate" style="color:var(--text-body);" title="{{ $aviso->sent_to }}">
                        {{ $aviso->sent_to ?: '—' }}
                    </span>

                    <span class="whitespace-nowrap" style="color:var(--text-muted);">
                        {{ ($aviso->sent_at ?? $aviso->updated_at)?->format('d/m/Y H:i') ?? '—' }}
                    </span>

                    <span class="min-w-0">
                        @if ($fallido)
                            <span class="inline-block max-w-full truncate rounded-full px-2.5 py-0.5 text-[11px] font-semibold"
                                  style="color:var(--warning-500); background:var(--warning-50);"
                                  title="{{ $aviso->error }}">
                                Fallido{{ $aviso->error ? ' — ' . \Illuminate\Support\Str::limit($aviso->error, 40) : '' }}
                            </span>
                        @else
                            <span class="rounded-full px-2.5 py-0.5 text-[11px] font-semibold"
                                  style="color:var(--success-500); background:var(--success-50);">
                                Enviado
                            </span>
                        @endif
                    </span>
                </div>
            @endforeach

            @if ($avisos->hasPages())
                <div class="px-5 py-2.5">{{ $avisos->links() }}</div>
            @endif
        @else
            <div class="flex items-center gap-3 border-t px-5 pb-[18px] pt-4" style="border-color:var(--divider);">
                <div class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-full"
                     style="background:var(--success-50);">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m22 4-10 10.01-3-3"/></svg>
                </div>
                <div class="text-[13px]" style="color:var(--text-body);">
                    @if ($estado === 'failed')
                        Ningún aviso ha fallado.
                    @elseif ($tipo !== 'all')
                        Ningún aviso de ese tipo.
                    @else
                        Ningún aviso enviado todavía — no había nada que avisar.
                    @endif
                </div>
            </div>
        @endif
    </section>

    <div class="text-[11.5px]" style="color:var(--text-subtle);">
        Los destinatarios, los umbrales de días y la hora de la tarea se configuran en
        @can('admin.configs.edit')
            <a href="{{ route('configurations.manager.index') }}" wire:navigate
               class="font-semibold" style="color:var(--text-link);">Configuraciones del Manager</a>.
        @else
            Configuraciones del Manager.
        @endcan
        Esta pantalla solo dice qué salió y qué no.
    </div>

    {{-- ============ Limpieza ============
         **Con un aviso que la de acciones no necesita**: esta tabla no es solo histórico.
         Cada fila dice «de esto ya se avisó», así que borrarla rearma el aviso. --}}
    @can('admin.configs.edit')
        <section class="flex flex-wrap items-center justify-between gap-4 rounded-xl border border-dashed px-5 py-3"
                 style="border-color:var(--border-default);">
            <div class="max-w-[760px] text-[12px] leading-[1.5]" style="color:var(--text-subtle);">
                <strong class="font-semibold" style="color:var(--text-muted);">Limpiar el histórico</strong>
                — borra filas de <span class="font-mono">notices</span> acotando por fechas, tipo
                y si el aviso llegó a enviarse. Los que fallaron no llegaron a nadie y son los que
                sobran; con los enviados, ojo:
                <strong class="font-semibold">borrar un aviso recurrente hace que se vuelva a
                enviar</strong> si la condición sigue cumpliéndose.
            </div>
            <button type="button" wire:click="abrirLimpieza"
                    class="flex-none rounded-lg border px-3 py-1.5 text-[12.5px] font-semibold"
                    style="border-color:var(--border-default); background:var(--surface-page); color:var(--danger-500);">
                Limpiar el histórico…
            </button>
        </section>
    @endcan
</div>