{{-- resources/views/advisor/activities/index.blade.php --}}
@extends('layouts.advisor')

@section('title','📡 مراقبة نشاط الأعضاء — لوحة المستشار')

@section('content')
<div class="p-4 md:p-6 lg:p-8 space-y-6 md:space-y-8">

  {{-- خلفية هادية مثل التقارير --}}
  <div class="pointer-events-none fixed inset-x-0 top-0 h-64 -z-10
              bg-gradient-to-b from-sky-500/10 via-emerald-400/5 to-transparent"></div>

  {{-- ============================ --}}
  {{--          HERO الرئيسي        --}}
  {{-- ============================ --}}
  <div class="bg-white/70 dark:bg-slate-900/80 backdrop-blur-2xl rounded-3xl shadow-xl border border-white/10 p-5 md:p-6 space-y-4">

    {{-- شارات صغيرة --}}
    <div class="flex flex-wrap items-center gap-2 text-xs">
      <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full
                   bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 border border-emerald-400/40">
        <span class="h-2 w-2 rounded-full bg-emerald-400 animate-pulse"></span>
        منطقة المستشار — مراقبة نشاط الأعضاء
      </span>

      <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full
                   bg-sky-500/10 text-sky-700 dark:text-sky-300 border border-sky-400/40">
        Engagement Radar
      </span>
    </div>

    {{-- العنوان + شرح --}}
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
      <div class="space-y-2">
        <h1 class="text-2xl md:text-3xl font-extrabold text-slate-900 dark:text-slate-50">
          📡 لوحة مراقبة نشاط وتفاعل الأعضاء
        </h1>
        <p class="text-sm md:text-[15px] leading-relaxed text-slate-600 dark:text-slate-300 max-w-2xl">
          من هنا تراقب <span class="font-semibold text-sky-600 dark:text-sky-300">نبض تفاعل كل عضو</span>:
          نسبة التفاعل، أيام الحضور، نقاط التقييم، وسلوك العضو خلال فترة معينة، باستخدام
          <span class="font-semibold">مؤشر تفاعل ذكي</span> مشابه لمؤشر التفاعل العام لكن مخصص لعمل المستشار.
        </p>
      </div>

      <div class="flex flex-col items-start md:items-end gap-2 text-xs">
        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl
                    bg-slate-900 text-slate-100 border border-slate-700 shadow-sm">
          <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
          <span>المستشار الحالي:
            <span class="font-semibold text-emerald-300">
              {{ $advisor->name ?? $advisor->username ?? '—' }}
            </span>
          </span>
        </div>

        @if($selectedUser)
          <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl
                      bg-slate-900 text-slate-100 border border-sky-500/60 shadow-sm">
            <span class="h-2 w-2 rounded-full bg-sky-400"></span>
            <span>العضو المحدد:
              <span class="font-semibold text-sky-300">
                {{ $selectedUser->name }}
              </span>
            </span>
          </div>
        @endif

        @if($selectedUser && $meter)
          <p class="text-[11px] text-slate-500 dark:text-slate-400">
            الفترة الحالية: <span class="font-semibold">{{ $from }}</span> → <span class="font-semibold">{{ $to }}</span>
          </p>
        @else
          <p class="text-[11px] text-slate-500 dark:text-slate-400">
            اختر عضوًا وحدّد فترة من الأسفل لعرض عدّاد النشاط والتفاصيل.
          </p>
        @endif
      </div>
    </div>
  </div>

  {{-- ============================ --}}
  {{--        بطاقة الفلاتر        --}}
  {{-- ============================ --}}
  <div class="bg-white/80 dark:bg-slate-900/85 backdrop-blur-2xl rounded-3xl shadow-lg border border-white/10 p-4 md:p-5">

    <div class="flex items-center justify-between gap-3 mb-3">
      <div>
        <h2 class="text-sm md:text-base font-bold text-slate-800 dark:text-slate-100">
          🎛️ اختيار عضو + تحديد الفترة الزمنية
        </h2>
        <p class="text-[11px] md:text-xs text-slate-500 dark:text-slate-400">
          اختر العضو الذي تريد مراقبة نشاطه، وحدّد الفترة الزمنية لاحتساب التفاعل والحضور ونقاط التقييم.
        </p>
      </div>
      <span class="hidden md:inline-flex text-[11px] text-slate-400">
        بعد اختيار العضو والفترة اضغط <span class="mx-1 font-semibold text-sky-600 dark:text-sky-300">تحديث المؤشر</span> لعرض العدّاد.
      </span>
    </div>

    @if($users->isNotEmpty())
      <form method="GET" action="{{ url()->current() }}" class="grid gap-3 md:gap-4 md:grid-cols-6 items-end">

        {{-- اختيار عضو --}}
        <div class="md:col-span-3">
          <label class="block text-xs font-semibold text-slate-600 dark:text-slate-200 mb-1.5">
            👤 اختر عضوًا
          </label>
          <select
            name="user_id"
            class="w-full rounded-2xl border border-slate-300 dark:border-slate-700
                   bg-white/80 dark:bg-slate-950/80 text-slate-900 dark:text-slate-100 text-sm px-3 py-2.5
                   focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
            <option value="">— اختر عضواً —</option>
            @foreach($users as $u)
              <option value="{{ $u->id }}" @selected($selectedUser && $selectedUser->id === $u->id)>
                {{ $u->name }} @if($u->username) — {{ '@'.$u->username }} @endif
              </option>
            @endforeach
          </select>
        </div>

        {{-- من تاريخ --}}
        <div>
          <label class="block text-xs font-semibold text-slate-600 dark:text-slate-200 mb-1.5">
            ⏱️ من تاريخ
          </label>
          <input type="date"
                 name="from"
                 value="{{ $from }}"
                 class="w-full rounded-2xl border border-slate-300 dark:border-slate-700
                        bg-white/80 dark:bg-slate-950/80 text-slate-900 dark:text-slate-100 text-sm px-3 py-2.5
                        focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
        </div>

        {{-- إلى تاريخ --}}
        <div>
          <label class="block text-xs font-semibold text-slate-600 dark:text-slate-200 mb-1.5">
            🗓️ إلى تاريخ
          </label>
          <input type="date"
                 name="to"
                 value="{{ $to }}"
                 class="w-full rounded-2xl border border-slate-300 dark:border-slate-700
                        bg-white/80 dark:bg-slate-950/80 text-slate-900 dark:text-slate-100 text-sm px-3 py-2.5
                        focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
        </div>

        {{-- زر عرض --}}
        <div class="md:col-span-2 flex gap-2 md:gap-3">
          <button
            type="submit"
            class="flex-1 bg-gradient-to-r from-sky-500 via-cyan-500 to-emerald-500
                   text-slate-950 text-sm font-semibold rounded-2xl px-3 py-2.5 shadow-lg
                   hover:shadow-sky-500/40 hover:-translate-y-0.5 transition">
            تحديث المؤشر
          </button>

          <a href="{{ url()->current() }}"
             class="hidden sm:inline-flex items-center justify-center text-xs rounded-2xl px-3 py-2.5
                    bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-100 border border-slate-300 dark:border-slate-600
                    hover:bg-slate-200 dark:hover:bg-slate-700 transition">
            تصفير
          </a>
        </div>
      </form>
    @else
      <p class="text-xs text-slate-500 dark:text-slate-400">
        لا يوجد أعضاء متاحون لعرض نشاطهم حالياً.
      </p>
    @endif
  </div>

  {{-- ============================ --}}
  {{--    في حال تم اختيار عضو    --}}
  {{-- ============================ --}}
  @if($selectedUser && $meter)

    {{-- بطاقة العضو + أرقام سريعة --}}
    <div class="bg-white/85 dark:bg-slate-900/90 backdrop-blur-2xl rounded-3xl shadow-2xl border border-white/10 p-5 md:p-6 space-y-4">

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

        {{-- بيانات العضو --}}
        <div class="flex items-center gap-3 md:gap-4">
          @php
            $avatarUrl = $selectedUser->avatar_url
              ?? ($selectedUser->avatar
                  ? asset('storage/avatars/'.$selectedUser->avatar)
                  : 'https://ui-avatars.com/api/?name='.urlencode($selectedUser->name));
          @endphp

          <img src="{{ $avatarUrl }}"
               class="w-16 h-16 md:w-20 md:h-20 rounded-full border-2 border-sky-400 shadow-lg object-cover"
               alt="avatar"
               onerror="this.src='https://ui-avatars.com/api/?name={{ urlencode($selectedUser->name) }}'">

          <div class="space-y-1">
            <h2 class="text-lg md:text-xl font-extrabold text-slate-900 dark:text-slate-50">
              {{ $selectedUser->name }}
            </h2>

            @if($selectedUser->username)
              <div class="text-[11px] text-slate-500 dark:text-slate-400">
                @{{ $selectedUser->username }}
              </div>
            @endif

            <div class="flex flex-wrap gap-1.5 text-[10px] md:text-[11px]">
              @if($selectedUser->account_status)
                <span class="px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-700 dark:text-emerald-200 border border-emerald-400/50">
                  حالة الحساب: {{ $selectedUser->account_status }}
                </span>
              @endif
              @if($selectedUser->membership_status)
                <span class="px-2.5 py-1 rounded-full bg-sky-500/10 text-sky-700 dark:text-sky-200 border border-sky-400/50">
                  نوع العضوية: {{ $selectedUser->membership_status }}
                </span>
              @endif
              <span class="px-2.5 py-1 rounded-full bg-indigo-500/10 text-indigo-700 dark:text-indigo-200 border border-indigo-400/50">
                الفترة: {{ $from }} → {{ $to }}
              </span>
            </div>
          </div>
        </div>

        {{-- أرقام سريعة --}}
        <div class="grid grid-cols-2 md:grid-cols-3 gap-2 w-full md:w-auto">
          <div class="rounded-2xl bg-slate-50 dark:bg-slate-950/80 border border-sky-400/40 px-3 py-2.5">
            <div class="text-[11px] text-slate-500 dark:text-slate-300">نسبة التفاعل</div>
            <div class="text-lg md:text-xl font-black text-sky-600 dark:text-sky-300 mt-1">
              {{ $meter['percent'] }}%
            </div>
          </div>

          <div class="rounded-2xl bg-slate-50 dark:bg-slate-950/80 border border-emerald-400/40 px-3 py-2.5">
            <div class="text-[11px] text-slate-500 dark:text-slate-300">أيام الحضور</div>
            <div class="text-lg md:text-xl font-bold text-emerald-600 dark:text-emerald-300 mt-1">
              {{ $meter['raw']['presence_days'] }}
            </div>
          </div>

          <div class="rounded-2xl bg-slate-50 dark:bg-slate-950/80 border border-violet-400/40 px-3 py-2.5">
            <div class="text-[11px] text-slate-500 dark:text-slate-300">نقاط التقييم</div>
            <div class="text-lg md:text-xl font-bold text-violet-600 dark:text-violet-300 mt-1">
              {{ $meter['raw']['eval_points'] }}
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- عدّاد التفاعل بشكل هادئ ومناسب للموبايل --}}
    <div class="bg-gradient-to-br from-indigo-600 via-sky-500 to-emerald-500 rounded-3xl p-5 md:p-6 shadow-2xl text-white space-y-5">

      <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
        <div class="max-w-xl space-y-1">
          <h3 class="text-sm md:text-base font-semibold opacity-95 flex items-center gap-2">
            ⚙️ وصف التفاعل للفترة المحددة
          </h3>
          <p class="text-xs md:text-sm leading-relaxed opacity-95">
            {{ $meter['label'] }}
          </p>
        </div>
        <div class="text-center md:text-right">
          <div class="text-[11px] opacity-80 mb-1">النسبة الإجمالية</div>
          <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/15 border border-white/30 text-[12px]">
            <span class="font-bold text-sm">{{ $meter['percent'] }}%</span>
            <span class="text-[11px] opacity-90">من 100%</span>
          </div>
        </div>
      </div>

      {{-- العداد نفسه --}}
      <div class="flex justify-center mt-2">
        <div class="relative w-56 h-36 md:w-64 md:h-40">

          {{-- الخلفية --}}
          <div class="absolute inset-x-0 bottom-0 h-32 md:h-36">
            <div class="w-full h-full rounded-t-full bg-gradient-to-r from-red-500 via-yellow-400 to-emerald-500"></div>
          </div>

          {{-- الطبقة الداخلية --}}
          <div class="absolute inset-x-6 bottom-0 h-24 md:h-28 rounded-t-full bg-slate-950/90 flex flex-col items-center justify-center">
            <div class="text-[11px] text-slate-300 mb-1">Engagement</div>
            <div class="text-3xl md:text-4xl font-black">{{ $meter['percent'] }}%</div>
            <div class="text-[10px] text-slate-400 mt-1">تقدير تفاعل الفترة المحددة</div>
          </div>

          {{-- الإبرة --}}
          <div class="absolute left-1/2 bottom-0 origin-bottom"
               style="transform: translateX(-50%) rotate({{ $meter['angle'] }}deg);">
            <div class="w-[3px] h-24 md:h-28 bg-white rounded-full shadow-lg"></div>
          </div>

          {{-- مركز العداد --}}
          <div class="absolute left-1/2 bottom-0 translate-x-[-50%] translate-y-2">
            <div class="w-7 h-7 md:w-8 md:h-8 rounded-full bg-slate-900 border border-white shadow-lg"></div>
          </div>
        </div>
      </div>
    </div>

    {{-- تفصيل مكوّنات المؤشر + RAW DATA --}}
    <div class="bg-white/85 dark:bg-slate-900/90 backdrop-blur-2xl rounded-3xl shadow-xl border border-white/10 p-5 md:p-6 space-y-5">

      <h3 class="text-sm md:text-base font-bold text-slate-900 dark:text-slate-100">
        🧩 تفصيل مكوّنات مؤشر النشاط
      </h3>

      <div class="space-y-3">
        @foreach($meter['components'] as $comp)
          @php
            $isPenalty = ($comp['type'] ?? 'normal') === 'penalty';
            $max   = max(1, (int) $comp['max']);
            $value = max(0, (int) $comp['value']);
            $ratio = min(1, $value / $max);
            $barWidth = $isPenalty ? (1 - $ratio) * 100 : $ratio * 100;
          @endphp

          <div class="space-y-1.5">
            <div class="flex items-center justify-between text-[11px] text-slate-700 dark:text-slate-200">
              <span>{{ $comp['label'] }}</span>
              <span class="font-bold">
                @if($isPenalty) -{{ $value }} / {{ $max }} @else {{ $value }} / {{ $max }} @endif
              </span>
            </div>
            <div class="h-2.5 w-full rounded-full bg-slate-200 dark:bg-slate-800 overflow-hidden">
              <div class="h-full rounded-full
                         @if($isPenalty) bg-rose-500 @else bg-sky-500 @endif"
                   style="width: {{ $barWidth }}%"></div>
            </div>
          </div>
        @endforeach
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4 text-[11px] md:text-xs text-slate-700 dark:text-slate-200">
        <div class="bg-slate-50 dark:bg-slate-950/70 p-3 rounded-2xl border border-slate-200 dark:border-slate-800">
          <div class="font-bold text-xs text-sky-700 dark:text-sky-300 mb-1">التقييمات اليومية</div>
          عدد التقييمات المعتمدة:
          <b>{{ $meter['raw']['evaluations_count'] }}</b><br>
          مجموع نقاط التقييم:
          <b>{{ $meter['raw']['eval_points'] }}</b>
        </div>

        <div class="bg-slate-50 dark:bg-slate-950/70 p-3 rounded-2xl border border-slate-200 dark:border-slate-800">
          <div class="font-bold text-xs text-emerald-700 dark:text-emerald-300 mb-1">التواجد على النظام</div>
          أيام حضور في الفترة:
          <b>{{ $meter['raw']['presence_days'] }}</b><br>
          ساعات حضور تقديرية:
          <b>{{ $meter['raw']['presence_hours'] }}</b>
        </div>
      </div>
    </div>

  @else
    {{-- لو لسا ما اختار عضو --}}
    <div class="bg-white/85 dark:bg-slate-900/90 backdrop-blur-2xl rounded-3xl shadow-xl border border-white/10 p-5 md:p-6 text-center">
      <p class="text-sm md:text-base text-slate-600 dark:text-slate-300">
        👆 اختر عضوًا من أعلى الصفحة وحدّد فترة زمنية، ثم اضغط
        <span class="font-semibold text-sky-600 dark:text-sky-300">تحديث المؤشر</span>
        ليتم عرض عدّاد النشاط والتفاصيل الخاصة به.
      </p>
    </div>
  @endif

  {{-- فوتر مركز الاستعلامات --}}
  <div class="text-center text-[11px] text-slate-500 dark:text-slate-400 mt-4">
    <div class="font-semibold mb-0.5">🛟 مركز الاستعلامات — مراقبة نشاط الأعضاء</div>
    <div class="opacity-70">استخدم هذه الشاشة كأداة سريعة لفهم تفاعل كل عضو قبل اتخاذ أي قرار أو دعوة لاجتماع.</div>
    <div class="opacity-60 mt-1">Golden Loyalty Army — Advisor Activity Center</div>
  </div>

</div>
@endsection