@extends('admin.layout')

@section('title', 'Dashboard 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">Dashboard</p>
            <h2 class="mt-2 text-3xl font-semibold text-white">Resumen general del sistema</h2>
            <p class="mt-2 max-w-3xl text-slate-300">
                Desde aquí puedes monitorear usuarios, juegos, billeteras y transacciones del backend.
            </p>
        </section>

        <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            @foreach ($metrics as $metric)
                <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">{{ $metric['label'] }}</p>
                    <p class="mt-3 text-4xl font-semibold text-white">{{ $metric['value'] }}</p>
                    <p class="mt-2 text-sm text-slate-400">{{ $metric['note'] }}</p>
                </article>
            @endforeach
        </section>

        <section class="grid gap-6 xl:grid-cols-2">
            <article 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">Usuarios recientes</h3>
                </div>
                <div class="divide-y divide-white/5">
                    @forelse ($recentUsers as $user)
                        <div class="flex items-center justify-between px-6 py-4">
                            <div>
                                <p class="font-medium text-white">{{ $user->name }}</p>
                                <p class="text-sm text-slate-400">{{ $user->email }}</p>
                            </div>
                            <span class="rounded-full px-3 py-1 text-xs font-semibold {{ $user->is_admin ? 'bg-emerald-500/15 text-emerald-300' : 'bg-slate-700 text-slate-300' }}">
                                {{ $user->is_admin ? 'Admin' : 'Usuario' }}
                            </span>
                        </div>
                    @empty
                        <div class="px-6 py-8 text-sm text-slate-400">No hay usuarios recientes.</div>
                    @endforelse
                </div>
            </article>

            <article 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">Juegos recientes</h3>
                </div>
                <div class="divide-y divide-white/5">
                    @forelse ($recentGames as $game)
                        <div class="px-6 py-4">
                            <div class="flex items-center justify-between gap-4">
                                <div>
                                    <p class="font-medium text-white">{{ $game->name }}</p>
                                    <p class="text-sm text-slate-400">Slug: {{ $game->slug }}</p>
                                </div>
                                <div class="text-right text-sm text-slate-300">
                                    <p>Costo: {{ $game->cost }}</p>
                                    <p>Espera: {{ $game->wait_seconds }}s</p>
                                </div>
                            </div>
                            <div class="mt-3 inline-flex rounded-full px-3 py-1 text-xs font-semibold {{ $game->status === 'active' ? 'bg-emerald-500/15 text-emerald-300' : ($game->status === 'coming_soon' ? 'bg-amber-500/15 text-amber-300' : 'bg-slate-700 text-slate-300') }}">
                                {{ $game->status }}
                            </div>
                        </div>
                    @empty
                        <div class="px-6 py-8 text-sm text-slate-400">No hay juegos recientes.</div>
                    @endforelse
                </div>
            </article>
        </section>

        <section class="grid gap-6 xl:grid-cols-2">
            <article 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">Recargas pendientes</h3>
                </div>
                <div class="divide-y divide-white/5">
                    @forelse ($pendingTopups as $topup)
                        <div class="px-6 py-4">
                            <div class="flex items-start justify-between gap-4">
                                <div>
                                    <p class="font-medium text-white">{{ $topup->user?->name ?? 'N/D' }}</p>
                                    <p class="text-sm text-slate-400">{{ $topup->reference }}</p>
                                    <p class="text-sm text-slate-400">{{ $topup->amount }} créditos · {{ $topup->price_amount }} moneda local</p>
                                    @if($topup->receipt_path)
                                        <p class="text-xs text-sky-300">Comprobante cargado</p>
                                    @endif
                                </div>
                                <div class="flex flex-col gap-2">
                                    <form method="POST" action="{{ route('admin.topups.approve', $topup) }}">
                                        @csrf
                                        <button type="submit" class="rounded-full bg-emerald-500/15 px-3 py-2 text-xs font-semibold text-emerald-300">
                                            Aprobar
                                        </button>
                                    </form>
                                    <form method="POST" action="{{ route('admin.topups.reject', $topup) }}">
                                        @csrf
                                        <input type="hidden" name="notes" value="Revisión manual">
                                        <button type="submit" class="rounded-full bg-rose-500/15 px-3 py-2 text-xs font-semibold text-rose-300">
                                            Rechazar
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="px-6 py-8 text-sm text-slate-400">No hay recargas pendientes.</div>
                    @endforelse
                </div>
            </article>

            <article 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">Canjes recientes</h3>
                </div>
                <div class="divide-y divide-white/5">
                    @forelse ($recentRedemptions as $redemption)
                        <div class="px-6 py-4">
                            <p class="font-medium text-white">{{ $redemption->user?->name ?? 'N/D' }}</p>
                            <p class="text-sm text-slate-400">{{ $redemption->product?->name ?? 'Producto' }}</p>
                            <p class="text-sm text-slate-400">{{ $redemption->total_points }} puntos · {{ $redemption->status }}</p>
                        </div>
                    @empty
                        <div class="px-6 py-8 text-sm text-slate-400">No hay canjes todavía.</div>
                    @endforelse
                </div>
            </article>
        </section>

        <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">Transacciones recientes</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">Monto</th>
                            <th class="px-6 py-3 font-medium">Tipo</th>
                            <th class="px-6 py-3 font-medium">Fecha</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/5 text-slate-200">
                        @forelse ($recentTransactions as $transaction)
                            <tr>
                                <td class="px-6 py-4">
                                    {{ $transaction->wallet?->user?->name ?? 'N/D' }}
                                </td>
                                <td class="px-6 py-4 {{ ($transaction->amount ?? 0) >= 0 ? 'text-emerald-300' : 'text-rose-300' }}">
                                    {{ $transaction->amount }}
                                </td>
                                <td class="px-6 py-4">{{ $transaction->type }}</td>
                                <td class="px-6 py-4 text-slate-400">{{ optional($transaction->created_at)->format('d/m/Y H:i') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-6 py-8 text-center text-slate-400">No hay transacciones todavía.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    </div>
@endsection