@extends('layouts.superadmin')

@section('title','🏆 نظام أبطال الديجتال — ProActive (قراءة فقط)')
@section('page-title','🏆 نظام أبطال الديجتال — مركز الجودة (قراءة فقط للمشرفين)')

@section('content')
@php
  // ====== تعريب كامل للمصطلحات ======
  $arRisk = function(?string $r){
    $r = strtolower(trim((string)$r));
    return match($r){
      'high'   => 'بخطر',
      'medium' => 'يحتاج تدقيق',
      default  => 'آمن',
    };
  };

  $arSuggest = function(?string $s){
    $s = strtolower(trim((string)$s));
    return match($s){
      'approve','approved','accept','accepted' => 'قبول',
      'reject','rejected','deny','denied'      => 'رفض',
      default                                 => 'مراجعة',
    };
  };

  $tabs = [
    ['key'=>'all',     'label'=>'الكل',               'icon'=>'fa-layer-group'],
    ['key'=>'reports', 'label'=>'تقارير ProActive',   'icon'=>'fa-bolt'],
    ['key'=>'notes',   'label'=>'ملاحظات الصقر/رولا', 'icon'=>'fa-notes-medical'],
  ];

  $statusOptions = [
    ''         => 'كل الحالات',
    'pending'  => '🕓 تحت المراجعة',
    'approved' => '✅ مقبول',
    'rejected' => '❌ مرفوض',
  ];

  $riskOptions = [
    ''       => 'كل المستويات',
    'low'    => '🟢 آمن',
    'medium' => '🟠 يحتاج تدقيق',
    'high'   => '🔴 بخطر',
  ];

  $scoreBadge = function(int $s){
    if ($s >= 90) return ['txt'=>"أسطوري — {$s}/100", 'cls'=>'bg-emerald-500/10 text-emerald-200 border-emerald-400/25'];
    if ($s >= 75) return ['txt'=>"قوي — {$s}/100",    'cls'=>'bg-sky-500/10 text-sky-200 border-sky-400/25'];
    if ($s >= 60) return ['txt'=>"متوسط — {$s}/100",  'cls'=>'bg-amber-500/10 text-amber-200 border-amber-400/25'];
    return ['txt'=>"خطر — {$s}/100", 'cls'=>'bg-rose-500/10 text-rose-200 border-rose-400/25'];
  };

  $riskBadge = function(string $r) use ($arRisk){
    $txt = $arRisk($r);
    return match(strtolower(trim($r))){
      'high'   => ['txt'=>"🔴 {$txt}", 'cls'=>'bg-rose-500/10 text-rose-200 border-rose-400/25'],
      'medium' => ['txt'=>"🟠 {$txt}", 'cls'=>'bg-amber-500/10 text-amber-200 border-amber-400/25'],
      default  => ['txt'=>"🟢 {$txt}", 'cls'=>'bg-emerald-500/10 text-emerald-200 border-emerald-400/25'],
    };
  };

  $statusBadge = function(?string $st){
    $st = strtolower(trim((string)($st ?? 'pending')));
    if ($st === '') $st = 'pending';
    return match($st){
      'approved' => ['txt'=>'✅ مقبول',       'cls'=>'bg-emerald-500/10 text-emerald-200 border-emerald-400/25'],
      'rejected' => ['txt'=>'❌ مرفوض',       'cls'=>'bg-rose-500/10 text-rose-200 border-rose-400/25'],
      default    => ['txt'=>'🕓 تحت المراجعة','cls'=>'bg-amber-500/10 text-amber-200 border-amber-400/25'],
    };
  };

  $tab    = $tab ?? 'reports';
  $status = $status ?? '';
  $risk   = $risk ?? '';
  $q      = $q ?? '';

  $summary = $summary ?? ['reports'=>[],'notes'=>[],'global'=>[]];
  $globalPending = (int)($summary['global']['pending'] ?? 0);
  $globalRisk    = (int)($summary['global']['at_risk'] ?? 0);

  $readOnlyNotice = 'هذه الصفحة قراءة فقط للمشرفين — لا يوجد أي تعديل أو قرارات جماعية.';
@endphp

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

  {{-- ===== HERO ملحمي (Aurora / Socrates) ===== --}}
  <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-b from-slate-950 via-slate-900 to-black p-6 shadow-2xl">
    <div class="pointer-events-none absolute -top-28 -right-24 w-96 h-96 rounded-full bg-violet-400/18 blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-32 -left-28 w-[28rem] h-[28rem] rounded-full bg-cyan-400/14 blur-3xl"></div>
    <div class="pointer-events-none absolute inset-0 opacity-25 bg-[radial-gradient(circle_at_top,_#fde68a_0,_transparent_60%)]"></div>

    <div class="relative flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
      <div class="flex items-start gap-4">
        <div class="h-14 w-14 rounded-3xl grid place-items-center bg-amber-500/15 border border-amber-400/25 text-amber-200 shadow-[0_0_0_1px_rgba(251,191,36,0.15)]">
          <i class="fa-solid fa-crown text-2xl"></i>
        </div>

        <div class="min-w-0">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-white/10 text-[11px] text-white/80">
            <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
            <span>مركز الجودة — أبطال الديجتال</span>
          </div>

          <h1 class="mt-2 text-xl md:text-2xl font-extrabold text-white">
            🏆 نظام أبطال الديجتال — ProActive
          </h1>

          <p class="mt-2 text-[13px] text-white/70 leading-relaxed">
            لوحة تقييم سريعة: <b>الجودة</b> • <b>رايات التحليل</b> • <b>اقتراح إرشادي</b> • <b>تفاصيل كاملة</b>.
            <span class="text-rose-200 font-extrabold">({{ $readOnlyNotice }})</span>
          </p>

          <div class="mt-3 flex flex-wrap items-center gap-2 text-[11px]">
            @if($globalPending > 0)
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-amber-400/25 bg-amber-500/10 text-amber-100">
                <i class="fa-regular fa-clock"></i>
                تحت المراجعة: <b>{{ $globalPending }}</b>
              </span>
            @endif
            @if($globalRisk > 0)
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-rose-400/25 bg-rose-500/10 text-rose-100">
                <i class="fa-solid fa-triangle-exclamation"></i>
                بخطر (+48 ساعة): <b>{{ $globalRisk }}</b>
              </span>
            @endif
          </div>
        </div>
      </div>

      {{-- KPIs --}}
      <div class="grid grid-cols-2 gap-3 w-full md:w-[460px]">
        <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
          <div class="text-[11px] text-white/60">متوسط جودة التقارير</div>
          <div class="mt-1 text-2xl font-extrabold text-white">{{ (int)($summary['reports']['avg_score'] ?? 0) }}/100</div>
          <div class="mt-1 text-[11px] text-white/70">
            تحت المراجعة: <b class="text-amber-200">{{ (int)($summary['reports']['pending'] ?? 0) }}</b>
            • بخطر: <b class="text-rose-200">{{ (int)($summary['reports']['at_risk'] ?? 0) }}</b>
          </div>
        </div>

        <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
          <div class="text-[11px] text-white/60">متوسط جودة الملاحظات</div>
          <div class="mt-1 text-2xl font-extrabold text-white">{{ (int)($summary['notes']['avg_score'] ?? 0) }}/100</div>
          <div class="mt-1 text-[11px] text-white/70">
            تحت المراجعة: <b class="text-amber-200">{{ (int)($summary['notes']['pending'] ?? 0) }}</b>
            • بخطر: <b class="text-rose-200">{{ (int)($summary['notes']['at_risk'] ?? 0) }}</b>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- Tabs + Filters --}}
  <div class="rounded-3xl border border-white/10 bg-slate-950/60 backdrop-blur-xl p-4 shadow-xl">
    <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
      {{-- Tabs --}}
      <div class="flex items-center gap-2 overflow-x-auto no-scrollbar">
        @foreach($tabs as $t)
          <a href="{{ route('superadmin.proactiveHeroes.index', array_merge(request()->except('page'), ['tab'=>$t['key']])) }}"
             class="shrink-0 inline-flex items-center gap-2 px-4 py-2 rounded-2xl text-[12px] font-extrabold border
                    {{ $tab===$t['key'] ? 'bg-white/15 text-white border-white/15'
                                      : 'bg-white/5 text-white/70 border-white/10 hover:bg-white/10 hover:text-white' }}">
            <i class="fa-solid {{ $t['icon'] }}"></i>
            <span>{{ $t['label'] }}</span>
          </a>
        @endforeach
      </div>

      {{-- Filters (GET فقط) --}}
      <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-2 w-full lg:w-auto">
        <input type="hidden" name="tab" value="{{ $tab }}"/>

        <input name="q" value="{{ $q }}"
               class="rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-[12px] text-white placeholder:text-white/40"
               placeholder="بحث: اسم العضو / عنوان / لايف / منصة...">

        <select name="status" class="rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-[12px] text-white">
          @foreach($statusOptions as $k=>$v)
            <option value="{{ $k }}" @selected($status===$k)>{{ $v }}</option>
          @endforeach
        </select>

        <select name="risk" class="rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-[12px] text-white">
          @foreach($riskOptions as $k=>$v)
            <option value="{{ $k }}" @selected($risk===$k)>{{ $v }}</option>
          @endforeach
        </select>

        <button class="rounded-2xl bg-gradient-to-r from-amber-200 via-cyan-200 to-fuchsia-200 text-slate-950 px-4 py-2 text-[12px] font-extrabold hover:scale-[1.01] active:scale-100 transition">
          <i class="fa-solid fa-filter"></i>
          تطبيق
        </button>
      </form>
    </div>

    <div class="mt-3 text-[11px] text-white/55">
      “تفاصيل” تفتح لوحة جانبية تعرض كل شيء بالعربي — بدون أي تعديل.
    </div>
  </div>

  {{-- LISTS (Read-only) --}}
  @if($tab === 'all')
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
      {{-- Reports preview --}}
      <div class="rounded-3xl border border-white/10 bg-slate-950/60 backdrop-blur-xl overflow-hidden shadow-xl">
        <div class="px-5 py-4 border-b border-white/10 flex items-center justify-between">
          <div class="font-extrabold text-white">⚡ آخر تقارير ProActive</div>
          <a class="text-xs text-amber-200 hover:underline" href="{{ route('superadmin.proactiveHeroes.index',['tab'=>'reports']) }}">عرض الكل</a>
        </div>

        <div class="divide-y divide-white/10">
          @forelse(($reports?->items() ?? []) as $r)
            @php
              $sb = $scoreBadge((int)($r->_score ?? 0));
              $rb = $riskBadge((string)($r->_risk ?? 'low'));
              $stb = $statusBadge($r->program_status ?? null);
              $suggestAr = $arSuggest($r->_suggest ?? null);
            @endphp

            <div class="p-4 flex items-start justify-between gap-3">
              <div class="min-w-0">
                <div class="text-[12px] text-white/60">#{{ $r->id }} • {{ $r->created_at ?? '' }}</div>
                <div class="mt-1 font-extrabold text-white line-clamp-1">
                  لايف: {{ $r->live_host ?? '—' }} — صاحب: {{ $r->live_owner_name ?? '—' }}
                </div>

                <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px]">
                  <span class="px-2 py-0.5 rounded-full border {{ $stb['cls'] }}">{{ $stb['txt'] }}</span>
                  <span class="px-2 py-0.5 rounded-full border {{ $sb['cls'] }}">{{ $sb['txt'] }}</span>
                  <span class="px-2 py-0.5 rounded-full border {{ $rb['cls'] }}">{{ $rb['txt'] }}</span>

                  @if(!empty($r->_suggest))
                    <span class="px-2 py-0.5 rounded-full border bg-indigo-500/10 text-indigo-200 border-indigo-400/25">
                      🧠 اقتراح (إرشادي): {{ $suggestAr }}
                      @if(!empty($r->_suggest_reason)) — {{ $r->_suggest_reason }} @endif
                    </span>
                  @endif
                </div>
              </div>

              <button data-qh-open data-type="report" data-id="{{ $r->id }}"
                      class="shrink-0 px-3 py-2 rounded-2xl text-[12px] font-extrabold border
                             bg-white/5 hover:bg-white/10 border-white/10 text-white transition">
                تفاصيل
              </button>
            </div>
          @empty
            <div class="p-6 text-center text-sm text-white/60">لا يوجد بيانات</div>
          @endforelse
        </div>
      </div>

      {{-- Notes preview --}}
      <div class="rounded-3xl border border-white/10 bg-slate-950/60 backdrop-blur-xl overflow-hidden shadow-xl">
        <div class="px-5 py-4 border-b border-white/10 flex items-center justify-between">
          <div class="font-extrabold text-white">🧠 آخر ملاحظات الصقر/رولا</div>
          <a class="text-xs text-amber-200 hover:underline" href="{{ route('superadmin.proactiveHeroes.index',['tab'=>'notes']) }}">عرض الكل</a>
        </div>

        <div class="divide-y divide-white/10">
          @forelse(($notes?->items() ?? []) as $n)
            @php
              $sb = $scoreBadge((int)($n->_score ?? 0));
              $rb = $riskBadge((string)($n->_risk ?? 'low'));
              $stb = $statusBadge($n->program_status ?? null);
              $suggestAr = $arSuggest($n->_suggest ?? null);
            @endphp

            <div class="p-4 flex items-start justify-between gap-3">
              <div class="min-w-0">
                <div class="text-[12px] text-white/60">#{{ $n->id }} • {{ $n->created_at ?? '' }}</div>
                <div class="mt-1 font-extrabold text-white line-clamp-1">{{ $n->title ?? '—' }}</div>

                <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px]">
                  <span class="px-2 py-0.5 rounded-full border {{ $stb['cls'] }}">{{ $stb['txt'] }}</span>
                  <span class="px-2 py-0.5 rounded-full border {{ $sb['cls'] }}">{{ $sb['txt'] }}</span>
                  <span class="px-2 py-0.5 rounded-full border {{ $rb['cls'] }}">{{ $rb['txt'] }}</span>

                  @if(!empty($n->_suggest))
                    <span class="px-2 py-0.5 rounded-full border bg-indigo-500/10 text-indigo-200 border-indigo-400/25">
                      🧠 اقتراح (إرشادي): {{ $suggestAr }}
                      @if(!empty($n->_suggest_reason)) — {{ $n->_suggest_reason }} @endif
                    </span>
                  @endif
                </div>
              </div>

              <button data-qh-open data-type="note" data-id="{{ $n->id }}"
                      class="shrink-0 px-3 py-2 rounded-2xl text-[12px] font-extrabold border
                             bg-white/5 hover:bg-white/10 border-white/10 text-white transition">
                تفاصيل
              </button>
            </div>
          @empty
            <div class="p-6 text-center text-sm text-white/60">لا يوجد بيانات</div>
          @endforelse
        </div>
      </div>
    </div>

  @elseif($tab === 'reports')
    <div class="rounded-3xl border border-white/10 bg-slate-950/60 backdrop-blur-xl overflow-hidden shadow-xl">
      <div class="px-5 py-4 border-b border-white/10 flex items-center justify-between">
        <div class="font-extrabold text-white">⚡ تقارير ProActive</div>
        <div class="text-[11px] text-white/60">الإجمالي: {{ $reports?->total() ?? 0 }}</div>
      </div>

      <div class="divide-y divide-white/10">
        @forelse(($reports?->items() ?? []) as $r)
          @php
            $sb = $scoreBadge((int)($r->_score ?? 0));
            $rb = $riskBadge((string)($r->_risk ?? 'low'));
            $stb = $statusBadge($r->program_status ?? null);
            $suggestAr = $arSuggest($r->_suggest ?? null);
          @endphp

          <div class="p-4 flex items-start justify-between gap-3">
            <div class="min-w-0">
              <div class="text-[12px] text-white/60">
                #{{ $r->id }} • {{ $r->created_at ?? '' }}
                @if(!empty($r->creator_name))
                  <span class="opacity-70">• بواسطة: {{ $r->creator_name }}</span>
                @endif
              </div>

              <div class="mt-1 font-extrabold text-white line-clamp-1">
                لايف: {{ $r->live_host ?? '—' }} — صاحب: {{ $r->live_owner_name ?? '—' }}
              </div>

              <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px]">
                <span class="px-2 py-0.5 rounded-full border {{ $stb['cls'] }}">{{ $stb['txt'] }}</span>
                <span class="px-2 py-0.5 rounded-full border {{ $sb['cls'] }}">{{ $sb['txt'] }}</span>
                <span class="px-2 py-0.5 rounded-full border {{ $rb['cls'] }}">{{ $rb['txt'] }}</span>

                @if(!empty($r->_suggest))
                  <span class="px-2 py-0.5 rounded-full border bg-indigo-500/10 text-indigo-200 border-indigo-400/25">
                    🧠 اقتراح (إرشادي): {{ $suggestAr }}
                    @if(!empty($r->_suggest_reason)) — {{ $r->_suggest_reason }} @endif
                  </span>
                @endif
              </div>
            </div>

            <button data-qh-open data-type="report" data-id="{{ $r->id }}"
                    class="shrink-0 px-3 py-2 rounded-2xl text-[12px] font-extrabold border
                           bg-white/5 hover:bg-white/10 border-white/10 text-white transition">
              تفاصيل
            </button>
          </div>
        @empty
          <div class="p-8 text-center text-sm text-white/60">لا يوجد تقارير</div>
        @endforelse
      </div>

      <div class="px-5 py-4 border-t border-white/10">
        {{ $reports?->onEachSide(1)->links() }}
      </div>
    </div>

  @else
    <div class="rounded-3xl border border-white/10 bg-slate-950/60 backdrop-blur-xl overflow-hidden shadow-xl">
      <div class="px-5 py-4 border-b border-white/10 flex items-center justify-between">
        <div class="font-extrabold text-white">🧠 ملاحظات الصقر/رولا</div>
        <div class="text-[11px] text-white/60">الإجمالي: {{ $notes?->total() ?? 0 }}</div>
      </div>

      <div class="divide-y divide-white/10">
        @forelse(($notes?->items() ?? []) as $n)
          @php
            $sb = $scoreBadge((int)($n->_score ?? 0));
            $rb = $riskBadge((string)($n->_risk ?? 'low'));
            $stb = $statusBadge($n->program_status ?? null);
            $suggestAr = $arSuggest($n->_suggest ?? null);
          @endphp

          <div class="p-4 flex items-start justify-between gap-3">
            <div class="min-w-0">
              <div class="text-[12px] text-white/60">
                #{{ $n->id }} • {{ $n->created_at ?? '' }}
                @if(!empty($n->creator_name))
                  <span class="opacity-70">• بواسطة: {{ $n->creator_name }}</span>
                @endif
              </div>

              <div class="mt-1 font-extrabold text-white line-clamp-1">
                {{ $n->title ?? '—' }}
              </div>

              <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px]">
                <span class="px-2 py-0.5 rounded-full border {{ $stb['cls'] }}">{{ $stb['txt'] }}</span>
                <span class="px-2 py-0.5 rounded-full border {{ $sb['cls'] }}">{{ $sb['txt'] }}</span>
                <span class="px-2 py-0.5 rounded-full border {{ $rb['cls'] }}">{{ $rb['txt'] }}</span>

                @if(!empty($n->_suggest))
                  <span class="px-2 py-0.5 rounded-full border bg-indigo-500/10 text-indigo-200 border-indigo-400/25">
                    🧠 اقتراح (إرشادي): {{ $suggestAr }}
                    @if(!empty($n->_suggest_reason)) — {{ $n->_suggest_reason }} @endif
                  </span>
                @endif
              </div>
            </div>

            <button data-qh-open data-type="note" data-id="{{ $n->id }}"
                    class="shrink-0 px-3 py-2 rounded-2xl text-[12px] font-extrabold border
                           bg-white/5 hover:bg-white/10 border-white/10 text-white transition">
              تفاصيل
            </button>
          </div>
        @empty
          <div class="p-8 text-center text-sm text-white/60">لا يوجد ملاحظات</div>
        @endforelse
      </div>

      <div class="px-5 py-4 border-t border-white/10">
        {{ $notes?->onEachSide(1)->links() }}
      </div>
    </div>
  @endif

  {{-- توضيح --}}
  <div class="rounded-3xl border border-white/10 bg-slate-950/60 backdrop-blur-xl p-5 text-white/80">
    <div class="flex items-start gap-3">
      <div class="w-10 h-10 rounded-2xl bg-sky-500/15 border border-sky-400/25 grid place-items-center text-sky-200">
        <i class="fa-solid fa-circle-info"></i>
      </div>
      <div class="leading-7 text-[13px]">
        <span class="font-extrabold text-white">ملاحظة:</span>
        الجودة/الرايات/الاقتراحات أدوات إرشادية للقراءة فقط.
        أي تعديل أو قرارات تتم من صفحات الإدارة المخصصة.
      </div>
    </div>
  </div>

</div>

{{-- Drawer (قراءة فقط) --}}
<div id="qh-drawer" class="fixed inset-0 z-[9999] hidden">
  <div id="qh-drawer-overlay" class="absolute inset-0 bg-black/50"></div>

  <div class="absolute inset-y-0 right-0 w-full sm:w-[560px] bg-slate-950 text-white shadow-2xl border-l border-white/10 overflow-y-auto">
    <div class="p-4 border-b border-white/10 flex items-center justify-between">
      <div class="min-w-0">
        <div class="text-sm font-extrabold" id="qh-drawer-title">تفاصيل</div>
        <div class="text-[11px] text-white/60" id="qh-drawer-sub">—</div>
      </div>

      <div class="flex items-center gap-2">
        <button id="qh-copy" type="button"
          class="px-3 py-2 rounded-2xl text-[12px] font-extrabold border border-white/10 bg-white/5 hover:bg-white/10">
          <i class="fa-regular fa-copy"></i> نسخ الملخص
        </button>
        <button id="qh-drawer-close" type="button"
          class="px-3 py-2 rounded-2xl text-[12px] font-extrabold border border-white/10 bg-white/5 hover:bg-white/10">
          <i class="fa-solid fa-xmark"></i>
        </button>
      </div>
    </div>

    <div id="qh-drawer-body" class="p-4 space-y-4">
      <div class="text-sm text-white/60">اضغط “تفاصيل” على أي عنصر لعرضه هنا.</div>
    </div>
  </div>
</div>

<script>
(function(){
  const drawer  = document.getElementById('qh-drawer');
  const overlay = document.getElementById('qh-drawer-overlay');
  const closeBtn= document.getElementById('qh-drawer-close');
  const titleEl = document.getElementById('qh-drawer-title');
  const subEl   = document.getElementById('qh-drawer-sub');
  const bodyEl  = document.getElementById('qh-drawer-body');
  const copyBtn = document.getElementById('qh-copy');

  let lastSummary = '';

  const arSuggest = (s) => {
    s = String(s||'').toLowerCase().trim();
    if (['approve','approved','accept','accepted'].includes(s)) return 'قبول';
    if (['reject','rejected','deny','denied'].includes(s)) return 'رفض';
    return 'مراجعة';
  };

  const arRisk = (r) => {
    r = String(r||'').toLowerCase().trim();
    if (r === 'high') return 'بخطر';
    if (r === 'medium') return 'يحتاج تدقيق';
    return 'آمن';
  };

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

  function openDrawer(type, id){
    drawer.classList.remove('hidden');
    titleEl.textContent = `تفاصيل #${id}`;
    subEl.textContent = 'جاري التحميل...';
    bodyEl.innerHTML = `<div class="text-sm text-white/60">جاري تحميل البيانات...</div>`;

    fetch(`/superadmin/proactive-heroes/item/${type}/${id}`, {
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(r => r.json())
    .then(data => {
      if (!data || !data.ok) throw new Error('fail');

      const score = data.score ?? 0;
      const risk  = data.risk ?? 'low';
      const flags = Array.isArray(data.flags) ? data.flags : [];
      const suggest = data.suggest ?? '';
      const suggestReason = data.suggest_reason ?? '';
      const creator = data.creator || null;
      const raw = data.data || {};

      const createdAt = raw.created_at || raw.updated_at || '';
      lastSummary =
        `#${id} — النوع: ${type} — الجودة: ${score}/100 — المستوى: ${arRisk(risk)}` +
        (suggest ? ` — اقتراح: ${arSuggest(suggest)}` : '') +
        (suggestReason ? ` — السبب: ${suggestReason}` : '') +
        (flags.length ? ` — رايات: ${flags.slice(0,3).join(' | ')}` : '');

      titleEl.textContent = (type === 'report') ? `تفاصيل تقرير #${id}` : `تفاصيل ملاحظة #${id}`;
      subEl.textContent = createdAt ? `آخر إدخال/تحديث: ${createdAt}` : '—';

      const flagsHtml = flags.length
        ? `<ul class="list-disc pr-5 space-y-1 text-[12px] text-white/80">
            ${flags.map(f => `<li>${esc(f)}</li>`).join('')}
           </ul>`
        : `<div class="text-[12px] text-white/60">لا توجد رايات قوية.</div>`;

      bodyEl.innerHTML = `
        <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
          <div class="flex flex-wrap items-center gap-2">
            <span class="px-2.5 py-1 rounded-2xl border border-white/10 bg-black/30 text-[11px] font-extrabold">🎯 الجودة: ${esc(score)}/100</span>
            <span class="px-2.5 py-1 rounded-2xl border border-white/10 bg-black/30 text-[11px] font-extrabold">🧭 المستوى: ${esc(arRisk(risk))}</span>
          </div>

          <div class="mt-3 text-[12px] font-extrabold text-indigo-200">
            🧠 اقتراح (إرشادي): ${esc(arSuggest(suggest))} ${suggestReason ? '— ' + esc(suggestReason) : ''}
          </div>

          ${creator ? `
            <div class="mt-2 text-[12px] text-white/70">
              بواسطة: <b class="text-white">${esc(creator.name || '—')}</b>
              ${creator.username ? `<span class="text-white/60">(${esc(creator.username)})</span>` : ``}
            </div>
          ` : ``}
        </div>

        <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
          <div class="font-extrabold mb-2">🚩 رايات التحليل</div>
          ${flagsHtml}
        </div>

        <details class="rounded-3xl border border-white/10 bg-white/5 p-4">
          <summary class="cursor-pointer font-extrabold">📄 التفاصيل الكاملة (بيانات)</summary>
          <pre class="mt-3 text-[11px] text-white/70 whitespace-pre-wrap">${esc(JSON.stringify(raw, null, 2))}</pre>
        </details>
      `;
    })
    .catch(() => {
      subEl.textContent = '—';
      bodyEl.innerHTML = `<div class="text-sm text-rose-200">فشل تحميل التفاصيل.</div>`;
    });
  }

  function closeDrawer(){ drawer.classList.add('hidden'); }

  document.querySelectorAll('[data-qh-open]').forEach(btn => {
    btn.addEventListener('click', () => openDrawer(btn.dataset.type, btn.dataset.id));
  });

  overlay.addEventListener('click', closeDrawer);
  closeBtn.addEventListener('click', closeDrawer);

  copyBtn.addEventListener('click', async () => {
    try {
      if (!lastSummary) return;
      await navigator.clipboard.writeText(lastSummary);
      copyBtn.innerHTML = '<i class="fa-solid fa-check"></i> تم النسخ';
      setTimeout(() => { copyBtn.innerHTML = '<i class="fa-regular fa-copy"></i> نسخ الملخص'; }, 1200);
    } catch(e) {
      alert('تعذر النسخ.');
    }
  });
})();
</script>

<style>
  .no-scrollbar::-webkit-scrollbar{ display:none; }
  .no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
</style>
@endsection