@php
    $user = auth()->user();
    $role = $user->membership_status ?? $user->role ?? 'member';

    switch ($role) {
        case 'super-admin': $layout = 'layouts.superadmin'; break;
        case 'advisor':     $layout = 'layouts.advisor'; break;
        case 'admin':
        case 'moderator':   $layout = 'layouts.admin'; break;
        default:            $layout = 'layouts.member';
    }

    $totalUpdates = count($rows);
    $sumAccepted  = array_sum(array_column($rows, 'accepted'));
    $sumPending   = array_sum(array_column($rows, 'pending'));
@endphp

@extends($layout)
@section('title','إحصائيات التحديثات الإلزامية')

@section('content')
<div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 py-6 rtl space-y-6">

    {{-- هيدر --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white shadow-xl border border-slate-800">
        <div class="pointer-events-none absolute -top-16 -left-10 w-44 h-44 rounded-full bg-sky-500/30 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-16 -right-10 w-52 h-52 rounded-full bg-emerald-500/25 blur-3xl"></div>

        <div class="relative p-5 sm:p-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-2xl sm:text-3xl font-extrabold">إحصائيات التحديثات الإلزامية</h1>
                <p class="text-xs sm:text-sm text-slate-200/80 mt-1">
                    نظرة تفصيلية على من قرأ التحديثات ومن لم يقرأ بعد، لكل إصدار من تحديثات النظام.
                </p>
            </div>
            <a href="{{ route('site-updates.admin.index') }}"
               class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-white/10 hover:bg-white/15 border border-white/20 text-xs font-semibold">
                <i class="fa-solid fa-sliders text-[11px]"></i>
                إدارة التحديثات
            </a>
        </div>
    </div>

    {{-- كروت إجمالية --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
        <div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 p-4">
            <div class="text-[11px] text-slate-500 mb-1">عدد التحديثات</div>
            <div class="text-2xl font-extrabold text-slate-900 dark:text-white">{{ $totalUpdates }}</div>
        </div>
        <div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 p-4">
            <div class="text-[11px] text-slate-500 mb-1">إجمالي الموافقات</div>
            <div class="text-2xl font-extrabold text-emerald-600 dark:text-emerald-300">{{ $sumAccepted }}</div>
        </div>
        <div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 p-4">
            <div class="text-[11px] text-slate-500 mb-1">إجمالي المتبقين (تقريباً)</div>
            <div class="text-2xl font-extrabold text-amber-600 dark:text-amber-300">{{ $sumPending }}</div>
        </div>
    </div>

    {{-- كرت لكل تحديث + قوائم الأعضاء --}}
    <div class="space-y-3">
        @forelse($rows as $row)
            @php
                /** @var \App\Models\SiteUpdate $up */
                $up            = $row['update'];
                $total         = $row['total'];
                $accepted      = $row['accepted'];
                $pending       = $row['pending'];
                $percent       = $row['percent'];
                $acceptedUsers = $row['acceptedUsers'];
                $pendingUsers  = $row['pendingUsers'];
            @endphp

            <div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 shadow-sm p-4 sm:p-5">
                <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
                    <div class="min-w-0">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-[11px] text-slate-400">#{{ $up->id }}</span>
                            <span class="text-[11px] text-slate-400">v{{ $up->version }}</span>
                        </div>
                        <h2 class="text-sm sm:text-base font-bold text-slate-900 dark:text-white">
                            {{ $up->title }}
                        </h2>
                        @if($up->goal)
                            <div class="mt-1 text-[11px] text-slate-500 dark:text-slate-300">
                                🎯 {{ $up->goal }}
                            </div>
                        @endif
                        <div class="mt-1 text-[11px] text-slate-500 dark:text-slate-400">
                            Audience:
                            <span class="font-semibold">{{ $up->audience_type }}</span>
                            @if($up->audience_type === 'custom' && is_array($up->audience_membership))
                                — {{ implode(', ', $up->audience_membership) }}
                            @endif
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2 text-[11px]">
                        <span class="px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-200">
                            موافقين: <b>{{ $accepted }}</b>
                        </span>
                        <span class="px-2.5 py-1 rounded-full bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-200">
                            متبقين تقريباً: <b>{{ $pending }}</b>
                        </span>
                        <span class="px-2.5 py-1 rounded-full bg-sky-50 text-sky-700 dark:bg-sky-900/30 dark:text-sky-200">
                            نسبة الموافقة: <b>{{ $percent }}%</b>
                        </span>
                    </div>
                </div>

                {{-- صورة التحديث إن وجدت --}}
                @if($up->image_path)
                    <div class="mt-3 rounded-2xl overflow-hidden border border-slate-200 dark:border-slate-700">
                        <img src="{{ asset($up->image_path) }}" alt="" class="w-full max-h-56 object-cover">
                    </div>
                @endif

                {{-- قوائم الأعضاء --}}
                <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3 text-[12px]">

                    {{-- الأعضاء الذين وافقوا --}}
                    <div class="rounded-2xl border border-emerald-100 dark:border-emerald-800 bg-emerald-50/60 dark:bg-emerald-900/10 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <span class="font-semibold text-emerald-800 dark:text-emerald-200">
                                ✅ الأعضاء الذين وافقوا ({{ $acceptedUsers->count() }})
                            </span>
                        </div>

                        @if($acceptedUsers->isEmpty())
                            <div class="text-emerald-700/80 dark:text-emerald-200/80 text-[11px]">
                                لا يوجد أي عضو وافق حتى الآن.
                            </div>
                        @else
                            <div class="space-y-1.5 max-h-40 overflow-y-auto">
                                @foreach($acceptedUsers as $u)
                                    <div class="flex items-center justify-between gap-2">
                                        <div class="min-w-0">
                                            <div class="font-semibold text-slate-900 dark:text-slate-50 truncate">
                                                {{ $u->name ?? $u->username }} 
                                                <span class="text-[10px] text-slate-400">
                                                    (#{{ $u->id }})
                                                </span>
                                            </div>
                                            <div class="text-[10px] text-slate-500 dark:text-slate-400">
                                                {{ $u->membership_status }} 
                                                @if($u->accepted_at)
                                                    • {{ \Carbon\Carbon::parse($u->accepted_at)->format('Y-m-d H:i') }}
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    {{-- الأعضاء الذين لم يوافقوا بعد --}}
                    <div class="rounded-2xl border border-amber-100 dark:border-amber-800 bg-amber-50/60 dark:bg-amber-900/10 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <span class="font-semibold text-amber-800 dark:text-amber-200">
                                ⏳ الأعضاء الذين لم يوافقوا بعد ({{ $pendingUsers->count() }})
                            </span>
                        </div>

                        @if($pendingUsers->isEmpty())
                            <div class="text-amber-800/80 dark:text-amber-200/80 text-[11px]">
                                لا يوجد أعضاء متبقين، الجميع وافق على هذا التحديث.
                            </div>
                        @else
                            <div class="space-y-1.5 max-h-40 overflow-y-auto">
                                @foreach($pendingUsers as $u)
                                    <div class="flex items-center justify-between gap-2">
                                        <div class="min-w-0">
                                            <div class="font-semibold text-slate-900 dark:text-slate-50 truncate">
                                                {{ $u->name ?? $u->username }} 
                                                <span class="text-[10px] text-slate-400">
                                                    (#{{ $u->id }})
                                                </span>
                                            </div>
                                            <div class="text-[10px] text-slate-500 dark:text-slate-400">
                                                {{ $u->membership_status }}
                                            </div>
                                        </div>
                                        {{-- مستقبلاً ممكن تحط زر "إرسال إشعار" هنا --}}
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>

                </div>

            </div>
        @empty
            <div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 p-6 text-center text-sm text-slate-500 dark:text-slate-400">
                لا توجد تحديثات حالياً.
            </div>
        @endforelse
    </div>

</div>
@endsection