@php
    $user = auth()->user();
    $layout = 'layouts.superadmin';
@endphp

@extends($layout)

@section('title', 'لوحة نظام الدعوات')

@section('content')

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 sm:py-8">
    <div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

        {{-- هيدر ملحمي --}}
        <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-cyan-500/25 shadow-2xl shadow-cyan-500/10">
            <div class="pointer-events-none absolute -top-24 -right-10 w-64 h-64 rounded-full bg-cyan-500/20 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -left-10 w-72 h-72 rounded-full bg-blue-500/15 blur-3xl"></div>

            <div class="relative p-6 space-y-3">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-cyan-400/30 text-xs text-cyan-200">
                    <i class="fa-solid fa-chart-line"></i>
                    <span>إحصائيات نظام الدعوات</span>
                </div>

                <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
                    لوحة نظام الدعوات <span class="text-cyan-300">— الإدارة العليا</span>
                </h1>

                <p class="text-sm sm:text-[15px] text-slate-200/80 leading-relaxed max-w-xl">
                    يمكنك هنا متابعة أداء الأعضاء، عدد المدعوين، نقاط الدعاة، وأقوى المؤثرين في نظام الدعوات داخل
                    <span class="text-cyan-300 font-semibold">جيش الوفاء الذهبي</span>.
                </p>
            </div>
        </div>

        {{-- صندوق الإحصائيات --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">

            <div class="rounded-2xl bg-white/5 border border-white/10 shadow-md p-5 text-center">
                <div class="text-[13px] text-slate-300 mb-1">إجمالي المدعوين</div>
                <div class="text-3xl font-extrabold text-cyan-300">{{ number_format($stats['total_users_with_inviter']) }}</div>
            </div>

            <div class="rounded-2xl bg-emerald-500/10 border border-emerald-400/30 shadow-md p-5 text-center">
                <div class="text-[13px] text-emerald-200 mb-1">الأعضاء الرسميون</div>
                <div class="text-3xl font-extrabold text-emerald-300">{{ number_format($stats['official_by_invites']) }}</div>
            </div>

            <div class="rounded-2xl bg-amber-500/10 border border-amber-400/30 shadow-md p-5 text-center">
                <div class="text-[13px] text-amber-200 mb-1">أعضاء بيتا</div>
                <div class="text-3xl font-extrabold text-amber-300">{{ number_format($stats['beta_by_invites']) }}</div>
            </div>

            <div class="rounded-2xl bg-rose-500/10 border border-rose-400/30 shadow-md p-5 text-center">
                <div class="text-[13px] text-rose-200 mb-1">حسابات غير نشطة</div>
                <div class="text-3xl font-extrabold text-rose-300">{{ number_format($stats['inactive_accounts'] ?? 0) }}</div>
            </div>

        </div>


        {{-- فاصل --}}
        <div class="h-px bg-gradient-to-l from-transparent via-cyan-400/60 to-transparent my-4"></div>


        {{-- أفضل الدعاة --}}
        <div class="space-y-3">
            <h2 class="text-xl font-extrabold text-cyan-300">أقوى الدعاة (Top Inviters)</h2>
            <p class="text-xs text-slate-300/80 mb-3">قائمة بالأعضاء الأكثر تأثيراً في نشر التيم وجلب أعضاء جدد.</p>

            @if($topInviters->isEmpty())
                <div class="rounded-2xl p-5 bg-slate-900/60 border border-white/10 text-slate-300 text-sm text-center">
                    لا يوجد أي داعٍ يمتلك نقاط دعوات بعد.
                </div>
            @else
                <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach($topInviters as $inviter)
                        <div class="rounded-2xl p-4 bg-gradient-to-b from-slate-900 to-black border border-white/10 shadow-lg hover:shadow-2xl transition">
                            <div class="flex items-center gap-3">
                                <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-cyan-500 via-sky-500 to-blue-600 grid place-items-center text-white font-bold text-sm">
                                    {{ mb_substr($inviter->name, 0, 2) }}
                                </div>
                                <div>
                                    <div class="font-bold text-white">{{ $inviter->name }}</div>
                                    <div class="text-[11px] text-slate-400">نقاط الدعوات: {{ $inviter->invitation_points }}</div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

    </div>
</div>

@endsection