@extends('layouts.superadmin')
@section('title','AI: إنذارات ومشاكل')
@section('page-title','AI: إنذارات ومشاكل')

@section('content')
@php
  $view   = $view ?? request('view','table');
  if(!in_array($view,['table','cards'],true)) $view='table';

  $q      = $q ?? request('q','');
  $level  = $level ?? request('level','');
  $userId = $userId ?? request('user_id','all');

  $days   = $days ?? (int)request('days',7);
  $from   = $from ?? \Carbon\Carbon::parse(request('from', now()->subDays(max(1,$days)-1)->toDateString()))->startOfDay();
  $to     = $to ?? \Carbon\Carbon::parse(request('to', now()->toDateString()))->endOfDay();

  $summary = $summary ?? ['high'=>0,'mid'=>0,'low'=>0,'total'=>0,'from'=>$from->toDateString(),'to'=>$to->toDateString()];
  $rows    = $rows ?? collect();

  $lvlBadge = [
    'high' => ['t'=>'خطر عالي','c'=>'border-rose-400/30 bg-rose-500/15 text-rose-200','dot'=>'bg-rose-400'],
    'mid'  => ['t'=>'متوسط','c'=>'border-amber-400/30 bg-amber-500/15 text-amber-200','dot'=>'bg-amber-400'],
    'low'  => ['t'=>'منخفض','c'=>'border-emerald-400/30 bg-emerald-500/15 text-emerald-200','dot'=>'bg-emerald-400'],
    ''     => ['t'=>'—','c'=>'border-white/10 bg-white/5 text-white/70','dot'=>'bg-slate-400'],
  ];

  $riskBar = function(int $risk){
    $risk = max(0, min(100, $risk));
    $cls = $risk>=60 ? 'bg-rose-500/70' : ($risk>=30 ? 'bg-amber-500/70' : 'bg-emerald-500/70');
    return [$risk, $cls];
  };
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 rtl">
  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-fuchsia-400/20 shadow-2xl shadow-fuchsia-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-80 h-80 rounded-full bg-fuchsia-400/15 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-10 w-96 h-96 rounded-full bg-cyan-400/10 blur-3xl"></div>

      <div class="p-5 sm:p-6 lg:p-7">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <div class="space-y-2">
            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl border border-white/10 bg-white/5 text-white/80">
              <i class="fa-solid fa-triangle-exclamation text-fuchsia-200"></i>
              <span class="text-sm">AI Alerts & Issues • Socratic Sentinel</span>
            </div>

            <h1 class="text-xl sm:text-2xl lg:text-3xl font-extrabold text-white">
              AI: إنذارات ومشاكل — تحليل المخاطر
            </h1>

            <p class="text-white/60 text-sm">
              الفكرة: نجمع مؤشرات (نشاط/غياب/مخالفات/نقاط/جهاز+IP) ونطلع “Risk” واضح + أسباب.
            </p>

            @if(!empty($selectedUser))
              <div class="mt-2 inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl border border-cyan-400/25 bg-cyan-500/10 text-cyan-100">
                <span class="w-2 h-2 rounded-full bg-cyan-400"></span>
                <span class="text-sm font-semibold">محدد: {{ $selectedUser->name ?? $selectedUser['name'] ?? 'عضو' }}</span>
                <span class="text-xs text-cyan-100/70">({{ $selectedUser->username ?? $selectedUser['username'] ?? '' }})</span>
              </div>
            @endif
          </div>

          <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
            <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
              <div class="text-white/60 text-xs">الإجمالي</div>
              <div id="stat_total" class="text-white text-lg font-extrabold">{{ (int)($summary['total'] ?? 0) }}</div>
            </div>
            <div class="rounded-2xl border border-rose-400/20 bg-rose-500/10 p-3">
              <div class="text-rose-100/80 text-xs">عالي</div>
              <div id="stat_high" class="text-rose-100 text-lg font-extrabold">{{ (int)($summary['high'] ?? 0) }}</div>
            </div>
            <div class="rounded-2xl border border-amber-400/20 bg-amber-500/10 p-3">
              <div class="text-amber-100/80 text-xs">متوسط</div>
              <div id="stat_mid" class="text-amber-100 text-lg font-extrabold">{{ (int)($summary['mid'] ?? 0) }}</div>
            </div>
            <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 p-3">
              <div class="text-emerald-100/80 text-xs">منخفض</div>
              <div id="stat_low" class="text-emerald-100 text-lg font-extrabold">{{ (int)($summary['low'] ?? 0) }}</div>
            </div>
          </div>
        </div>

        <div class="mt-5 flex flex-wrap items-center justify-between gap-2">
          <div class="text-white/60 text-xs">
            الفترة: <span id="range_from" class="text-white/80 font-semibold">{{ $summary['from'] ?? $from->toDateString() }}</span>
            → <span id="range_to" class="text-white/80 font-semibold">{{ $summary['to'] ?? $to->toDateString() }}</span>
          </div>
          <div class="text-white/60 text-xs">
            آخر تحديث:
            <span id="stat_now" class="text-white/80 font-semibold">{{ now()->format('H:i:s') }}</span>
            <span class="mx-2 text-white/30">•</span>
            <span id="autoInfo">تحديث تلقائي كل 12 ثانية</span>
          </div>
        </div>
      </div>
    </div>

    {{-- FILTERS --}}
    <div class="rounded-3xl border border-white/10 bg-white/5 p-4 sm:p-5">
      <form class="grid grid-cols-1 md:grid-cols-12 gap-3" method="get" action="{{ url()->current() }}">
        <div class="md:col-span-4">
          <label class="text-white/70 text-xs">بحث (اسم/يوزر)</label>
          <input name="q" value="{{ $q }}" placeholder="ابحث..."
                 class="mt-1 w-full rounded-2xl bg-slate-950/60 border border-white/10 text-white px-4 py-3 outline-none focus:border-fuchsia-400/40">
        </div>

        <div class="md:col-span-3">
          <label class="text-white/70 text-xs">العضو</label>
          <select name="user_id" class="mt-1 w-full rounded-2xl bg-slate-950/60 border border-white/10 text-white px-4 py-3 outline-none focus:border-fuchsia-400/40">
            <option value="all" @selected($userId==='all')>الكل</option>
            @foreach(($users ?? []) as $u)
              @php
                $uid = is_array($u) ? ($u['id'] ?? null) : ($u->id ?? null);
                $un  = is_array($u) ? ($u['name'] ?? '') : ($u->name ?? '');
                $uu  = is_array($u) ? ($u['username'] ?? '') : ($u->username ?? '');
              @endphp
              @if($uid)
                <option value="{{ $uid }}" @selected((string)$userId === (string)$uid)>{{ $un }} @if($uu) — {{ $uu }} @endif</option>
              @endif
            @endforeach
          </select>
        </div>

        <div class="md:col-span-2">
          <label class="text-white/70 text-xs">مستوى الخطر</label>
          <select name="level" class="mt-1 w-full rounded-2xl bg-slate-950/60 border border-white/10 text-white px-4 py-3 outline-none focus:border-fuchsia-400/40">
            <option value="" @selected($level==='')>الكل</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="md:col-span-1">
          <label class="text-white/70 text-xs">أيام</label>
          <input type="number" min="1" max="60" name="days" value="{{ (int)$days }}"
                 class="mt-1 w-full rounded-2xl bg-slate-950/60 border border-white/10 text-white px-4 py-3 outline-none focus:border-fuchsia-400/40">
        </div>

        <div class="md:col-span-2">
          <label class="text-white/70 text-xs">العرض</label>
          <select name="view" class="mt-1 w-full rounded-2xl bg-slate-950/60 border border-white/10 text-white px-4 py-3 outline-none focus:border-fuchsia-400/40">
            <option value="table" @selected($view==='table')>جدول</option>
            <option value="cards" @selected($view==='cards')>كروت</option>
          </select>
        </div>

        {{-- keep section param if exists --}}
        @if(request()->has('section'))
          <input type="hidden" name="section" value="{{ request('section') }}">
        @endif

        <div class="md:col-span-12 flex flex-wrap gap-2 justify-between items-center pt-1">
          <div class="text-white/60 text-xs">
            توصيف سريع:
            <span class="inline-flex items-center gap-1 px-2 py-1 rounded-xl border border-white/10 bg-white/5 mx-1">
              <span class="w-2 h-2 rounded-full bg-rose-400"></span> عالي
            </span>
            <span class="inline-flex items-center gap-1 px-2 py-1 rounded-xl border border-white/10 bg-white/5 mx-1">
              <span class="w-2 h-2 rounded-full bg-amber-400"></span> متوسط
            </span>
            <span class="inline-flex items-center gap-1 px-2 py-1 rounded-xl border border-white/10 bg-white/5 mx-1">
              <span class="w-2 h-2 rounded-full bg-emerald-400"></span> منخفض
            </span>
          </div>

          <div class="flex gap-2">
            <button type="submit" class="rounded-2xl px-4 py-2.5 bg-fuchsia-500/20 border border-fuchsia-400/30 text-fuchsia-100 hover:bg-fuchsia-500/25">
              <i class="fa-solid fa-filter me-1"></i> تطبيق
            </button>
            <a href="{{ url()->current() }}?section={{ request('section','ai_alerts_issues') }}"
               class="rounded-2xl px-4 py-2.5 bg-white/5 border border-white/10 text-white/80 hover:bg-white/10">
              <i class="fa-solid fa-rotate-left me-1"></i> تصفير
            </a>
            <button type="button" id="btnRefresh"
                    class="rounded-2xl px-4 py-2.5 bg-white/5 border border-white/10 text-white/80 hover:bg-white/10">
              <i class="fa-solid fa-rotate me-1"></i> تحديث الآن
            </button>
          </div>
        </div>
      </form>
    </div>

    {{-- LIST --}}
    <div class="rounded-3xl border border-white/10 bg-white/5 overflow-hidden">
      <div class="px-5 py-4 flex items-center justify-between border-b border-white/10">
        <div class="text-white font-extrabold">
          <i class="fa-solid fa-shield-halved text-fuchsia-200 me-1"></i>
          قائمة الإنذارات
        </div>
        <div class="text-white/60 text-xs" id="countInfo">
          {{ $rows->count() }} نتيجة
        </div>
      </div>

      @if($view === 'table')
        <div class="overflow-x-auto">
          <table class="min-w-full text-sm text-white/80">
            <thead class="bg-white/5 text-white/70">
              <tr>
                <th class="px-5 py-3 text-right">عضو</th>
                <th class="px-5 py-3 text-right">الخطر</th>
                <th class="px-5 py-3 text-right">نشاط (د)</th>
                <th class="px-5 py-3 text-right">غياب</th>
                <th class="px-5 py-3 text-right">مخالفات</th>
                <th class="px-5 py-3 text-right">نقاط</th>
                <th class="px-5 py-3 text-right">جهاز/IP</th>
                <th class="px-5 py-3 text-right">تفاصيل</th>
              </tr>
            </thead>

            <tbody id="rowsTbody" class="divide-y divide-white/5">
              @forelse($rows as $r)
                @php
                  $lv = $lvlBadge[$r['risk_level'] ?? ''] ?? $lvlBadge[''];
                  [$rv, $barCls] = $riskBar((int)($r['risk'] ?? 0));
                @endphp
                <tr class="hover:bg-white/5">
                  <td class="px-5 py-3">
                    <div class="flex flex-col">
                      <div class="text-white font-semibold">{{ $r['name'] ?? '—' }}</div>
                      <div class="text-white/50 text-xs">{{ $r['username'] ?? '' }} • #{{ $r['id'] ?? '' }}</div>
                    </div>
                  </td>

                  <td class="px-5 py-3">
                    <div class="flex items-center gap-2">
                      <span class="inline-flex items-center gap-2 px-2 py-1 rounded-xl border {{ $lv['c'] }}">
                        <span class="w-2 h-2 rounded-full {{ $lv['dot'] }}"></span>
                        <span class="font-bold">{{ (int)$rv }}</span>
                      </span>
                      <div class="w-28 h-2 rounded-full bg-white/10 overflow-hidden">
                        <div class="h-2 {{ $barCls }}" style="width: {{ (int)$rv }}%"></div>
                      </div>
                    </div>
                  </td>

                  <td class="px-5 py-3 text-white/80 font-semibold">{{ (int)($r['minutes'] ?? 0) }}</td>

                  <td class="px-5 py-3">
                    <div class="text-xs text-white/70">
                      <div>غير مبرر: <span class="text-white font-semibold">{{ (int)($r['abs_un'] ?? 0) }}</span></div>
                      <div>مبرر: <span class="text-white/80 font-semibold">{{ (int)($r['abs_ex'] ?? 0) }}</span></div>
                    </div>
                  </td>

                  <td class="px-5 py-3 text-white/80 font-semibold">{{ (int)($r['viol'] ?? 0) }}</td>
                  <td class="px-5 py-3 text-white/80 font-semibold">{{ (int)($r['points'] ?? 0) }}</td>

                  <td class="px-5 py-3 text-white/70 text-xs">
                    @if((int)($r['dev_flag'] ?? 0) === 1)
                      <span class="inline-flex px-2 py-1 rounded-xl border border-rose-400/30 bg-rose-500/15 text-rose-200">
                        🚨 أجهزة: {{ (int)($r['devs'] ?? 0) }} • IPs: {{ (int)($r['ips'] ?? 0) }}
                      </span>
                    @else
                      <span class="inline-flex px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/60">
                        طبيعي
                      </span>
                    @endif
                  </td>

                  <td class="px-5 py-3">
                    <button type="button"
                            class="openReasons rounded-2xl px-3 py-2 bg-white/5 border border-white/10 text-white/80 hover:bg-white/10 text-xs"
                            data-name="{{ e($r['name'] ?? '') }}"
                            data-username="{{ e($r['username'] ?? '') }}"
                            data-risk="{{ (int)($r['risk'] ?? 0) }}"
                            data-level="{{ e($r['risk_level'] ?? '') }}"
                            data-reasons='@json($r["reasons"] ?? [])'>
                      <i class="fa-solid fa-list-check me-1"></i> الأسباب
                    </button>
                  </td>
                </tr>
              @empty
                <tr>
                  <td class="px-5 py-10 text-center text-white/60" colspan="8">
                    لا يوجد إنذارات ضمن الفلاتر الحالية.
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      @else
        {{-- CARDS --}}
        <div id="rowsCards" class="p-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          @forelse($rows as $r)
            @php
              $lv = $lvlBadge[$r['risk_level'] ?? ''] ?? $lvlBadge[''];
              [$rv, $barCls] = $riskBar((int)($r['risk'] ?? 0));
              $reasons = $r['reasons'] ?? [];
            @endphp

            <div class="rounded-3xl border border-white/10 bg-white/5 p-4 hover:bg-white/10 transition">
              <div class="flex items-start justify-between gap-3">
                <div>
                  <div class="text-white font-extrabold">{{ $r['name'] ?? '—' }}</div>
                  <div class="text-white/50 text-xs">{{ $r['username'] ?? '' }} • #{{ $r['id'] ?? '' }}</div>
                </div>
                <span class="inline-flex items-center gap-2 px-2 py-1 rounded-xl border {{ $lv['c'] }}">
                  <span class="w-2 h-2 rounded-full {{ $lv['dot'] }}"></span>
                  <span class="font-bold">{{ (int)$rv }}</span>
                </span>
              </div>

              <div class="mt-3 w-full h-2 rounded-full bg-white/10 overflow-hidden">
                <div class="h-2 {{ $barCls }}" style="width: {{ (int)$rv }}%"></div>
              </div>

              <div class="mt-3 grid grid-cols-2 gap-2 text-xs">
                <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
                  <div class="text-white/60">نشاط</div>
                  <div class="text-white font-bold">{{ (int)($r['minutes'] ?? 0) }} د</div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
                  <div class="text-white/60">مخالفات</div>
                  <div class="text-white font-bold">{{ (int)($r['viol'] ?? 0) }}</div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
                  <div class="text-white/60">غياب غير مبرر</div>
                  <div class="text-white font-bold">{{ (int)($r['abs_un'] ?? 0) }}</div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
                  <div class="text-white/60">نقاط</div>
                  <div class="text-white font-bold">{{ (int)($r['points'] ?? 0) }}</div>
                </div>
              </div>

              <div class="mt-3 flex flex-wrap gap-2">
                @if((int)($r['dev_flag'] ?? 0) === 1)
                  <span class="inline-flex px-2 py-1 rounded-xl border border-rose-400/30 bg-rose-500/15 text-rose-200 text-xs">
                    🧩 أجهزة: {{ (int)($r['devs'] ?? 0) }} • IPs: {{ (int)($r['ips'] ?? 0) }}
                  </span>
                @else
                  <span class="inline-flex px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/60 text-xs">
                    🧩 جهاز/IP طبيعي
                  </span>
                @endif

                <span class="inline-flex px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/70 text-xs">
                  أسباب: {{ is_countable($reasons) ? count($reasons) : 0 }}
                </span>
              </div>

              <div class="mt-4">
                <button type="button"
                        class="openReasons w-full rounded-2xl px-3 py-2.5 bg-white/5 border border-white/10 text-white/80 hover:bg-white/10 text-sm"
                        data-name="{{ e($r['name'] ?? '') }}"
                        data-username="{{ e($r['username'] ?? '') }}"
                        data-risk="{{ (int)($r['risk'] ?? 0) }}"
                        data-level="{{ e($r['risk_level'] ?? '') }}"
                        data-reasons='@json($r["reasons"] ?? [])'>
                  <i class="fa-solid fa-list-check me-1"></i> عرض الأسباب
                </button>
              </div>
            </div>
          @empty
            <div class="col-span-full text-center text-white/60 py-10">
              لا يوجد إنذارات ضمن الفلاتر الحالية.
            </div>
          @endforelse
        </div>
      @endif
    </div>

  </div>
</div>

{{-- MODAL: Reasons --}}
<div id="reasonsModal" class="fixed inset-0 z-[9999] hidden">
  <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>

  <div class="relative min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-2xl rounded-3xl border border-white/10 bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 shadow-2xl">
      <div class="p-5 border-b border-white/10 flex items-center justify-between">
        <div>
          <div class="text-white font-extrabold text-lg" id="mTitle">الأسباب</div>
          <div class="text-white/50 text-xs" id="mSub">—</div>
        </div>
        <button id="mClose" class="rounded-2xl px-3 py-2 bg-white/5 border border-white/10 text-white/80 hover:bg-white/10">
          <i class="fa-solid fa-xmark"></i>
        </button>
      </div>

      <div class="p-5 space-y-3">
        <div class="flex flex-wrap items-center gap-2">
          <span id="mRiskBadge" class="inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl border border-white/10 bg-white/5 text-white/80">
            <i class="fa-solid fa-gauge-high"></i>
            <span>Risk:</span>
            <span id="mRisk" class="font-extrabold">0</span>
          </span>
          <span id="mLevel" class="inline-flex px-3 py-1.5 rounded-2xl border border-white/10 bg-white/5 text-white/70">—</span>
        </div>

        <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
          <div class="text-white/80 font-semibold mb-2">قائمة الأسباب</div>
          <ul id="mReasons" class="space-y-2 text-white/70 text-sm">
            <li>—</li>
          </ul>
        </div>

        <div class="text-white/50 text-xs">
          ملاحظة: هذا مؤشر “مساعدة قرار” وليس حكم نهائي — الهدف إنك تعرف مين يحتاج متابعة أسرع.
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function(){
  // ✅ endpoint: نفس الصفحة لكن ajax=1 (لأن السيكشن بيرجع JSON عند ajax)
  const ajaxUrl = new URL(window.location.href);
  ajaxUrl.searchParams.set('ajax','1');

  const view = @json($view);

  const $ = (id) => document.getElementById(id);

  function escapeHtml(s){
    return String(s ?? '').replace(/[&<>"']/g, m => ({
      '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'
    }[m]));
  }

  function badge(level){
    if(level === 'high') return {text:'خطر عالي', cls:'border-rose-400/30 bg-rose-500/15 text-rose-200', dot:'bg-rose-400'};
    if(level === 'mid')  return {text:'متوسط',   cls:'border-amber-400/30 bg-amber-500/15 text-amber-200', dot:'bg-amber-400'};
    return {text:'منخفض', cls:'border-emerald-400/30 bg-emerald-500/15 text-emerald-200', dot:'bg-emerald-400'};
  }

  function barCls(risk){
    risk = Number(risk||0);
    if(risk >= 60) return 'bg-rose-500/70';
    if(risk >= 30) return 'bg-amber-500/70';
    return 'bg-emerald-500/70';
  }

  function getParamsFromUI(){
    const sp = new URLSearchParams(window.location.search);
    // نقرأ نفس الفلاتر الموجودة
    return {
      q: sp.get('q') || '',
      level: sp.get('level') || '',
      user_id: sp.get('user_id') || 'all',
      days: sp.get('days') || '7',
      from: sp.get('from') || '',
      to: sp.get('to') || '',
      section: sp.get('section') || 'ai_alerts_issues',
    };
  }

  function rowHtml(r){
    const b = badge(r.risk_level);
    const risk = Number(r.risk||0);
    const reasons = Array.isArray(r.reasons) ? r.reasons : [];
    const devFlag = Number(r.dev_flag||0) === 1;

    return `
      <tr class="hover:bg-white/5">
        <td class="px-5 py-3">
          <div class="flex flex-col">
            <div class="text-white font-semibold">${escapeHtml(r.name)}</div>
            <div class="text-white/50 text-xs">${escapeHtml(r.username || '')} • #${escapeHtml(r.id)}</div>
          </div>
        </td>

        <td class="px-5 py-3">
          <div class="flex items-center gap-2">
            <span class="inline-flex items-center gap-2 px-2 py-1 rounded-xl border ${b.cls}">
              <span class="w-2 h-2 rounded-full ${b.dot}"></span>
              <span class="font-bold">${risk}</span>
            </span>
            <div class="w-28 h-2 rounded-full bg-white/10 overflow-hidden">
              <div class="h-2 ${barCls(risk)}" style="width:${risk}%"></div>
            </div>
          </div>
        </td>

        <td class="px-5 py-3 text-white/80 font-semibold">${Number(r.minutes||0)}</td>

        <td class="px-5 py-3">
          <div class="text-xs text-white/70">
            <div>غير مبرر: <span class="text-white font-semibold">${Number(r.abs_un||0)}</span></div>
            <div>مبرر: <span class="text-white/80 font-semibold">${Number(r.abs_ex||0)}</span></div>
          </div>
        </td>

        <td class="px-5 py-3 text-white/80 font-semibold">${Number(r.viol||0)}</td>
        <td class="px-5 py-3 text-white/80 font-semibold">${Number(r.points||0)}</td>

        <td class="px-5 py-3 text-white/70 text-xs">
          ${
            devFlag
            ? `<span class="inline-flex px-2 py-1 rounded-xl border border-rose-400/30 bg-rose-500/15 text-rose-200">
                 🚨 أجهزة: ${Number(r.devs||0)} • IPs: ${Number(r.ips||0)}
               </span>`
            : `<span class="inline-flex px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/60">طبيعي</span>`
          }
        </td>

        <td class="px-5 py-3">
          <button type="button"
            class="openReasons rounded-2xl px-3 py-2 bg-white/5 border border-white/10 text-white/80 hover:bg-white/10 text-xs"
            data-name="${escapeHtml(r.name)}"
            data-username="${escapeHtml(r.username || '')}"
            data-risk="${risk}"
            data-level="${escapeHtml(r.risk_level || '')}"
            data-reasons='${escapeHtml(JSON.stringify(reasons))}'>
            <i class="fa-solid fa-list-check me-1"></i> الأسباب
          </button>
        </td>
      </tr>
    `;
  }

  function cardHtml(r){
    const b = badge(r.risk_level);
    const risk = Number(r.risk||0);
    const reasons = Array.isArray(r.reasons) ? r.reasons : [];
    const devFlag = Number(r.dev_flag||0) === 1;

    return `
      <div class="rounded-3xl border border-white/10 bg-white/5 p-4 hover:bg-white/10 transition">
        <div class="flex items-start justify-between gap-3">
          <div>
            <div class="text-white font-extrabold">${escapeHtml(r.name)}</div>
            <div class="text-white/50 text-xs">${escapeHtml(r.username || '')} • #${escapeHtml(r.id)}</div>
          </div>
          <span class="inline-flex items-center gap-2 px-2 py-1 rounded-xl border ${b.cls}">
            <span class="w-2 h-2 rounded-full ${b.dot}"></span>
            <span class="font-bold">${risk}</span>
          </span>
        </div>

        <div class="mt-3 w-full h-2 rounded-full bg-white/10 overflow-hidden">
          <div class="h-2 ${barCls(risk)}" style="width:${risk}%"></div>
        </div>

        <div class="mt-3 grid grid-cols-2 gap-2 text-xs">
          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-white/60">نشاط</div>
            <div class="text-white font-bold">${Number(r.minutes||0)} د</div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-white/60">مخالفات</div>
            <div class="text-white font-bold">${Number(r.viol||0)}</div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-white/60">غياب غير مبرر</div>
            <div class="text-white font-bold">${Number(r.abs_un||0)}</div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-white/60">نقاط</div>
            <div class="text-white font-bold">${Number(r.points||0)}</div>
          </div>
        </div>

        <div class="mt-3 flex flex-wrap gap-2">
          ${
            devFlag
            ? `<span class="inline-flex px-2 py-1 rounded-xl border border-rose-400/30 bg-rose-500/15 text-rose-200 text-xs">
                 🧩 أجهزة: ${Number(r.devs||0)} • IPs: ${Number(r.ips||0)}
               </span>`
            : `<span class="inline-flex px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/60 text-xs">
                 🧩 جهاز/IP طبيعي
               </span>`
          }
          <span class="inline-flex px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/70 text-xs">
            أسباب: ${reasons.length}
          </span>
        </div>

        <div class="mt-4">
          <button type="button"
            class="openReasons w-full rounded-2xl px-3 py-2.5 bg-white/5 border border-white/10 text-white/80 hover:bg-white/10 text-sm"
            data-name="${escapeHtml(r.name)}"
            data-username="${escapeHtml(r.username || '')}"
            data-risk="${risk}"
            data-level="${escapeHtml(r.risk_level || '')}"
            data-reasons='${escapeHtml(JSON.stringify(reasons))}'>
            <i class="fa-solid fa-list-check me-1"></i> عرض الأسباب
          </button>
        </div>
      </div>
    `;
  }

  function bindReasonButtons(){
    document.querySelectorAll('.openReasons').forEach(btn=>{
      btn.addEventListener('click', ()=>{
        const name = btn.getAttribute('data-name') || '';
        const username = btn.getAttribute('data-username') || '';
        const risk = btn.getAttribute('data-risk') || '0';
        const level = btn.getAttribute('data-level') || '';
        let reasons = [];
        try { reasons = JSON.parse(btn.getAttribute('data-reasons') || '[]'); } catch(e){}

        $('mTitle').textContent = 'الأسباب';
        $('mSub').textContent = `${name}${username ? ' — '+username : ''}`;
        $('mRisk').textContent = risk;

        const b = badge(level);
        $('mLevel').textContent = b.text;
        $('mLevel').className = `inline-flex px-3 py-1.5 rounded-2xl border ${b.cls}`;

        const ul = $('mReasons');
        ul.innerHTML = '';
        if(Array.isArray(reasons) && reasons.length){
          reasons.forEach(t=>{
            const li = document.createElement('li');
            li.className = 'rounded-2xl border border-white/10 bg-white/5 p-3';
            li.textContent = String(t);
            ul.appendChild(li);
          });
        }else{
          const li = document.createElement('li');
          li.className = 'rounded-2xl border border-white/10 bg-white/5 p-3';
          li.textContent = 'لا يوجد أسباب مسجلة.';
          ul.appendChild(li);
        }

        $('reasonsModal').classList.remove('hidden');
      });
    });
  }

  function closeModal(){
    $('reasonsModal')?.classList.add('hidden');
  }

  $('mClose')?.addEventListener('click', closeModal);
  document.addEventListener('keydown', (e)=>{ if(e.key === 'Escape') closeModal(); });
  $('reasonsModal')?.addEventListener('click', (e)=>{ if(e.target === $('reasonsModal')) closeModal(); });

  async function refresh(){
    try{
      const url = new URL(ajaxUrl.toString());
      const p = getParamsFromUI();
      Object.keys(p).forEach(k=>{
        if(p[k] !== '') url.searchParams.set(k, p[k]);
      });

      const res = await fetch(url.toString(), { headers: { 'Accept': 'application/json' }});
      const js  = await res.json();

      if(js?.summary){
        $('stat_total').textContent = js.summary.total ?? 0;
        $('stat_high').textContent  = js.summary.high ?? 0;
        $('stat_mid').textContent   = js.summary.mid ?? 0;
        $('stat_low').textContent   = js.summary.low ?? 0;

        $('range_from').textContent = (js.summary.from || '').slice(0,10) || $('range_from').textContent;
        $('range_to').textContent   = (js.summary.to || '').slice(0,10) || $('range_to').textContent;
      }

      $('stat_now').textContent = new Date().toLocaleTimeString();

      const rows = Array.isArray(js?.rows) ? js.rows : [];
      $('countInfo').textContent = `${rows.length} نتيجة`;

      if(view === 'table'){
        const tbody = $('rowsTbody');
        if(tbody){
          tbody.innerHTML = rows.length
            ? rows.map(rowHtml).join('')
            : `<tr><td class="px-5 py-10 text-center text-white/60" colspan="8">لا يوجد إنذارات ضمن الفلاتر الحالية.</td></tr>`;
        }
      }else{
        const wrap = $('rowsCards');
        if(wrap){
          wrap.innerHTML = rows.length
            ? rows.map(cardHtml).join('')
            : `<div class="col-span-full text-center text-white/60 py-10">لا يوجد إنذارات ضمن الفلاتر الحالية.</div>`;
        }
      }

      bindReasonButtons();
    }catch(e){
      console.log('AI alerts refresh error', e);
    }
  }

  document.getElementById('btnRefresh')?.addEventListener('click', refresh);

  bindReasonButtons();
  refresh();
  setInterval(refresh, 12000);
})();
</script>
@endsection