{{-- resources/views/superadmin/falcon-room/team-stability/index.blade.php --}}
@extends('layouts.superadmin')

@section('title', 'لوحة استقرار الفرق')
@section('page-title', '🧭 لوحة استقرار الفرق — Team Stability Board')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-50 via-slate-100 to-slate-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 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-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-24 -left-16 w-56 h-56 rounded-full bg-indigo-500/15 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-20 w-72 h-72 rounded-full bg-fuchsia-400/15 blur-3xl"></div>

            <div class="relative px-4 sm:px-6 lg:px-8 py-5 sm:py-6 lg:py-7 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div class="space-y-2">
                    <div class="inline-flex items-center gap-2 rounded-full bg-indigo-50 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-200 px-3 py-1 text-xs sm:text-[13px] font-semibold">
                        <i class="fa-solid fa-sitemap text-xs"></i>
                        <span>مراقبة استقرار الفرق و حركة الأعضاء</span>
                    </div>

                    <h1 class="text-2xl sm:text-3xl font-black tracking-tight text-slate-900 dark:text-slate-50">
                        لوحة استقرار الفرق
                    </h1>

                    <p class="text-sm sm:text-[15px] text-slate-600 dark:text-slate-300 max-w-3xl">
                        من هنا الإدارة العليا بتشوف نبض الفرق: كم عضو نشط، كم واحد جديد، مين غادر،
                        وكيف توزيع الرتب داخل جيش الوفاء الذهبي خلال آخر {{ $days }} يوم.
                    </p>

                    <p class="text-xs sm:text-[13px] text-slate-500 dark:text-slate-400">
                        الفترة: من <span class="font-semibold">{{ $from->format('Y-m-d') }}</span>
                        إلى <span class="font-semibold">{{ $now->format('Y-m-d H:i') }}</span>
                    </p>
                </div>

                {{-- فيلتر الأيام + مؤشر الاستقرار --}}
                <div class="w-full lg:w-72 space-y-3">
                    <form method="GET" class="flex items-center gap-2 justify-end">
                        <label class="text-[11px] text-slate-500 dark:text-slate-400">الفترة:</label>
                        <select name="days"
                                onchange="this.form.submit()"
                                class="rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-[12px] text-slate-700 dark:text-slate-200 px-3 py-1.5">
                            <option value="7"  {{ $days == 7  ? 'selected' : '' }}>آخر 7 أيام</option>
                            <option value="14" {{ $days == 14 ? 'selected' : '' }}>آخر 14 يوم</option>
                            <option value="30" {{ $days == 30 ? 'selected' : '' }}>آخر 30 يوم</option>
                            <option value="60" {{ $days == 60 ? 'selected' : '' }}>آخر 60 يوم</option>
                        </select>
                    </form>

                    <div class="rounded-2xl bg-slate-900 text-slate-50 px-4 py-3 flex items-center justify-between">
                        <div class="flex flex-col">
                            <span class="text-[11px] text-slate-300">مؤشر استقرار الفرق</span>
                            <span class="text-2xl font-black">{{ $stabilityScore }}<span class="text-sm font-semibold">%</span></span>
                        </div>
                        <div class="flex flex-col items-end gap-1">
                            <div class="w-20 h-2 rounded-full bg-slate-700 overflow-hidden">
                                <div class="h-full rounded-full bg-emerald-400" style="width: {{ $stabilityScore }}%"></div>
                            </div>
                            <span class="text-[10px] text-slate-300">
                                كل ما اقترب من 100% كان الفريق ثابت وهادئ ✅
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- كروت الأرقام الأساسية --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
            <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-700 px-4 py-3">
                <p class="text-[11px] text-slate-600 dark:text-slate-300 mb-1">الأعضاء النشطين حالياً</p>
                <p class="text-2xl font-black text-slate-900 dark:text-slate-50">{{ $totalActive }}</p>
            </div>

            <div class="rounded-2xl bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-100 dark:border-emerald-700 px-4 py-3">
                <p class="text-[11px] text-emerald-700 dark:text-emerald-200 mb-1">أعضاء جدد في الفترة</p>
                <p class="text-2xl font-black text-emerald-700 dark:text-emerald-200">{{ $newMembersCount }}</p>
            </div>

            <div class="rounded-2xl bg-rose-50 dark:bg-rose-900/30 border border-rose-100 dark:border-rose-700 px-4 py-3">
                <p class="text-[11px] text-rose-700 dark:text-rose-200 mb-1">أعضاء غادروا في الفترة</p>
                <p class="text-2xl font-black text-rose-700 dark:text-rose-200">{{ $leftMembersCount }}</p>
            </div>

            <div class="rounded-2xl bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-100 dark:border-indigo-700 px-4 py-3">
                <p class="text-[11px] text-indigo-700 dark:text-indigo-200 mb-1">عدد الرتب المختلفة</p>
                <p class="text-2xl font-black text-indigo-700 dark:text-indigo-200">{{ $rankDistribution->count() }}</p>
            </div>
        </div>

        {{-- توزيع الرتب --}}
        <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
            <div class="px-4 sm:px-5 py-3 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
                <h2 class="text-sm sm:text-base font-bold text-slate-900 dark:text-slate-50 flex items-center gap-2">
                    <i class="fa-solid fa-users-gear text-xs"></i>
                    <span>توزيع الأعضاء حسب الرتبة (أعضاء نشطين فقط)</span>
                </h2>
            </div>

            @if($rankDistribution->isEmpty())
                <div class="px-4 sm:px-5 py-6 text-center text-slate-500 dark:text-slate-400 text-sm">
                    لا توجد بيانات كافية لعرض توزيع الرتب حالياً.
                </div>
            @else
                <div class="px-4 sm:px-5 py-4 space-y-2">
                    @foreach($rankDistribution as $row)
                        @php
                            $label = match($row->membership_status) {
                                'super-admin' => 'الإدارة العليا',
                                'advisor'     => 'المستشارين',
                                'admin'       => 'الإداريين',
                                'moderator'   => 'المشرفين',
                                'official'    => 'أعضاء رسميين',
                                'beta'        => 'أعضاء بيتا',
                                default       => 'أعضاء عاديين',
                            };
                            $percent = $totalActive > 0 ? round(($row->total / $totalActive) * 100) : 0;
                        @endphp
                        <div class="flex items-center gap-3">
                            <div class="w-28 text-[12px] text-slate-600 dark:text-slate-300">
                                {{ $label }}
                            </div>
                            <div class="flex-1 h-2 rounded-full bg-slate-100 dark:bg-slate-800 overflow-hidden">
                                <div class="h-full rounded-full bg-indigo-500" style="width: {{ $percent }}%"></div>
                            </div>
                            <div class="w-14 text-right text-[11px] text-slate-600 dark:text-slate-300">
                                {{ $row->total }}<span class="text-slate-400"> / {{ $percent }}%</span>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        {{-- قسم الأعضاء الجدد + المغادرين --}}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            {{-- الأعضاء الجدد --}}
            <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-emerald-100 dark:border-emerald-800/70 shadow-sm overflow-hidden">
                <div class="px-4 sm:px-5 py-3 border-b border-emerald-100/70 dark:border-emerald-900/60 flex items-center justify-between">
                    <h2 class="text-sm sm:text-base font-bold text-emerald-700 dark:text-emerald-200 flex items-center gap-2">
                        <i class="fa-solid fa-user-plus text-xs"></i>
                        <span>أعضاء انضمّوا في الفترة</span>
                    </h2>
                    <span class="text-[11px] text-emerald-700/80 dark:text-emerald-200/80">المجموع: {{ $newMembersCount }}</span>
                </div>

                @if($newMembers->isEmpty())
                    <div class="px-4 sm:px-5 py-5 text-sm text-slate-500 dark:text-slate-400">
                        لا يوجد أعضاء جدد في هذه الفترة.
                    </div>
                @else
                    <ul class="divide-y divide-emerald-50 dark:divide-emerald-900/40">
                        @foreach($newMembers as $member)
                            @php
                                $photo = $member->avatar_url
                                    ?? $member->profile_photo_url
                                    ?? ($member->profile_photo_path ?? null
                                            ? asset('storage/'.$member->profile_photo_path)
                                            : null);
                                $rankLabel = $member->membership_status ?? 'member';
                            @endphp
                            <li class="px-4 sm:px-5 py-3 flex items-center gap-3 hover:bg-emerald-50/60 dark:hover:bg-emerald-900/20 transition-colors">
                                <div class="flex-shrink-0">
                                    @if($photo)
                                        <img src="{{ $photo }}" alt="{{ $member->name }}" class="h-9 w-9 rounded-full object-cover border border-white/70 shadow-sm">
                                    @else
                                        <div class="h-9 w-9 rounded-full bg-emerald-500/80 text-white grid place-items-center text-xs font-bold">
                                            {{ mb_substr($member->name, 0, 1) }}
                                        </div>
                                    @endif
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-[13px] font-semibold text-slate-900 dark:text-slate-50 truncate">
                                        {{ $member->name }} <span class="text-[11px] text-slate-400">#{{ $member->id }}</span>
                                    </p>
                                    <p class="text-[11px] text-slate-500 dark:text-slate-400">
                                        رتبة: {{ $rankLabel }} • انضم {{ optional($member->created_at)->diffForHumans() }}
                                    </p>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>

            {{-- الأعضاء اللي غادروا --}}
            <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-rose-100 dark:border-rose-800/70 shadow-sm overflow-hidden">
                <div class="px-4 sm:px-5 py-3 border-b border-rose-100/70 dark:border-rose-900/60 flex items-center justify-between">
                    <h2 class="text-sm sm:text-base font-bold text-rose-700 dark:text-rose-200 flex items-center gap-2">
                        <i class="fa-solid fa-user-minus text-xs"></i>
                        <span>أعضاء غادروا في الفترة</span>
                    </h2>
                    <span class="text-[11px] text-rose-700/80 dark:text-rose-200/80">المجموع: {{ $leftMembersCount }}</span>
                </div>

                @if($leftMembers->isEmpty())
                    <div class="px-4 sm:px-5 py-5 text-sm text-slate-500 dark:text-slate-400">
                        لا يوجد أعضاء غادروا في هذه الفترة 🎉
                    </div>
                @else
                    <ul class="divide-y divide-rose-50 dark:divide-rose-900/40">
                        @foreach($leftMembers as $member)
                            @php
                                $photo = $member->avatar_url
                                    ?? $member->profile_photo_url
                                    ?? ($member->profile_photo_path ?? null
                                            ? asset('storage/'.$member->profile_photo_path)
                                            : null);
                                $rankLabel = $member->membership_status ?? 'member';
                                $leftAt = $member->left_at ?? $member->updated_at;
                            @endphp
                            <li class="px-4 sm:px-5 py-3 flex items-center gap-3 hover:bg-rose-50/60 dark:hover:bg-rose-900/20 transition-colors">
                                <div class="flex-shrink-0">
                                    @if($photo)
                                        <img src="{{ $photo }}" alt="{{ $member->name }}" class="h-9 w-9 rounded-full object-cover border border-white/70 shadow-sm">
                                    @else
                                        <div class="h-9 w-9 rounded-full bg-rose-500/80 text-white grid place-items-center text-xs font-bold">
                                            {{ mb_substr($member->name, 0, 1) }}
                                        </div>
                                    @endif
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-[13px] font-semibold text-slate-900 dark:text-slate-50 truncate">
                                        {{ $member->name }} <span class="text-[11px] text-slate-400">#{{ $member->id }}</span>
                                    </p>
                                    <p class="text-[11px] text-slate-500 dark:text-slate-400">
                                        آخر رتبة: {{ $rankLabel }}
                                        @if($leftAt)
                                            • غادر {{ $leftAt->diffForHumans() }}
                                        @endif
                                    </p>
                                    @if(!empty($member->leave_reason))
                                        <p class="text-[11px] text-slate-400 line-clamp-2 mt-0.5">
                                            سبب الخروج: {{ $member->leave_reason }}
                                        </p>
                                    @endif
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>

        {{-- تايملاين الحركات الأساسية --}}
        <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
            <div class="px-4 sm:px-5 py-3 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
                <h2 class="text-sm sm:text-base font-bold text-slate-900 dark:text-slate-50 flex items-center gap-2">
                    <i class="fa-solid fa-timeline text-xs"></i>
                    <span>حركة الأعضاء — Timeline مبسّط</span>
                </h2>
                <span class="text-[11px] text-slate-500 dark:text-slate-400">
                    يعرض انضمام و خروج الأعضاء خلال الفترة
                </span>
            </div>

            @if($timeline->isEmpty())
                <div class="px-4 sm:px-5 py-6 text-center text-slate-500 dark:text-slate-400 text-sm">
                    لا توجد حركات أعضاء في هذه الفترة.
                </div>
            @else
                <div class="px-4 sm:px-5 py-4 space-y-3">
                    @foreach($timeline as $item)
                        @php
                            /** @var \App\Models\User $user */
                            $user = $item['user'];
                            $photo = $user->avatar_url
                                ?? $user->profile_photo_url
                                ?? ($user->profile_photo_path ?? null
                                        ? asset('storage/'.$user->profile_photo_path)
                                        : null);
                            $isJoin = $item['type'] === 'join';
                        @endphp
                        <div class="flex items-start gap-3">
                            <div class="flex-shrink-0 mt-0.5">
                                @if($photo)
                                    <img src="{{ $photo }}" alt="{{ $user->name }}" class="h-8 w-8 rounded-full object-cover border border-white/70 shadow-sm">
                                @else
                                    <div class="h-8 w-8 rounded-full {{ $isJoin ? 'bg-emerald-500/80' : 'bg-rose-500/80' }} text-white grid place-items-center text-[11px] font-bold">
                                        {{ mb_substr($user->name, 0, 1) }}
                                    </div>
                                @endif
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex flex-wrap items-center gap-2">
                                    <span class="text-[13px] font-semibold text-slate-900 dark:text-slate-50 truncate">
                                        {{ $user->name }} <span class="text-[11px] text-slate-400">#{{ $user->id }}</span>
                                    </span>
                                    <span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px]
                                                 {{ $isJoin
                                                     ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200'
                                                     : 'bg-rose-50 text-rose-700 dark:bg-rose-900/40 dark:text-rose-200' }}">
                                        <i class="fa-solid {{ $isJoin ? 'fa-arrow-trend-up' : 'fa-arrow-right-from-bracket' }} text-[9px]"></i>
                                        <span>{{ $isJoin ? 'انضمام' : 'خروج' }}</span>
                                    </span>
                                </div>
                                <p class="text-[12px] text-slate-600 dark:text-slate-300 mt-0.5">
                                    {{ $item['title'] }}
                                </p>
                                @if(!empty($item['description']))
                                    <p class="text-[11px] text-slate-400 mt-0.5 line-clamp-2">
                                        {{ $item['description'] }}
                                    </p>
                                @endif
                            </div>
                            @if(!empty($item['created_at']))
                                <div class="text-[11px] text-slate-500 dark:text-slate-400 flex flex-col items-end gap-0.5">
                                    <span>{{ $item['created_at']->diffForHumans() }}</span>
                                    <span class="text-[10px] text-slate-400">{{ $item['created_at']->format('Y-m-d H:i') }}</span>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

    </div>
</div>
@endsection