{{-- resources/views/superadmin/falcon/smart-pulse/index.blade.php --}}
@extends('layouts.superadmin')

@section('title','غرفة الصقر — نبض التيم الذكي')
@section('page-title','غرفة الصقر — نبض التيم الذكي (لايف + أعضاء + تقرير يومي)')

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

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

  {{-- هيرو رئيسي --}}
  <section class="relative overflow-hidden rounded-3xl border border-white/40 dark:border-gray-800 
                  bg-gradient-to-br from-cyan-50 via-emerald-50 to-sky-50 
                  dark:from-cyan-900/20 dark:via-emerald-900/20 dark:to-sky-900/20 
                  shadow-xl backdrop-blur">
    <div class="absolute -top-32 -end-32 w-[520px] h-[520px] rounded-full blur-3xl 
                bg-gradient-to-tr from-emerald-400/25 via-cyan-400/20 to-amber-400/25"></div>
    <div class="absolute -bottom-40 -start-40 w-[420px] h-[420px] rounded-full blur-3xl 
                bg-gradient-to-tr from-fuchsia-400/20 via-indigo-400/20 to-sky-400/20"></div>

    <div class="relative z-10 px-6 md:px-10 py-8 md:py-10">
      <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-6">

        {{-- عنوان + شرح --}}
        <div class="max-w-xl space-y-3">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/70 dark:bg-gray-900/60 border border-emerald-200/60 dark:border-emerald-700/60 text-xs font-semibold text-emerald-800 dark:text-emerald-200">
            <span class="h-2 w-2 rounded-full bg-emerald-500 animate-pulse"></span>
            نبض التيم الآن — قراءة ذكية لليوم
          </div>

          <h1 class="text-2xl md:text-3xl font-black tracking-tight text-gray-900 dark:text-white">
            غرفة نبض التيم الذكي — <span class="text-emerald-700 dark:text-emerald-300">AI Live & Daily Pulse</span>
          </h1>

          <p class="text-sm md:text-[15px] leading-relaxed text-gray-700 dark:text-gray-200">
            هذه الغرفة تجمع ثلاثة عوالم في مكان واحد:
            <span class="font-semibold">تقرير يومي ذكي</span> عن وضع التيم،
            <span class="font-semibold">متابعة لايفات الأعضاء</span>،
            و<span class="font-semibold">كوتشينغ ذكي للأعضاء الذين يحتاجون دفشة واهتمام</span>.
            هدفها مساعدة الصقر على رؤية الصورة الكبيرة خلال ثوانٍ.
          </p>

          <ul class="text-xs md:text-[13px] text-gray-600 dark:text-gray-300 space-y-1">
            <li>• <span class="font-semibold">تقرير اليوم</span> يقرأ الحضور، الغياب، اللايفات، والأعضاء الجدد ويعطي ملخص جاهز.</li>
            <li>• <span class="font-semibold">مركز اللايفات</span> يريك من فتح لايف مؤخرًا وكيف كان نشاطه.</li>
            <li>• <span class="font-semibold">AI Member Coach</span> يعرض أعضاء درجة الخطر عليهم أعلى ويقترح عليك طريقة التعامل.</li>
          </ul>
        </div>

        {{-- بطاقة نبض اليوم --}}
        <div class="w-full md:w-80">
          <div class="rounded-2xl bg-white/80 dark:bg-gray-900/80 border border-emerald-100/70 dark:border-emerald-800/70 shadow-lg p-4 space-y-4">
            <div class="flex items-center justify-between gap-2">
              <div>
                <p class="text-xs font-semibold text-emerald-700 dark:text-emerald-300">حالة اليوم</p>
                <p class="text-[11px] text-gray-500 dark:text-gray-400">بتاريخ {{ $today ?? now()->format('Y-m-d') }}</p>
              </div>
              <div class="relative">
                <div class="h-10 w-10 rounded-full bg-gradient-to-br from-emerald-500 to-cyan-500 grid place-items-center text-white shadow-md">
                  <i class="fa-solid fa-heartbeat text-lg"></i>
                </div>
                <span class="absolute -bottom-1 -start-1 h-3 w-3 rounded-full bg-emerald-400/80 ring-2 ring-white dark:ring-gray-900 animate-ping"></span>
              </div>
            </div>

            <p class="text-xs leading-5 text-gray-700 dark:text-gray-200 max-h-24 overflow-y-auto custom-scroll">
              {{ $pulseSummary }}
            </p>

            {{-- أرقام صغيرة --}}
            <div class="grid grid-cols-3 gap-2 text-center text-[11px]">
              <div class="rounded-xl bg-emerald-50 dark:bg-emerald-900/40 px-2 py-2">
                <div class="font-bold text-emerald-800 dark:text-emerald-200">
                  {{ $pulse['online_now'] ?? 0 }}
                </div>
                <div class="text-[10px] text-emerald-700/80 dark:text-emerald-200/80">أونلاين الآن</div>
              </div>
              <div class="rounded-xl bg-cyan-50 dark:bg-cyan-900/40 px-2 py-2">
                <div class="font-bold text-cyan-800 dark:text-cyan-200">
                  {{ $pulse['lives_today'] ?? 0 }}
                </div>
                <div class="text-[10px] text-cyan-700/80 dark:text-cyan-200/80">لايفات اليوم</div>
              </div>
              <div class="rounded-xl bg-amber-50 dark:bg-amber-900/40 px-2 py-2">
                <div class="font-bold text-amber-800 dark:text-amber-200">
                  {{ $pulse['absent_today'] ?? 0 }}
                </div>
                <div class="text-[10px] text-amber-700/80 dark:text-amber-200/80">غيابات اليوم</div>
              </div>
            </div>

            <div class="grid grid-cols-2 gap-2 text-[11px]">
              <div class="rounded-xl bg-blue-50 dark:bg-blue-900/40 px-2 py-1.5">
                <span class="block text-blue-700 dark:text-blue-200 font-semibold">
                  {{ $pulse['new_members_today'] ?? 0 }}
                </span>
                <span class="block text-[10px] text-blue-700/80 dark:text-blue-200/80">منضمين اليوم</span>
              </div>
              <div class="rounded-xl bg-gray-50 dark:bg-gray-800 px-2 py-1.5">
                <span class="block text-gray-800 dark:text-gray-100 font-semibold">
                  {{ $pulse['evaluations_today'] ?? 0 }}
                </span>
                <span class="block text-[10px] text-gray-600 dark:text-gray-300">تقييمات مدخلة</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </section>

  {{-- صف علوي: لايفات + كوتش الأعضاء --}}
  <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">

    {{-- 2) مركز متابعة اللايفات --}}
    <section class="lg:col-span-2 bg-white/90 dark:bg-gray-900/80 rounded-2xl border border-gray-100 dark:border-gray-800 shadow-sm p-5 space-y-4">
      <div class="flex items-center justify-between gap-3">
        <div>
          <h2 class="text-base md:text-lg font-bold text-gray-900 dark:text-white">مركز متابعة اللايفات</h2>
          <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
            آخر اللايفات المنتهية خلال الأيام الماضية — راقب أداء المضيفين وسجل ملاحظاتك في ملف المتابعة أو أي غرفة أخرى.
          </p>
        </div>
        <div class="h-9 w-9 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-500 grid place-items-center text-white shadow">
          <i class="fa-solid fa-tower-broadcast text-sm"></i>
        </div>
      </div>

      @if(($recentLives ?? collect())->isEmpty())
        <div class="mt-3 text-center text-sm text-gray-500 dark:text-gray-400 py-6">
          لا توجد لايفات مسجلة في الفترة الأخيرة.
        </div>
      @else
        <div class="mt-2 space-y-3 max-h-[340px] overflow-y-auto custom-scroll">
          @foreach($recentLives as $live)
            @php
              $status = $live->status ?? 'unknown';
              $badgeClass = match($status) {
                'live','active'     => 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200',
                'finished','ended','completed' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-200',
                'scheduled'         => 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200',
                default             => 'bg-gray-100 text-gray-700 dark:bg-gray-800/60 dark:text-gray-200',
              };
              $title = $live->title ?? ($live->platform ? 'لايف على '.$live->platform : 'لايف بدون عنوان');
            @endphp

            <div class="group rounded-xl border border-gray-100 dark:border-gray-800 bg-gray-50/70 dark:bg-gray-900/60 px-3 py-2.5 flex items-start gap-3 hover:border-cyan-400/70 hover:bg-white/90 dark:hover:bg-gray-900/90 transition-all">
              {{-- أفاتار المضيف --}}
              <div class="mt-0.5">
                @if(!empty($live->user_avatar))
                  <img src="{{ asset('storage/avatars/'.$live->user_avatar) }}" class="w-9 h-9 rounded-xl object-cover border border-white/70 dark:border-gray-700 shadow-sm" alt="">
                @else
                  <div class="w-9 h-9 rounded-xl grid place-items-center bg-gradient-to-br from-gray-200 to-gray-100 dark:from-gray-700 dark:to-gray-600 text-gray-700 dark:text-gray-200 text-xs font-semibold">
                    {{ mb_substr($live->user_name ?? '؟',0,1) }}
                  </div>
                @endif
              </div>

              <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2">
                  <div class="min-w-0">
                    <p class="text-sm font-semibold text-gray-900 dark:text-white truncate">
                      {{ $live->user_name ?? 'مضيف غير معروف' }}
                    </p>
                    <p class="text-[11px] text-gray-500 dark:text-gray-400 truncate">
                      {{ $title }}
                    </p>
                  </div>
                  <span class="ml-auto inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold {{ $badgeClass }}">
                    {{ $status }}
                  </span>
                </div>

                <div class="mt-1 flex flex-wrap items-center gap-3 text-[11px] text-gray-500 dark:text-gray-400">
                  @if(!empty($live->duration_minutes))
                    <span><i class="fa-regular fa-clock"></i> مدة تقريبية: {{ $live->duration_minutes }} دقيقة</span>
                  @endif

                  @if(!empty($live->viewers_count))
                    <span><i class="fa-regular fa-eye"></i> مشاهدين: {{ $live->viewers_count }}</span>
                  @endif

                  <span><i class="fa-regular fa-calendar"></i> {{ \Carbon\Carbon::parse($live->created_at)->format('Y-m-d H:i') }}</span>
                </div>

                <div class="mt-2 flex items-center gap-2 text-[11px]">
                  <button type="button"
                          class="px-2.5 py-1 rounded-lg bg-cyan-600 text-white hover:bg-cyan-700 transition text-[11px]">
                    مراجعة الأداء
                  </button>
                  <button type="button"
                          class="px-2 py-1 rounded-lg bg-gray-900/5 dark:bg-gray-700/70 text-gray-700 dark:text-gray-100 hover:bg-gray-900/10 dark:hover:bg-gray-700/90 transition text-[11px]">
                    فتح ملف متابعة
                  </button>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      @endif
    </section>

    {{-- 3) AI Member Coach --}}
    <section class="lg:col-span-3 bg-white/90 dark:bg-gray-900/80 rounded-2xl border border-gray-100 dark:border-gray-800 shadow-sm p-5 space-y-4">
      <div class="flex items-center justify-between gap-3">
        <div>
          <h2 class="text-base md:text-lg font-bold text-gray-900 dark:text-white">AI Member Coach — أعضاء يحتاجون كوتشينغ</h2>
          <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
            هذه القائمة تولَّدت تلقائيًا من الحضور والغياب في آخر أسبوعين. الأعضاء هنا هم الأكثر حاجة لاهتمام، جلسة دعم، أو تكليف
            بدور يعيد لهم الحماس.
          </p>
        </div>
        <div class="h-9 w-9 rounded-xl bg-gradient-to-br from-rose-500 to-amber-500 grid place-items-center text-white shadow">
          <i class="fa-solid fa-user-nurse text-sm"></i>
        </div>
      </div>

      @if(($membersNeedingCare ?? collect())->isEmpty())
        <div class="mt-3 text-center text-sm text-gray-500 dark:text-gray-400 py-6">
          حاليًا لا يوجد أعضاء في منطقة الخطر أو الحاجة العالية للمتابعة 👌
        </div>
      @else
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
          @foreach($membersNeedingCare as $m)
            @php
              $risk = (int)($m->risk_score ?? 0);
              $tone = $m->risk_tone ?? 'ok';

              $ring = match($tone) {
                'critical'  => 'ring-rose-400/80',
                'attention' => 'ring-amber-400/80',
                'watch'     => 'ring-blue-400/80',
                default     => 'ring-emerald-400/60',
              };

              $badge = match($tone) {
                'critical'  => 'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-200',
                'attention' => 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200',
                'watch'     => 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-200',
                default     => 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200',
              };
            @endphp

            <article class="group rounded-2xl border border-gray-100 dark:border-gray-800 bg-gray-50/80 dark:bg-gray-900/70 p-3.5 flex flex-col gap-3 hover:border-emerald-400/70 hover:bg-white/95 dark:hover:bg-gray-900/90 transition-all">
              <div class="flex items-start gap-3">
                {{-- Avatar --}}
                <div class="relative mt-0.5">
                  @if(!empty($m->avatar))
                    <img src="{{ asset('storage/avatars/'.$m->avatar) }}"
                         class="w-10 h-10 rounded-2xl object-cover border border-white/70 dark:border-gray-700 shadow-sm {{ $ring }} ring-2">
                  @else
                    <div class="w-10 h-10 rounded-2xl grid place-items-center bg-gradient-to-br from-gray-200 to-gray-100 dark:from-gray-700 dark:to-gray-600 text-xs font-bold text-gray-800 dark:text-gray-100 {{ $ring }} ring-2">
                      {{ mb_substr($m->name ?? '؟',0,1) }}
                    </div>
                  @endif
                </div>

                <div class="flex-1 min-w-0">
                  <div class="flex items-center gap-2">
                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white truncate">
                      {{ $m->name }}
                    </h3>
                    <span class="ml-auto px-2 py-0.5 rounded-full text-[10px] font-semibold {{ $badge }}">
                      {{ $m->risk_label }} • {{ $risk }}%
                    </span>
                  </div>
                  <p class="text-[11px] text-gray-500 dark:text-gray-400 truncate">
                    {{ $m->username }} • {{ $m->email }}
                  </p>

                  <div class="mt-1 flex flex-wrap items-center gap-3 text-[11px] text-gray-500 dark:text-gray-400">
                    <span><i class="fa-solid fa-user-check"></i> حضور: {{ $m->presents_count ?? 0 }}</span>
                    <span><i class="fa-solid fa-user-xmark"></i> غياب: {{ $m->absences_count ?? 0 }}</span>
                    <span><i class="fa-solid fa-star-half-stroke"></i> مستوى: {{ $m->membership_status }}</span>
                  </div>
                </div>
              </div>

              <p class="text-[11px] leading-5 text-gray-700 dark:text-gray-200 max-h-20 overflow-y-auto custom-scroll">
                {{ $m->coach_message }}
              </p>

              <div class="flex items-center gap-2 mt-auto pt-1">
                <button type="button"
                        class="flex-1 px-3 py-1.5 rounded-lg bg-emerald-600 text-white text-[11px] font-semibold hover:bg-emerald-700 transition">
                  إرسال رسالة تشجيع
                </button>
                <button type="button"
                        class="px-2.5 py-1.5 rounded-lg bg-gray-900/5 dark:bg-gray-800 text-[11px] text-gray-700 dark:text-gray-100 hover:bg-gray-900/10 dark:hover:bg-gray-700 transition">
                  فتح تفاصيل العضو
                </button>
              </div>
            </article>
          @endforeach
        </div>
      @endif
    </section>
  </div>

</div>

{{-- سكروول لطيف --}}
<style>
  .custom-scroll::-webkit-scrollbar {
    width: 4px;
  }
  .custom-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .6);
    border-radius: 999px;
  }
</style>
@endsection