@php
    /** @var \App\Models\User $user */
    $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';
    }

    /** @var \Illuminate\Support\Collection|\Illuminate\Pagination\LengthAwarePaginator $notes */
    $notes = $notes ?? collect();
@endphp

@extends($layout)

@section('title', 'ملاحظات إدارية عن الدعوات')

@section('content')

@php
    if (is_array($notes)) {
        $notes = collect($notes);
    }
@endphp
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black 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-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-emerald-400/25 shadow-2xl shadow-emerald-500/10">
            <div class="pointer-events-none absolute -top-24 -right-10 w-64 h-64 rounded-full bg-emerald-500/25 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-28 -left-10 w-72 h-72 rounded-full bg-cyan-500/20 blur-3xl"></div>

            <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
                <div class="space-y-3 max-w-xl">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-emerald-300/40 text-[11px] text-emerald-100">
                        <i class="fa-solid fa-note-sticky text-[10px]"></i>
                        <span>ملاحظات إدارية — نظام الدعوات</span>
                    </div>
                    <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
                        ملاحظات الإدارة حول <span class="text-emerald-300">دعواتك</span>
                    </h1>
                    <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
                        هنا تظهر الرسائل الرسمية من الإدارة بخصوص طريقة استخدام رابط الدعوة، جودة الأعضاء الذين قمت بدعوتهم،
                        وتنبيهات أو مديح عن مساهمتك في نمو <span class="text-emerald-300 font-semibold">جيش الوفاء الذهبي</span>.
                    </p>
                </div>

                <div class="w-full lg:w-auto">
                    <div class="grid grid-cols-2 gap-3 text-center">
                        <div class="rounded-2xl bg-white/5 border border-white/10 px-3 py-3">
                            <div class="text-[11px] text-slate-300/80 mb-1">إجمالي الملاحظات</div>
                            <div class="text-xl sm:text-2xl font-extrabold text-emerald-300">
                                {{ $notes instanceof \Illuminate\Pagination\LengthAwarePaginator ? $notes->total() : $notes->count() }}
                            </div>
                        </div>
                        <div class="rounded-2xl bg-amber-500/10 border border-amber-300/60 px-3 py-3">
                            <div class="text-[11px] text-amber-100/90 mb-1">ملاحظات تحتاج انتباه</div>
                            <div class="text-xl sm:text-2xl font-extrabold text-amber-200">
                                {{ (int)($highlightCount ?? 0) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @if(session('success'))
                <div class="relative px-5 pb-4">
                    <div class="mt-2 inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl bg-emerald-500/15 border border-emerald-400/50 text-[11px] text-emerald-100">
                        <i class="fa-solid fa-circle-check text-[10px]"></i>
                        <span>{{ session('success') }}</span>
                    </div>
                </div>
            @endif
        </div>

        {{-- فاصل بسيط --}}
        <div class="relative">
            <div class="h-px bg-gradient-to-l from-transparent via-emerald-400/70 to-transparent"></div>
        </div>

        {{-- توضيح قصير --}}
        <div class="rounded-2xl bg-slate-900/80 border border-white/10 text-slate-100 text-[12px] sm:text-[13px] px-4 sm:px-5 py-3 leading-relaxed">
            <p>
                <span class="font-semibold text-emerald-300">تنبيه مهم:</span>
                بعض الملاحظات قد تتعلّق بجودة الأشخاص الذين تدعوهم، تفاعلهم مع البرنامج،
                أو قرارات الإدارة بالموافقة / الرفض على احتساب دعوات معيّنة. القراءة الجيدة لهذه الملاحظات تساعدك
                على تحسين نوعية الدعوات القادمة.
            </p>
        </div>

        {{-- الملاحظات --}}
        @if($notes->isEmpty())
            <div class="rounded-3xl border border-dashed border-slate-600/70 bg-slate-950/70 px-6 py-10 text-center">
                <div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-slate-800 text-slate-200 mb-3">
                    <i class="fa-regular fa-note-sticky"></i>
                </div>
                <div class="text-sm sm:text-base font-semibold text-white mb-1">
                    لا توجد ملاحظات إدارية حتى الآن
                </div>
                <div class="text-[12px] text-slate-300/80 max-w-md mx-auto">
                    عندما تضيف الإدارة ملاحظات على نظام الدعوات الخاص بك، ستظهر هنا بشكل منظم،
                    لتعرف أين تبرع وأين تحتاج إلى تحسين.
                </div>
            </div>
        @else
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
                @foreach($notes as $note)
                    @php
                        /** @var \App\Models\InviteNote|null $note */
                        $type      = $note->type ?? 'info'; // info / warning / praise
                        $isWarning = $type === 'warning';
                        $isPraise  = $type === 'praise';
                        $badgeClass = $isWarning
                            ? 'bg-rose-500/15 border-rose-400/60 text-rose-100'
                            : ($isPraise
                                ? 'bg-emerald-500/15 border-emerald-400/60 text-emerald-100'
                                : 'bg-sky-500/15 border-sky-400/60 text-sky-100');
                        $badgeText = $isWarning
                            ? 'تنبيه إداري'
                            : ($isPraise ? 'إشادة من الإدارة' : 'ملاحظة عامة');
                    @endphp

                    <div class="rounded-3xl bg-gradient-to-b from-slate-900 to-black border border-white/10 shadow-lg hover:shadow-2xl transition overflow-hidden">
                        <div class="p-4 sm:p-5 space-y-3">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0 space-y-1.5">
                                    <div class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full text-[10px] font-semibold {{ $badgeClass }}">
                                        <i class="fa-solid fa-circle-info text-[9px]"></i>
                                        <span>{{ $badgeText }}</span>
                                    </div>
                                    <h2 class="text-sm sm:text-[15px] font-bold text-white line-clamp-2">
                                        {{ $note->title ?? 'ملاحظة بدون عنوان' }}
                                    </h2>
                                </div>

                                <div class="text-right space-y-1">
                                    <div class="text-[11px] text-slate-300/80">
                                        {{ optional($note->created_at)->diffForHumans() ?? '—' }}
                                    </div>
                                    @if($note->createdBy?->name)
                                        <div class="text-[11px] text-slate-400">
                                            من: <span class="font-semibold text-slate-100">
                                                {{ $note->createdBy->name }}
                                            </span>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <p class="text-[12px] sm:text-[13px] text-slate-200/90 leading-relaxed whitespace-pre-line">
                                {{ $note->body ?? '—' }}
                            </p>

                            @if(!empty($note->admin_hint))
                                <div class="mt-1 rounded-2xl bg-yellow-500/5 border border-yellow-400/40 px-3 py-2 text-[11px] text-yellow-100 leading-relaxed">
                                    <span class="font-semibold">نصيحة عملية:</span>
                                    <span>{{ $note->admin_hint }}</span>
                                </div>
                            @endif

                            @if(isset($note->related_invites_count) && $note->related_invites_count > 0)
                                <div class="flex items-center justify-between text-[11px] text-slate-300/85 pt-1">
                                    <span>
                                        تتعلق بـ
                                        <span class="font-semibold text-emerald-300">
                                            {{ $note->related_invites_count }}
                                        </span>
                                        دعوة/دعوات
                                    </span>

                                    @if(!empty($note->tag))
                                        <span class="px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-[10px] text-slate-200">
                                            #{{ $note->tag }}
                                        </span>
                                    @endif
                                </div>
                            @endif
                        </div>

                        <div class="h-1 bg-gradient-to-r
                            @if($isWarning)
                                from-rose-500/80 via-amber-400/80 to-rose-500/80
                            @elseif($isPraise)
                                from-emerald-400/80 via-cyan-400/80 to-emerald-400/80
                            @else
                                from-sky-400/80 via-cyan-400/80 to-sky-400/80
                            @endif
                            opacity-50">
                        </div>
                    </div>
                @endforeach
            </div>

            @if($notes instanceof \Illuminate\Pagination\LengthAwarePaginator)
                <div class="pt-3">
                    {{ $notes->links() }}
                </div>
            @endif
        @endif

    </div>
</div>
@endsection