{{-- resources/views/superadmin/proactive-ai-clinic/index.blade.php --}}
@extends('layouts.superadmin')

@section('title','مستشفى ProActive الذكي — عيادة الذكاء الاصطناعي')
@section('page-title','🏥 مستشفى ProActive الذكي — عيادة الذكاء الاصطناعي')

@section('content')
@php
    function clinic_state_color($health) {
        if ($health === null) {
            return ['bg' => 'bg-slate-100 dark:bg-slate-800', 'text' => 'text-slate-700 dark:text-slate-100', 'label' => 'غير محدد'];
        }
        if ($health >= 80) {
            return ['bg' => 'bg-emerald-100 dark:bg-emerald-900/40', 'text' => 'text-emerald-800 dark:text-emerald-100', 'label' => 'مستقر'];
        }
        if ($health >= 60) {
            return ['bg' => 'bg-sky-100 dark:bg-sky-900/40', 'text' => 'text-sky-800 dark:text-sky-100', 'label' => 'جيد مع مراقبة'];
        }
        if ($health >= 40) {
            return ['bg' => 'bg-amber-100 dark:bg-amber-900/40', 'text' => 'text-amber-800 dark:text-amber-100', 'label' => 'يحتاج متابعة'];
        }
        return ['bg' => 'bg-rose-100 dark:bg-rose-900/40', 'text' => 'text-rose-800 dark:text-rose-100', 'label' => 'حالة حرجة'];
    }

    $overallState  = clinic_state_color($overall['health'] ?? null);
    $currentState  = clinic_state_color($currentMonth['health'] ?? null);
    $prevState     = clinic_state_color($prevMonth['health'] ?? null);
@endphp

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

  {{-- 🏥 Hero --}}
  <div class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-sky-900 via-indigo-900 to-violet-900 text-white p-6 md:p-8 shadow-xl">
    <div class="absolute inset-0 opacity-20 pointer-events-none">
      <svg class="w-full h-full" viewBox="0 0 800 400" fill="none">
        <defs>
          <linearGradient id="clinicBG" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#0ea5e9"/>
            <stop offset="100%" stop-color="#a855f7"/>
          </linearGradient>
        </defs>
        <circle cx="120" cy="80" r="160" fill="url(#clinicBG)" />
        <circle cx="700" cy="320" r="260" fill="url(#clinicBG)" opacity="0.7" />
      </svg>
    </div>

    <div class="relative flex flex-col md:flex-row md:items-center md:justify-between gap-6">
      <div class="space-y-3">
        <div class="inline-flex items-center gap-2 text-xs bg-white/10 px-3 py-1 rounded-full border border-white/20">
          <i class="fa-solid fa-hospital-user text-pink-200"></i>
          <span>عيادة ذكاء اصطناعي لمتابعة صحة ProActive</span>
        </div>

        <h1 class="text-2xl md:text-3xl font-extrabold">
          مستشفى ProActive الذكي
        </h1>

        <p class="text-sm md:text-base text-white/85 leading-relaxed">
          هذه الصفحة تعمل كـ <span class="font-semibold">غرفة طوارئ</span> لفعاليات ProActive:
          تراقب الحالة العامة، الشهر الحالي، والشهر السابق، وتُظهر الحالات الحرجة وتوصيات علاجية ذكية لتحسين أداء الفريق.
        </p>

        <div class="flex flex-wrap gap-2 text-[11px] text-white/80">
          <span class="inline-flex items-center gap-1 bg-white/10 px-3 py-1 rounded-full">
            <i class="fa-solid fa-brain"></i> ذكاء اصطناعي تشخيصي
          </span>
          <span class="inline-flex items-center gap-1 bg-white/10 px-3 py-1 rounded-full">
            <i class="fa-solid fa-user-group"></i> مخصص لعمل الفريق وفعالياته
          </span>
          <span class="inline-flex items-center gap-1 bg-white/10 px-3 py-1 rounded-full">
            <i class="fa-solid fa-heart-pulse"></i> يعتمد على بيانات جدول التقارير
          </span>
        </div>
      </div>

      {{-- مؤشر الصحة العامة --}}
      <div class="w-full md:w-72 rounded-2xl bg-black/20 backdrop-blur-sm border border-white/20 p-4 space-y-3">
        <div class="flex items-center justify-between text-xs text-white/70">
          <span>مؤشر صحة ProActive (كلي)</span>
          <span>اليوم: {{ $today }}</span>
        </div>
        <div class="flex items-baseline gap-2">
          <span class="text-3xl font-extrabold">
            {{ $overall['health'] !== null ? $overall['health'] : '—' }}
          </span>
          <span class="text-xs text-white/70">من 100</span>
        </div>

        <div class="w-full h-2 rounded-full bg-white/10 overflow-hidden">
          <div class="h-full rounded-full bg-gradient-to-r from-rose-400 via-amber-300 to-emerald-400"
               style="width: {{ $overall['health'] !== null ? $overall['health'] : 0 }}%"></div>
        </div>

        <div class="inline-flex items-center gap-2 text-[11px] mt-1 px-2 py-1 rounded-full {{ $overallState['bg'] }} {{ $overallState['text'] }}">
          <i class="fa-solid fa-stethoscope text-xs"></i>
          <span>حالة النظام: {{ $overallState['label'] }}</span>
        </div>

        @if($healthDir)
          <div class="text-[11px] text-white/80">
            @if($healthDir === 'up')
              <i class="fa-solid fa-arrow-trend-up text-emerald-300"></i>
              تحسّن عن الشهر السابق بمقدار {{ $healthDiff }} نقطة تقريبًا.
            @elseif($healthDir === 'down')
              <i class="fa-solid fa-arrow-trend-down text-rose-300"></i>
              تراجع عن الشهر السابق بمقدار {{ abs($healthDiff) }} نقطة تقريبًا، يحتاج تدخّل.
            @else
              <i class="fa-solid fa-arrows-left-right text-amber-300"></i>
              مستوى الصحة قريب من الشهر السابق، لا يوجد تغيير جوهري.
            @endif
          </div>
        @endif
      </div>
    </div>
  </div>

  {{-- 🧪 كروت الكلي / الشهر الحالي / الشهر السابق --}}
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

    {{-- الكلي --}}
    <div class="rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 shadow-sm space-y-2">
      <div class="flex items-center justify-between">
        <h2 class="text-sm font-bold text-gray-800 dark:text-gray-100">
          التحليل الكُلّي للنظام
        </h2>
        <span class="text-[11px] px-2 py-0.5 rounded-full {{ $overallState['bg'] }} {{ $overallState['text'] }}">
          {{ $overallState['label'] }}
        </span>
      </div>
      <div class="text-xs text-gray-500 dark:text-gray-400">
        كل التقارير المسجّلة في ProActive منذ البداية.
      </div>
      <div class="mt-2 grid grid-cols-2 gap-3 text-xs">
        <div>
          <div class="text-gray-500 dark:text-gray-400">إجمالي التقارير</div>
          <div class="text-lg font-bold text-gray-900 dark:text-gray-50">{{ $overall['total'] }}</div>
        </div>
        <div>
          <div class="text-gray-500 dark:text-gray-400">فعاليات PLUS</div>
          <div class="text-lg font-bold text-violet-600 dark:text-violet-300">{{ $overall['plus'] }}</div>
        </div>
        <div>
          <div class="text-gray-500 dark:text-gray-400">تقارير فيها تقدّم</div>
          <div class="text-lg font-bold text-emerald-600 dark:text-emerald-300">{{ $overall['progress'] }}</div>
        </div>
        <div>
          <div class="text-gray-500 dark:text-gray-400">تقارير فيها مشاكل</div>
          <div class="text-lg font-bold text-rose-600 dark:text-rose-300">{{ $overall['issues'] }}</div>
        </div>
      </div>
      <div class="mt-2 text-[11px] text-gray-500 dark:text-gray-400">
        متوسط التقدير: <span class="font-semibold">{{ $overall['avg_grade'] !== null ? $overall['avg_grade'] : 'غير محسوب' }}</span> / 5  
        • أصدقاء جدد: {{ $overall['friends_sum'] }} • الدعوات: {{ $overall['inv_sum'] }}
      </div>
    </div>

    {{-- الشهر الحالي --}}
    <div class="rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 shadow-sm space-y-2">
      <div class="flex items-center justify-between">
        <h2 class="text-sm font-bold text-gray-800 dark:text-gray-100">
          تحليل الشهر الحالي
        </h2>
        <span class="text-[11px] px-2 py-0.5 rounded-full {{ $currentState['bg'] }} {{ $currentState['text'] }}">
          {{ $currentState['label'] }}
        </span>
      </div>
      <div class="text-xs text-gray-500 dark:text-gray-400">
        مراقبة وضع الفريق خلال هذا الشهر فقط.
      </div>
      <div class="mt-2 grid grid-cols-2 gap-3 text-xs">
        <div>
          <div class="text-gray-500 dark:text-gray-400">عدد التقارير</div>
          <div class="text-lg font-bold text-gray-900 dark:text-gray-50">{{ $currentMonth['total'] }}</div>
        </div>
        <div>
          <div class="text-gray-500 dark:text-gray-400">PLUS</div>
          <div class="text-lg font-bold text-violet-600 dark:text-violet-300">{{ $currentMonth['plus'] }}</div>
        </div>
        <div>
          <div class="text-gray-500 dark:text-gray-400">تقدّم</div>
          <div class="text-lg font-bold text-emerald-600 dark:text-emerald-300">{{ $currentMonth['progress'] }}</div>
        </div>
        <div>
          <div class="text-gray-500 dark:text-gray-400">مشاكل</div>
          <div class="text-lg font-bold text-rose-600 dark:text-rose-300">{{ $currentMonth['issues'] }}</div>
        </div>
      </div>
      <div class="mt-2 text-[11px] text-gray-500 dark:text-gray-400">
        أصدقاء جدد: {{ $currentMonth['friends_sum'] }} • الدعوات: {{ $currentMonth['inv_sum'] }}
      </div>
    </div>

    {{-- الشهر السابق --}}
    <div class="rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 shadow-sm space-y-2">
      <div class="flex items-center justify-between">
        <h2 class="text-sm font-bold text-gray-800 dark:text-gray-100">
          تحليل الشهر السابق
        </h2>
        <span class="text-[11px] px-2 py-0.5 rounded-full {{ $prevState['bg'] }} {{ $prevState['text'] }}">
          {{ $prevState['label'] }}
        </span>
      </div>
      <div class="text-xs text-gray-500 dark:text-gray-400">
        يساعدك تقارن: هل نحن في تحسّن أم تراجع؟
      </div>
      <div class="mt-2 grid grid-cols-2 gap-3 text-xs">
        <div>
          <div class="text-gray-500 dark:text-gray-400">عدد التقارير</div>
          <div class="text-lg font-bold text-gray-900 dark:text-gray-50">{{ $prevMonth['total'] }}</div>
        </div>
        <div>
          <div class="text-gray-500 dark:text-gray-400">PLUS</div>
          <div class="text-lg font-bold text-violet-600 dark:text-violet-300">{{ $prevMonth['plus'] }}</div>
        </div>
        <div>
          <div class="text-gray-500 dark:text-gray-400">تقدّم</div>
          <div class="text-lg font-bold text-emerald-600 dark:text-emerald-300">{{ $prevMonth['progress'] }}</div>
        </div>
        <div>
          <div class="text-gray-500 dark:text-gray-400">مشاكل</div>
          <div class="text-lg font-bold text-rose-600 dark:text-rose-300">{{ $prevMonth['issues'] }}</div>
        </div>
      </div>
      <div class="mt-2 text-[11px] text-gray-500 dark:text-gray-400">
        أصدقاء جدد: {{ $prevMonth['friends_sum'] }} • الدعوات: {{ $prevMonth['inv_sum'] }}
      </div>
    </div>

  </div>

  {{-- 🚑 أخطر الحالات (أعلى 5 تقارير خطرة) --}}
  <div class="rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
    <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
      <div class="flex items-center gap-2">
        <span class="w-8 h-8 rounded-full bg-rose-100 dark:bg-rose-900/40 flex items-center justify-center">
          <i class="fa-solid fa-truck-medical text-rose-600 dark:text-rose-200 text-sm"></i>
        </span>
        <div>
          <h3 class="text-sm font-bold text-gray-800 dark:text-gray-100">
            الحالات الحرِجة — تحتاج “إسعاف” إداري
          </h3>
          <p class="text-[11px] text-gray-500 dark:text-gray-400">
            أسوأ التقارير من ناحية التقدير/المشاكل/ضعف التفاعل، يُفضّل متابعتها أولًا.
          </p>
        </div>
      </div>
    </div>

    @if($criticalReports->count())
      <div class="divide-y divide-gray-100 dark:divide-gray-800 text-xs">
        @foreach($criticalReports as $r)
          @php
            $title = $r->short_summary
                  ?? $r->live_owner_name
                  ?? $r->live_host
                  ?? ('تقرير #' . $r->id);

            $badge = clinic_state_color($overall['health'] ?? null); // نستخدم نفس الألوان للشرح فقط
          @endphp
          <div class="px-4 py-3 flex flex-col md:flex-row md:items-center justify-between gap-2">
            <div class="space-y-1">
              <div class="flex flex-wrap items-center gap-2">
                <span class="font-semibold text-gray-900 dark:text-gray-100">
                  {{ $title }}
                </span>
                <span class="text-[11px] px-2 py-0.5 rounded-full
                  {{ $r->activity_type === 'plus'
                      ? 'bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-100'
                      : 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-100' }}">
                  تقرير #{{ $r->id }} — {{ $r->activity_type === 'plus' ? 'PLUS' : 'عادي' }}
                </span>
              </div>
              <div class="text-[11px] text-gray-500 dark:text-gray-400 flex flex-wrap gap-x-3 gap-y-1">
                <span>التاريخ: {{ \Carbon\Carbon::parse($r->activity_date)->timezone($tz)->toDateString() }}</span>
                <span>المنصّة: {{ $r->platform ?? 'غير محدد' }}</span>
                <span>تقدير: {{ $r->live_grade ?? 'غير محدد' }}</span>
                <span>مشاكل: {{ $r->had_issues ? 'نعم' : 'لا' }}</span>
              </div>
            </div>

            <div class="flex items-center gap-3 md:min-w-[210px] justify-end">
              <div class="px-3 py-2 rounded-xl bg-rose-50 dark:bg-rose-900/30 border border-rose-100 dark:border-rose-800 text-[11px] text-rose-800 dark:text-rose-100">
                <div class="font-semibold">
                  مؤشر خطورة: {{ $r->risk_score }}
                </div>
                <div class="opacity-80">
                  كلما زاد الرقم، زادت أولوية المتابعة.
                </div>
              </div>
              @if(Route::has('superadmin.proactiveAI.deepReports.show'))
                <a href="{{ route('superadmin.proactiveAI.deepReports.show', $r->id) }}"
                   class="inline-flex items-center gap-1 rounded-lg bg-indigo-600 text-white text-[11px] px-3 py-1.5 hover:bg-indigo-700">
                  <i class="fa-solid fa-microscope"></i>
                  <span>تحليل عميق</span>
                </a>
              @endif
            </div>
          </div>
        @endforeach
      </div>
    @else
      <div class="px-4 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
        لا توجد حالات حرجة كافية حاليًا — وهذا خبر جميل 🎉
      </div>
    @endif
  </div>

  {{-- 💊 نصائح كلية وتحسينات --}}
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    {{-- إيجابي --}}
    <div class="rounded-2xl bg-white dark:bg-gray-900 border border-emerald-200 dark:border-emerald-700/70 p-4 shadow-sm">
      <div class="flex items-center gap-2 mb-3">
        <span class="w-8 h-8 rounded-full bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center">
          <i class="fa-solid fa-circle-check text-emerald-600 dark:text-emerald-200 text-sm"></i>
        </span>
        <div>
          <h3 class="text-sm font-bold text-emerald-800 dark:text-emerald-100">مؤشرات صحية قوية</h3>
          <p class="text-[11px] text-emerald-800/80 dark:text-emerald-100/70">
            نقاط قوة على مستوى النظام، يُفضَّل تثبيتها وتعميمها على الفريق.
          </p>
        </div>
      </div>
      <div class="space-y-2 text-[12px] leading-relaxed">
        @forelse($insights['positive'] as $txt)
          <div class="rounded-xl bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-100 dark:border-emerald-800 px-3 py-2">
            {{ $txt }}
          </div>
        @empty
          <p class="text-gray-500 dark:text-gray-400 text-[11px]">
            لا توجد إشارات قوية جدًا، لكن الوضع ليس سيئًا؛ التركيز يكون على معالجة النقاط الرمادية.
          </p>
        @endforelse
      </div>
    </div>

    {{-- مخاطر --}}
    <div class="rounded-2xl bg-white dark:bg-gray-900 border border-rose-200 dark:border-rose-700/70 p-4 shadow-sm">
      <div class="flex items-center gap-2 mb-3">
        <span class="w-8 h-8 rounded-full bg-rose-100 dark:bg-rose-900/40 flex items-center justify-center">
          <i class="fa-solid fa-triangle-exclamation text-rose-600 dark:text-rose-200 text-sm"></i>
        </span>
        <div>
          <h3 class="text-sm font-bold text-rose-800 dark:text-rose-100">مخاطر على مستوى النظام</h3>
          <p class="text-[11px] text-rose-800/80 dark:text-rose-100/70">
            إذا تُركت بدون علاج، قد تتحوّل إلى مشاكل بنيويّة في عمل ProActive.
          </p>
        </div>
      </div>
      <div class="space-y-2 text-[12px] leading-relaxed">
        @forelse($insights['risks'] as $txt)
          <div class="rounded-xl bg-rose-50 dark:bg-rose-900/30 border border-rose-100 dark:border-rose-800 px-3 py-2">
            {{ $txt }}
          </div>
        @empty
          <p class="text-gray-500 dark:text-gray-400 text-[11px]">
            لا توجد مخاطر كبرى واضحة من الأرقام، لكن يُنصح بالاستمرار في مراقبة نبض ProActive بشكل دوري.
          </p>
        @endforelse
      </div>
    </div>

    {{-- خطوات عملية --}}
    <div class="rounded-2xl bg-white dark:bg-gray-900 border border-amber-200 dark:border-amber-700/70 p-4 shadow-sm">
      <div class="flex items-center gap-2 mb-3">
        <span class="w-8 h-8 rounded-full bg-amber-100 dark:bg-amber-900/40 flex items-center justify-center">
          <i class="fa-solid fa-prescription-bottle-medical text-amber-600 dark:text-amber-200 text-sm"></i>
        </span>
        <div>
          <h3 class="text-sm font-bold text-amber-800 dark:text-amber-100">خطة علاجية عامة</h3>
          <p class="text-[11px] text-amber-800/80 dark:text-amber-100/70">
            وصفات عملية لتحسين الصحة الكلية للمنظومة خلال الشهور القادمة.
          </p>
        </div>
      </div>
      <div class="space-y-2 text-[12px] leading-relaxed">
        @forelse($insights['actions'] as $txt)
          <div class="rounded-xl bg-amber-50 dark:bg-amber-900/30 border border-amber-100 dark:border-amber-800 px-3 py-2">
            {{ $txt }}
          </div>
        @empty
          <p class="text-gray-500 dark:text-gray-400 text-[11px]">
            لا توجد توصيات حادّة من الأرقام؛ يمكن استخدام تحليل التقارير الفردية (الذكاء العميق) لوضع خطة تطوير مفصّلة.
          </p>
        @endforelse
      </div>
    </div>
  </div>

  {{-- فوتر صغير --}}
  <div class="text-center text-[11px] text-gray-500 dark:text-gray-400 mt-4">
    <i class="fa-solid fa-heart-pulse text-rose-400"></i>
    هذه الصفحة لا تستبدل حسّ المسؤولية الإدارية، لكنها تعطيك “مخطط قلب” رقمي لحالة ProActive لمساعدة القادة على اتخاذ قرارات أذكى.
  </div>

</div>
@endsection