@extends('layouts.superadmin')
@section('title', 'AI Analytics — لوحة التحليلات')

@section('content')
@php
    $q      = request('q', '');
    $from   = request('from', now()->subDays(14)->toDateString());
    $to     = request('to', now()->toDateString());
    $gender = request('gender', '');
    $role   = request('role', '');

    $summary   = $summary   ?? [];
    $kpis      = $kpis      ?? [];
    $topUsers  = collect($topUsers ?? []);
    $alerts    = collect($alerts ?? []);

    $fmtNum = fn($n) => number_format((float)($n ?? 0), 0);
    $fmt1   = fn($n) => number_format((float)($n ?? 0), 1);
@endphp

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

        {{-- HERO --}}
        <div class="relative overflow-hidden rounded-3xl border border-sky-500/35
                    bg-gradient-to-br from-slate-950 via-sky-950/40 to-slate-950
                    shadow-xl shadow-sky-500/10 text-white p-5 sm:p-7">

            <div class="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_top,_rgba(56,189,248,0.18)_0,_transparent_55%)]"></div>
            <div class="pointer-events-none absolute -top-24 -right-20 w-72 h-72 rounded-full bg-sky-500/18 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -left-24 w-72 h-72 rounded-full bg-fuchsia-500/12 blur-3xl"></div>

            <div class="relative flex flex-col lg:flex-row gap-4 items-start lg:items-center justify-between">
                <div class="min-w-0">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/8 border border-white/10 text-[11px] font-bold">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                        AI Analytics — إشارات ذكية + تقارير أداء
                    </div>

                    <h1 class="mt-3 text-xl sm:text-3xl font-extrabold tracking-tight truncate">
                        لوحة التحليلات الذكية (Admin)
                    </h1>
                    <p class="mt-2 text-[12px] sm:text-sm text-white/75 max-w-3xl leading-relaxed">
                        قراءة سريعة للأداء + تنبيهات + ترتيب أعضاء، مع فلاتر زمنية.
                        التصميم هنا “Safe”: ما بنهار لو ناقص متغير من الكنترولر.
                    </p>

                    <div class="mt-3 flex flex-wrap gap-2 text-[11px]">
                        <span class="px-3 py-1 rounded-full bg-slate-900/60 border border-sky-400/25">
                            الفترة: <span class="font-extrabold">{{ $from }}</span> → <span class="font-extrabold">{{ $to }}</span>
                        </span>
                        <span class="px-3 py-1 rounded-full bg-slate-900/60 border border-emerald-400/25">
                            عدد عناصر التقرير: <span class="font-extrabold">{{ $topUsers->count() }}</span>
                        </span>
                        <span class="px-3 py-1 rounded-full bg-slate-900/60 border border-amber-400/25">
                            تنبيهات: <span class="font-extrabold">{{ $alerts->count() }}</span>
                        </span>
                    </div>
                </div>

                {{-- quick actions --}}
                <div class="w-full lg:w-auto">
                    <form method="GET" action="{{ route('ai.analytics.index') }}"
                          class="rounded-2xl bg-white/6 border border-white/10 p-4 backdrop-blur-xl">
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                            <div class="sm:col-span-2">
                                <label class="block text-[11px] font-bold text-white/70 mb-1">بحث (اسم/يوزر/إيميل)</label>
                                <input name="q" value="{{ $q }}" placeholder="ابحث عن عضو..."
                                       class="w-full rounded-xl bg-slate-950/60 border border-white/10
                                              text-white/90 placeholder:text-white/35
                                              px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-sky-500/40">
                            </div>

                            <div>
                                <label class="block text-[11px] font-bold text-white/70 mb-1">من</label>
                                <input type="date" name="from" value="{{ $from }}"
                                       class="w-full rounded-xl bg-slate-950/60 border border-white/10
                                              text-white/90 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-sky-500/40">
                            </div>

                            <div>
                                <label class="block text-[11px] font-bold text-white/70 mb-1">إلى</label>
                                <input type="date" name="to" value="{{ $to }}"
                                       class="w-full rounded-xl bg-slate-950/60 border border-white/10
                                              text-white/90 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-sky-500/40">
                            </div>

                            <div>
                                <label class="block text-[11px] font-bold text-white/70 mb-1">الجنس</label>
                                <select name="gender"
                                        class="w-full rounded-xl bg-slate-950/60 border border-white/10
                                               text-white/90 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-sky-500/40">
                                    <option value="" @selected($gender==='')>الكل</option>
                                    <option value="male" @selected($gender==='male')>ذكر</option>
                                    <option value="female" @selected($gender==='female')>أنثى</option>
                                </select>
                            </div>

                            <div>
                                <label class="block text-[11px] font-bold text-white/70 mb-1">الفئة</label>
                                <select name="role"
                                        class="w-full rounded-xl bg-slate-950/60 border border-white/10
                                               text-white/90 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-sky-500/40">
                                    <option value="" @selected($role==='')>الكل</option>
                                    <option value="moderator" @selected($role==='moderator')>مشرف</option>
                                    <option value="official-member" @selected($role==='official-member')>عضو رسمي</option>
                                    <option value="member" @selected($role==='member')>عضو بيتا</option>
                                </select>
                            </div>

                            <div class="sm:col-span-2 lg:col-span-2 flex gap-2 items-end">
                                <button class="w-full rounded-xl bg-sky-600 hover:bg-sky-700 text-white font-extrabold
                                               px-4 py-2.5 text-sm shadow-lg shadow-sky-500/20 transition">
                                    تطبيق الفلاتر
                                </button>
                                <a href="{{ route('ai.analytics.index') }}"
                                   class="w-full text-center rounded-xl bg-white/8 hover:bg-white/12 border border-white/10
                                          text-white/80 font-bold px-4 py-2.5 text-sm transition">
                                    إعادة ضبط
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- KPIs --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
            @php
                $cards = [
                    ['t'=>'الأعضاء (داخل الفلاتر)', 'v'=>$fmtNum(data_get($kpis,'users',0)), 'i'=>'fa-users', 'b'=>'border-sky-500/25', 'g'=>'from-sky-500/20'],
                    ['t'=>'إجمالي ساعات (تقديري)', 'v'=>$fmt1(data_get($kpis,'hours_total',0)), 'i'=>'fa-clock', 'b'=>'border-emerald-500/25', 'g'=>'from-emerald-500/20'],
                    ['t'=>'تنبيهات', 'v'=>$fmtNum(data_get($kpis,'alerts', $alerts->count())), 'i'=>'fa-bell', 'b'=>'border-amber-500/25', 'g'=>'from-amber-500/20'],
                    ['t'=>'مؤشر عام', 'v'=>$fmt1(data_get($kpis,'score_avg',0)).'%', 'i'=>'fa-brain', 'b'=>'border-fuchsia-500/25', 'g'=>'from-fuchsia-500/20'],
                ];
            @endphp

            @foreach($cards as $c)
                <div class="rounded-2xl border {{ $c['b'] }} bg-gradient-to-br {{ $c['g'] }} to-white/0
                            bg-slate-950/55 backdrop-blur-xl shadow-lg shadow-black/25 p-4 text-white">
                    <div class="flex items-center justify-between">
                        <div class="text-[12px] font-bold text-white/70">{{ $c['t'] }}</div>
                        <i class="fa-solid {{ $c['i'] }} text-white/65"></i>
                    </div>
                    <div class="mt-2 text-2xl font-extrabold">{{ $c['v'] }}</div>
                    <div class="mt-1 text-[11px] text-white/45">AI Snapshot</div>
                </div>
            @endforeach
        </div>

        {{-- Top users --}}
        <div class="rounded-3xl border border-white/10 bg-slate-950/60 backdrop-blur-xl shadow-xl shadow-black/25 overflow-hidden">
            <div class="p-5 sm:p-6 border-b border-white/10 flex items-center justify-between">
                <div>
                    <div class="text-sm sm:text-base font-extrabold text-white">أفضل الأعضاء (Ranking)</div>
                    <div class="text-[11px] text-white/55">اضغط على العضو لفتح تقريره</div>
                </div>
                <span class="text-[11px] px-3 py-1 rounded-full bg-white/8 border border-white/10 text-white/70 font-bold">
                    {{ $topUsers->count() }} عنصر
                </span>
            </div>

            <div class="p-4 sm:p-6">
                @if($topUsers->isEmpty())
                    <div class="text-center py-10 text-white/60">
                        لا يوجد بيانات بعد ضمن هذه الفلاتر.
                    </div>
                @else
                    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                        @foreach($topUsers as $u)
                            @php
                                $uid = (int) data_get($u,'id',0);
                                $name = data_get($u,'name', data_get($u,'username','#'.$uid));
                                $username = data_get($u,'username', null);
                                $score = (float) data_get($u,'score', 0);
                                $status = (string) data_get($u,'label','—');
                                $badge = $score >= 80 ? 'bg-emerald-500/15 border-emerald-500/30 text-emerald-200'
                                        : ($score >= 55 ? 'bg-amber-500/15 border-amber-500/30 text-amber-200'
                                        : 'bg-rose-500/15 border-rose-500/30 text-rose-200');
                            @endphp

                            <a href="{{ route('ai.analytics.user.report', $uid) }}"
                               class="group rounded-2xl border border-white/10 bg-white/5 hover:bg-white/8 transition
                                      p-4 text-white block">
                                <div class="flex items-start justify-between gap-3">
                                    <div class="min-w-0">
                                        <div class="text-sm font-extrabold truncate">{{ $name }}</div>
                                        <div class="text-[11px] text-white/45 truncate">
                                            {{ $username ? '@'.$username : '' }}
                                        </div>
                                    </div>
                                    <span class="text-[11px] px-2.5 py-1 rounded-full border {{ $badge }} font-extrabold">
                                        {{ number_format($score,1) }}%
                                    </span>
                                </div>

                                <div class="mt-3">
                                    <div class="h-2 rounded-full bg-white/10 overflow-hidden">
                                        <div class="h-2 rounded-full bg-sky-500/80"
                                             style="width: {{ max(0,min(100,$score)) }}%"></div>
                                    </div>
                                    <div class="mt-2 flex items-center justify-between text-[11px] text-white/55">
                                        <span>تصنيف: <span class="font-bold text-white/75">{{ $status }}</span></span>
                                        <span class="group-hover:text-white/80 transition">فتح التقرير ←</span>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        {{-- Alerts --}}
        <div class="rounded-3xl border border-white/10 bg-slate-950/60 backdrop-blur-xl shadow-xl shadow-black/25 overflow-hidden">
            <div class="p-5 sm:p-6 border-b border-white/10 flex items-center justify-between">
                <div>
                    <div class="text-sm sm:text-base font-extrabold text-white">التنبيهات الذكية</div>
                    <div class="text-[11px] text-white/55">ملاحظات تنفيذية سريعة للإدارة</div>
                </div>
                <i class="fa-solid fa-triangle-exclamation text-amber-300/80"></i>
            </div>

            <div class="p-4 sm:p-6">
                @if($alerts->isEmpty())
                    <div class="text-center py-8 text-white/60">لا يوجد تنبيهات حالياً ✅</div>
                @else
                    <div class="space-y-3">
                        @foreach($alerts as $a)
                            <div class="rounded-2xl border border-amber-500/20 bg-amber-500/10 p-4 text-white">
                                <div class="flex items-start justify-between gap-3">
                                    <div class="min-w-0">
                                        <div class="text-sm font-extrabold">
                                            {{ data_get($a,'title','تنبيه') }}
                                        </div>
                                        <div class="mt-1 text-[12px] text-white/70 leading-relaxed">
                                            {{ data_get($a,'text','—') }}
                                        </div>
                                    </div>
                                    @php $uid = (int) data_get($a,'user_id',0); @endphp
                                    @if($uid > 0)
                                        <a href="{{ route('ai.analytics.user.report', $uid) }}"
                                           class="shrink-0 text-[11px] px-3 py-1 rounded-full bg-white/8 border border-white/10
                                                  hover:bg-white/12 transition font-bold">
                                            ملف العضو
                                        </a>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

    </div>
</div>
@endsection