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

@section('title','تحليل AI معمّق لتقرير ProActive')
@section('page-title','🧠 تحليل AI معمّق لتقرير ProActive')

@section('content')
@php
    // تصنيفات سريعة للاستعلام
    $friendsDiff   = $friends - $context['avg_friends'];
    $invitesDiff   = $invites - $context['avg_invites'];

    if ($scoreEngagement >= 7) {
        $engagementLabel = 'تفاعل قوي';
        $engagementTone  = 'positive';
    } elseif ($scoreEngagement >= 4) {
        $engagementLabel = 'تفاعل متوسط';
        $engagementTone  = 'neutral';
    } else {
        $engagementLabel = 'تفاعل ضعيف';
        $engagementTone  = 'negative';
    }

    $isAboveAvgFriends = $friendsDiff > 0;
    $isAboveAvgInvites = $invitesDiff > 0;

    // هل التقرير استثناء عن الصورة العامة؟
    $isOutlier = false;
    if ($scoreEngagement >= 8 || $scoreEngagement <= 3 || $friendsDiff >= 3 || $invitesDiff >= 5) {
        $isOutlier = true;
    }
@endphp

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

  {{-- Hero --}}
  <div class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-indigo-700 via-purple-700 to-sky-700 text-white p-6 md:p-8">
    <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="gDeep" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#A855F7"/>
            <stop offset="100%" stop-color="#38BDF8"/>
          </linearGradient>
        </defs>
        <circle cx="120" cy="80" r="160" fill="url(#gDeep)" />
        <circle cx="700" cy="300" r="220" fill="url(#gDeep)" opacity="0.6" />
      </svg>
    </div>

    <div class="relative space-y-3">
      <div class="flex flex-wrap items-center gap-2 text-[11px] mb-1">
        <span class="px-2 py-0.5 rounded-full bg-white/15 border border-white/20">
          تقرير رقم #{{ $report->id }}
        </span>
        <span class="px-2 py-0.5 rounded-full bg-white/10 text-white/80 flex items-center gap-1">
          <i class="fa-regular fa-calendar"></i>
          <span>
            التاريخ:
            {{ \Carbon\Carbon::parse($report->activity_date)->timezone($tz)->toDateString() }}
          </span>
        </span>
        <span class="px-2 py-0.5 rounded-full bg-white/10 text-white/80 flex items-center gap-1">
          <i class="fa-brands fa-discord fa-rotate-180"></i>
          <span>المنصّة: {{ $platform }}</span>
        </span>
        @if(!empty($report->created_at))
          <span class="px-2 py-0.5 rounded-full bg-white/10 text-white/80 flex items-center gap-1">
            <i class="fa-regular fa-clock"></i>
            <span>أُضيف في: {{ \Carbon\Carbon::parse($report->created_at)->timezone($tz)->format('Y-m-d H:i') }}</span>
          </span>
        @endif
      </div>

      <h1 class="text-2xl md:text-3xl font-extrabold">
        تحليل AI معمّق لتقرير ProActive
      </h1>

      {{-- صاحب التقرير --}}
      <div class="flex flex-wrap items-center gap-3 text-[11px] text-white/80">
        @if(isset($owner) && $owner)
          <span class="inline-flex items-center gap-1">
            <i class="fa-regular fa-user"></i>
            <span>تم إعداد التقرير بواسطة: <span class="font-semibold">{{ $owner->name }}</span></span>
          </span>
          @if(!empty($owner->email))
            <span class="inline-flex items-center gap-1">
              <i class="fa-regular fa-envelope"></i>
              <span>{{ $owner->email }}</span>
            </span>
          @endif
        @else
          <span class="inline-flex items-center gap-1">
            <i class="fa-regular fa-user"></i>
            <span>تم إعداد التقرير بواسطة: غير محدد</span>
          </span>
        @endif
      </div>

      <p class="text-sm md:text-base text-white/85 leading-relaxed mt-2">
        هذا التحليل يركّز على تقرير واحد بالتحديد، ويقارنه بباقي تقارير النظام من حيث:
        التقدير، التفاعل الاجتماعي، وجود تقدّم أو مشاكل، ثم يستخرج نقاط القوة، المخاطر، وخطوات عملية مقترحة،
        مع أدوات استعلام سريعة لمعرفة مكان هذا التقرير من الصورة الكاملة.
      </p>

      <div class="flex flex-wrap gap-3 text-xs mt-2">
        <span class="inline-flex items-center gap-1 bg-white/10 px-3 py-1 rounded-full">
          <i class="fa-solid fa-star"></i>
          التقدير: {{ $gradeLabelAr }}@if($gradeScore) ({{ $gradeScore }}/5) @endif
        </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>
          أصدقاء جدد: {{ $friends }}
        </span>
        <span class="inline-flex items-center gap-1 bg-white/10 px-3 py-1 rounded-full">
          <i class="fa-solid fa-paper-plane"></i>
          الدعوات المرسلة: {{ $invites }}
        </span>
        <span class="inline-flex items-center gap-1 bg-white/10 px-3 py-1 rounded-full">
          <i class="fa-solid fa-bolt"></i>
          نوع النشاط: {{ $activityType === 'plus' ? 'PLUS' : 'عادي' }}
        </span>
      </div>
    </div>
  </div>

  {{-- كروت سريعة + أدوات استعلام --}}
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
    <div class="rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 p-4">
      <div class="text-xs text-slate-600 dark:text-slate-300 flex items-center justify-between">
        <span>مؤشر التفاعل للتقرير</span>
        <span class="px-2 py-0.5 rounded-full text-[10px]
              @if($engagementTone === 'positive') bg-emerald-100 text-emerald-700
              @elseif($engagementTone === 'neutral') bg-amber-100 text-amber-700
              @else bg-rose-100 text-rose-700 @endif">
          {{ $engagementLabel }}
        </span>
      </div>
      <div class="mt-2 text-2xl font-extrabold text-slate-900 dark:text-slate-50">
        {{ $scoreEngagement }} / 10
      </div>
      <p class="mt-1 text-[11px] text-slate-500 dark:text-slate-400">
        مزيج من التقدير، الأصدقاء الجدد، الدعوات، والتقدّم/المشاكل.
      </p>
    </div>

    <div class="rounded-2xl bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-700 p-4">
      <div class="text-xs text-emerald-700 dark:text-emerald-200 flex items-center justify-between">
        <span>مقارنة الأصدقاء الجدد</span>
        <span class="px-2 py-0.5 rounded-full text-[10px]
              {{ $isAboveAvgFriends ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-700' }}">
          {{ $isAboveAvgFriends ? 'فوق المتوسط' : 'عند/تحت المتوسط' }}
        </span>
      </div>
      <div class="mt-2 text-lg font-bold text-emerald-900 dark:text-emerald-50">
        {{ $friends }} مقابل متوسط {{ $context['avg_friends'] }}
      </div>
      <p class="mt-1 text-[11px] text-emerald-700/80 dark:text-emerald-200/80">
        كم يساهم هذا النشاط في توسيع شبكة العلاقات مقارنة بباقي الأنشطة.
      </p>
    </div>

    <div class="rounded-2xl bg-cyan-50 dark:bg-cyan-900/30 border border-cyan-200 dark:border-cyan-700 p-4">
      <div class="text-xs text-cyan-700 dark:text-cyan-200 flex items-center justify-between">
        <span>مقارنة الدعوات</span>
        <span class="px-2 py-0.5 rounded-full text-[10px]
              {{ $isAboveAvgInvites ? 'bg-cyan-100 text-cyan-700' : 'bg-slate-100 text-slate-700' }}">
          {{ $isAboveAvgInvites ? 'فوق المتوسط' : 'عند/تحت المتوسط' }}
        </span>
      </div>
      <div class="mt-2 text-lg font-bold text-cyan-900 dark:text-cyan-50">
        {{ $invites }} مقابل متوسط {{ $context['avg_invites'] }}
      </div>
      <p class="mt-1 text-[11px] text-cyan-700/80 dark:text-cyan-200/80">
        هل هذا التقرير يستخدم عنصر الدعوة كأداة فعلية أم لا يزال ضعيفًا؟
      </p>
    </div>

    <div class="rounded-2xl bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-700 p-4">
      <div class="flex items-center justify-between text-xs text-amber-800 dark:text-amber-100">
        <span>سياق عام للنظام</span>
        @if($isOutlier)
          <span class="px-2 py-0.5 rounded-full bg-amber-100 text-amber-800 text-[10px]">
            استثناء لافت
          </span>
        @endif
      </div>
      <div class="mt-2 text-sm text-amber-900 dark:text-amber-50 space-y-1">
        <div>نسبة التقدّم في كل التقارير: {{ $context['pct_progress'] }}%</div>
        <div>نسبة المشاكل في كل التقارير: {{ $context['pct_issues'] }}%</div>
      </div>
      <p class="mt-1 text-[11px] text-amber-800/80 dark:text-amber-100/80">
        يساعدك تفهم إذا هذا التقرير استثناء إيجابي/سلبي عن الصورة العامة.
      </p>
    </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-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/50 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['strengths'] as $s)
          <div class="rounded-xl bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-100/70 dark:border-emerald-800 px-3 py-2">
            {{ $s }}
          </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/50 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 $s)
          <div class="rounded-xl bg-rose-50 dark:bg-rose-900/30 border border-rose-100/70 dark:border-rose-800 px-3 py-2">
            {{ $s }}
          </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-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/50 flex items-center justify-center">
          <i class="fa-solid fa-person-running 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 $s)
          <div class="rounded-xl bg-amber-50 dark:bg-amber-900/30 border border-amber-100/70 dark:border-amber-800 px-3 py-2">
            {{ $s }}
          </div>
        @empty
          <p class="text-gray-500 dark:text-gray-400 text-[11px]">
            لم يتم رصد خطوات حاسمة من الأرقام وحدها؛ راجع محتوى التقرير النصي للحصول على توصيات أدق.
          </p>
        @endforelse
      </div>
    </div>

  </div>

  {{-- زر رجوع لقائمة التقارير --}}
  <div class="flex justify-end">
    <a href="{{ route('superadmin.proactiveAI.deepReports.index') }}"
       class="inline-flex items-center gap-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800">
      <i class="fa-solid fa-arrow-right"></i>
      <span>رجوع لقائمة التقارير</span>
    </a>
  </div>

</div>
@endsection