@extends('admin.layout')

@section('title', 'Usuarios Admin')

@section('content')
    <div class="space-y-8">
        <section class="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-soft backdrop-blur-xl">
            <p class="text-sm uppercase tracking-[0.3em] text-sky-300/80">Usuarios</p>
            <h2 class="mt-2 text-3xl font-semibold text-white">Administración de cuentas</h2>
            <p class="mt-2 max-w-3xl text-slate-300">
                Desde aquí puedes revisar las cuentas registradas y habilitar o deshabilitar acceso.
            </p>
        </section>

        <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            @foreach ($stats as $stat)
                <article class="rounded-3xl border border-white/10 bg-slate-900/70 p-5 shadow-soft backdrop-blur-xl">
                    <p class="text-sm text-slate-400">{{ $stat['label'] }}</p>
                    <p class="mt-3 text-4xl font-semibold text-white">{{ $stat['value'] }}</p>
                </article>
            @endforeach
        </section>

        @unless($hasActiveColumn)
            <section class="rounded-3xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-200">
                La columna <code class="rounded bg-black/20 px-1 py-0.5">is_active</code> aún no existe en esta base de datos. Ejecuta la migración pendiente para habilitar acciones de activar/desactivar.
            </section>
        @endunless

        <section class="overflow-hidden rounded-3xl border border-white/10 bg-slate-900/70 shadow-soft backdrop-blur-xl">
            <div class="border-b border-white/10 px-6 py-4">
                <h3 class="text-lg font-semibold text-white">Listado de usuarios</h3>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-white/5 text-left text-sm">
                    <thead class="bg-white/5 text-slate-300">
                        <tr>
                            <th class="px-6 py-3 font-medium">Usuario</th>
                            <th class="px-6 py-3 font-medium">Estado</th>
                            <th class="px-6 py-3 font-medium">Rol</th>
                            <th class="px-6 py-3 font-medium">Saldo</th>
                            <th class="px-6 py-3 font-medium">Registro</th>
                            <th class="px-6 py-3 font-medium text-right">Acciones</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/5 text-slate-200">
                        @forelse ($users as $user)
                            <tr>
                                <td class="px-6 py-4">
                                    <p class="font-medium text-white">{{ $user->name }}</p>
                                    <p class="text-xs text-slate-400">{{ $user->email }}</p>
                                </td>
                                <td class="px-6 py-4">
                                    @if ($hasActiveColumn)
                                        <span class="rounded-full px-3 py-1 text-xs font-semibold {{ $user->is_active ? 'bg-emerald-500/15 text-emerald-300' : 'bg-rose-500/15 text-rose-300' }}">
                                            {{ $user->is_active ? 'Activo' : 'Deshabilitado' }}
                                        </span>
                                    @else
                                        <span class="text-xs text-slate-500">N/D</span>
                                    @endif
                                </td>
                                <td class="px-6 py-4">
                                    <span class="rounded-full px-3 py-1 text-xs font-semibold {{ $user->is_admin ? 'bg-sky-500/15 text-sky-300' : 'bg-slate-700 text-slate-300' }}">
                                        {{ $user->is_admin ? 'Admin' : 'Usuario' }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-slate-300">
                                    {{ $user->wallet?->balance ?? 0 }} créditos
                                </td>
                                <td class="px-6 py-4 text-slate-400">
                                    {{ optional($user->created_at)->format('d/m/Y H:i') }}
                                </td>
                                <td class="px-6 py-4 text-right">
                                    @if ((int) $user->id === (int) auth()->id())
                                        <span class="text-xs text-slate-500">Cuenta actual</span>
                                    @elseif (! $hasActiveColumn)
                                        <span class="text-xs text-slate-500">No disponible</span>
                                    @else
                                        <form method="POST" action="{{ route('admin.users.toggle-status', $user) }}" class="inline-flex">
                                            @csrf
                                            <button
                                                type="submit"
                                                class="rounded-full px-4 py-2 text-xs font-semibold {{ $user->is_active ? 'bg-rose-500/15 text-rose-300 hover:bg-rose-500/25' : 'bg-emerald-500/15 text-emerald-300 hover:bg-emerald-500/25' }}"
                                            >
                                                {{ $user->is_active ? 'Deshabilitar' : 'Habilitar' }}
                                            </button>
                                        </form>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-8 text-center text-slate-400">No hay usuarios registrados.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="border-t border-white/10 px-6 py-4">
                {{ $users->links() }}
            </div>
        </section>
    </div>
@endsection