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

@section('title','نبض ProActive الذكي — مراقبة الحالة')
@section('page-title','📡 نبض ProActive الذكي — مراقبة الحالة الحالية')

@section('content')
@php
  $pulse = $pulse ?? [];

  $window      = $pulse['window']      ?? [];
  $current     = $pulse['current']     ?? [];
  $trend       = $pulse['trend']       ?? [];
  $health      = $pulse['health']      ?? [];
  $highlights  = $pulse['highlights']  ?? [];

  $from        = $window['from']  ?? null;
  $to          = $window['to']    ?? null;

  $cnt         = $current['count']        ?? 0;
  $issues      = $current['issues']       ?? 0;
  $progress    = $current['progress']     ?? 0;
  $plus        = $current['plus']         ?? 0;
  $excellent   = $current['excellent']    ?? 0;
  $pctIssues   = $current['pct_issues']   ?? 0;
  $pctProgress = $current['pct_progress'] ?? 0;
  $pctPlus     = $current['pct_plus']     ?? 0;
  $pctExcellent= $current['pct_excellent']?? 0;

  $trendPct    = $trend['trend_pct']  ?? null;
  $trendLabel  = $trend['trend_label']?? 'غير معروف';
  $trendType   = $trend['trend_type'] ?? 'neutral';
  $prevCount   = $trend['prev_count'] ?? 0;

  $healthScore = $health['score']       ?? 0;
  $healthStatus= $health['status']      ?? 'غير محدد';
  $statusColor = $health['statusColor'] ?? 'slate';
  $healthNote  = $health['note']        ?? '';

  $positives   = $highlights['positives'] ?? [];
  $risks       = $highlights['risks']     ?? [];
  $actions     = $highlights['actions']   ?? [];
@endphp

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

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

    <div class="relative flex flex-col md:flex-row md:items-center md:justify-between gap-6">
      <div class="flex items-start gap-4">
        <div class="flex items-center justify-center w-14 h-14 rounded-2xl bg-white/15 ring-1 ring-white/20">
          <i class="fa-solid fa-heart-pulse text-2xl"></i>
        </div>
        <div class="space-y-2">
          <h1 class="text-2xl md:text-3xl font-extrabold">
            نبض ProActive الذكي
          </h1>
          <p class="text-white/80 text-sm md:text-base leading-relaxed">
            متابعة سريعة لحالة ProActive خلال آخر 30 يوم:
            حجم التقارير، نسبة المشاكل والتقدم، نسبة PLUS،
            ومؤشر صحة عام مبني على هذه العوامل.
          </p>
          <div class="flex flex-wrap items-center gap-3 text-xs md:text-sm 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-wave-square"></i> تحليل فترة متحركة (30 يوم)
            </span>
            <span class="inline-flex items-center gap-1 bg-white/10 px-3 py-1 rounded-full">
              <i class="fa-solid fa-microchip"></i> منبثق من بيانات جدول التقارير
            </span>
          </div>
          @if($from && $to)
            <div class="mt-1 text-[11px] md:text-xs text-white/70">
              الفترة الحالية: من <span class="font-semibold">{{ $from }}</span> إلى <span class="font-semibold">{{ $to }}</span>
            </div>
          @endif
        </div>
      </div>

      {{-- مؤشر الصحة --}}
      <div class="w-full md:w-80 rounded-2xl bg-black/20 backdrop-blur-md border border-white/20 p-4 space-y-3">
        <div class="flex items-center justify-between gap-2">
          <div class="text-[11px] text-white/80">مؤشر صحة ProActive</div>
          <div class="text-[11px] px-2 py-0.5 rounded-full bg-white/10">
            حالة: {{ $healthStatus }}
          </div>
        </div>
        <div class="flex items-end gap-3">
          <div class="text-4xl font-extrabold leading-none">
            {{ $healthScore }}
          </div>
          <div class="text-xs text-white/80 mb-1">من 100</div>
        </div>
        <div class="w-full h-2 rounded-full bg-white/20 overflow-hidden">
          @php
            $barColor = 'bg-slate-200';
            if($statusColor === 'emerald') $barColor = 'bg-emerald-300';
            elseif($statusColor === 'sky') $barColor = 'bg-sky-300';
            elseif($statusColor === 'amber') $barColor = 'bg-amber-300';
            elseif($statusColor === 'rose') $barColor = 'bg-rose-300';
          @endphp
          <div class="h-full {{ $barColor }}"
               style="width: {{ max(5, $healthScore) }}%"></div>
        </div>
        @if($healthNote)
          <p class="text-[11px] text-white/80 leading-relaxed">
            {{ $healthNote }}
          </p>
        @endif
      </div>
    </div>
  </div>

  {{-- أرقام الفترة الحالية + الترند --}}
  <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
    <div class="rounded-xl p-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 shadow-sm">
      <div class="text-[11px] text-gray-500 dark:text-gray-400">عدد التقارير (آخر 30 يوم)</div>
      <div class="mt-1 text-2xl font-extrabold text-gray-900 dark:text-gray-50">{{ $cnt }}</div>
      @if(!is_null($trendPct))
        <div class="mt-2 text-[11px]
          @if($trendType === 'up') text-emerald-600 dark:text-emerald-300
          @elseif($trendType === 'down') text-rose-600 dark:text-rose-300
          @else text-gray-500 dark:text-gray-400 @endif">
          ترند مقابل 30 يوم السابقة:
          <span class="font-semibold">
            {{ $trendPct > 0 ? '+' : ''}}{{ $trendPct }}%
          </span>
          ({{ $trendLabel }})
        </div>
      @else
        <div class="mt-2 text-[11px] text-gray-500 dark:text-gray-400">
          لا توجد فترة سابقة كافية للمقارنة.
        </div>
      @endif
    </div>

    <div class="rounded-xl p-4 bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-700 shadow-sm">
      <div class="text-[11px] text-emerald-700 dark:text-emerald-200">تقارير فيها تقدم</div>
      <div class="mt-1 text-2xl font-extrabold text-emerald-900 dark:text-emerald-50">{{ $progress }}</div>
      <div class="mt-1 text-[11px] text-emerald-700/80 dark:text-emerald-200/80">
        نسبة: {{ $pctProgress }}%
      </div>
    </div>

    <div class="rounded-xl p-4 bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-700 shadow-sm">
      <div class="text-[11px] text-rose-700 dark:text-rose-200">تقارير فيها مشاكل</div>
      <div class="mt-1 text-2xl font-extrabold text-rose-900 dark:text-rose-50">{{ $issues }}</div>
      <div class="mt-1 text-[11px] text-rose-700/80 dark:text-rose-200/80">
        نسبة: {{ $pctIssues }}%
      </div>
    </div>

    <div class="rounded-xl p-4 bg-violet-50 dark:bg-violet-900/20 border border-violet-200 dark:border-violet-700 shadow-sm">
      <div class="text-[11px] text-violet-700 dark:text-violet-200">PLUS / ممتاز</div>
      <div class="mt-1 text-sm text-violet-900 dark:text-violet-50">
        PLUS: <span class="font-extrabold">{{ $plus }}</span> ({{ $pctPlus }}%)
      </div>
      <div class="mt-1 text-sm text-emerald-900 dark:text-emerald-100">
        ممتاز: <span class="font-extrabold">{{ $excellent }}</span> ({{ $pctExcellent }}%)
      </div>
    </div>
  </div>

  {{-- إيجابي / مخاطر / خطوات عملية --}}
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

    {{-- إيجابيات --}}
    <div class="bg-white dark:bg-gray-900 rounded-2xl border border-emerald-200/70 dark:border-emerald-800 shadow-sm p-4 space-y-3">
      <div class="flex items-center gap-2">
        <span class="w-7 h-7 rounded-full bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center">
          <i class="fa-solid fa-circle-check text-emerald-700 dark:text-emerald-200 text-sm"></i>
        </span>
        <span class="text-xs font-semibold text-emerald-800 dark:text-emerald-100">
          نقاط قوة في نبض ProActive
        </span>
      </div>

      <div class="space-y-2 text-[12px] leading-relaxed">
        @forelse($positives as $p)
          <div class="rounded-xl border border-emerald-100 dark:border-emerald-800 bg-emerald-50/80 dark:bg-emerald-900/20 px-3 py-2">
            {{ $p }}
          </div>
        @empty
          <p class="text-gray-500 dark:text-gray-400">
            لا توجد نقاط قوة واضحة حاليًا — زيادة عدد التقارير وتحسين جودتها سيساعد في ظهور الإيجابيات.
          </p>
        @endforelse
      </div>
    </div>

    {{-- مخاطر --}}
    <div class="bg-white dark:bg-gray-900 rounded-2xl border border-rose-200/70 dark:border-rose-800 shadow-sm p-4 space-y-3">
      <div class="flex items-center gap-2">
        <span class="w-7 h-7 rounded-full bg-rose-100 dark:bg-rose-900/40 flex items-center justify-center">
          <i class="fa-solid fa-triangle-exclamation text-rose-700 dark:text-rose-200 text-sm"></i>
        </span>
        <span class="text-xs font-semibold text-rose-800 dark:text-rose-100">
          إشارات تحتاج انتباه
        </span>
      </div>

      <div class="space-y-2 text-[12px] leading-relaxed">
        @forelse($risks as $r)
          <div class="rounded-xl border border-rose-100 dark:border-rose-800 bg-rose-50/80 dark:bg-rose-900/20 px-3 py-2">
            {{ $r }}
          </div>
        @empty
          <p class="text-gray-500 dark:text-gray-400">
            لا توجد إشارات خطرة حاليًا، لكن يُنصح بمراقبة نسبة المشاكل والتقدم كل أسبوعين.
          </p>
        @endforelse
      </div>
    </div>

    {{-- خطوات عملية --}}
    <div class="bg-white dark:bg-gray-900 rounded-2xl border border-amber-200/70 dark:border-amber-800 shadow-sm p-4 space-y-3">
      <div class="flex items-center gap-2">
        <span class="w-7 h-7 rounded-full bg-amber-100 dark:bg-amber-900/40 flex items-center justify-center">
          <i class="fa-solid fa-person-running text-amber-700 dark:text-amber-200 text-sm"></i>
        </span>
        <span class="text-xs font-semibold text-amber-800 dark:text-amber-100">
          خطوات عملية مقترحة للفترة القادمة
        </span>
      </div>

      <div class="space-y-2 text-[12px] leading-relaxed">
        @forelse($actions as $a)
          <div class="rounded-xl border border-amber-100 dark:border-amber-800 bg-amber-50/80 dark:bg-amber-900/20 px-3 py-2">
            {{ $a }}
          </div>
        @empty
          <p class="text-gray-500 dark:text-gray-400">
            لا توجد توصيات خاصّة الآن — عند زيادة عدد التقارير واختلاف نتائجها ستظهر لك خطوات عملية أوضح.
          </p>
        @endforelse
      </div>
    </div>

  </div>

</div>
@endsection