@extends('layouts.superadmin')

@section('title','تحليلات AI العميقة — اختيار تقرير')
@section('page-title','🧠 تحليلات AI العميقة — اختيار تقرير للتحليل')

@section('content')
@php
    // دالة لاختيار ألوان الشارة حسب مؤشر التفاعل
    function ai_badge_classes($score) {
        if ($score === null) {
            return [
                'bg'    => 'bg-slate-100 dark:bg-slate-800',
                'text'  => 'text-slate-700 dark:text-slate-100',
                'label' => 'غير محسوب',
            ];
        }

        if ($score >= 8) {
            return [
                'bg'    => 'bg-emerald-100 dark:bg-emerald-900/40',
                'text'  => 'text-emerald-800 dark:text-emerald-100',
                'label' => 'تفاعل قوي',
            ];
        }

        if ($score >= 5) {
            return [
                'bg'    => 'bg-sky-100 dark:bg-sky-900/40',
                'text'  => 'text-sky-800 dark:text-sky-100',
                'label' => 'تفاعل جيد',
            ];
        }

        if ($score >= 3) {
            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' => 'تفاعل مقلق',
        ];
    }

    // متوسط مؤشر التفاعل لكل التقارير المعروضة (للفوتر)
    $avgScore = $reports->count()
        ? round($reports->avg('engagement_score'), 1)
        : null;
@endphp

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

  {{-- 🔹 بلوك الشرح / الاستعلام --}}
  <div class="rounded-2xl bg-gradient-to-r from-indigo-700 via-purple-700 to-sky-700 text-white p-6 space-y-4">
    <div>
      <h1 class="text-2xl font-extrabold mb-1">
        تحليلات AI العميقة — اختيار تقرير
      </h1>
      <p class="text-sm text-white/85 leading-relaxed">
        هنا تشوف قائمة بالتقارير مع مؤشر تفاعل لكل تقرير.
        اللون يعكس قوة التفاعل بناءً على
        <span class="underline decoration-white/40">التقدير، الأصدقاء الجدد، الدعوات، وجود تقدّم أو مشاكل</span>.
        اضغط على أي تقرير لفتح تحليل معمّق خاص به.
      </p>
    </div>

    {{-- Legend للألوان + على ماذا نعتمد --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
      <div class="space-y-2">
        <h2 class="font-semibold text-white/90">دلالات ألوان مؤشر التفاعل:</h2>
        <ul class="space-y-1">
          <li class="flex items-center gap-2">
            <span class="w-3 h-3 rounded-full bg-emerald-300"></span>
            <span><span class="font-semibold">أخضر:</span> تفاعل قوي — تقرير يُعتبر نموذج إيجابي.</span>
          </li>
          <li class="flex items-center gap-2">
            <span class="w-3 h-3 rounded-full bg-sky-300"></span>
            <span><span class="font-semibold">أزرق:</span> تفاعل جيد — الظروف مستقرة لكن يمكن تحسينها.</span>
          </li>
          <li class="flex items-center gap-2">
            <span class="w-3 h-3 rounded-full bg-amber-300"></span>
            <span><span class="font-semibold">أصفر:</span> تفاعل ضعيف — يحتاج متابعة وتعديل في طريقة التنفيذ.</span>
          </li>
          <li class="flex items-center gap-2">
            <span class="w-3 h-3 rounded-full bg-rose-300"></span>
            <span><span class="font-semibold">أحمر:</span> تفاعل مقلق — يفضَّل مراجعة هذا التقرير أولًا.</span>
          </li>
        </ul>
      </div>

      <div class="space-y-2">
        <h2 class="font-semibold text-white/90">على ماذا يعتمد التحليل؟</h2>
        <ul class="list-disc list-inside space-y-1 text-white/85">
          <li>التقدير (جيد / جيد جدًا / ممتاز) وتحويله لرقم من 3–5.</li>
          <li>عدد الأصدقاء الجدد والدعوات المرسلة كنقاط تفاعل اجتماعي.</li>
          <li>وجود تقدّم موثّق (+1) أو مشاكل (-1) داخل التقرير.</li>
          <li>مؤشر التفاعل النهائي من 0 إلى 10، يُستخدم لتلوين الشارة.</li>
        </ul>

        <p class="text-[11px] text-white/80 mt-1">
          <span class="font-semibold">التركيز الأساسي للتحسين:</span>
          رفع عدد الدعوات والأصدقاء الجدد مع الحفاظ على تقدير مرتفع
          وتقليل التقارير التي تحتوي مشاكل متكررة.
        </p>
      </div>
    </div>
  </div>

  {{-- 🔹 قائمة التقارير --}}
  @if($reports->count())
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
        <h2 class="text-sm font-bold text-gray-800 dark:text-gray-100">
          آخر {{ $reports->count() }} تقرير مسجّل
        </h2>
        <span class="text-[11px] text-gray-500 dark:text-gray-400">
          اضغط على “تحليل عميق” لفتح صفحة تحليل كاملة للتقرير.
        </span>
      </div>

      <div class="divide-y divide-gray-100 dark:divide-gray-800">
        @foreach($reports as $r)
          @php
            $score = $r->engagement_score ?? null;
            $badge = ai_badge_classes($score);

            // عنوان التقرير (محاولة ذكية)
            $title = $r->short_summary
                ?? $r->live_owner_name
                ?? $r->live_host
                ?? 'تقرير بدون عنوان محدد';

            $ownerName  = $r->owner_name  ?? null;
            $ownerEmail = $r->owner_email ?? null;
          @endphp

          <div class="px-4 py-3 flex flex-col md:flex-row md:items-center justify-between gap-3">

            {{-- معلومات التقرير --}}
            <div class="space-y-1">
              <div class="flex flex-wrap items-center gap-2 text-sm">
                <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>

                {{-- شارة التفاعل اللونية --}}
                <span class="inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-full {{ $badge['bg'] }} {{ $badge['text'] }}">
                  <span class="w-2 h-2 rounded-full
                        @if($score === null) bg-slate-400
                        @elseif($score >= 8) bg-emerald-400
                        @elseif($score >= 5) bg-sky-400
                        @elseif($score >= 3) bg-amber-400
                        @else bg-rose-400 @endif"></span>
                  <span>{{ $badge['label'] }}</span>
                  @if($score !== null)
                    <span class="font-semibold">{{ $score }}</span>
                  @endif
                </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>

                @if($ownerName)
                  <span>
                    أعدّه:
                    <span class="font-medium text-gray-700 dark:text-gray-200">{{ $ownerName }}</span>
                    @if($ownerEmail)
                      <span class="text-gray-400 dark:text-gray-500">({{ $ownerEmail }})</span>
                    @endif
                  </span>
                @else
                  <span>المُعدّ: غير محدد</span>
                @endif
              </div>
            </div>

            {{-- مؤشر التفاعل + زر التحليل --}}
            <div class="flex items-center gap-3 md:min-w-[230px] justify-end">
              <div class="px-3 py-2 rounded-xl border text-xs flex flex-col items-end
                   {{ $badge['bg'] }} {{ $badge['text'] }} border-transparent/40">
                <div class="font-semibold">
                  مؤشر التفاعل:
                  {{ $score !== null ? $score . ' / 10' : 'غير متوفر' }}
                </div>
                <div class="text-[11px] opacity-90">
                  {{ $badge['label'] }}
                </div>
              </div>

              <a href="{{ route('superadmin.proactiveAI.deepReports.show', $r->id) }}"
                 class="inline-flex items-center gap-1 rounded-lg bg-indigo-600 text-white text-xs px-3 py-1.5 hover:bg-indigo-700">
                <i class="fa-solid fa-microscope text-[11px]"></i>
                <span>تحليل عميق</span>
              </a>
            </div>

          </div>
        @endforeach
      </div>
    </div>
  @else
    <div class="text-center text-sm text-gray-500 dark:text-gray-400">
      لا توجد تقارير كافية لعرضها هنا حاليًا.
    </div>
  @endif
</div>

{{-- ✨ ختام وتحليل شامل مبني على متوسط التقارير المعروضة --}}
<div class="mt-10 relative rounded-2xl overflow-hidden bg-gradient-to-r from-indigo-900 via-purple-800 to-sky-900 text-white p-6 md:p-8 shadow-xl border border-white/10">
  {{-- خلفية زخرفية --}}
  <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="footerGradient" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#a855f7"/>
          <stop offset="100%" stop-color="#38bdf8"/>
        </linearGradient>
      </defs>
      <circle cx="650" cy="250" r="300" fill="url(#footerGradient)" />
      <circle cx="150" cy="150" r="200" fill="url(#footerGradient)" opacity="0.6" />
    </svg>
  </div>

  {{-- النص الفعلي --}}
  <div class="relative space-y-4">
    <h2 class="text-xl md:text-2xl font-extrabold text-white flex items-center gap-2">
      <i class="fa-solid fa-chart-line text-sky-300"></i>
      الملخص العام لتحليل AI
    </h2>

    <p class="text-sm text-white/85 leading-relaxed">
      هذه الصفحة تقدّم نظرة مجمَّعة على آخر تقارير
      <span class="font-semibold text-violet-200">ProActive</span> من زاوية التفاعل والنتائج.
      من خلال مؤشر التفاعل يمكن معرفة أيّ التقارير تُعتبر قصص نجاح، وأيّها يحتاج متابعة ومعالجة.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">

      {{-- متوسط مؤشر التفاعل --}}
      <div class="bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/10">
        <div class="text-xs text-white/70">متوسط مؤشر التفاعل في هذه القائمة</div>
        <div class="mt-2 text-lg font-extrabold">
          @if($avgScore !== null)
            {{ $avgScore }} / 10
          @else
            غير متوفر
          @endif
        </div>
        <p class="text-[11px] text-white/60 mt-1">
          يعطي صورة تقريبية عن مستوى التفاعل العام في التقارير المعروضة حاليًا.
        </p>
      </div>

      {{-- توصية أساسية --}}
      <div class="bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/10">
        <div class="text-xs text-white/70">توصية الذكاء الاصطناعي</div>
        @if($avgScore === null)
          <p class="mt-2 text-amber-200 text-[13px]">
            لا توجد بيانات كافية لاستخلاص توصية عامة. سجّل المزيد من التقارير أولًا.
          </p>
        @elseif($avgScore >= 8)
          <p class="mt-2 text-emerald-300 font-semibold text-[13px]">
            الأداء العام ممتاز! يُوصى بتوثيق أفضل التقارير كنماذج نجاح واعتمادها كمرجع للتدريب.
          </p>
        @elseif($avgScore >= 5)
          <p class="mt-2 text-amber-300 font-semibold text-[13px]">
            الأداء جيد لكن غير مستقر؛ ركّز على رفع الدعوات والأصدقاء الجدد وتقليل التقارير ذات المشاكل.
          </p>
        @else
          <p class="mt-2 text-rose-300 font-semibold text-[13px]">
            مستوى التفاعل العام منخفض؛ يفضّل تحليل التقارير الحمراء أولًا وتحديد الأسباب المتكررة للضعف.
          </p>
        @endif
      </div>

      {{-- نظرة مستقبلية --}}
      <div class="bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/10">
        <div class="text-xs text-white/70">نظرة مستقبلية</div>
        <p class="mt-2 text-sm text-white/80 leading-relaxed">
          <i class="fa-solid fa-forward text-sky-300 mr-1"></i>
          مع الوقت، يمكن مقارنة متوسط المؤشر بين فترات مختلفة (شهر مقابل شهر)
          لمعرفة هل تحركاتك في التدريب والمتابعة ترفع أداء ProActive فعلاً أم لا.
        </p>
      </div>

    </div>

    {{-- توقيع ختامي --}}
    <div class="pt-6 border-t border-white/10 text-center text-xs text-white/70">
      <i class="fa-solid fa-brain text-violet-300"></i>
      تحليل ذكي مقدم من
      <span class="font-semibold text-sky-200">نظام الذكاء العميق ProActive AI</span>
      — فريق الوفاء الذهبي 🕊️
    </div>
  </div>
</div>
@endsection