{{-- resources/views/superadmin/falcon-room/member-insights.blade.php --}}
@extends('layouts.superadmin')

@section('title','غرفة الصقر — تحليلات عضو')
@section('page-title','🧠 تحليلات عضو — Member Insight')

@section('content')
<div class="space-y-6 relative">

  {{-- خلفية ناعمة --}}
  <div class="pointer-events-none absolute -top-24 -left-20 w-64 h-64 rounded-full bg-gradient-to-br from-emerald-400/20 via-cyan-400/15 to-sky-500/20 blur-3xl"></div>
  <div class="pointer-events-none absolute -bottom-24 -right-20 w-64 h-64 rounded-full bg-gradient-to-bl from-violet-500/20 via-fuchsia-500/15 to-rose-500/20 blur-3xl"></div>

  {{-- بطاقة اختيار العضو --}}
  <div class="relative bg-white/80 dark:bg-gray-900/80 backdrop-blur rounded-2xl shadow border border-gray-100/60 dark:border-gray-700/70 p-4 md:p-5">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
      <div>
        <h2 class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
          🧑‍💻 اختر عضواً لتحليل ملفه
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">
          اختر أحد أعضاء الفريق ليتم عرض كل بياناته وتحليلاته وتقييمات الإدارة حوله في صفحة واحدة.
        </p>
      </div>

      <form method="get"
            action="{{ route('superadmin.falcon-room.member-insights.index') }}"
            class="w-full md:w-72">
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-300 mb-1">
          العضو
        </label>
        <select name="user_id"
                class="w-full rounded-xl border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white text-sm px-3 py-2 shadow-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                onchange="this.form.submit()">
          <option value="">— اختر عضواً —</option>
          @foreach($users as $u)
            <option value="{{ $u->id }}" @if(optional($member)->id == $u->id) selected @endif>
              {{ $u->name }} @if($u->username) — {{ '@'.$u->username }} @endif
              @if($u->membership_status) ({{ $u->membership_status }}) @endif
            </option>
          @endforeach
        </select>
      </form>
    </div>
  </div>

  @if(!$member)
    {{-- رسالة توجيهية في حال لم يتم اختيار عضو --}}
    <div class="relative bg-gradient-to-r from-sky-50 via-emerald-50 to-emerald-100 dark:from-sky-900/40 dark:via-emerald-900/30 dark:to-emerald-800/40 border border-emerald-200/60 dark:border-emerald-700/70 rounded-2xl p-6">
      <h3 class="font-bold text-emerald-900 dark:text-emerald-100 mb-2 flex items-center gap-2">
        👆 ابدأ بالاختيار من القائمة
      </h3>
      <p class="text-sm text-gray-700 dark:text-gray-100 leading-relaxed">
        بعد اختيار عضو من القائمة بالأعلى، سيتم عرض بطاقة تعريف تفصيلية له، تقييمات الإدارة، المخالفات والإنذارات، طلبات الغياب،
        النشاط في بروأكتيف واللايفات، مشاركات المسابقات، إضافة إلى ترتيب العضو داخل جنسه وبين كامل الفريق، مع
        فقرة خاصة بعنوان <b>رأي الذكاء الاصطناعي</b> لتلخيص حالة العضو واقتراح أسلوب التعامل الأنسب معه.
      </p>
    </div>
  @else
    {{-- هيدر العضو --}}
    <div class="relative bg-white/90 dark:bg-gray-900/90 backdrop-blur rounded-2xl shadow border border-gray-100 dark:border-gray-700 p-5 md:p-6">
      <div class="flex flex-col md:flex-row md:items-center gap-5">

        {{-- صورة وبيانات أساسية --}}
        <div class="flex items-center gap-4">
          <div class="relative">
            @if(!empty($stats['avatar_url']))
              <img src="{{ $stats['avatar_url'] }}"
                   class="w-20 h-20 md:w-24 md:h-24 rounded-full object-cover border-4 border-emerald-400 shadow-lg"
                   alt="صورة العضو">
            @else
              <div class="w-20 h-20 md:w-24 md:h-24 rounded-full bg-gradient-to-br from-emerald-500 to-sky-500 flex items-center justify-center text-3xl text-white shadow-lg">
                {{ mb_substr($stats['name'] ?? '؟',0,1) }}
              </div>
            @endif
          </div>

          <div>
            <div class="flex items-center gap-2 flex-wrap">
              <h2 class="text-xl md:text-2xl font-extrabold text-gray-900 dark:text-white">
                {{ $stats['name'] ?? 'عضو غير معروف' }}
              </h2>
              @if(!empty($stats['username']))
                <span class="text-sm text-gray-500 dark:text-gray-400">
                  {{ '@'.$stats['username'] }}
                </span>
              @endif
            </div>

            <div class="mt-2 flex flex-wrap gap-2 text-xs">
              @if(!empty($stats['membership_status']))
                <span class="px-2.5 py-1 rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900/60 dark:text-emerald-200">
                  حالة العضوية: {{ $stats['membership_status'] }}
                </span>
              @endif
              @if(!empty($stats['account_status']))
                <span class="px-2.5 py-1 rounded-full bg-sky-100 text-sky-800 dark:bg-sky-900/60 dark:text-sky-200">
                  حالة الحساب: {{ $stats['account_status'] }}
                </span>
              @endif
              @if(!empty($stats['joined_at']))
                <span class="px-2.5 py-1 rounded-full bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100">
                  انضم منذ: {{ \Illuminate\Support\Carbon::parse($stats['joined_at'])->format('Y-m-d') }}
                </span>
              @endif
            </div>
          </div>
        </div>

        {{-- أرقام سريعة --}}
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:ml-auto w-full md:w-auto">
          <div class="p-3 rounded-xl bg-emerald-50 dark:bg-emerald-900/40 text-center">
            <div class="text-xs text-emerald-800 dark:text-emerald-200">مجموع النقاط</div>
            <div class="text-lg font-extrabold text-emerald-700 dark:text-emerald-100 mt-1">
              {{ number_format($stats['total_points'] ?? 0) }}
            </div>
          </div>
          <div class="p-3 rounded-xl bg-sky-50 dark:bg-sky-900/40 text-center">
            <div class="text-xs text-sky-800 dark:text-sky-200">ترتيب داخل الجنس</div>
            <div class="text-sm font-bold text-sky-700 dark:text-sky-100 mt-1">
              #{{ $stats['rank_gender'] ?? '—' }}
              <span class="text-[10px] text-gray-500 dark:text-gray-300">من {{ $stats['total_gender'] ?? '؟' }}</span>
            </div>
          </div>
          <div class="p-3 rounded-xl bg-violet-50 dark:bg-violet-900/40 text-center">
            <div class="text-xs text-violet-800 dark:text-violet-200">ترتيبه في التيم</div>
            <div class="text-sm font-bold text-violet-700 dark:text-violet-100 mt-1">
              #{{ $stats['rank_team'] ?? '—' }}
              <span class="text-[10px] text-gray-500 dark:text-gray-300">من {{ $stats['total_team'] ?? '؟' }}</span>
            </div>
          </div>
          <div class="p-3 rounded-xl bg-amber-50 dark:bg-amber-900/40 text-center">
            <div class="text-xs text-amber-800 dark:text-amber-100">ساعات لايف/نشاط</div>
            <div class="text-lg font-extrabold text-amber-700 dark:text-amber-50 mt-1">
              {{ number_format($stats['score_total_hours'] ?? 0,1) }}
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- كروت الإحصائيات الرئيسية --}}
    <div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 gap-4">
      {{-- تقييمات --}}
      <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-4">
        <h3 class="font-bold text-sm text-gray-900 dark:text-white mb-2 flex items-center gap-1">
          📊 التقييمات اليومية
        </h3>
        <div class="grid grid-cols-2 gap-3 text-xs">
          <div>
            <div class="text-gray-500 dark:text-gray-400">إجمالي التقييمات</div>
            <div class="text-lg font-bold text-gray-900 dark:text-white">{{ $stats['evaluations_total'] ?? 0 }}</div>
          </div>
          <div>
            <div class="text-emerald-600 dark:text-emerald-300">مقبولة</div>
            <div class="font-semibold">{{ $stats['evaluations_approved'] ?? 0 }}</div>
          </div>
          <div>
            <div class="text-rose-600 dark:text-rose-300">مرفوضة</div>
            <div class="font-semibold">{{ $stats['evaluations_rejected'] ?? 0 }}</div>
          </div>
          <div>
            <div class="text-amber-600 dark:text-amber-300">معلقة</div>
            <div class="font-semibold">{{ $stats['evaluations_pending'] ?? 0 }}</div>
          </div>
        </div>
        <div class="mt-3 text-[11px] text-gray-500 dark:text-gray-400">
          آخر تقييم:
          @if(!empty($stats['last_evaluation_date']))
            {{ \Illuminate\Support\Carbon::parse($stats['last_evaluation_date'])->format('Y-m-d') }}
          @else
            —
          @endif
          — حالة: {{ $stats['last_evaluation_status'] ?? 'غير محدد' }}
        </div>
      </div>

      {{-- نشاط/ساعات --}}
      <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-4">
        <h3 class="font-bold text-sm text-gray-900 dark:text-white mb-2">
          ⚡ النشاط واللايفات
        </h3>
        <ul class="text-xs space-y-1.5 text-gray-700 dark:text-gray-200">
          <li>عدد الأنشطة/الجلسات المسجلة: <b>{{ $stats['activities_total'] ?? 0 }}</b></li>
          <li>مجموع الساعات المسجلة: <b>{{ number_format($stats['score_total_hours'] ?? 0,1) }}</b> ساعة</li>
          <li>مجموع النقاط من الأنشطة: <b>{{ number_format($stats['score_total_points'] ?? 0) }}</b> نقطة</li>
          <li>عدد الضيوف/الاستضافات المسجلة: <b>{{ $stats['guest_submissions_total'] ?? 0 }}</b></li>
        </ul>
      </div>

      {{-- مخالفات / غياب --}}
      <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-4">
        <h3 class="font-bold text-sm text-gray-900 dark:text:white mb-2">
          🚨 المخالفات والغياب
        </h3>
        <ul class="text-xs space-y-1.5 text-gray-700 dark:text-gray-200">
          <li>إجمالي المخالفات: <b>{{ $stats['violations_total'] ?? 0 }}</b></li>
          <li>إنذارات مسجّلة: <b>{{ $stats['warnings_total'] ?? 0 }}</b></li>
          <li>طلبات غياب مقبولة: <b>{{ $stats['excused_approved'] ?? 0 }}</b></li>
          <li>طلبات غياب مرفوضة: <b>{{ $stats['excused_rejected'] ?? 0 }}</b></li>
          <li>طلبات غياب قيد المراجعة: <b>{{ $stats['excused_pending'] ?? 0 }}</b></li>
        </ul>
      </div>

      {{-- مسابقات وترتيب --}}
      <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-4">
        <h3 class="font-bold text-sm text-gray-900 dark:text-white mb-2">
          🏅 المسابقات والترتيب
        </h3>
        <ul class="text-xs space-y-1.5 text-gray-700 dark:text-gray-200">
          <li>مشاركات مسابقات: <b>{{ $stats['competitions_total'] ?? 0 }}</b></li>
          <li>مرات الفوز: <b>{{ $stats['competitions_won'] ?? 0 }}</b></li>
          <li>ترتيبه داخل جنسه: <b>#{{ $stats['rank_gender'] ?? '—' }}</b> من {{ $stats['total_gender'] ?? '؟' }}</li>
          <li>ترتيبه في التيم: <b>#{{ $stats['rank_team'] ?? '—' }}</b> من {{ $stats['total_team'] ?? '؟' }}</li>
        </ul>
      </div>
    </div>

    {{-- رأي الذكاء الاصطناعي + أكثر من قيّمه --}}
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
      <div class="xl:col-span-2 bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-700 rounded-2xl p-4 md:p-5">
        <h3 class="font-bold text-sm text-emerald-900 dark:text-emerald-50 mb-2 flex items-center gap-1">
          🤖 رأي الذكاء الاصطناعي في العضو
        </h3>
        <p class="text-sm leading-relaxed text-gray-800 dark:text-emerald-50">
          {{ $stats['ai_opinion'] ?? 'لا توجد ملاحظات بعد — لم تكتمل بيانات العضو بشكل كافٍ لإظهار رأي الذكاء الاصطناعي.' }}
        </p>
      </div>

      <div class="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-700 rounded-2xl p-4">
        <h3 class="font-bold text-sm text-gray-900 dark:text-white mb-2">
          👥 أكثر من قام بتقييمه
        </h3>
        @if(isset($tables['top_evaluators']) && count($tables['top_evaluators']))
          <ul class="text-xs space-y-1.5 text-gray-700 dark:text-gray-200">
            @foreach($tables['top_evaluators'] as $ev)
              <li class="flex items-center justify-between">
                <span>{{ $ev->evaluator_name ?? 'إداري غير معروف' }}</span>
                <span class="text-[11px] text-gray-500 dark:text-gray-400">
                  {{ $ev->total_evals }} تقييم/ات
                </span>
              </li>
            @endforeach
          </ul>
        @else
          <p class="text-xs text-gray-500 dark:text-gray-400">
            لا توجد بيانات كافية عن من قام بتقييم هذا العضو حتى الآن.
          </p>
        @endif
      </div>
    </div>

    {{-- الجداول التفصيلية --}}
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
      {{-- آخر التقييمات --}}
      <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
          <h3 class="font-bold text-sm text-gray-900 dark:text-white">📊 آخر 10 تقييمات</h3>
        </div>
        <div class="overflow-x-auto">
          <table class="min-w-full text-xs">
            <thead class="bg-gray-50 dark:bg-gray-800/80 text-gray-700 dark:text-gray-200">
              <tr>
                <th class="px-3 py-2 text-right">التاريخ</th>
                <th class="px-3 py-2 text-right">الحالة</th>
                <th class="px-3 py-2 text-right">المجموع</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
              @forelse($tables['last_evaluations'] as $ev)
                <tr class="hover:bg-gray-50/70 dark:hover:bg-gray-800/60">
                  <td class="px-3 py-1.5">
                    {{ \Illuminate\Support\Carbon::parse($ev->evaluation_date)->format('Y-m-d') }}
                  </td>
                  <td class="px-3 py-1.5">
                    {{ $ev->status }}
                  </td>
                  <td class="px-3 py-1.5">
                    {{ $ev->total_daily_points }}
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="3" class="px-3 py-3 text-center text-gray-500 dark:text-gray-400">
                    لا توجد تقييمات كافية للعرض.
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>

      {{-- آخر المخالفات --}}
      <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
          <h3 class="font-bold text-sm text-gray-900 dark:text-white">🚨 آخر 10 مخالفات/إنذارات</h3>
        </div>
        <div class="overflow-x-auto">
          <table class="min-w-full text-xs">
            <thead class="bg-gray-50 dark:bg-gray-800/80 text-gray-700 dark:text-gray-200">
              <tr>
                <th class="px-3 py-2 text-right">التاريخ</th>
                <th class="px-3 py-2 text-right">النوع</th>
                <th class="px-3 py-2 text-right">الوصف</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
              @forelse($tables['last_violations'] as $v)
                <tr class="hover:bg-gray-50/70 dark:hover:bg-gray-800/60">
                  <td class="px-3 py-1.5">
                    {{ \Illuminate\Support\Carbon::parse($v->created_at)->format('Y-m-d') }}
                  </td>
                  <td class="px-3 py-1.5">
                    {{ optional($v->violation)->type ?? '-' }}
                  </td>
                  <td class="px-3 py-1.5 max-w-xs truncate">
                    {{ optional($v->violation)->reason ?? $v->notes ?? '-' }}
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="3" class="px-3 py-3 text-center text-gray-500 dark:text-gray-400">
                    لا توجد مخالفات مسجلة لهذا العضو.
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>

      {{-- آخر طلبات الغياب --}}
      <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
          <h3 class="font-bold text-sm text-gray-900 dark:text-white">📅 آخر 10 طلبات غياب</h3>
        </div>
        <div class="overflow-x-auto">
          <table class="min-w-full text-xs">
            <thead class="bg-gray-50 dark:bg-gray-800/80 text-gray-700 dark:text-gray-200">
              <tr>
                <th class="px-3 py-2 text-right">الفترة</th>
                <th class="px-3 py-2 text-right">الحالة</th>
                <th class="px-3 py-2 text-right">السبب</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
              @forelse($tables['last_absences'] as $a)
                <tr class="hover:bg-gray-50/70 dark:hover:bg-gray-800/60">
                  <td class="px-3 py-1.5">
                    {{ $a->from_date ?? '' }} → {{ $a->to_date ?? '' }}
                  </td>
                  <td class="px-3 py-1.5">
                    {{ $a->status ?? '-' }}
                  </td>
                  <td class="px-3 py-1.5 max-w-xs truncate">
                    {{ $a->reason ?? '-' }}
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="3" class="px-3 py-3 text-center text-gray-500 dark:text-gray-400">
                    لا توجد طلبات غياب للعرض.
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>

      {{-- آخر الأنشطة / الجلسات --}}
      <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
          <h3 class="font-bold text-sm text-gray-900 dark:text-white">⚡ آخر 10 أنشطة / جلسات</h3>
        </div>
        <div class="overflow-x-auto">
          <table class="min-w-full text-xs">
            <thead class="bg-gray-50 dark:bg-gray-800/80 text-gray-700 dark:text-gray-200">
              <tr>
                <th class="px-3 py-2 text-right">التاريخ</th>
                <th class="px-3 py-2 text-right">النوع</th>
                <th class="px-3 py-2 text-right">العنوان</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
              @forelse($tables['last_activities'] as $ac)
                <tr class="hover:bg-gray-50/70 dark:hover:bg-gray-800/60">
                  <td class="px-3 py-1.5">
                    {{ \Illuminate\Support\Carbon::parse($ac->created_at)->format('Y-m-d') }}
                  </td>
                  <td class="px-3 py-1.5">
                    {{ optional($ac->activity)->type ?? '-' }}
                  </td>
                  <td class="px-3 py-1.5 max-w-xs truncate">
                    {{ optional($ac->activity)->title ?? optional($ac->activity)->platform ?? '-' }}
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="3" class="px-3 py-3 text-center text-gray-500 dark:text-gray-400">
                    لا توجد أنشطة مسجلة للعرض.
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>

      {{-- آخر مسابقات --}}
      <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
          <h3 class="font-bold text-sm text-gray-900 dark:text-white">🏆 آخر 10 مشاركات مسابقات</h3>
        </div>
        <div class="overflow-x-auto">
          <table class="min-w-full text-xs">
            <thead class="bg-gray-50 dark:bg-gray-800/80 text-gray-700 dark:text-gray-200">
              <tr>
                <th class="px-3 py-2 text-right">التاريخ</th>
                <th class="px-3 py-2 text-right">المسابقة</th>
                <th class="px-3 py-2 text-right">الحالة</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
              @forelse($tables['last_competitions'] as $cp)
                <tr class="hover:bg-gray-50/70 dark:hover:bg-gray-800/60">
                  <td class="px-3 py-1.5">
                    {{ \Illuminate\Support\Carbon::parse($cp->created_at)->format('Y-m-d') }}
                  </td>
                  <td class="px-3 py-1.5 max-w-xs truncate">
                    {{ optional($cp->competition)->title ?? '-' }}
                  </td>
                  <td class="px-3 py-1.5">
                    {{ $cp->status ?? '-' }}
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="3" class="px-3 py-3 text-center text-gray-500 dark:text-gray-400">
                    لا توجد مشاركات مسابقات للعرض.
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
  @endif
</div>
@endsection