@extends('layouts.superadmin')

@section('title','رادار المخاطر — المتابعة الذكية')
@section('page-title','رادار المخاطر — المتابعة الذكية')

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

  {{-- شرح وتعريف الصفحة --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow">
    <h3 class="font-extrabold text-lg mb-2">ما هو رادار المخاطر؟</h3>
    <p class="text-gray-600 dark:text-gray-300 text-sm leading-6">
      يجمع هذا الرادار إشارات الخطر من النظام (انخفاض النشاط، الغياب، المخالفات، تغيّر الجهاز/IP)
      ويحوّلها إلى <b>درجة خطر 0–100</b> مع تفسير وأولوية للمتابعة. كلما ارتفعت الدرجة زادت الأولوية.
    </p>
  </div>

  {{-- فلاتر + أزرار التصدير / الواتساب --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow space-y-3">

    {{-- فورم الفلاتر (GET) --}}
    <form method="GET" class="grid grid-cols-1 md:grid-cols-6 gap-3">
      <div>
        <label class="block text-xs text-gray-500 mb-1">من</label>
        <input type="date" name="from" value="{{ $from }}"
               class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white text-sm">
      </div>
      <div>
        <label class="block text-xs text-gray-500 mb-1">إلى</label>
        <input type="date" name="to" value="{{ $to }}"
               class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white text-sm">
      </div>
      <div>
        <label class="block text-xs text-gray-500 mb-1">نطاق الأيام</label>
        <input type="number" name="days" value="{{ $days }}"
               class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white text-sm">
      </div>
      <div>
        <label class="block text-xs text-gray-500 mb-1">بحث</label>
        <input type="text" name="q" value="{{ $q }}" placeholder="الاسم/المعرف..."
               class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white text-sm">
      </div>
      <div>
        <label class="block text-xs text-gray-500 mb-1">مستوى</label>
        <select name="level"
                class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white text-sm">
          <option value="">الكل</option>
          <option value="high" @selected($level==='high')>مرتفع</option>
          <option value="mid"  @selected($level==='mid')>متوسط</option>
          <option value="low"  @selected($level==='low')>منخفض</option>
        </select>
      </div>
      <div class="flex items-end">
        <button class="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 text-sm font-semibold">
          تحديث 🔍
        </button>
      </div>
    </form>

    {{-- أزرار: تصدير + إرسال واتساب --}}
    <div class="flex flex-wrap justify-end gap-2">
      {{-- Export CSV يحتفظ بنفس الفلاتر --}}
      <a href="{{ route('superadmin.whatsapp.risk.export', request()->query()) }}"
         class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 text-sm">
        📤 تصدير CSV
      </a>

      {{-- زر إرسال تقرير واتساب (POST) --}}
      <form method="POST" action="{{ route('superadmin.whatsapp.risk.send') }}">
        @csrf
        <input type="hidden" name="from"  value="{{ $from }}">
        <input type="hidden" name="to"    value="{{ $to }}">
        <input type="hidden" name="days"  value="{{ $days }}">
        <input type="hidden" name="q"     value="{{ $q }}">
        <input type="hidden" name="level" value="{{ $level }}">

        <button type="submit"
                class="inline-flex items-center gap-2 px-4 py-2 bg-rose-600 text-white rounded-lg hover:bg-rose-700 text-sm font-semibold">
          📲 إرسال تقرير المخاطر (واتساب)
        </button>
      </form>
    </div>
  </div>

  {{-- ملخص تنفيذي --}}
  <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
    <div class="rounded-xl p-4 bg-rose-50 dark:bg-rose-900/30">
      <div class="text-xs text-rose-700 dark:text-rose-200">مرتفع</div>
      <div class="text-3xl font-extrabold text-rose-800 dark:text-rose-100">{{ $summary['high'] }}</div>
    </div>
    <div class="rounded-xl p-4 bg-amber-50 dark:bg-amber-900/30">
      <div class="text-xs text-amber-700 dark:text-amber-200">متوسط</div>
      <div class="text-3xl font-extrabold text-amber-800 dark:text-amber-100">{{ $summary['mid'] }}</div>
    </div>
    <div class="rounded-xl p-4 bg-emerald-50 dark:bg-emerald-900/30">
      <div class="text-xs text-emerald-700 dark:text-emerald-200">منخفض</div>
      <div class="text-3xl font-extrabold text-emerالد-800 dark:text-emerald-100">{{ $summary['low'] }}</div>
    </div>
  </div>

  {{-- جدول المخاطر مع تفسير وإجراءات --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow">
    <div class="flex items-center justify-between mb-3">
      <h3 class="font-bold">الأعلى أولوية للمتابعة</h3>
      <span class="text-xs text-gray-500">تظهر أهم الأسباب لكل عضو</span>
    </div>

    <div class="space-y-3">
      @forelse($rows->take(15) as $r)
        <div class="rounded-lg p-3 border
             {{ $r['risk_level']==='high' ? 'border-rose-300 bg-rose-50 dark:bg-rose-900/20' : '' }}
             {{ $r['risk_level']==='mid'  ? 'border-amber-300 bg-amber-50 dark:bg-amber-900/20' : '' }}
             {{ $r['risk_level']==='low'  ? 'border-emerald-300 bg-emerald-50 dark:bg-emerald-900/20' : '' }}">
          <div class="flex items-center justify-between">
            <div class="min-w-0">
              <div class="font-bold truncate">
                {{ $r['name'] }}
                <span class="text-gray-400">({{ $r['username'] }})</span>
              </div>
              <div class="text-xs text-gray-500 truncate">
                أسباب:
                @foreach($r['reasons'] as $i=>$reason)
                  @if($i>0) • @endif {{ $reason }}
                @endforeach
              </div>
            </div>
            <div class="text-right">
              <div class="text-xl font-black">{{ $r['risk'] }}</div>
              <div class="text-xs text-gray-500">درجة الخطر</div>
            </div>
          </div>
          {{-- اقتراح إجراء سريع --}}
          <div class="mt-2 text-xs">
            <span class="font-semibold">اقتراح:</span>
            @if($r['abs_un']>0)
              تواصل فوري وتأكيد حضور قريب.
            @elseif($r['viol']>0)
              جلسة تقويم سلوك قصيرة مع المشرف.
            @elseif($r['minutes']<60)
              خطة رفع نشاط: تحدي 90 دقيقة هذا الأسبوع.
            @elseif($r['dev_flag'])
              تحقق من هوية الجهاز/IP.
            @else
              رسالة تحفيزية قصيرة.
            @endif
          </div>
        </div>
      @empty
        <div class="text-sm text-gray-500">لا توجد حالات خلال الفترة المحددة.</div>
      @endforelse
    </div>
  </div>

  {{-- توضيح معادلة الاحتساب --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow">
    <h3 class="font-extrabold text-lg mb-2">كيف تُحتسب درجة الخطر؟</h3>
    <ul class="text-sm text-gray-600 dark:text-gray-300 leading-6 list-disc pr-4">
      <li>⬇ النشاط &lt; 60 دقيقة = +30 نقطة (120&gt; = +15)</li>
      <li>غياب غير مبرر ×20 (حتى +40)، الغياب المبرر ×5 (حتى +10)</li>
      <li>🧨 المخالفات ×10 (حتى +30)</li>
      <li>نقاط قليلة في الفترة +5</li>
      <li>🧩 تغيّر جهاز/IP غير اعتيادي +10 (اختياري حسب توفر البيانات)</li>
      <li>الحد الأقصى 100. يمكن ضبط الأوزان لاحقًا حسب سياسة الفريق.</li>
    </ul>
  </div>

</div>
@endsection