{{-- ============================================================
     Usuarios — implementado desde `Usuarios.dc.html` (Claude Design).

     Tres cosas que cambian y son la razón del rediseño:

     - **Las cuentas de servicio van aparte.** La credencial de la API estaba en la misma
       lista que las personas, con su «última actividad» y su botón de borrar.
     - **El rol dice qué alcanza.** Con 6 roles y 126 permisos, «Manager» no informa a
       nadie de lo que puede hacer un Manager.
     - **Se ve quien no puede trabajar**: sin rol, o con un rol sin permisos. Era un
       problema que solo se veía consultando la base de datos.

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

    {{-- ============ Cabecera ============ --}}
    <x-cabecera
        rotulo="Sistema"
        titulo="Usuarios">

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

        {{-- Como slot y no como atributo: **lleva un `@if` con marcado dentro**, y eso en
             un atributo HTML rompe la plantilla. Y la condición importa —cuántos no pueden
             trabajar ahora mismo— porque es la única cifra que esta pantalla necesita
             arriba: un usuario sin rol no es un usuario más, es uno que no entra. --}}
        <x-slot:descripcion>
            Quién entra al panel y con qué permisos. Desde aquí puedes dar de alta a alguien,
            cambiarle el rol, ver lo que ha hecho o quitarle el acceso.
            @if ($conProblema > 0)
                Ahora mismo hay <strong class="font-semibold" style="color:var(--danger-500);">{{ $conProblema }}</strong>
                que no puede{{ $conProblema === 1 ? '' : 'n' }} trabajar: sin rol, o con un rol sin permisos.
            @endif
        </x-slot:descripcion>

        <x-slot:acciones>
    @can('admin.users.create')
                <a href="{{ route('users.create') }}" wire:navigate
                   class="flex flex-none items-center gap-2 rounded-lg px-4 py-2.5 text-[13.5px] font-semibold text-white"
                   style="background:var(--orange-500);"
                   onmouseover="this.style.background='var(--orange-600)'"
                   onmouseout="this.style.background='var(--orange-500)'">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
                    Nuevo usuario
                </a>
            @endcan
        </x-slot:acciones>
    </x-cabecera>

    @foreach (['success' => 'success', 'error' => 'danger'] as $clave => $color)
        @if (session($clave))
            <div class="rounded-lg px-4 py-2.5 text-[13px]"
                 style="background:var(--{{ $color }}-50); color:var(--{{ $color }}-500);">
                {{ session($clave) }}
            </div>
        @endif
    @endforeach

    {{-- ============ Buscador ============
         Sin filtros: con 10–20 personas, el buscador sobra casi siempre. --}}
    <div class="flex items-center gap-2.5 rounded-xl border px-3.5 py-2.5"
         style="background:var(--surface-card); border-color:var(--border-subtle);">
        <div class="flex flex-1 items-center gap-2 rounded-lg border px-3 py-1.5"
             style="border-color:var(--border-default); background:var(--surface-page);">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-subtle)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="flex-none"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
            <input type="text" wire:model.live.debounce.300ms="search" placeholder="Nombre o correo"
                   class="min-w-0 flex-1 border-none bg-transparent p-0 text-[13px] focus:ring-0"
                   style="color:var(--text-body);">
        </div>
        <span class="flex-none text-[12.5px]" style="color:var(--text-muted);">
            <strong class="font-bold" style="color:var(--text-strong);">{{ $personas->count() }}</strong>
            {{ $personas->count() === 1 ? 'persona' : 'personas' }}
        </span>
    </div>

    {{-- ============ Personas ============ --}}
    <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;">
                Personas
            </h2>
        </div>

        @if ($personas->isNotEmpty())
            <div class="usr-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>Usuario</span><span>Rol</span><span>¿Sigue entrando?</span><span></span>
            </div>

            @foreach ($personas as $persona)
                @php
                    $problema = $persona['sinRol'] || $persona['rolSinPermisos'];

                    // La franja dice de un vistazo qué mirar: rojo es «no puede
                    // trabajar», ámbar «¿sigue en el equipo?», azul «alta sin estrenar».
                    $franja = match (true) {
                        $problema => 'var(--danger-500)',
                        $persona['viejo'] => 'var(--warning-500)',
                        $persona['nunca'] => 'var(--info-500)',
                        default => 'transparent',
                    };
                @endphp

                <div class="usr-grid items-center border-b"
                     style="border-color:var(--divider); border-left:3px solid {{ $franja }}; padding:10px 20px 10px 17px;">

                    {{-- Usuario --}}
                    <div class="flex min-w-0 items-center gap-2.5">
                        <span class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-full text-[12px] font-bold"
                              style="background:var(--teal-100); color:var(--teal-700);">
                            {{ $persona['iniciales'] }}
                        </span>
                        <div class="min-w-0">
                            <div class="flex items-center gap-1.5">
                                <span class="truncate text-[13.5px] font-semibold" style="color:var(--text-strong);">
                                    {{ $persona['nombre'] }}
                                </span>
                                @if ($persona['protegido'])
                                    {{-- Se dice **antes** de intentar borrarlo, no con un
                                         mensaje de error después. --}}
                                    <span class="flex flex-none" style="color:var(--text-subtle);"
                                          title="Administrador: no se puede borrar">
                                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                                    </span>
                                @endif
                            </div>
                            <div class="truncate text-[11.5px]" style="color:var(--text-muted);">
                                {{ $persona['correo'] }}
                            </div>
                        </div>
                    </div>

                    {{-- Rol --}}
                    <div class="min-w-0">
                        @if ($persona['sinRol'])
                            <div class="flex items-center gap-1.5">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--danger-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 class="text-[12px] font-semibold" style="color:var(--danger-500);">
                                    Sin rol — no puede abrir ninguna pantalla
                                </span>
                            </div>
                            @can('admin.users.edit')
                                <a href="{{ route('users.edit', $persona['id']) }}" wire:navigate
                                   class="mt-0.5 inline-block text-[11.5px] font-semibold" style="color:var(--text-link);">
                                    Asignar un rol
                                </a>
                            @endcan
                        @else
                            <div class="flex flex-wrap items-center gap-1.5">
                                @can('admin.roles.index')
                                    <a href="{{ route('configurations.roles.index') }}" wire:navigate
                                       class="rounded-full px-2.5 py-px text-[12px] font-semibold"
                                       style="color:var(--orange-600); background:var(--surface-brand-subtle);"
                                       title="Ver el rol en Configuraciones">
                                        {{ $persona['rol'] }}
                                    </a>
                                @else
                                    <span class="rounded-full px-2.5 py-px text-[12px] font-semibold"
                                          style="color:var(--orange-600); background:var(--surface-brand-subtle);">
                                        {{ $persona['rol'] }}
                                    </span>
                                @endcan

                                @if ($persona['rolSinPermisos'])
                                    {{-- El caso de `Support` hasta hoy: el rol existe, la
                                         persona lo tiene, y no puede abrir nada. --}}
                                    <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                                          style="color:var(--danger-500); background:var(--danger-50);">
                                        0 permisos — no ve nada
                                    </span>
                                @else
                                    <span class="text-[11.5px]" style="color:var(--text-muted);">
                                        {{ $persona['permisosDelRol'] }} permisos
                                    </span>
                                @endif
                            </div>
                        @endif
                    </div>

                    {{-- ¿Sigue entrando? --}}
                    <div class="min-w-0">
                        @if ($persona['sinRegistro'])
                            {{-- **El estado que faltaba**: «no lo sabemos». La cuenta es
                                 anterior a que se empezara a guardar `last_login_at`, y
                                 hasta ahora se pintaba «Nunca ha entrado — alta sin
                                 estrenar» a gente que entra todos los días. Desaparece solo
                                 en cuanto cada uno entre una vez. --}}
                            <span class="rounded-full px-2.5 py-0.5 text-[11.5px] font-semibold"
                                  style="color:var(--text-muted); background:var(--surface-sunken);">
                                Sin registro
                            </span>
                            <div class="mt-0.5 text-[11px]" style="color:var(--text-subtle);">
                                no se guardaba antes
                            </div>
                        @elseif ($persona['nunca'])
                            {{-- «Nunca ha entrado» y «hace seis meses» no son lo mismo:
                                 uno es un alta sin estrenar y el otro alguien que se fue. --}}
                            <span class="rounded-full px-2.5 py-0.5 text-[11.5px] font-semibold"
                                  style="color:var(--info-500); background:var(--info-50);">
                                Nunca ha entrado
                            </span>
                            <div class="mt-0.5 text-[11px]" style="color:var(--text-subtle);">
                                alta sin estrenar
                            </div>
                        @elseif ($persona['viejo'])
                            <div class="flex items-center gap-1.5">
                                <span class="h-[7px] w-[7px] flex-none rounded-full" style="background:var(--warning-500);"></span>
                                <span class="text-[12.5px] font-semibold" style="color:var(--warning-500);">
                                    {{ $persona['actividad'] }}
                                </span>
                            </div>
                            <div class="mt-px text-[11px]" style="color:var(--text-subtle);">
                                ¿sigue en el equipo?
                            </div>
                        @else
                            <div class="flex items-center gap-1.5">
                                <span class="h-[7px] w-[7px] flex-none rounded-full" style="background:var(--success-500);"></span>
                                <span class="text-[12.5px]" style="color:var(--text-body);">
                                    {{ $persona['actividad'] }}
                                </span>
                            </div>
                        @endif
                    </div>

                    {{-- Acciones --}}
                    <div class="flex flex-wrap justify-end gap-2.5">
                        @can('admin.logs.index')
                            {{-- El enlace que faltaba: el log del panel ya filtra por
                                 responsable y su filtro va en la URL. --}}
                            <a href="{{ route('monitoring.system-log', ['usuario' => $persona['id']]) }}" wire:navigate
                               class="whitespace-nowrap text-[12px] font-semibold" style="color:var(--text-link);"
                               title="Acciones del panel filtradas por esta persona">
                                Su actividad
                            </a>
                        @endcan

                        @can('admin.users.edit')
                            <a href="{{ route('users.edit', $persona['id']) }}" wire:navigate
                               class="whitespace-nowrap text-[12px] font-semibold" style="color:var(--text-muted);">
                                Editar
                            </a>
                        @endcan

                        @can('admin.users.destroy')
                            @unless ($persona['protegido'])
                                <button type="button" wire:click="abrirBorrado({{ $persona['id'] }})"
                                        class="whitespace-nowrap border-none bg-transparent p-0 text-[12px] font-semibold"
                                        style="color:var(--danger-500);">
                                    Borrar…
                                </button>
                            @endunless
                        @endcan
                    </div>
                </div>
            @endforeach
        @else
            <div class="border-t px-5 pb-4 pt-3.5 text-center text-[13px]"
                 style="border-color:var(--divider); color:var(--text-muted);">
                @if ($search !== '')
                    Nadie coincide con «{{ $search }}».
                @else
                    Ninguna persona todavía.
                @endif
            </div>
        @endif
    </section>

    {{-- ============ Cuentas de servicio ============
         **No son personas.** Estaban en la misma lista, con su «última actividad» —que no
         significa nada para una credencial— y su botón de borrar. --}}
    @if ($cuentasDeServicio->isNotEmpty())
        <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;">
                    Cuentas de servicio
                </h2>
                <div class="mt-0.5 text-[12px]" style="color:var(--text-muted);">
                    No son personas: son las credenciales con las que la API y las tareas programadas
                    operan. No se les mira la última sesión ni se les da de baja «porque se fueron».
                </div>
            </div>

            @foreach ($cuentasDeServicio as $cuenta)
                <div class="usr-grid items-center border-t px-5 py-2.5" style="border-color:var(--divider);">
                    <div class="flex min-w-0 items-center gap-2.5">
                        <span class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-lg"
                              style="background:var(--surface-sunken); color:var(--text-subtle);">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v4"/><path d="M12 19v4"/><path d="m4.2 4.2 2.8 2.8"/><path d="m17 17 2.8 2.8"/><path d="M1 12h4"/><path d="M19 12h4"/><path d="m4.2 19.8 2.8-2.8"/><path d="m17 7 2.8-2.8"/></svg>
                        </span>
                        <div class="min-w-0">
                            <div class="truncate text-[13.5px] font-semibold" style="color:var(--text-strong);">
                                {{ $cuenta['nombre'] }}
                            </div>
                            <div class="truncate text-[11.5px]" style="color:var(--text-muted);">
                                {{ $cuenta['correo'] }}
                            </div>
                        </div>
                    </div>

                    <div>
                        <span class="rounded-full px-2.5 py-px text-[12px] font-semibold"
                              style="color:var(--neutral-700); background:var(--surface-sunken);">
                            {{ $cuenta['rol'] }}
                        </span>
                        <div class="mt-0.5 text-[11.5px]" style="color:var(--text-muted);">
                            Rol de API — {{ $cuenta['permisosDelRol'] }} permisos, no navega el panel
                        </div>
                    </div>

                    <span class="text-[12.5px]" style="color:var(--text-muted);">
                        Uso vía API
                        @can('admin.api-logs.index')
                            · <a href="{{ route('api-logs.index') }}" wire:navigate
                                 class="font-semibold" style="color:var(--text-link);">ver peticiones</a>
                        @endcan
                    </span>

                    <div class="flex justify-end gap-2.5">
                        @can('admin.users.edit')
                            <a href="{{ route('users.edit', $cuenta['id']) }}" wire:navigate
                               class="text-[12px] font-semibold" style="color:var(--text-muted);">Editar</a>
                        @endcan
                    </div>
                </div>
            @endforeach
        </section>
    @endif

    {{-- ============ Los roles, de un vistazo ============
         Es la parte que el brief pedía hacer visible: un rol sin usuarios o sin permisos
         era un problema que solo se veía consultando la base de datos. --}}
    <section class="rounded-xl border px-5 pb-4 pt-3.5"
             style="background:var(--surface-card); border-color:var(--border-subtle);">
        @php
            $sinPermisos = collect($roles)->where('sinPermisos', true)->count();
            $sinUsuarios = collect($roles)->where('sinUsuarios', true)->count();
        @endphp

        <div class="flex flex-wrap items-baseline justify-between gap-4">
            <div>
                <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong); margin:0;">
                    Los {{ count($roles) }} roles, de un vistazo
                </h2>
                <div class="mt-0.5 text-[12px]" style="color:var(--text-muted);">
                    @if ($sinPermisos > 0)
                        <strong class="font-semibold" style="color:var(--danger-500);">
                            {{ $sinPermisos }} {{ $sinPermisos === 1 ? 'rol no tiene ningún permiso' : 'roles no tienen ningún permiso' }}:
                            quien lo tenga no ve nada.
                        </strong>
                    @endif
                    @if ($sinUsuarios > 0)
                        {{ $sinUsuarios }} {{ $sinUsuarios === 1 ? 'rol' : 'roles' }} sin ningún usuario.
                    @endif
                    Se editan en Configuraciones → Roles.
                </div>
            </div>
            @can('admin.roles.index')
                <a href="{{ route('configurations.roles.index') }}" wire:navigate
                   class="flex-none text-[12.5px] font-semibold" style="color:var(--text-link);">
                    Configurar roles
                </a>
            @endcan
        </div>

        <div class="mt-3 grid grid-cols-1 gap-2.5 md:grid-cols-2 xl:grid-cols-3">
            @foreach ($roles as $rol)
                <div class="rounded-[10px] border px-3.5 py-2.5"
                     style="border-color:{{ $rol['sinPermisos'] ? 'var(--danger-500)' : 'var(--border-subtle)' }};
                            background:{{ $rol['sinPermisos'] ? 'var(--danger-50)' : ($rol['sinUsuarios'] ? 'var(--surface-alt)' : 'var(--surface-page)') }};">

                    <div class="flex items-center justify-between gap-2">
                        <span class="text-[13px] font-bold" style="color:var(--text-strong);">{{ $rol['nombre'] }}</span>
                        <span class="text-[11px] font-semibold"
                              style="color:{{ $rol['sinUsuarios'] ? 'var(--text-subtle)' : 'var(--text-muted)' }};">
                            @if ($rol['sinUsuarios'])
                                Sin usuarios
                            @else
                                {{ $rol['usuarios'] }} {{ $rol['usuarios'] === 1 ? ($rol['esDeServicio'] ? 'cuenta' : 'usuario') : ($rol['esDeServicio'] ? 'cuentas' : 'usuarios') }}
                            @endif
                        </span>
                    </div>

                    <div class="mt-1 text-[11.5px]"
                         style="color:{{ $rol['sinPermisos'] ? 'var(--danger-500)' : 'var(--text-muted)' }};">
                        @if ($rol['sinPermisos'])
                            0 permisos — quien lo tenga no ve nada
                        @elseif ($rol['esTodo'])
                            Todo el panel — {{ $rol['permisos'] }} permisos
                        @elseif ($rol['esDeServicio'])
                            Rol de API — no navega el panel ({{ $rol['permisos'] }})
                        @else
                            {{ $rol['permisos'] }} permisos
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </section>
</div>
