{{-- resources/views/superadmin/proactive/command/compliance.blade.php --}}
@extends('layouts.superadmin')

@section('title', 'ProActive — التقارير')
@section('page-title', 'تقارير ProActive')

@section('content')
@php
  use Illuminate\Support\Facades\Route;

  if (!function_exists('safe_route')) {
      function safe_route(string $name, array $params = [], bool $absolute = true, string $fallback = '#'): string
      {
          try { return Route::has($name) ? route($name, $params, $absolute) : $fallback; }
          catch (\Throwable $e) { return $fallback; }
      }
  }

  if (!function_exists('getv')) {
      function getv($src, string $key, $default = null) {
          if (is_array($src)) return array_key_exists($key, $src) ? $src[$key] : $default;
          if (is_object($src)) return isset($src->{$key}) ? $src->{$key} : $default;
          return $default;
      }
  }

  $chip = fn($cls) => "px-2.5 py-1 rounded-xl border text-[11px] font-extrabold $cls";
  $pill = fn($cls) => "px-3 py-1.5 rounded-2xl border text-[12px] font-black $cls";

  $qs = request()->query();
  $rows   = $rows ?? [];
  $stats  = $stats ?? ['total'=>0,'pending'=>0,'approved'=>0,'rejected'=>0,'with_issues'=>0,'with_progress'=>0,'avg_ai'=>0];

  $from   = $from ?? null;
  $to     = $to ?? null;

  $range  = (string)($range ?? request('range','14d'));
  $view   = (string)($view ?? request('view','panels'));
  $search = trim((string)($search ?? request('search','')));

  if(!in_array($range,['today','week','month','14d'],true)) $range='14d';
  if(!in_array($view,['table','panels'],true)) $view='panels';

  $filters = $filters ?? [];
  $platform = (string)($filters['platform'] ?? request('platform',''));
  $status   = (string)($filters['status'] ?? request('status',''));
  $type     = (string)($filters['type'] ?? request('type',''));
  $grade    = (string)($filters['grade'] ?? request('grade',''));
  $issues   = (string)($filters['issues'] ?? request('issues',''));
  $progress = (string)($filters['progress'] ?? request('progress',''));

  $rCommand    = safe_route('superadmin.proactive.command', [], true, url('/superadmin/proactive/command'));
  $rCompliance = safe_route('superadmin.proactive.compliance', [], true, url()->current());

  $hasRows = is_array($rows) ? count($rows) > 0 : (method_exists($rows,'count') ? $rows->count() > 0 : false);

  $rangeUrl = function($key) use ($qs, $rCompliance) {
    return $rCompliance.'?'.http_build_query(array_merge($qs, ['range'=>$key, 'from'=>null, 'to'=>null]));
  };
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 sm:py-8 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 border border-cyan-400/20 bg-gradient-to-br from-slate-900/90 via-slate-900/95 to-black/95 shadow-2xl shadow-cyan-500/10">
      <div class="pointer-events-none absolute -top-32 -right-24 w-[520px] h-[520px] rounded-full bg-cyan-400/10 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-40 -left-28 w-[560px] h-[560px] rounded-full bg-fuchsia-400/10 blur-3xl"></div>

      <div class="p-5 sm:p-6 lg:p-7 space-y-5">

        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
          <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-shield-halved text-cyan-200"></i>
              <span class="text-[12px] font-extrabold">ProActive • غرفة التقارير</span>
            </div>

            <h1 class="text-2xl sm:text-3xl font-black text-white tracking-tight">
              تقارير ProActive
              <span class="text-white/50 font-semibold text-base">— لوحة التحليل</span>
            </h1>

            <div class="text-white/70 text-sm sm:text-[15px] leading-relaxed max-w-3xl">
              هنا تظهر التقارير بشكل احترافي: الحالة + كاتب التقرير + مؤشرات الأداء + رادار المستوى + ذكاء اصطناعي + (Plus أعضاء + توثيق).
            </div>

            <div class="flex flex-wrap items-center gap-2 pt-1 text-[11px]">
              <span class="{{ $chip('border-white/10 bg-white/5 text-white/80') }}">الإجمالي: {{ (int)$stats['total'] }}</span>
              <span class="{{ $chip('border-slate-400/20 bg-white/5 text-white/70') }}">معلّق: {{ (int)$stats['pending'] }}</span>
              <span class="{{ $chip('border-emerald-400/25 bg-emerald-500/10 text-emerald-100') }}">مقبول: {{ (int)$stats['approved'] }}</span>
              <span class="{{ $chip('border-rose-400/25 bg-rose-500/10 text-rose-100') }}">مرفوض: {{ (int)$stats['rejected'] }}</span>
              <span class="{{ $chip('border-amber-400/25 bg-amber-500/10 text-amber-100') }}">مشاكل: {{ (int)$stats['with_issues'] }}</span>
              <span class="{{ $chip('border-cyan-400/25 bg-cyan-500/10 text-cyan-100') }}">تطوّر: {{ (int)$stats['with_progress'] }}</span>
              <span class="{{ $chip('border-fuchsia-400/25 bg-fuchsia-500/10 text-fuchsia-100') }}">متوسط AI: {{ (int)$stats['avg_ai'] }}%</span>
            </div>

            @if($from && $to)
              <div class="text-white/55 text-xs">
                المدى: <span class="text-white/80 font-bold">{{ $from->toDateString() }}</span>
                ←
                <span class="text-white/80 font-bold">{{ $to->toDateString() }}</span>
              </div>
            @endif
          </div>

          <div class="flex flex-wrap items-center gap-2">
            <a href="{{ $rCommand }}"
               class="px-4 py-2.5 rounded-2xl bg-white/5 hover:bg-white/10 text-white/85 font-extrabold border border-white/10">
              <i class="fa-solid fa-arrow-right ml-1"></i> رجوع
            </a>

            <a href="{{ $rCompliance }}?{{ http_build_query(array_merge($qs, ['view'=>'panels'])) }}"
               class="px-3 py-2 rounded-2xl text-sm font-extrabold border {{ $view==='panels' ? 'border-cyan-400/40 bg-cyan-500/15 text-cyan-100' : 'border-white/10 bg-white/5 text-white/80 hover:text-white hover:bg-white/10' }}">
              <i class="fa-solid fa-layer-group ml-1"></i> بانيل
            </a>

            <a href="{{ $rCompliance }}?{{ http_build_query(array_merge($qs, ['view'=>'table'])) }}"
               class="px-3 py-2 rounded-2xl text-sm font-extrabold border {{ $view==='table' ? 'border-emerald-400/40 bg-emerald-500/15 text-emerald-100' : 'border-white/10 bg-white/5 text-white/80 hover:text-white hover:bg-white/10' }}">
              <i class="fa-solid fa-table-list ml-1"></i> جدول
            </a>
          </div>
        </div>

        {{-- Range buttons --}}
        <div class="flex flex-wrap gap-2">
          <a href="{{ $rangeUrl('today') }}"
             class="px-3 py-2 rounded-2xl text-sm font-extrabold border {{ $range==='today' ? 'border-emerald-400/40 bg-emerald-500/15 text-emerald-100' : 'border-white/10 bg-white/5 text-white/80 hover:bg-white/10' }}">
            اليوم
          </a>
          <a href="{{ $rangeUrl('week') }}"
             class="px-3 py-2 rounded-2xl text-sm font-extrabold border {{ $range==='week' ? 'border-cyan-400/40 bg-cyan-500/15 text-cyan-100' : 'border-white/10 bg-white/5 text-white/80 hover:bg-white/10' }}">
            أسبوع
          </a>
          <a href="{{ $rangeUrl('month') }}"
             class="px-3 py-2 rounded-2xl text-sm font-extrabold border {{ $range==='month' ? 'border-fuchsia-400/40 bg-fuchsia-500/15 text-fuchsia-100' : 'border-white/10 bg-white/5 text-white/80 hover:bg-white/10' }}">
            شهر
          </a>
          <a href="{{ $rangeUrl('14d') }}"
             class="px-3 py-2 rounded-2xl text-sm font-extrabold border {{ $range==='14d' ? 'border-amber-400/40 bg-amber-500/15 text-amber-100' : 'border-white/10 bg-white/5 text-white/80 hover:bg-white/10' }}">
            14 يوم
          </a>
        </div>

        {{-- Filter bar --}}
        <form method="GET" action="{{ $rCompliance }}" class="rounded-3xl border border-white/10 bg-white/5 p-4">
          <div class="grid grid-cols-1 lg:grid-cols-12 gap-3">
            <div class="lg:col-span-4">
              <label class="text-white/70 text-xs">بحث</label>
              <div class="mt-1 relative">
                <i class="fa-solid fa-magnifying-glass absolute right-3 top-1/2 -translate-y-1/2 text-white/35"></i>
                <input name="search" value="{{ $search }}" placeholder="المضيف / المالك / ملخص..."
                       class="w-full pr-10 pl-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
              </div>
            </div>

            <div class="lg:col-span-2">
              <label class="text-white/70 text-xs">من</label>
              <input type="date" name="from" value="{{ $from ? $from->toDateString() : '' }}"
                     class="mt-1 w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
            </div>

            <div class="lg:col-span-2">
              <label class="text-white/70 text-xs">إلى</label>
              <input type="date" name="to" value="{{ $to ? $to->toDateString() : '' }}"
                     class="mt-1 w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
            </div>

            <div class="lg:col-span-2">
              <label class="text-white/70 text-xs">المنصة</label>
              <select name="platform" class="mt-1 w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
                <option value="">الكل</option>
                <option value="tiktok" @selected($platform==='tiktok')>تيكتوك</option>
                <option value="instagram" @selected($platform==='instagram')>إنستغرام</option>
                <option value="youtube" @selected($platform==='youtube')>يوتيوب</option>
                <option value="other" @selected($platform==='other')>أخرى</option>
              </select>
            </div>

            <div class="lg:col-span-2">
              <label class="text-white/70 text-xs">الحالة</label>
              <select name="status" class="mt-1 w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
                <option value="">الكل</option>
                <option value="pending" @selected($status==='pending')>معلّق</option>
                <option value="approved" @selected($status==='approved')>مقبول</option>
                <option value="rejected" @selected($status==='rejected')>مرفوض</option>
                <option value="review" @selected($status==='review')>قيد المراجعة</option>
              </select>
            </div>

            <div class="lg:col-span-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
              <div>
                <label class="text-white/70 text-xs">النوع</label>
                <select name="type" class="mt-1 w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white">
                  <option value="">الكل</option>
                  <option value="regular" @selected($type==='regular')>عادي</option>
                  <option value="plus" @selected($type==='plus')>بلس +</option>
                </select>
              </div>

              <div>
                <label class="text-white/70 text-xs">تقييم اللايف</label>
                <select name="grade" class="mt-1 w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white">
                  <option value="">الكل</option>
                  <option value="good" @selected($grade==='good')>جيد</option>
                  <option value="very_good" @selected($grade==='very_good')>جيد جدًا</option>
                  <option value="excellent" @selected($grade==='excellent')>ممتاز</option>
                </select>
              </div>

              <div>
                <label class="text-white/70 text-xs">مشاكل</label>
                <select name="issues" class="mt-1 w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white">
                  <option value="">الكل</option>
                  <option value="yes" @selected($issues==='yes')>نعم</option>
                  <option value="no"  @selected($issues==='no')>لا</option>
                </select>
              </div>

              <div>
                <label class="text-white/70 text-xs">تطوّر</label>
                <select name="progress" class="mt-1 w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white">
                  <option value="">الكل</option>
                  <option value="yes" @selected($progress==='yes')>نعم</option>
                  <option value="no"  @selected($progress==='no')>لا</option>
                </select>
              </div>

              <div class="flex items-end gap-2">
                <input type="hidden" name="range" value="{{ $range }}">
                <input type="hidden" name="view" value="{{ $view }}">

                <button class="w-full px-4 py-2.5 rounded-2xl bg-cyan-600/70 hover:bg-cyan-600 text-white font-extrabold border border-cyan-400/25">
                  <i class="fa-solid fa-filter ml-1"></i> تطبيق
                </button>

                <a href="{{ $rCompliance }}" class="px-4 py-2.5 rounded-2xl bg-white/5 hover:bg-white/10 text-white/85 font-extrabold border border-white/10">
                  <i class="fa-solid fa-rotate-left"></i>
                </a>
              </div>
            </div>

          </div>
        </form>

      </div>
    </div>

    {{-- LIST --}}
    @if($hasRows)

      {{-- PANELS --}}
      @if($view==='panels')
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
          @foreach($rows as $x)
            @php
              $id = (int)getv($x,'id',0);
              $date = (string)getv($x,'activity_date','-');
              $host = (string)getv($x,'live_host','-');
              $owner= (string)getv($x,'live_owner_name','-');
              $sum  = (string)getv($x,'short_summary','—');
              $link = (string)getv($x,'live_link','');

              $ai  = (int)getv($x,'__ai',0);
              $lvl = (array)getv($x,'__ai_level', ['label'=>'—','cls'=>'border-white/10 bg-white/5 text-white/70']);
              $st  = (array)getv($x,'__status', ['label'=>'معلّق','icon'=>'fa-hourglass-half','cls'=>'border-white/10 bg-white/5 text-white/70']);
              $pl  = (array)getv($x,'__platform', ['label'=>'تيكتوك','icon'=>'fa-brands fa-tiktok','cls'=>'border-white/10 bg-white/5 text-white/70']);
              $gr  = (array)getv($x,'__grade', ['label'=>'جيد','cls'=>'border-white/10 bg-white/5 text-white/70']);
              $tp  = (array)getv($x,'__type', ['label'=>'عادي','cls'=>'border-white/10 bg-white/5 text-white/70']);

              $creatorName = (string)getv($x,'created_by_name','');
              $creatorUser = (string)getv($x,'created_by_username','');
              $creatorAv   = (string)getv($x,'created_by_avatar','');

              $jsonUrl = safe_route('superadmin.proactive.reports.json', ['id'=>$id], true, '#');

              // Alerts (Plus pack)
              $isPlus = ((string)getv($x,'activity_type','regular') === 'plus');
              $pmCount = (int)getv($x,'plus_members_count', 0);
              $docImg  = (string)getv($x,'doc_image_path','');
              $docVid  = (string)getv($x,'doc_video_path','');
              $hasDoc  = ($docImg !== '' || $docVid !== '');

              // AI ring
              $pct = max(0, min(100, $ai));
              $circ = 2 * 3.1415926535 * 22; // r=22
              $dash = ($circ * $pct) / 100;
              $gap  = $circ - $dash;
            @endphp

            <div class="rounded-3xl border border-white/10 bg-white/5 p-4 overflow-hidden relative">
              <div class="pointer-events-none absolute -top-16 -right-16 w-52 h-52 rounded-full bg-cyan-400/10 blur-3xl"></div>

              {{-- badges --}}
              <div class="flex flex-wrap items-center gap-2">
                <span class="{{ $pill($st['cls'] ?? 'border-white/10 bg-white/5 text-white/70') }}">
                  <i class="fa-solid {{ $st['icon'] ?? 'fa-hourglass-half' }} ml-1"></i>{{ $st['label'] ?? 'معلّق' }}
                </span>
                <span class="{{ $pill($pl['cls'] ?? 'border-white/10 bg-white/5 text-white/70') }}">
                  <i class="{{ $pl['icon'] ?? 'fa-brands fa-tiktok' }} ml-1"></i>{{ $pl['label'] ?? 'تيكتوك' }}
                </span>
                <span class="{{ $pill($tp['cls'] ?? 'border-white/10 bg-white/5 text-white/70') }}">{{ $tp['label'] ?? 'عادي' }}</span>
                <span class="{{ $pill($gr['cls'] ?? 'border-white/10 bg-white/5 text-white/70') }}">تقييم: {{ $gr['label'] ?? 'جيد' }}</span>

                {{-- ✅ Alerts --}}
                @if($isPlus)
                  @if($pmCount <= 0)
                    <span class="{{ $pill('border-rose-400/25 bg-rose-500/10 text-rose-100') }}">
                      <i class="fa-solid fa-triangle-exclamation ml-1"></i>بدون أعضاء
                    </span>
                  @else
                    <span class="{{ $pill('border-emerald-400/25 bg-emerald-500/10 text-emerald-100') }}">
                      <i class="fa-solid fa-users ml-1"></i>أعضاء: {{ $pmCount }}
                    </span>
                  @endif

                  @if($hasDoc)
                    <span class="{{ $pill('border-cyan-400/25 bg-cyan-500/10 text-cyan-100') }}">
                      <i class="fa-solid fa-photo-film ml-1"></i>توثيق
                    </span>
                  @else
                    <span class="{{ $pill('border-white/10 bg-black/30 text-white/65') }}">
                      <i class="fa-regular fa-file ml-1"></i>بدون توثيق
                    </span>
                  @endif
                @endif
              </div>

              {{-- title --}}
              <div class="mt-3 flex items-start justify-between gap-3">
                <div class="min-w-0">
                  <div class="text-white font-black text-lg">
                    تقرير #{{ $id }}
                    <span class="text-white/50 font-semibold text-sm">— {{ $date }}</span>
                  </div>
                  <div class="mt-1 text-white/70 text-sm line-clamp-2">
                    <span class="font-bold text-white/85">المضيف:</span> {{ $host }}
                    <span class="mx-2 text-white/25">•</span>
                    <span class="font-bold text-white/85">المالك:</span> {{ $owner }}
                  </div>
                </div>

                {{-- AI Ring --}}
                <div class="shrink-0 flex flex-col items-center">
                  <div class="relative w-14 h-14">
                    <svg class="w-14 h-14" viewBox="0 0 60 60">
                      <circle cx="30" cy="30" r="22" fill="none" stroke="rgba(255,255,255,.10)" stroke-width="8"></circle>
                      <circle cx="30" cy="30" r="22" fill="none" stroke="rgba(34,211,238,.85)" stroke-width="8"
                              stroke-linecap="round"
                              stroke-dasharray="{{ $dash }} {{ $gap }}"
                              transform="rotate(-90 30 30)"></circle>
                    </svg>
                    <div class="absolute inset-0 flex items-center justify-center text-white font-black text-sm">{{ $pct }}%</div>
                  </div>
                  <div class="mt-1 text-[11px] text-white/55">AI</div>
                </div>
              </div>

              {{-- creator --}}
              <div class="mt-3 rounded-2xl border border-white/10 bg-black/20 p-3">
                <div class="flex items-center gap-3">
                  <div class="w-10 h-10 rounded-2xl border border-white/10 bg-black/30 overflow-hidden flex items-center justify-center">
                    @if($creatorAv)
                      <img src="{{ $creatorAv }}" class="w-full h-full object-cover" alt=""
                           onerror="this.style.display='none'">
                    @else
                      <i class="fa-solid fa-user text-white/35"></i>
                    @endif
                  </div>
                  <div class="min-w-0">
                    <div class="text-white font-extrabold truncate">{{ $creatorName ?: 'كاتب غير معروف' }}</div>
                    <div class="text-white/55 text-xs truncate">{{ $creatorUser ? '@'.$creatorUser : '' }}</div>
                  </div>
                  <span class="ms-auto {{ $pill($lvl['cls'] ?? 'border-white/10 bg-white/5 text-white/70') }}">{{ $lvl['label'] ?? '—' }}</span>
                </div>
              </div>

              {{-- summary --}}
              <div class="mt-3 text-white/80 text-sm leading-relaxed line-clamp-2">
                {{ $sum ?: '—' }}
              </div>

              {{-- actions --}}
              <div class="mt-4 flex items-center gap-2">
                @if($link)
                  <a href="{{ $link }}" target="_blank"
                     class="px-3 py-2 rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10 text-white/85 text-sm font-extrabold">
                    <i class="fa-solid fa-link ml-1"></i> رابط
                  </a>
                @endif

                <button type="button"
                        class="ms-auto px-4 py-2 rounded-2xl border border-cyan-400/25 bg-cyan-600/55 hover:bg-cyan-600 text-white text-sm font-black"
                        data-json-url="{{ $jsonUrl }}"
                        onclick="openProactiveReportModal(this)">
                  <i class="fa-solid fa-eye ml-1"></i> عرض التقرير
                </button>
              </div>
            </div>
          @endforeach
        </div>

      {{-- TABLE --}}
      @else
        <div class="rounded-3xl border border-white/10 bg-white/5 overflow-hidden">
          <div class="px-4 py-3 border-b border-white/10 flex items-center justify-between">
            <div class="text-white font-extrabold flex items-center gap-2">
              <i class="fa-solid fa-table text-cyan-200"></i> جدول التقارير
            </div>
            <div class="text-white/55 text-xs">زر “عرض” يفتح مودال ملحمي ويحمل التفاصيل من السيرفر.</div>
          </div>

          <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
              <thead class="bg-black/25 text-white/70">
                <tr>
                  <th class="px-4 py-3 text-right font-bold">#</th>
                  <th class="px-4 py-3 text-right font-bold">التاريخ</th>
                  <th class="px-4 py-3 text-right font-bold">المضيف</th>
                  <th class="px-4 py-3 text-right font-bold">الحالة</th>
                  <th class="px-4 py-3 text-right font-bold">AI</th>
                  <th class="px-4 py-3 text-right font-bold">تنبيهات</th>
                  <th class="px-4 py-3 text-right font-bold">كاتب التقرير</th>
                  <th class="px-4 py-3 text-right font-bold">إجراء</th>
                </tr>
              </thead>

              <tbody class="divide-y divide-white/5">
                @foreach($rows as $x)
                  @php
                    $id = (int)getv($x,'id',0);
                    $date = (string)getv($x,'activity_date','-');
                    $host = (string)getv($x,'live_host','-');

                    $ai  = (int)getv($x,'__ai',0);
                    $lvl = (array)getv($x,'__ai_level', ['label'=>'—','cls'=>'border-white/10 bg-white/5 text-white/70']);
                    $st  = (array)getv($x,'__status', ['label'=>'معلّق','icon'=>'fa-hourglass-half','cls'=>'border-white/10 bg-white/5 text-white/70']);

                    $creatorName = (string)getv($x,'created_by_name','');
                    $creatorUser = (string)getv($x,'created_by_username','');

                    $jsonUrl = safe_route('superadmin.proactive.reports.json', ['id'=>$id], true, '#');

                    $isPlus = ((string)getv($x,'activity_type','regular') === 'plus');
                    $pmCount = (int)getv($x,'plus_members_count', 0);
                    $docImg  = (string)getv($x,'doc_image_path','');
                    $docVid  = (string)getv($x,'doc_video_path','');
                    $hasDoc  = ($docImg !== '' || $docVid !== '');
                  @endphp

                  <tr class="text-white/85 hover:bg-white/5">
                    <td class="px-4 py-3 font-black">{{ $id }}</td>
                    <td class="px-4 py-3">{{ $date }}</td>
                    <td class="px-4 py-3 font-extrabold">{{ $host }}</td>
                    <td class="px-4 py-3">
                      <span class="{{ $pill($st['cls'] ?? 'border-white/10 bg-white/5 text-white/70') }}">
                        <i class="fa-solid {{ $st['icon'] ?? 'fa-hourglass-half' }} ml-1"></i>{{ $st['label'] ?? 'معلّق' }}
                      </span>
                    </td>
                    <td class="px-4 py-3">
                      <div class="flex items-center gap-2">
                        <span class="{{ $pill($lvl['cls'] ?? 'border-white/10 bg-white/5 text-white/70') }}">{{ $lvl['label'] ?? '—' }}</span>
                        <span class="{{ $pill('border-white/10 bg-black/30 text-white') }}">{{ max(0,min(100,$ai)) }}%</span>
                      </div>
                    </td>

                    {{-- ✅ Alerts --}}
                    <td class="px-4 py-3">
                      @if($isPlus)
                        <div class="flex flex-wrap gap-2">
                          @if($pmCount <= 0)
                            <span class="{{ $pill('border-rose-400/25 bg-rose-500/10 text-rose-100') }}">
                              <i class="fa-solid fa-triangle-exclamation ml-1"></i>بدون أعضاء
                            </span>
                          @else
                            <span class="{{ $pill('border-emerald-400/25 bg-emerald-500/10 text-emerald-100') }}">
                              <i class="fa-solid fa-users ml-1"></i>{{ $pmCount }}
                            </span>
                          @endif

                          @if($hasDoc)
                            <span class="{{ $pill('border-cyan-400/25 bg-cyan-500/10 text-cyan-100') }}">
                              <i class="fa-solid fa-photo-film ml-1"></i>توثيق
                            </span>
                          @else
                            <span class="{{ $pill('border-white/10 bg-black/30 text-white/65') }}">
                              <i class="fa-regular fa-file ml-1"></i>—
                            </span>
                          @endif
                        </div>
                      @else
                        <span class="text-white/40">—</span>
                      @endif
                    </td>

                    <td class="px-4 py-3">
                      <div class="font-extrabold">{{ $creatorName ?: 'غير معروف' }}</div>
                      <div class="text-xs text-white/55">{{ $creatorUser ? '@'.$creatorUser : '' }}</div>
                    </td>
                    <td class="px-4 py-3">
                      <button type="button"
                              class="px-3 py-2 rounded-2xl border border-cyan-400/25 bg-cyan-600/55 hover:bg-cyan-600 text-white text-sm font-black"
                              data-json-url="{{ $jsonUrl }}"
                              onclick="openProactiveReportModal(this)">
                        <i class="fa-solid fa-eye ml-1"></i> عرض
                      </button>
                    </td>
                  </tr>
                @endforeach
              </tbody>

            </table>
          </div>
        </div>
      @endif

    @else
      <div class="rounded-3xl border border-amber-400/20 bg-amber-500/10 p-5">
        <div class="text-white font-extrabold flex items-center gap-2">
          <i class="fa-solid fa-circle-info text-amber-200"></i>
          <span>لا توجد تقارير ضمن هذه الفلاتر</span>
        </div>
        <div class="mt-2 text-white/70 text-sm">جرّب تغيّر المدى/التاريخ/البحث.</div>
      </div>
    @endif

  </div>
</div>

{{-- =========================
| MODAL — ملحمي للهاتف + تحميل آمن عبر fetch
|========================= --}}
<div id="proactiveReportModal" class="fixed inset-0 z-[9999] hidden" aria-hidden="true">
  <div class="absolute inset-0 bg-black/75 backdrop-blur-sm" onclick="closeProactiveReportModal()"></div>

  <div class="absolute inset-0 flex items-end sm:items-center justify-center p-2 sm:p-4">
    <div class="w-full sm:max-w-4xl rounded-t-3xl sm:rounded-3xl border border-white/10 bg-gradient-to-b from-slate-950 via-slate-900 to-black shadow-2xl overflow-hidden">

      {{-- header --}}
      <div class="relative p-4 sm:p-5 border-b border-white/10">
        <div class="pointer-events-none absolute -top-16 -right-16 w-64 h-64 rounded-full bg-cyan-400/10 blur-3xl"></div>

        <div class="flex items-start justify-between gap-3">
          <div class="min-w-0">
            <div class="flex flex-wrap items-center gap-2" id="prBadges"></div>
            <div class="mt-2 text-white font-black text-lg sm:text-xl" id="prTitle">—</div>
            <div class="mt-1 text-white/65 text-sm" id="prSub">—</div>
          </div>

          <button type="button"
                  class="shrink-0 w-10 h-10 rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10 text-white"
                  onclick="closeProactiveReportModal()">
            <i class="fa-solid fa-xmark"></i>
          </button>
        </div>
      </div>

      {{-- body --}}
      <div class="p-4 sm:p-5 space-y-4 max-h-[78vh] sm:max-h-[75vh] overflow-y-auto">

        {{-- loading --}}
        <div id="prLoading" class="rounded-3xl border border-white/10 bg-white/5 p-5 hidden">
          <div class="flex items-center gap-3 text-white">
            <span class="w-10 h-10 rounded-2xl border border-white/10 bg-black/30 flex items-center justify-center">
              <i class="fa-solid fa-spinner fa-spin text-cyan-200"></i>
            </span>
            <div>
              <div class="font-black">جارِ تحميل التقرير...</div>
              <div class="text-white/60 text-sm">ثواني وبيطلع بشكل ملحمي 🔥</div>
            </div>
          </div>
        </div>

        {{-- content --}}
        <div id="prContent" class="space-y-4 hidden">

          {{-- creator + AI --}}
          <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
            <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
              <div class="text-white font-black flex items-center gap-2">
                <i class="fa-solid fa-user-pen text-fuchsia-200"></i> كاتب التقرير
              </div>

              <div class="mt-3 flex items-center gap-3">
                <div class="w-12 h-12 rounded-2xl border border-white/10 bg-black/30 overflow-hidden flex items-center justify-center">
                  <img id="prCreatorAvatar" src="" class="w-full h-full object-cover hidden" alt="">
                  <i id="prCreatorAvatarFallback" class="fa-solid fa-user text-white/35"></i>
                </div>
                <div class="min-w-0">
                  <div class="text-white font-extrabold truncate" id="prCreatorName">—</div>
                  <div class="text-white/55 text-xs truncate" id="prCreatorUser">—</div>
                </div>
              </div>

              <div class="mt-3 flex flex-wrap gap-2">
                <span class="px-3 py-1.5 rounded-2xl border border-white/10 bg-black/30 text-white/85 font-black text-[12px]" id="prCreatorMembership">—</span>
                <span class="px-3 py-1.5 rounded-2xl border border-white/10 bg-black/30 text-white/85 font-black text-[12px]" id="prCreatorAccount">—</span>
              </div>

              <div class="mt-3 text-white/60 text-xs">
                البريد: <span class="text-white/85 font-bold" id="prCreatorEmail">—</span>
              </div>
            </div>

            <div class="lg:col-span-2 rounded-3xl border border-white/10 bg-white/5 p-4">
              <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <div>
                  <div class="text-white/70 text-xs">مؤشر الذكاء الاصطناعي</div>
                  <div class="mt-1 flex items-center gap-2">
                    <span class="px-3 py-1.5 rounded-2xl border border-white/10 bg-black/30 text-white font-black" id="prAiPct">0%</span>
                    <span class="px-3 py-1.5 rounded-2xl border border-cyan-400/25 bg-cyan-500/15 text-cyan-100 font-black" id="prAiLevel">—</span>
                  </div>

                  <div class="mt-3">
                    <div class="flex items-center justify-between text-xs text-white/60 mb-1">
                      <span>قوة التقرير</span>
                      <span class="font-black text-white" id="prAiPct2">0%</span>
                    </div>
                    <div class="h-3 rounded-full bg-black/30 border border-white/10 overflow-hidden">
                      <div class="h-full bg-white/70" id="prAiBar" style="width:0%"></div>
                    </div>

                    <div class="mt-2 text-white/55 text-xs" id="prAiHint">—</div>
                  </div>
                </div>

                <div class="flex items-center justify-center">
                  <div class="w-[180px] h-[180px] rounded-3xl border border-white/10 bg-black/25 flex items-center justify-center">
                    <svg width="180" height="180" viewBox="0 0 120 120" class="opacity-95">
                      <g fill="none" stroke="rgba(255,255,255,.10)" stroke-width="1">
                        <polygon points="60,12 103,46 86,98 34,98 17,46"></polygon>
                        <polygon points="60,24 93,50 79,90 41,90 27,50"></polygon>
                        <polygon points="60,36 83,54 72,82 48,82 37,54"></polygon>
                      </g>
                      <polygon id="prRadarPoly" points="" fill="rgba(34,211,238,.15)" stroke="rgba(34,211,238,.70)" stroke-width="2"></polygon>
                      <circle cx="60" cy="60" r="3" fill="rgba(255,255,255,.55)"></circle>
                    </svg>
                  </div>
                </div>
              </div>

              <div class="mt-4 grid grid-cols-2 sm:grid-cols-5 gap-2 text-xs">
                <div class="rounded-2xl border border-white/10 bg-black/20 p-2 text-center"><div class="text-white/55">التفاعل</div><div class="text-white font-black" id="prR1">0</div></div>
                <div class="rounded-2xl border border-white/10 bg-black/20 p-2 text-center"><div class="text-white/55">الانضباط</div><div class="text-white font-black" id="prR2">0</div></div>
                <div class="rounded-2xl border border-white/10 bg-black/20 p-2 text-center"><div class="text-white/55">الجودة</div><div class="text-white font-black" id="prR3">0</div></div>
                <div class="rounded-2xl border border-white/10 bg-black/20 p-2 text-center"><div class="text-white/55">التطور</div><div class="text-white font-black" id="prR4">0</div></div>
                <div class="rounded-2xl border border-white/10 bg-black/20 p-2 text-center"><div class="text-white/55">الفريق</div><div class="text-white font-black" id="prR5">0</div></div>
              </div>
            </div>
          </div>

          {{-- report data --}}
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
            <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
              <div class="text-white font-black flex items-center gap-2"><i class="fa-solid fa-circle-info text-cyan-200"></i> معلومات عامة</div>
              <div class="mt-3 space-y-2 text-sm text-white/80">
                <div><span class="text-white/60">المضيف:</span> <span class="font-bold text-white" id="prHost">—</span></div>
                <div><span class="text-white/60">مالك اللايف:</span> <span class="font-bold text-white" id="prOwner">—</span></div>
                <div><span class="text-white/60">التاريخ:</span> <span class="font-bold text-white" id="prDate">—</span></div>
                <div><span class="text-white/60">الملخص:</span> <span class="text-white" id="prSummary">—</span></div>
              </div>

              <div class="mt-3 flex items-center gap-2">
                <a id="prLinkBtn" href="#" target="_blank"
                   class="hidden px-3 py-2 rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10 text-white/85 text-sm font-extrabold">
                  <i class="fa-solid fa-link ml-1"></i> فتح الرابط
                </a>
                <button type="button"
                        class="ms-auto px-3 py-2 rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10 text-white/85 text-sm font-extrabold"
                        onclick="copyProactiveReportLink()">
                  <i class="fa-solid fa-copy ml-1"></i> نسخ الرابط
                </button>
              </div>
            </div>

            <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
              <div class="text-white font-black flex items-center gap-2"><i class="fa-solid fa-chart-line text-fuchsia-200"></i> مؤشرات</div>
              <div class="mt-3 grid grid-cols-2 gap-2 text-xs">
                <div class="rounded-2xl border border-white/10 bg-black/20 p-3"><div class="text-white/55">أصدقاء جدد</div><div class="text-white font-black text-lg" id="prFriends">0</div></div>
                <div class="rounded-2xl border border-white/10 bg-black/20 p-3"><div class="text-white/55">دعوات</div><div class="text-white font-black text-lg" id="prInvites">0</div></div>
                <div class="rounded-2xl border border-amber-400/20 bg-amber-500/10 p-3"><div class="text-amber-100/80">مشاكل؟</div><div class="text-amber-50 font-black text-lg" id="prHasIssues">—</div></div>
                <div class="rounded-2xl border border-cyan-400/20 bg-cyan-500/10 p-3"><div class="text-cyan-100/80">تطوّر؟</div><div class="text-cyan-50 font-black text-lg" id="prHasProgress">—</div></div>
              </div>
            </div>
          </div>

          {{-- ✅ PLUS MEMBERS + DOCS --}}
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
            <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
              <div class="text-white font-black flex items-center gap-2">
                <i class="fa-solid fa-users text-emerald-200"></i> أعضاء +Plus
              </div>
              <div id="prPlusMembers" class="mt-3 flex flex-wrap gap-2"></div>
              <div id="prPlusMembersEmpty" class="mt-3 text-white/55 text-sm hidden">لا يوجد أعضاء مختارين.</div>
            </div>

            <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
              <div class="text-white font-black flex items-center gap-2">
                <i class="fa-solid fa-photo-film text-cyan-200"></i> التوثيق
              </div>

              <div id="prDocEmpty" class="mt-3 text-white/55 text-sm">لا يوجد توثيق.</div>

              <div id="prDocWrap" class="mt-3 hidden space-y-3">
                <img id="prDocImage" src="" class="hidden w-full rounded-2xl border border-white/10 object-cover" alt="">
                <video id="prDocVideo" class="hidden w-full rounded-2xl border border-white/10" controls></video>
              </div>
            </div>
          </div>

          <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
            <div class="text-white font-black flex items-center gap-2"><i class="fa-solid fa-notes-medical text-amber-200"></i> نصوص وملاحظات</div>
            <div class="mt-3 grid grid-cols-1 lg:grid-cols-2 gap-3">
              <div class="rounded-2xl border border-white/10 bg-black/20 p-3"><div class="text-white/70 text-xs mb-1">مشاكل</div><div class="text-white text-sm whitespace-pre-wrap" id="prIssuesText">—</div></div>
              <div class="rounded-2xl border border-white/10 bg-black/20 p-3"><div class="text-white/70 text-xs mb-1">تطوّر</div><div class="text-white text-sm whitespace-pre-wrap" id="prProgressText">—</div></div>
              <div class="rounded-2xl border border-white/10 bg-black/20 p-3"><div class="text-white/70 text-xs mb-1">إيجابي</div><div class="text-white text-sm whitespace-pre-wrap" id="prPos">—</div></div>
              <div class="rounded-2xl border border-white/10 bg-black/20 p-3"><div class="text-white/70 text-xs mb-1">سلبي</div><div class="text-white text-sm whitespace-pre-wrap" id="prNeg">—</div></div>
              <div class="lg:col-span-2 rounded-2xl border border-white/10 bg-black/20 p-3"><div class="text-white/70 text-xs mb-1">مشاكل عامة</div><div class="text-white text-sm whitespace-pre-wrap" id="prGeneralIssues">—</div></div>
            </div>
          </div>

          <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
            <div class="text-white font-black flex items-center gap-2"><i class="fa-solid fa-users text-emerald-200"></i> عضو من الفريق (إن وجد)</div>
            <div class="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-2 text-sm">
              <div class="rounded-2xl border border-white/10 bg-black/20 p-3"><div class="text-white/60 text-xs">الاسم</div><div class="text-white font-black" id="prMemberName">—</div></div>
              <div class="rounded-2xl border border-white/10 bg-black/20 p-3"><div class="text-white/60 text-xs">الأداء</div><div class="text-white font-black" id="prMemberPerf">—</div></div>
              <div class="rounded-2xl border border-white/10 bg-black/20 p-3"><div class="text-white/60 text-xs">الدقائق</div><div class="text-white font-black" id="prMemberMins">—</div></div>
            </div>
          </div>

          <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
            <div class="text-white font-black flex items-center gap-2"><i class="fa-solid fa-gavel text-rose-200"></i> اعتماد / رفض</div>
            <div class="mt-3 grid grid-cols-1 lg:grid-cols-2 gap-3">
              <div class="rounded-2xl border border-white/10 bg-black/20 p-3">
                <div class="text-white/70 text-xs mb-1">سبب الرفض</div>
                <div class="text-white text-sm whitespace-pre-wrap" id="prRejectReason">—</div>
              </div>
              <div class="rounded-2xl border border-white/10 bg-black/20 p-3">
                <div class="text-white/70 text-xs mb-1">التواريخ</div>
                <div class="text-white/75 text-sm">الإنشاء: <span class="text-white font-bold" id="prCreatedAt">—</span></div>
                <div class="text-white/75 text-sm">التحديث: <span class="text-white font-bold" id="prUpdatedAt">—</span></div>
              </div>
            </div>
          </div>

        </div>
      </div>

      {{-- footer --}}
      <div class="p-3 sm:p-4 border-t border-white/10 bg-black/30">
        <button type="button"
                class="w-full px-4 py-3 rounded-2xl bg-white/5 hover:bg-white/10 text-white font-extrabold border border-white/10"
                onclick="closeProactiveReportModal()">
          <i class="fa-solid fa-arrow-right ml-1"></i> إغلاق
        </button>
      </div>

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

<script>
(function(){
  const modal = document.getElementById('proactiveReportModal');
  const loading = document.getElementById('prLoading');
  const content = document.getElementById('prContent');

  let lastLink = '';

  const txt = (id, v) => { const el=document.getElementById(id); if(el) el.textContent = (v ?? '—'); };
  const show = (el, on) => { if(!el) return; el.classList.toggle('hidden', !on); };
  const yesno = (v) => (v ? 'نعم' : 'لا');

  function radarPoints(vals){
    const size = 120, pad = 12;
    const cx = size/2, cy = size/2;
    const r = (size/2) - pad;
    const angles = [-90, -18, 54, 126, 198];
    const pts = [];
    for (let i=0;i<5;i++){
      const vv = Math.max(0, Math.min(100, parseInt(vals[i] ?? 0)));
      const rad = angles[i] * Math.PI / 180;
      const rr = r * (vv/100);
      const x = cx + Math.cos(rad) * rr;
      const y = cy + Math.sin(rad) * rr;
      pts.push(x.toFixed(2)+','+y.toFixed(2));
    }
    return pts.join(' ');
  }

  function aiHint(ai){
    ai = parseInt(ai||0);
    if (ai >= 92) return 'أسطوري: أداء ممتاز واستقرار عالي.';
    if (ai >= 80) return 'قوي جدًا: ممتاز، فقط حسّن التفاصيل الصغيرة.';
    if (ai >= 65) return 'جيد: يحتاج دفعة في التفاعل/التطور.';
    if (ai >= 45) return 'ضعيف: ركّز على حل المشاكل ورفع الجودة.';
    return 'خطر: يلزم تدخل سريع وتحسين شامل.';
  }

  function membershipLabel(m){
    const map = {
      'beta':'بيتا',
      'official':'رسمي',
      'moderator':'مشرف',
      'advisor':'مستشار',
      'super-admin':'سوبر أدمن'
    };
    return map[m] || (m || '—');
  }
  function accountLabel(a){
    const map = { 'active':'نشط', 'suspended':'معلّق', 'banned':'محظور' };
    return map[a] || (a || '—');
  }

  function toAbs(u){
    u = (u || '').trim();
    if(!u) return '';
    if(u.startsWith('http://') || u.startsWith('https://')) return u;
    const origin = window.location.origin || '';
    if(u.startsWith('/')) return origin + u;
    return origin + '/' + u;
  }

  // ✅ نجيب db path من أي URL
  function extractDbPath(u){
    u = (u || '').trim();
    if(!u) return '';
    // لو جاي /storage/app/public/<path>
    const m1 = u.match(/storage\/app\/public\/(.+)$/);
    if(m1 && m1[1]) return m1[1];

    // لو جاي /storage/<path> (Laravel standard)
    const m2 = u.match(/\/storage\/(.+)$/);
    if(m2 && m2[1]) return m2[1];

    // لو جاي path raw أصلاً
    if(!u.includes('://') && !u.startsWith('/')) return u;

    return '';
  }

  async function probe(url){
    try{
      const res = await fetch(url, { method: 'HEAD', cache: 'no-store' });
      return { ok: res.ok, status: res.status };
    } catch(e){
      return { ok: false, status: 0 };
    }
  }

  function resetDoc(msg){
    const docEmpty = document.getElementById('prDocEmpty');
    const docWrap  = document.getElementById('prDocWrap');
    const img      = document.getElementById('prDocImage');
    const vid      = document.getElementById('prDocVideo');

    if(vid){
      try { vid.pause(); } catch(e){}
      vid.removeAttribute('src');
      try { vid.load(); } catch(e){}
      vid.classList.add('hidden');
      vid.onerror = null;
    }

    if(img){
      img.removeAttribute('src');
      img.classList.add('hidden');
      img.onerror = null;
    }

    if(docWrap) docWrap.classList.add('hidden');
    if(docEmpty){
      docEmpty.classList.remove('hidden');
      docEmpty.textContent = msg || 'لا يوجد توثيق.';
    }
  }

  async function renderDoc(imageUrl, videoUrl, dbPathFromReport){
    const docEmpty = document.getElementById('prDocEmpty');
    const docWrap  = document.getElementById('prDocWrap');
    const img      = document.getElementById('prDocImage');
    const vid      = document.getElementById('prDocVideo');

    resetDoc();

    const imgUrl = toAbs(imageUrl);
    const vidUrl = toAbs(videoUrl);

    // لو ما في أي توثيق
    if(!imgUrl && !vidUrl){
      resetDoc('لا يوجد توثيق.');
      return;
    }

    // ✅ مرشّحات محاولات
    const candidates = [];

    // 1) URL القادم من JSON
    if(imgUrl) candidates.push({ type:'image', url: imgUrl, label:'JSON' });
    if(vidUrl) candidates.push({ type:'video', url: vidUrl, label:'JSON' });

    // 2) fallback من DB path (لو وصلنا)
    const dbp = (dbPathFromReport || extractDbPath(imgUrl) || extractDbPath(vidUrl) || '').trim();
    if(dbp){
      candidates.push({ type:'image', url: toAbs('/storage/app/public/' + dbp), label:'FALLBACK /storage/app/public' });
      candidates.push({ type:'image', url: toAbs('/public/storage/' + dbp), label:'FALLBACK /public/storage' });
      candidates.push({ type:'image', url: toAbs('/storage/' + dbp), label:'FALLBACK /storage' });
      candidates.push({ type:'video', url: toAbs('/storage/app/public/' + dbp), label:'FALLBACK /storage/app/public' });
      candidates.push({ type:'video', url: toAbs('/public/storage/' + dbp), label:'FALLBACK /public/storage' });
      candidates.push({ type:'video', url: toAbs('/storage/' + dbp), label:'FALLBACK /storage' });
    }

    // جرّب أول URL ينجح (HEAD)
    for (const c of candidates){
      const p = await probe(c.url);
      if(p.ok){
        if(docWrap) docWrap.classList.remove('hidden');
        if(docEmpty) docEmpty.classList.add('hidden');

        // عرض فعلي
        if(c.type === 'image' && img){
          img.classList.remove('hidden');
          img.src = c.url;
          img.onerror = function(){
            resetDoc('فشل عرض الصورة رغم أن الرابط موجود. (تحقق من MIME/headers)');
          };
          return;
        }
        if(c.type === 'video' && vid){
          vid.classList.remove('hidden');
          vid.src = c.url;
          vid.onerror = function(){
            resetDoc('فشل عرض الفيديو رغم أن الرابط موجود. (تحقق من MIME/headers)');
          };
          return;
        }
      } else {
        // ما نجح: نعرض سبب مختصر بالـ empty (آخر محاولة فقط)
        // نخليها تتجمع بالنهاية
      }
    }

    // إذا ولا واحد نجح: اعرض تشخيص واضح
    const last = candidates[0];
    const p0 = last ? await probe(last.url) : {ok:false,status:0};
    const status = p0.status || 0;

    let why = 'تعذر تحميل التوثيق.';
    if(status === 404) why = 'تعذر تحميل التوثيق (404) — /storage link غير صحيح أو المسار غير مكشوف.';
    else if(status === 403) why = 'تعذر تحميل التوثيق (403) — صلاحيات/حماية سيرفر تمنع الوصول.';
    else if(status === 0) why = 'تعذر تحميل التوثيق (Network) — السيرفر رفض HEAD أو CORS/SSL.';
    else why = `تعذر تحميل التوثيق (HTTP ${status}).`;

    // اعرض كمان أول رابط للتشخيص
    const hint = last ? ` أول رابط: ${last.url}` : '';
    resetDoc(why + hint);
  }

  function renderPlusMembers(list){
    const pmWrap = document.getElementById('prPlusMembers');
    const pmEmpty= document.getElementById('prPlusMembersEmpty');

    pmWrap.innerHTML = '';
    const arr = Array.isArray(list) ? list : [];

    if (arr.length === 0) {
      pmEmpty.classList.remove('hidden');
      return;
    }

    pmEmpty.classList.add('hidden');
    arr.forEach(m=>{
      const s = document.createElement('span');
      s.className = 'px-3 py-1.5 rounded-2xl border border-white/10 bg-black/30 text-white/85 font-black text-[12px]';
      s.textContent = m.name || (m.username ? ('@'+m.username) : 'عضو');
      pmWrap.appendChild(s);
    });
  }

  window.openProactiveReportModal = async function(btn){
    const url = btn.getAttribute('data-json-url') || '';
    if(!url || url === '#'){
      alert('الرابط غير متوفر (تأكد من route superadmin.proactive.reports.json).');
      return;
    }

    modal.classList.remove('hidden');
    modal.setAttribute('aria-hidden','false');
    document.body.classList.add('overflow-hidden');

    resetDoc();
    renderPlusMembers([]);

    show(loading, true);
    show(content, false);

    try{
      const res = await fetch(url, { headers: { 'Accept':'application/json' } });
      if(!res.ok) throw new Error('HTTP '+res.status);
      const data = await res.json();

      // badges
      const badges = [];
      if (data.__status)   badges.push(`<span class="px-3 py-1.5 rounded-2xl border ${data.__status.cls} font-black text-[12px]"><i class="fa-solid ${data.__status.icon} ml-1"></i>${data.__status.label}</span>`);
      if (data.__platform) badges.push(`<span class="px-3 py-1.5 rounded-2xl border ${data.__platform.cls} font-black text-[12px]"><i class="${data.__platform.icon} ml-1"></i>${data.__platform.label}</span>`);
      if (data.__type)     badges.push(`<span class="px-3 py-1.5 rounded-2xl border ${data.__type.cls} font-black text-[12px]">${data.__type.label}</span>`);
      if (data.__grade)    badges.push(`<span class="px-3 py-1.5 rounded-2xl border ${data.__grade.cls} font-black text-[12px]">تقييم: ${data.__grade.label}</span>`);
      document.getElementById('prBadges').innerHTML = badges.join('');

      // title/sub
      txt('prTitle', `تقرير #${data.id} — ${data.activity_date}`);
      txt('prSub', `المضيف: ${data.live_host} • المالك: ${data.live_owner_name}`);

      // creator
      const c = data.created_by || {};
      txt('prCreatorName', c.name || 'غير معروف');
      txt('prCreatorUser', c.username ? '@'+c.username : '—');
      txt('prCreatorEmail', c.email || '—');
      txt('prCreatorMembership', 'العضوية: ' + membershipLabel(c.membership_status || ''));
      txt('prCreatorAccount', 'الحساب: ' + accountLabel(c.account_status || ''));

      const av = document.getElementById('prCreatorAvatar');
      const avF= document.getElementById('prCreatorAvatarFallback');
      if (c.avatar){
        av.src = c.avatar;
        av.classList.remove('hidden');
        avF.classList.add('hidden');
        av.onerror = ()=>{ av.classList.add('hidden'); avF.classList.remove('hidden'); };
      } else {
        av.classList.add('hidden');
        avF.classList.remove('hidden');
      }

      // AI
      const ai = Math.max(0, Math.min(100, parseInt(data.__ai ?? 0)));
      txt('prAiPct', ai+'%');
      txt('prAiPct2', ai+'%');
      txt('prAiLevel', (data.__ai_level && data.__ai_level.label) ? data.__ai_level.label : '—');
      document.getElementById('prAiBar').style.width = ai + '%';
      txt('prAiHint', 'تحليل سريع: ' + aiHint(ai));

      // radar
      const r = data.__radar || {};
      const vals = [
        parseInt(r.engage ?? 0),
        parseInt(r.discipline ?? 0),
        parseInt(r.quality ?? 0),
        parseInt(r.growth ?? 0),
        parseInt(r.team ?? 0),
      ];
      document.getElementById('prRadarPoly').setAttribute('points', radarPoints(vals));
      txt('prR1', vals[0]); txt('prR2', vals[1]); txt('prR3', vals[2]); txt('prR4', vals[3]); txt('prR5', vals[4]);

      // general
      txt('prHost', data.live_host);
      txt('prOwner', data.live_owner_name);
      txt('prDate', data.activity_date);
      txt('prSummary', data.short_summary || '—');

      // link
      lastLink = data.live_link || '';
      const linkBtn = document.getElementById('prLinkBtn');
      if (lastLink){
        linkBtn.classList.remove('hidden');
        linkBtn.href = lastLink;
      } else {
        linkBtn.classList.add('hidden');
        linkBtn.href = '#';
      }

      // KPIs
      txt('prFriends', parseInt(data.new_friends ?? 0));
      txt('prInvites', parseInt(data.invitations_sent ?? 0));
      txt('prHasIssues', yesno(parseInt(data.had_issues ?? 0) === 1));
      txt('prHasProgress', yesno(parseInt(data.had_progress ?? 0) === 1));

      // texts
      txt('prIssuesText', data.issues_text || '—');
      txt('prProgressText', data.progress_text || '—');
      txt('prPos', data.positive_notes || '—');
      txt('prNeg', data.negative_notes || '—');
      txt('prGeneralIssues', data.general_issues || '—');

      // member
      txt('prMemberName', data.member_name || '—');
      txt('prMemberPerf', data.member_performance || '—');
      txt('prMemberMins', (data.member_minutes !== null && data.member_minutes !== undefined) ? data.member_minutes : '—');

      // plus members + docs
      renderPlusMembers(data.plus_members || []);
      await renderDoc(
        data.doc_image_url || '',
        data.doc_video_url || '',
        (data.doc_image_path || data.doc_video_path || '').trim()
      );

      // rejection + dates
      txt('prRejectReason', data.rejection_reason || '—');
      txt('prCreatedAt', data.created_at || '—');
      txt('prUpdatedAt', data.updated_at || '—');

      show(loading, false);
      show(content, true);

    } catch(e){
      console.error(e);
      show(loading, false);
      show(content, false);
      alert('حدث خطأ أثناء فتح التقرير (تأكد من Route JSON + صلاحيات الوصول).');
    }
  };

  window.closeProactiveReportModal = function(){
    resetDoc();
    modal.classList.add('hidden');
    modal.setAttribute('aria-hidden','true');
    document.body.classList.remove('overflow-hidden');
  };

  window.copyProactiveReportLink = async function(){
    try{
      if(!lastLink){ alert('لا يوجد رابط لهذا التقرير.'); return; }
      await navigator.clipboard.writeText(lastLink);
      alert('تم نسخ الرابط ✅');
    } catch(e){
      alert('تعذر النسخ تلقائيًا.');
    }
  };

  document.addEventListener('keydown', function(e){
    if(e.key === 'Escape' && !modal.classList.contains('hidden')) closeProactiveReportModal();
  });
})();
</script>
@endsection