@extends('layouts.admin')

@section('title', 'الرئيسية')
@section('heading', 'لوحة المؤشرات')
@section('subheading', 'نظرة سريعة على نشاط المنصة')

@section('content')
    <div class="mb-8 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-zinc-500">المستخدمون</p>
            <p class="mt-2 text-3xl font-bold text-madar-950">{{ number_format($usersCount) }}</p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-zinc-500">المعاملات</p>
            <p class="mt-2 text-3xl font-bold text-madar-950">{{ number_format($transactionsCount) }}</p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-zinc-500">طلبات AI</p>
            <p class="mt-2 text-3xl font-bold text-madar-950">{{ number_format($aiRequestsCount) }}</p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-zinc-500">إجمالي أرصدة المحافظ</p>
            <p class="mt-2 text-3xl font-bold text-teal-700">{{ number_format((float) $walletTotal, 2) }}</p>
        </div>
    </div>

    <div class="grid gap-8 lg:grid-cols-2">
        <div class="rounded-2xl border border-zinc-200 bg-white shadow-sm">
            <div class="border-b border-zinc-100 px-5 py-4">
                <h2 class="font-bold text-zinc-900">آخر المستخدمين</h2>
            </div>
            <ul class="divide-y divide-zinc-100">
                @forelse ($recentUsers as $u)
                    <li class="flex items-center justify-between gap-3 px-5 py-3 text-sm">
                        <div>
                            <p class="font-medium text-zinc-900">{{ $u->full_name }}</p>
                            <p class="text-zinc-500">{{ $u->username }}</p>
                        </div>
                        <span class="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium {{ $u->status === 'active' ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800' }}">
                            {{ $u->status === 'active' ? 'نشط' : 'موقوف' }}
                        </span>
                    </li>
                @empty
                    <li class="px-5 py-8 text-center text-sm text-zinc-500">لا يوجد مستخدمون بعد.</li>
                @endforelse
            </ul>
        </div>

        <div class="rounded-2xl border border-zinc-200 bg-white shadow-sm">
            <div class="border-b border-zinc-100 px-5 py-4">
                <h2 class="font-bold text-zinc-900">آخر المعاملات</h2>
            </div>
            <ul class="divide-y divide-zinc-100">
                @forelse ($recentTransactions as $tx)
                    <li class="px-5 py-3 text-sm">
                        <div class="flex justify-between gap-2">
                            <span class="font-medium text-zinc-900">{{ $tx->user?->username ?? '—' }}</span>
                            <span class="font-mono text-zinc-700">{{ number_format((float) $tx->amount, 2) }}</span>
                        </div>
                        <p class="mt-1 text-xs text-zinc-500">{{ $tx->type }} · {{ $tx->status }}</p>
                    </li>
                @empty
                    <li class="px-5 py-8 text-center text-sm text-zinc-500">لا توجد معاملات بعد.</li>
                @endforelse
            </ul>
        </div>
    </div>
@endsection