@extends('layouts.superadmin')

@section('title','غرفة الصقر — تنبيهات حرجة للتيم')
@section('page-title','غرفة الصقر — تنبيهات حرجة للتيم')

@section('content')
@php
  $criticalCount = $stats['critical'] ?? 0;
  $warningCount  = $stats['warning']  ?? 0;
  $watchCount    = $stats['watch']    ?? 0;
  $totalAlerts   = $stats['total_alerts'] ?? 0;
@endphp

<div class="space-y-6">

  {{-- HERO --}}
  <section class="relative overflow-hidden rounded-3xl border border-white/30 dark:border-gray-800
                  bg-gradient-to-br from-rose-50 via-amber-50 to-emerald-50
                  dark:from-rose-900/20 dark:via-amber-900/15 dark:to-emerald-900/20 shadow-lg backdrop-blur">
    {{-- هالات خلفية --}}
    <div class="pointer-events-none absolute -top-40 -start-32 w-[520px] h-[520px] rounded-full blur-3xl
                bg-gradient-to-br from-rose-500/25 via-amber-400/20 to-transparent"></div>
    <div class="pointer-events-none absolute -bottom-40 -end-40 w-[520px] h-[520px] rounded-full blur-3xl
                bg-gradient-to-tr from-emerald-400/25 via-cyan-400/20 to-transparent"></div>

    <div class="relative z-10 px-6 md:px-10 py-8 md:py-10">
      <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-6">

        <div class="flex-1 min-w-0">
          <div class="flex items-center gap-3 mb-3">
            <div class="grid h-12 w-12 place-items-center rounded-2xl
                        bg-black/5 dark:bg-black/30 border border-white/50 dark:border-white/10 shadow-sm">
              <svg class="w-7 h-7 text-rose-600 dark:text-amber-300" viewBox="0 0 24 24" fill="currentColor">
                <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4m0 4h.01"/>
              </svg>
            </div>
            <div>
              <h1 class="text-2xl md:text-3xl font-black tracking-tight text-gray-900 dark:text-white">
                رادار التنبيهات الحرجة — غرفة الصقر
              </h1>
              <p class="mt-1 text-sm md:text-[15px] text-gray-700 dark:text-gray-200 leading-6">
                هذه الصفحة تجمع <span class="font-semibold">الأعضاء الخطرين</span> على وضع التيم:
                غيابات متكررة، مخالفات نشطة، أو نقاط شهرية ضعيفة. الهدف:
                <span class="font-semibold text-rose-700 dark:text-rose-300">ولا عضو يطيح من عين الصقر بدون ما تحس فيه.</span>
              </p>
            </div>
          </div>

          {{-- أرقام سريعة --}}
          <div class="grid grid-cols-1 sm:grid-cols-4 gap-3 mt-4">
            <div class="rounded-2xl p-4 bg-white/80 dark:bg-gray-900/80 border border-rose-200/70 dark:border-rose-900/70 shadow-sm">
              <div class="text-[11px] font-semibold text-rose-700 dark:text-rose-300 flex items-center gap-1">
                <span class="h-2 w-2 rounded-full bg-rose-500 animate-ping"></span>
                تنبيهات حرجة جدًا
              </div>
              <div class="mt-1 flex items-end gap-2">
                <span class="text-2xl font-black text-rose-700 dark:text-rose-200">{{ $criticalCount }}</span>
                <span class="text-[11px] text-rose-700/80 dark:text-rose-200/80">عضو</span>
              </div>
            </div>

            <div class="rounded-2xl p-4 bg-white/80 dark:bg-gray-900/80 border border-amber-200/70 dark:border-amber-900/70 shadow-sm">
              <div class="text-[11px] font-semibold text-amber-700 dark:text-amber-300">
                تحذيرات تحتاج متابعة
              </div>
              <div class="mt-1 flex items-end gap-2">
                <span class="text-2xl font-black text-amber-700 dark:text-amber-200">{{ $warningCount }}</span>
                <span class="text-[11px] text-amber-700/80 dark:text-amber-200/80">عضو</span>
              </div>
            </div>

            <div class="rounded-2xl p-4 bg-white/80 dark:bg-gray-900/80 border border-emerald-200/70 dark:border-emerald-900/70 shadow-sm">
              <div class="text-[11px] font-semibold text-emerald-700 dark:text-emerald-300">
                تحت المتابعة
              </div>
              <div class="mt-1 flex items-end gap-2">
                <span class="text-2xl font-black text-emerald-700 dark:text-emerald-200">{{ $watchCount }}</span>
                <span class="text-[11px] text-emerald-700/80 dark:text-emerald-200/80">عضو</span>
              </div>
            </div>

            <div class="rounded-2xl p-4 bg-gradient-to-br from-gray-900/90 to-gray-800/90 text-white border border-white/10 shadow-sm">
              <div class="text-[11px] font-semibold text-white/80">
                نافذة التحليل
              </div>
              <div class="mt-1 text-xs">
                آخر <span class="font-bold">{{ $stats['window_days'] ?? 30 }}</span> يوم —
                نقاط الشهر: <span class="font-semibold">{{ $stats['month_label'] ?? '' }}</span>
              </div>
              <div class="mt-1 text-[10px] text-white/70 leading-4">
                غياب بدون عذر ≥ {{ $stats['min_abs_wo'] ?? 3 }},
                مخالفات ≥ {{ $stats['min_vio'] ?? 1 }},
                نقاط ضعيفة &lt; {{ $stats['max_points'] ?? 30 }}.
              </div>
            </div>
          </div>

          <p class="mt-4 text-[11px] text-gray-600 dark:text-gray-300">
            • القائمة لا تعني أن العضو "سيء"، بل تعني فقط أن
            <span class="font-semibold">حالة العضو تحتاج عيون الصقر</span> قبل ما تتحول لمغادرة أو مشكلة أكبر.
          </p>
        </div>

        {{-- فلتر سريع صغير --}}
        <div class="md:w-72">
          <div class="rounded-2xl bg-white/90 dark:bg-gray-900/90 border border-gray-200/70 dark:border-gray-700/70 shadow-sm p-4">
            <div class="text-xs font-semibold text-gray-800 dark:text-gray-100 mb-2">
              فلتر عرض التنبيهات
            </div>
            <form method="GET" class="space-y-3">
              <div>
                <label class="block text-[11px] text-gray-600 dark:text-gray-300 mb-1">مستوى الخطورة</label>
                <select name="severity"
                        class="w-full rounded-lg border border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white text-xs py-1.5">
                  <option value="">الكل</option>
                  <option value="critical" @selected(($severityFilter ?? '')==='critical')>حرج جدًا</option>
                  <option value="warning"  @selected(($severityFilter ?? '')==='warning')>تحذير</option>
                  <option value="watch"    @selected(($severityFilter ?? '')==='watch')>تحت المتابعة</option>
                </select>
              </div>

              <div class="grid grid-cols-3 gap-2 text-[11px]">
                <div>
                  <label class="block mb-1 text-gray-600 dark:text-gray-300">أيام</label>
                  <input type="number" name="days" min="7" max="90"
                         value="{{ request('days', $stats['window_days'] ?? 30) }}"
                         class="w-full rounded-lg border border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white text-xs py-1.5">
                </div>
                <div>
                  <label class="block mb-1 text-gray-600 dark:text-gray-300">حد غياب</label>
                  <input type="number" name="min_abs_wo" min="1" max="10"
                         value="{{ request('min_abs_wo', $stats['min_abs_wo'] ?? 3) }}"
                         class="w-full rounded-lg border border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white text-xs py-1.5">
                </div>
                <div>
                  <label class="block mb-1 text-gray-600 dark:text-gray-300">حد نقاط</label>
                  <input type="number" name="max_points" min="0" max="500"
                         value="{{ request('max_points', $stats['max_points'] ?? 30) }}"
                         class="w-full rounded-lg border border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white text-xs py-1.5">
                </div>
              </div>

              <button class="w-full py-1.5 rounded-lg text-xs font-semibold
                             bg-gradient-to-r from-rose-600 to-amber-600 text-white
                             hover:from-rose-700 hover:to-amber-700 transition shadow-sm">
                تحديث القائمة
              </button>

              <p class="text-[10px] text-gray-500 dark:text-gray-400 leading-4">
                لو حسيت الأرقام كثيرة جدًا أو قليلة، غيّر العتبات من هنا بدل ما نغيّر الكود.
              </p>
            </form>
          </div>
        </div>

      </div>
    </div>
  </section>

  {{-- قائمة التنبيهات --}}
  <section class="space-y-4">
    @if($totalAlerts === 0)
      <div class="rounded-2xl border border-emerald-200/70 dark:border-emerald-800/70
                  bg-emerald-50/80 dark:bg-emerald-900/30 p-6 text-center">
        <p class="text-sm font-semibold text-emerald-800 dark:text-emerald-100">
          لا يوجد أي عضو ضمن دائرة الخطر وفق الإعدادات الحالية 🎉
        </p>
        <p class="mt-1 text-xs text-emerald-700/80 dark:text-emerald-200/80">
          هذا لا يعني أن كل شيء مثالي، لكنه يعني على الأقل أنه لا يوجد نمط غياب/مخالفات/نقاط ضعيفة واضح خلال آخر {{ $stats['window_days'] ?? 30 }} يوم.
        </p>
      </div>
    @else
      @foreach($alerts as $alert)
        @php
          $u     = $alert->user;
          $sev   = $alert->severity;
          $label = $alert->severity_label;
          $avatarUrl = $u->avatar_url ?? (!empty($u->avatar) ? asset('storage/avatars/'.$u->avatar) : null);

          $sevClasses = match($sev) {
            'critical' => [
              'border' => 'border-rose-400/80 dark:border-rose-700/90',
              'bg'     => 'bg-rose-50/90 dark:bg-rose-950/40',
              'chip'   => 'bg-rose-600 text-white',
            ],
            'warning' => [
              'border' => 'border-amber-300/80 dark:border-amber-700/90',
              'bg'     => 'bg-amber-50/90 dark:bg-amber-950/40',
              'chip'   => 'bg-amber-500 text-white',
            ],
            default => [
              'border' => 'border-sky-300/80 dark:border-sky-700/90',
              'bg'     => 'bg-sky-50/90 dark:bg-sky-950/40',
              'chip'   => 'bg-sky-500 text-white',
            ],
          };
        @endphp

        <div class="relative overflow-hidden rounded-2xl border {{ $sevClasses['border'] }} shadow-sm
                    {{ $sevClasses['bg'] }} backdrop-blur-sm">
          {{-- وميض خفيف على اليسار --}}
          <div class="pointer-events-none absolute inset-y-0 start-0 w-1 bg-gradient-to-b
                      @if($sev==='critical') from-rose-500 via-amber-500 to-rose-500
                      @elseif($sev==='warning') from-amber-500 via-amber-400 to-amber-500
                      @else from-sky-500 via-emerald-400 to-sky-500 @endif">
          </div>

          <div class="relative z-10 px-5 py-4 ms-2">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">

              <div class="flex items-center gap-3">
                {{-- avatar --}}
                <div class="relative">
                  @if($avatarUrl)
                    <img src="{{ $avatarUrl }}" class="w-11 h-11 rounded-xl object-cover border-2 border-white/80 dark:border-gray-900 shadow-sm">
                  @else
                    <div class="w-11 h-11 rounded-xl grid place-items-center bg-black/10 dark:bg-white/10 text-xs font-bold text-gray-800 dark:text-gray-100">
                      {{ mb_substr($u->name ?? '؟',0,1) }}
                    </div>
                  @endif
                  @if($sev === 'critical')
                    <span class="absolute -bottom-1 -left-1 h-3 w-3 rounded-full bg-rose-500 ring-2 ring-white dark:ring-gray-900"></span>
                  @elseif($sev === 'warning')
                    <span class="absolute -bottom-1 -left-1 h-3 w-3 rounded-full bg-amber-500 ring-2 ring-white dark:ring-gray-900"></span>
                  @else
                    <span class="absolute -bottom-1 -left-1 h-3 w-3 rounded-full bg-sky-500 ring-2 ring-white dark:ring-gray-900"></span>
                  @endif
                </div>

                <div class="min-w-0">
                  <div class="flex items-center gap-2">
                    <p class="text-sm font-semibold text-gray-900 dark:text-white truncate max-w-[180px] md:max-w-none">
                      {{ $u->name }}
                    </p>
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold {{ $sevClasses['chip'] }}">
                      {{ $label }}
                    </span>
                  </div>
                  <p class="mt-0.5 text-[11px] text-gray-700 dark:text-gray-300 truncate">
                    {{ $u->username }} • {{ $u->email }}
                  </p>
                  <div class="mt-1 flex flex-wrap gap-1.5 text-[10px] text-gray-800 dark:text-gray-200">
                    <span class="px-2 py-0.5 rounded-full bg-black/5 dark:bg-white/10">
                      عضوية: {{ $u->membership_status }}
                    </span>
                    @if(!is_null($u->total_points))
                      <span class="px-2 py-0.5 rounded-full bg-black/5 dark:bg-white/10">
                        إجمالي نقاطه: {{ $u->total_points }}
                      </span>
                    @endif
                  </div>
                </div>
              </div>

              {{-- أرقام مختصرة --}}
              <div class="flex flex-wrap gap-2 text-[11px] text-gray-800 dark:text-gray-100">
                <div class="px-3 py-1 rounded-xl bg-white/70 dark:bg-gray-900/80 border border-white/70 dark:border-white/10">
                  <span class="font-semibold">{{ (int)$u->abs_wo }}</span> غياب بدون عذر
                  <span class="text-[10px] text-gray-500 dark:text-gray-400">/ {{ $stats['window_days'] ?? 30 }} يوم</span>
                </div>
                <div class="px-3 py-1 rounded-xl bg-white/70 dark:bg-gray-900/80 border border-white/70 dark:border-white/10">
                  <span class="font-semibold">{{ (int)$u->abs_w }}</span> غياب بعذر
                </div>
                <div class="px-3 py-1 rounded-xl bg-white/70 dark:bg-gray-900/80 border border-white/70 dark:border-white/10">
                  مخالفات نشطة: <span class="font-semibold">{{ (int)$u->active_violations }}</span>
                </div>
                <div class="px-3 py-1 rounded-xl bg-white/70 dark:bg-gray-900/80 border border-white/70 dark:border-white/10">
                  نقاط هذا الشهر: <span class="font-semibold">{{ (int)$u->month_points }}</span>
                </div>
              </div>

              {{-- زر فتح ملف العضو --}}
              <div class="flex md:flex-col items-end md:items-start gap-2">
                <a href="{{ route('superadmin.users.show', $u->id) }}"
                   class="inline-flex items-center justify-center px-3 py-1.5 rounded-lg text-[11px] font-semibold
                          bg-gray-900 text-white hover:bg-black dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100 transition shadow-sm">
                  فتح ملف العضو
                </a>
                <p class="text-[10px] text-gray-600 dark:text-gray-400 md:max-w-[180px]">
                  استخدم ملف العضو للتقييم التفصيلي أو لفتح ملف متابعة خاص.
                </p>
              </div>

            </div>

            {{-- الأسباب --}}
            <div class="mt-3 pt-3 border-t border-white/70 dark:border-white/5 text-[11px] text-gray-800 dark:text-gray-100">
              <p class="font-semibold mb-1">لماذا ظهر هذا العضو هنا؟</p>
              <ul class="list-disc list-inside space-y-0.5">
                @foreach($alert->reasons as $reason)
                  <li>{{ $reason }}</li>
                @endforeach
              </ul>
            </div>
          </div>
        </div>
      @endforeach
    @endif
  </section>

</div>
@endsection