@extends('layouts.superadmin')

@section('title', 'مركز القضايا الحرجة')
@section('page-title', '🧨 مركز القضايا الحرجة — Critical Cases Center')

@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-red-500/15 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-20 w-72 h-72 rounded-full bg-amber-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-red-50 text-red-700 dark:bg-red-900/40 dark:text-red-200 px-3 py-1 text-xs sm:text-[13px] font-semibold">
                        <i class="fa-solid fa-radiation 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">
                        هنا تتابع الأعضاء اللي ممكن نخسرهم: غياب متكرر أو طويل، مخالفات قوية، ملفات MemberCare مفتوحة،
                        وكل حالة تحتاج تدخل سريع من الإدارة العليا.
                    </p>

                    <p class="text-xs sm:text-[13px] text-slate-500 dark:text-slate-400">
                        تاريخ اليوم:
                        <span class="font-semibold">{{ $today->format('Y-m-d') }}</span>
                        — آخر تحديث:
                        {{ $now->format('H:i') }}
                    </p>
                </div>

                {{-- كروت رقمية سريعة --}}
                <div class="w-full lg:w-72 grid grid-cols-2 gap-2">
                    <div class="rounded-2xl bg-rose-50/80 dark:bg-rose-900/30 border border-rose-100 dark:border-rose-700 px-3 py-3">
                        <p class="text-[11px] text-rose-700 dark:text-rose-200 mb-1">ملفات MemberCare الدرجة / المفتوحة</p>
                        <p class="text-2xl font-black text-rose-700 dark:text-rose-200">{{ $stats['membercare_open'] }}</p>
                    </div>
                    <div class="rounded-2xl bg-amber-50/80 dark:bg-amber-900/30 border border-amber-100 dark:border-amber-700 px-3 py-3">
                        <p class="text-[11px] text-amber-700 dark:text-amber-200 mb-1">غيابات طويلة / حساسة (+3 أيام)</p>
                        <p class="text-2xl font-black text-amber-700 dark:text-amber-200">{{ $stats['high_absence'] }}</p>
                    </div>
                    <div class="rounded-2xl bg-red-50/80 dark:bg-red-900/30 border border-red-100 dark:border-red-700 px-3 py-3">
                        <p class="text-[11px] text-red-700 dark:text-red-200 mb-1">مخالفات خطرة (خصم نقاط)</p>
                        <p class="text-2xl font-black text-red-700 dark:text-red-200">{{ $stats['critical_violations'] }}</p>
                    </div>
                    <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 px-3 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">{{ $stats['total_risky_members'] }}</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- فلاتر بسيطة للأقسام --}}
        <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-sm px-4 sm:px-5 py-3 flex flex-wrap items-center gap-2 sm:gap-3">
            <span class="text-[12px] sm:text-xs font-medium text-slate-500 dark:text-slate-400">عرض القضايا حسب النوع:</span>

            @php
                $types = [
                    ''            => ['label' => 'الكل',          'icon' => 'fa-layer-group'],
                    'membercare'  => ['label' => 'MemberCare',   'icon' => 'fa-hand-holding-heart'],
                    'absence'     => ['label' => 'الغياب',       'icon' => 'fa-user-clock'],
                    'violation'   => ['label' => 'المخالفات',    'icon' => 'fa-gavel'],
                ];
            @endphp

            @foreach($types as $key => $meta)
                @php $isActive = $type === $key || ($key === '' && !$type); @endphp
                <a href="{{ route('superadmin.falcon-room.critical-cases.index', array_filter(['type' => $key])) }}"
                   class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-[11px] sm:text-xs
                          {{ $isActive
                            ? 'border-red-500/70 bg-red-500 text-white'
                            : 'border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50/80 dark:hover:bg-slate-800/60' }}">
                    <i class="fa-solid {{ $meta['icon'] }} text-[10px]"></i>
                    <span>{{ $meta['label'] }}</span>
                </a>
            @endforeach
        </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-fire text-xs text-red-500"></i>
                    <span>القضايا الحرجة المسجّلة اليوم</span>
                </h2>
                <span class="text-[11px] text-slate-500 dark:text-slate-400">
                    المجموع: {{ $criticalToday->count() }}
                </span>
            </div>

            @if($criticalToday->isEmpty())
                <div class="px-4 sm:px-5 py-10 text-center text-slate-500 dark:text-slate-400 text-sm">
                    لا توجد قضايا درجة مسجّلة اليوم 🎉
                </div>
            @else
                <div class="divide-y divide-slate-100 dark:divide-slate-800">
                    @foreach($criticalToday as $item)
                        @php
                            $user = $item['user'] ?? null;

                            $color =
                                $item['priority'] === 'critical' ? 'red' :
                                ($item['priority'] === 'high' ? 'orange' : 'amber');

                            $typeLabel = match($item['type']) {
                                'membercare' => 'ملف MemberCare',
                                'absence'    => 'غياب / عذر',
                                'violation'  => 'مخالفة / إنذار',
                                default      => 'قضية',
                            };

                            $rank = $user->membership_status ?? null;
                            $rankLabel = match($rank) {
                                'super-admin' => 'إدارة عليا',
                                'advisor'     => 'مستشار',
                                'admin'       => 'إداري',
                                'moderator'   => 'مشرف',
                                'official'    => 'عضو رسمي',
                                'beta'        => 'عضو تجريبي',
                                default       => 'عضو',
                            };

                            $avatarUrl = $user?->profile_photo_url
                                ?? ($user ? 'https://ui-avatars.com/api/?name=' . urlencode($user->name) . '&background=e11d48&color=fff&size=64' : null);
                        @endphp

                        <div class="px-4 sm:px-5 py-3 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 hover:bg-slate-50/80 dark:hover:bg-slate-800/60 transition-colors">
                            <div class="flex items-start gap-3 flex-1">
                                {{-- صورة العضو + الاسم والرتبة --}}
                                <div class="mt-0.5">
                                    @if($user)
                                        <div class="h-9 w-9 rounded-full overflow-hidden border border-slate-200 dark:border-slate-600 bg-slate-200/60 flex items-center justify-center text-xs font-bold text-slate-700">
                                            @if($avatarUrl)
                                                <img src="{{ $avatarUrl }}" alt="{{ $user->name }}" class="h-full w-full object-cover">
                                            @else
                                                <span>{{ mb_substr($user->name, 0, 1) }}</span>
                                            @endif
                                        </div>
                                    @else
                                        <span class="inline-flex items-center justify-center h-9 w-9 rounded-full bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-slate-200 text-xs">
                                            <i class="fa-solid fa-user"></i>
                                        </span>
                                    @endif
                                </div>

                                <div class="space-y-1 flex-1 min-w-0">
                                    <div class="flex flex-wrap items-center gap-1.5 text-[11px] sm:text-[12px]">
                                        <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 dark:bg-slate-800/80 text-slate-700 dark:text-slate-200 px-2 py-0.5">
                                            <i class="fa-solid fa-user text-[9px]"></i>
                                            <span>{{ $user->name ?? ('عضو #' . ($item['member_id'] ?? '-')) }}</span>
                                        </span>

                                        @if($user)
                                            <span class="inline-flex items-center gap-1 rounded-full bg-slate-50 dark:bg-slate-900/70 text-slate-600 dark:text-slate-300 px-2 py-0.5">
                                                <i class="fa-solid fa-shield-halved text-[9px]"></i>
                                                <span>{{ $rankLabel }}</span>
                                            </span>
                                        @endif

                                        <span class="inline-flex items-center gap-1 rounded-full bg-{{ $color }}-50 dark:bg-{{ $color }}-900/40 text-{{ $color }}-700 dark:text-{{ $color }}-200 px-2 py-0.5">
                                            <i class="fa-solid fa-bolt text-[9px]"></i>
                                            <span>{{ ucfirst($item['priority']) }}</span>
                                        </span>

                                        <span class="inline-flex items-center gap-1 rounded-full bg-slate-50 dark:bg-slate-900/70 text-slate-600 dark:text-slate-300 px-2 py-0.5">
                                            <i class="fa-solid fa-tag text-[9px]"></i>
                                            <span>{{ $typeLabel }}</span>
                                        </span>
                                    </div>

                                    <p class="text-[13px] font-semibold text-slate-900 dark:text-slate-50 line-clamp-1">
                                        {{ $item['title'] }}
                                    </p>
                                    @if(!empty($item['description']))
                                        <p class="text-[12px] text-slate-500 dark:text-slate-400 line-clamp-2">
                                            {{ $item['description'] }}
                                        </p>
                                    @endif
                                </div>
                            </div>

                            <div class="flex flex-col items-start sm:items-end justify-between gap-1 text-[11px] text-slate-500 dark:text-slate-400">
                                @if(!empty($item['created_at']))
                                    <div class="flex items-center gap-1">
                                        <i class="fa-regular fa-clock text-[10px]"></i>
                                        <span>{{ $item['created_at']->diffForHumans() }}</span>
                                    </div>
                                @endif

                                <div class="flex flex-wrap gap-1.5">
                                    <a href="#"
                                       class="inline-flex items-center gap-1 rounded-full bg-slate-100 dark:bg-slate-800/80 text-slate-700 dark:text-slate-200 px-2.5 py-1 hover:bg-slate-200/90 dark:hover:bg-slate-700/80 transition">
                                        <i class="fa-solid fa-eye text-[9px]"></i>
                                        <span>فتح ملف العضو</span>
                                    </a>
                                    <a href="#"
                                       class="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200 px-2.5 py-1 hover:bg-emerald-500/15 dark:hover:bg-emerald-900/60 transition">
                                        <i class="fa-solid fa-comments text-[9px]"></i>
                                        <span>تحويل لـ MemberCare</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

    </div>
</div>
@endsection