{{-- resources/views/advisor/analytics/engagement.blade.php --}}
@extends('layouts.advisor')

@section('title', 'مؤشرات التفاعل العام')
@section('page-title', '📈 مؤشرات التفاعل العام في التيم')

@section('content')
@php
    $range = $range ?? 'daily';
    $activeToday   = $stats['active_today']    ?? 0;
    $activeWeek    = $stats['active_week']     ?? 0;
    $activeMonth   = $stats['active_month']    ?? 0;
    $msgsToday     = $stats['messages_today']  ?? 0;
    $msgsWeek      = $stats['messages_week']   ?? 0;
    $msgsMonth     = $stats['messages_month']  ?? 0;
    $topUsers      = collect($stats['top_users'] ?? []);
@endphp

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

        {{-- هيدر ناعم وفاتح --}}
        <div class="relative overflow-hidden rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-lg shadow-slate-300/40 dark:shadow-black/40">
            <div class="pointer-events-none absolute -top-16 -left-10 w-40 h-40 rounded-full bg-emerald-400/20 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-20 -right-10 w-48 h-48 rounded-full bg-sky-400/20 blur-3xl"></div>

            <div class="relative p-5 sm:p-6 lg:p-7 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="space-y-2">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 text-[11px] font-medium dark:bg-emerald-500/15 dark:text-emerald-200">
                        <i class="fa-solid fa-wave-square text-[11px]"></i>
                        <span>لوحة نبض التفاعل — للمستشار</span>
                    </div>
                    <h1 class="text-lg sm:text-2xl lg:text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">
                        مؤشرات التفاعل العام لأعضاء التيم
                    </h1>
                    <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-300 max-w-xl">
                        هنا تراقب حرارة التفاعل في التيم: كم عضو يتحرك؟ متى النشاط أعلى؟ ومن هم
                        نجوم التفاعل اللي لازم تكافئهم أو تحتضنهم أكثر.
                    </p>
                </div>

                <div class="self-stretch sm:self-auto flex sm:block justify-end">
                    <div class="rounded-2xl bg-slate-900 text-slate-100 px-4 py-3 text-xs sm:text-sm shadow-md dark:bg-black/70">
                        <div class="text-[11px] text-slate-300 mb-1">المستشار المسؤول</div>
                        <div class="font-semibold text-sm sm:text-base">
                            {{ $advisor->name }}
                        </div>
                        <div class="text-[10px] text-slate-400 mt-1">
                            {{ now()->locale('ar')->timezone(config('app.timezone'))->isoFormat('dddd D MMM YYYY, h:mm a') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- تبويبات المدى الزمني --}}
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div class="inline-flex items-center gap-1 text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                <i class="fa-solid fa-clock-rotate-left text-[11px]"></i>
                <span>اختر المدى الزمني لعرض نبض التفاعل</span>
            </div>

            <form method="GET" class="inline-flex items-center gap-1.5 rounded-full bg-white/80 border border-slate-200 px-1.5 py-1 text-[11px] shadow-sm dark:bg-slate-900/80 dark:border-slate-700">
                <button type="submit" name="range" value="daily"
                        class="px-3 py-1.5 rounded-full transition-all
                               {{ $range === 'daily'
                                    ? 'bg-emerald-500 text-white shadow-sm shadow-emerald-400/60'
                                    : 'text-slate-600 dark:text-slate-200 hover:bg-slate-100/80 dark:hover:bg-slate-800/80' }}">
                    اليوم
                </button>
                <button type="submit" name="range" value="weekly"
                        class="px-3 py-1.5 rounded-full transition-all
                               {{ $range === 'weekly'
                                    ? 'bg-sky-500 text-white shadow-sm shadow-sky-400/60'
                                    : 'text-slate-600 dark:text-slate-200 hover:bg-slate-100/80 dark:hover:bg-slate-800/80' }}">
                    هذا الأسبوع
                </button>
                <button type="submit" name="range" value="monthly"
                        class="px-3 py-1.5 rounded-full transition-all
                               {{ $range === 'monthly'
                                    ? 'bg-violet-500 text-white shadow-sm shadow-violet-400/60'
                                    : 'text-slate-600 dark:text-slate-200 hover:bg-slate-100/80 dark:hover:bg-slate-800/80' }}">
                    هذا الشهر
                </button>
            </form>
        </div>

        {{-- كروت المؤشرات الرئيسية --}}
        <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
            {{-- أعضاء نشطون اليوم --}}
            <div class="rounded-2xl bg-white/95 border border-emerald-100 shadow-sm p-3 sm:p-4 dark:bg-slate-900/95 dark:border-emerald-500/35">
                <div class="flex items-center justify-between gap-2">
                    <div class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                        الأعضاء النشطون اليوم
                    </div>
                    <div class="h-7 w-7 rounded-xl grid place-items-center bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-200">
                        <i class="fa-solid fa-bolt text-[11px]"></i>
                    </div>
                </div>
                <div class="mt-2 text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white">
                    {{ $activeToday }}
                </div>
                <div class="mt-1 text-[10px] sm:text-[11px] text-slate-500 dark:text-slate-400">
                    عدد الأعضاء الذين ظهر لهم أي نشاط اليوم (رسالة، تفاعل، حضور...)
                </div>
            </div>

            {{-- نشطون خلال أسبوع --}}
            <div class="rounded-2xl bg-white/95 border border-sky-100 shadow-sm p-3 sm:p-4 dark:bg-slate-900/95 dark:border-sky-500/35">
                <div class="flex items-center justify-between gap-2">
                    <div class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                        نشطون خلال الأسبوع
                    </div>
                    <div class="h-7 w-7 rounded-xl grid place-items-center bg-sky-500/10 text-sky-600 dark:bg-sky-500/20 dark:text-sky-200">
                        <i class="fa-solid fa-calendar-week text-[11px]"></i>
                    </div>
                </div>
                <div class="mt-2 text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white">
                    {{ $activeWeek }}
                </div>
                <div class="mt-1 text-[10px] sm:text-[11px] text-slate-500 dark:text-slate-400">
                    يساعدك تعرف من ما زال قريب من التيم ومن يبدأ يختفي.
                </div>
            </div>

            {{-- نشطون خلال شهر --}}
            <div class="rounded-2xl bg-white/95 border border-violet-100 shadow-sm p-3 sm:p-4 dark:bg-slate-900/95 dark:border-violet-500/35">
                <div class="flex items-center justify-between gap-2">
                    <div class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                        نشطون خلال الشهر
                    </div>
                    <div class="h-7 w-7 rounded-xl grid place-items-center bg-violet-500/10 text-violet-600 dark:bg-violet-500/20 dark:text-violet-200">
                        <i class="fa-solid fa-calendar-days text-[11px]"></i>
                    </div>
                </div>
                <div class="mt-2 text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white">
                    {{ $activeMonth }}
                </div>
                <div class="mt-1 text-[10px] sm:text-[11px] text-slate-500 dark:text-slate-400">
                    يعطي صورة بعيدة المدى عن درجة ارتباط الأعضاء بالتيم.
                </div>
            </div>
        </div>

        {{-- كروت مؤشرات الرسائل / التفاعل --}}
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
            <div class="rounded-2xl bg-gradient-to-br from-emerald-50 via-white to-emerald-50 border border-emerald-200 shadow-sm p-3 sm:p-4 dark:from-slate-900 dark:via-slate-950 dark:to-emerald-950/40 dark:border-emerald-500/40">
                <div class="flex items-center justify-between gap-2 mb-1">
                    <span class="text-[11px] sm:text-xs text-slate-700 dark:text-emerald-100">
                        حجم التفاعل اليوم
                    </span>
                    <i class="fa-solid fa-chart-line text-[12px] text-emerald-500 dark:text-emerald-300"></i>
                </div>
                <div class="text-2xl font-bold text-emerald-700 dark:text-emerald-200">
                    {{ $msgsToday }}
                </div>
                <p class="mt-1 text-[10px] sm:text-[11px] text-slate-500 dark:text-slate-300">
                    مجموع التفاعلات المسجلة اليوم (رسائل، إعجابات، مشاركات... حسب ما تربطه لاحقاً).
                </p>
            </div>

            <div class="rounded-2xl bg-gradient-to-br from-sky-50 via-white to-sky-50 border border-sky-200 shadow-sm p-3 sm:p-4 dark:from-slate-900 dark:via-slate-950 dark:to-sky-950/40 dark:border-sky-500/40">
                <div class="flex items-center justify-between gap-2 mb-1">
                    <span class="text-[11px] sm:text-xs text-slate-700 dark:text-sky-100">
                        حجم التفاعل هذا الأسبوع
                    </span>
                    <i class="fa-solid fa-chart-area text-[12px] text-sky-500 dark:text-sky-300"></i>
                </div>
                <div class="text-2xl font-bold text-sky-700 dark:text-sky-200">
                    {{ $msgsWeek }}
                </div>
                <p class="mt-1 text-[10px] sm:text-[11px] text-slate-500 dark:text-slate-300">
                    يقيس الضغط العام على التيم ودرجة حيوية الغرف والقنوات على مدار أسبوع.
                </p>
            </div>

            <div class="rounded-2xl bg-gradient-to-br from-violet-50 via-white to-violet-50 border border-violet-200 shadow-sm p-3 sm:p-4 dark:from-slate-900 dark:via-slate-950 dark:to-violet-950/40 dark:border-violet-500/40">
                <div class="flex items-center justify-between gap-2 mb-1">
                    <span class="text-[11px] sm:text-xs text-slate-700 dark:text-violet-100">
                        حجم التفاعل هذا الشهر
                    </span>
                    <i class="fa-solid fa-fire-flame-curved text-[12px] text-violet-500 dark:text-violet-300"></i>
                </div>
                <div class="text-2xl font-bold text-violet-700 dark:text-violet-200">
                    {{ $msgsMonth }}
                </div>
                <p class="mt-1 text-[10px] sm:text-[11px] text-slate-500 dark:text-slate-300">
                    يساعدك تفهم إن كان التفاعل في تصاعد، ثبات، أو يحتاج حملة إحياء.
                </p>
            </div>
        </div>

        {{-- قسم نجوم التفاعل --}}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
            {{-- لائحة أعلى الأعضاء تفاعلاً --}}
            <div class="lg:col-span-2 rounded-3xl bg-white/95 border border-slate-200 shadow-sm p-4 sm:p-5 dark:bg-slate-900/95 dark:border-slate-700">
                <div class="flex items-center justify-between gap-2 mb-3 sm:mb-4">
                    <div>
                        <h2 class="text-sm sm:text-base font-semibold text-slate-900 dark:text-white">
                            ⭐ نجوم التفاعل في الفترة الحالية
                        </h2>
                        <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300 mt-0.5">
                            هذه القائمة مخصّصة لأكثر الأعضاء تفاعلاً (تملأ لاحقاً من الكنترولر عبر
                            <span class="font-mono text-[10px] bg-slate-100 px-1.5 py-0.5 rounded dark:bg-slate-800">top_users</span>).
                        </p>
                    </div>
                </div>

                @if($topUsers->isEmpty())
                    <div class="rounded-2xl border border-dashed border-slate-300/80 p-4 text-center text-[11px] sm:text-xs text-slate-500 dark:border-slate-600 dark:text-slate-300">
                        لا توجد بيانات نجوم تفاعل حتى الآن. <br>
                        <span class="text-[10px] text-slate-400 dark:text-slate-500">
                            لاحقاً يمكنك تمرير مصفوفة top_users من الكنترولر (name, username, score, rank...).
                        </span>
                    </div>
                @else
                    <div class="space-y-2.5">
                        @foreach($topUsers as $index => $user)
                            @php
                                $place = $user['rank'] ?? ($index + 1);
                                $name  = $user['name'] ?? 'عضو بدون اسم';
                                $uname = $user['username'] ?? null;
                                $score = $user['score'] ?? 0;

                                $badgeClass = match($place) {
                                    1 => 'from-amber-400 to-amber-500 text-amber-950',
                                    2 => 'from-slate-200 to-slate-300 text-slate-900',
                                    3 => 'from-amber-700 to-amber-800 text-amber-50',
                                    default => 'from-slate-100 to-slate-200 text-slate-800'
                                };
                            @endphp
                            <div class="flex items-center gap-3 rounded-2xl bg-slate-50/90 border border-slate-200 px-3 py-2.5 text-[11px] sm:text-xs dark:bg-slate-900/80 dark:border-slate-700">
                                <div class="flex items-center justify-center h-9 w-9 rounded-full bg-gradient-to-br {{ $badgeClass }} font-bold">
                                    {{ $place }}
                                </div>
                                <div class="flex-1">
                                    <div class="font-semibold text-slate-900 dark:text-white">
                                        {{ $name }}
                                    </div>
                                    @if($uname)
                                        <div class="text-[10px] text-slate-500 dark:text-slate-400">
                                            {{ '@'.$uname }}
                                        </div>
                                    @endif
                                </div>
                                <div class="text-right">
                                    <div class="text-[11px] text-slate-500 dark:text-slate-300">
                                        نقاط التفاعل
                                    </div>
                                    <div class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
                                        {{ $score }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            {{-- صندوق ملاحظات المستشار / خطة تنشيط --}}
            <div class="rounded-3xl bg-gradient-to-b from-slate-900 via-slate-900/95 to-slate-950 border border-slate-700 text-slate-100 p-4 sm:p-5">
                <h3 class="text-sm sm:text-base font-semibold mb-2 flex items-center gap-2">
                    <span class="h-6 w-6 rounded-xl grid place-items-center bg-emerald-500/20 text-emerald-200">
                        <i class="fa-solid fa-lightbulb text-[11px]"></i>
                    </span>
                    دفتر ملاحظات المستشار
                </h3>
                <p class="text-[11px] sm:text-xs text-slate-300 mb-3">
                    استخدم هذه الزاوية كمرجع لك: ما هي قراراتك بناءً على التفاعل؟
                    من يحتاج جلسة تشجيع؟ من يستحق تكريم؟ وأين ستوجه حملات الإحياء القادمة؟
                </p>

                <ul class="space-y-1.5 text-[11px] sm:text-xs text-slate-200">
                    <li class="flex gap-2">
                        <span class="mt-0.5 text-emerald-300">
                            <i class="fa-solid fa-circle-check text-[8px]"></i>
                        </span>
                        <span>إذا كان التفاعل ضعيف أسبوعياً: فكر في فعالية ProActive خاصة أو مسابقة ترفع الحماس.</span>
                    </li>
                    <li class="flex gap-2">
                        <span class="mt-0.5 text-sky-300">
                            <i class="fa-solid fa-circle-check text-[8px]"></i>
                        </span>
                        <span>راقب الأعضاء الذين كانوا نجوم تفاعل ثم اختفوا فجأة… غالباً يحتاجون زيارة معنوية.</span>
                    </li>
                    <li class="flex gap-2">
                        <span class="mt-0.5 text-amber-300">
                            <i class="fa-solid fa-circle-check text-[8px]"></i>
                        </span>
                        <span>اجعل نجوم التفاعل شركاء معك في تنشيط باقي الأعضاء بدل أن يكونوا فقط متلقين.</span>
                    </li>
                </ul>

                <div class="mt-4 rounded-2xl bg-slate-800/80 border border-slate-700 px-3 py-2.5 text-[11px] text-slate-200">
                    <div class="flex items-center justify-between gap-2 mb-1">
                        <span>وضع نبض التفاعل الحالي:</span>
                        <span class="px-2 py-0.5 rounded-full bg-emerald-500/15 text-emerald-200 border border-emerald-500/40 text-[10px]">
                            {{ strtoupper($range) }}
                        </span>
                    </div>
                    <p class="text-[10px] text-slate-400">
                        لاحقاً يمكن ربط هذا الصندوق بتقييم تلقائي حسب الأرقام (ممتاز / جيد / يحتاج إنعاش...).
                    </p>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection