{{-- resources/views/superadmin/indicators/engagement-meter.blade.php --}}
@extends('layouts.superadmin')

@section('title','غرفة المؤشرات — مؤشر التفاعلات')
@section('page-title','📊 مؤشر التفاعل — Engagement Meter')

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

  {{-- ========================= --}}
  {{--  اختيار العضو + الفترة    --}}
  {{-- ========================= --}}
  <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-xl rounded-2xl shadow-lg border border-white/10 p-5 space-y-4">

    <h1 class="text-xl font-extrabold text-gray-800 dark:text-gray-100 flex items-center gap-2">
      📡 مؤشر التفاعل العام
      <span class="text-xs text-gray-500 dark:text-gray-400 font-normal">
        (قياس النشاط العام + السلوك + القستات + التقييمات + الانضباط)
      </span>
    </h1>

    @if($users->isNotEmpty())
      <form method="GET" class="grid grid-cols-1 md:grid-cols-6 gap-3">

        {{-- اختيار عضو --}}
        <div class="md:col-span-3">
          <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">اختر عضوًا</label>
          <select name="user_id"
                  class="w-full rounded-xl border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white px-3 py-2">
            @foreach($users as $u)
              <option value="{{ $u->id }}" @selected($selectedUser && $selectedUser->id === $u->id)>
                {{ $u->name }} — {{ $u->username }}
              </option>
            @endforeach
          </select>
        </div>

        {{-- من تاريخ --}}
        <div>
          <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">من تاريخ</label>
          <input type="date"
                 name="from"
                 value="{{ $from }}"
                 class="w-full rounded-xl border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white px-3 py-2 text-sm">
        </div>

        {{-- إلى تاريخ --}}
        <div>
          <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">إلى تاريخ</label>
          <input type="date"
                 name="to"
                 value="{{ $to }}"
                 class="w-full rounded-xl border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white px-3 py-2 text-sm">
        </div>

        {{-- زر عرض --}}
        <div class="flex items-end">
          <button type="submit"
                  class="w-full bg-primary-600 hover:bg-primary-700 text-white rounded-xl text-sm font-semibold px-4 py-2.5">
            تحديث المؤشر
          </button>
        </div>
      </form>
    @endif

  </div>


  @if($selectedUser && $meter)

    {{-- ========================= --}}
    {{-- بطاقة العضو              --}}
    {{-- ========================= --}}
    <div class="bg-white/70 dark:bg-gray-800/70 rounded-3xl shadow-xl p-6 backdrop-blur-2xl border border-white/10 text-center space-y-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-28 h-28 rounded-full shadow-xl border-4 border-white mx-auto object-cover"
           alt="avatar"
           onerror="this.src='https://ui-avatars.com/api/?name={{ urlencode($selectedUser->name) }}'">

      <h2 class="text-2xl font-extrabold text-gray-900 dark:text-white">
        {{ $selectedUser->name }}
      </h2>

      <div class="text-xs text-gray-500 dark:text-gray-300">{{ '@'.$selectedUser->username }}</div>

      <div class="flex flex-wrap justify-center gap-2 mt-2">
        <span class="px-3 py-1 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300 rounded-full text-[11px]">
          حالة الحساب: {{ $selectedUser->account_status }}
        </span>

        <span class="px-3 py-1 bg-sky-500/10 text-sky-600 dark:text-sky-300 rounded-full text-[11px]">
          نوع العضوية: {{ $selectedUser->membership_status }}
        </span>

        <span class="px-3 py-1 bg-indigo-500/10 text-indigo-600 dark:text-indigo-300 rounded-full text-[11px]">
          الفترة الحالية: {{ $from }} — {{ $to }}
        </span>
      </div>
    </div>


    {{-- ========================= --}}
    {{--  العداد ULTRA            --}}
    {{-- ========================= --}}
    <div class="bg-gradient-to-br from-indigo-600 via-sky-500 to-emerald-500 rounded-3xl p-6 shadow-2xl space-y-6 text-white">

      {{-- الوصف --}}
      <div class="flex justify-between flex-col md:flex-row gap-3">
        <div class="max-w-xl">
          <h3 class="text-sm font-semibold opacity-90 mb-1">الوصف العام للتفاعل</h3>
          <p class="text-sm leading-relaxed opacity-95">{{ $meter['label'] }}</p>
        </div>

        <div class="text-center md:text-right">
          <div class="text-[11px] opacity-80">النسبة الإجمالية</div>
          <div class="px-4 py-1 rounded-full bg-white/20 border border-white/20 inline-block text-[12px]">
            <span class="font-bold">{{ $meter['percent'] }}%</span>
          </div>
        </div>
      </div>

      {{-- شكل العداد --}}
      <div class="flex justify-center mt-2">
        <div class="relative w-64 h-40">

          {{-- الخلفية --}}
          <div class="absolute inset-x-0 bottom-0 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-28 rounded-t-full bg-slate-900/90 flex flex-col items-center justify-center text-white">
            <div class="text-xs text-slate-300 mb-1">Engagement</div>
            <div class="text-4xl font-black">{{ $meter['percent'] }}%</div>
            <div class="text-[11px] text-slate-400 mt-1">من 100%</div>
          </div>

          {{-- الإبرة --}}
          <div class="absolute left-1/2 bottom-0 origin-bottom"
               style="transform: translateX(-50%) rotate({{ $meter['angle'] }}deg);">
            <div class="w-1 h-24 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-8 h-8 rounded-full bg-slate-900 border border-white shadow-lg"></div>
          </div>
        </div>
      </div>

    </div>


    {{-- ========================= --}}
    {{--  تفصيل مكوّنات المؤشر    --}}
    {{-- ========================= --}}
    <div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-xl rounded-3xl p-6 shadow-xl space-y-5">

      <h3 class="text-sm font-bold text-gray-900 dark:text-white">تفصيل مكونات المؤشر</h3>

      <div class="space-y-4">
        @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">

            {{-- العنوان --}}
            <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-300">
              <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-gray-200 dark:bg-gray-700 overflow-hidden">
              <div class="h-full rounded-full
                   @if($isPenalty) bg-rose-500 @else bg-primary-500 @endif"
                   style="width: {{ $barWidth }}%"></div>
            </div>

          </div>
        @endforeach
      </div>

      {{-- RAW DATA --}}
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-[11px] text-gray-700 dark:text-gray-300">

        {{-- Guests --}}
        <div class="bg-gray-50 dark:bg-gray-900/40 p-3 rounded-xl">
          <div class="font-bold text-xs">القستات</div>
          ساعات: <b>{{ $meter['raw']['guest_hours'] }}</b><br>
          عدد: <b>{{ $meter['raw']['guest_count'] }}</b>
        </div>

        {{-- Presence on portal --}}
        <div class="bg-gray-50 dark:bg-gray-900/40 p-3 rounded-xl">
          <div class="font-bold text-xs">التواجد على البوابة</div>
          أيام حضور: <b>{{ $meter['raw']['presence_days'] }}</b><br>
          ساعات تقديرية: <b>{{ $meter['raw']['presence_hours'] }}</b>
        </div>

        {{-- Evaluations --}}
        <div class="bg-gray-50 dark:bg-gray-900/40 p-3 rounded-xl">
          <div class="font-bold text-xs">التقييمات اليومية</div>
          عدد التقييمات المعتمدة: <b>{{ $meter['raw']['evaluations_count'] }}</b><br>
          مجموع نقاط التقييم: <b>{{ $meter['raw']['eval_points'] }}</b>
        </div>

        {{-- Extra factors (إحصائية فقط) --}}
        <div class="bg-gray-50 dark:bg-gray-900/40 p-3 rounded-xl">
          <div class="font-bold text-xs">عوامل إضافية (إحصائية)</div>
          متابعات/مخاطر: <b>{{ $meter['raw']['followups'] }}</b><br>
          تكريمات: <b>{{ $meter['raw']['honors'] }}</b> — مسابقات: <b>{{ $meter['raw']['competitions'] }}</b>
        </div>

      </div>

    </div>

  @endif


  {{-- ========================= --}}
  {{--  FOOTER — مركز المساعدة   --}}
  {{-- ========================= --}}
  <div class="text-center text-xs text-gray-500 dark:text-gray-400 mt-10">
    <div class="opacity-70">🛠️ مركز المساعدة — استعلامات النظام</div>
    <div class="opacity-50">Golden Loyalty Army — Falcon Room</div>
  </div>

</div>
@endsection