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

@section('title','غرفة المؤشرات — مؤشر التأثير والانتشار')
@section('page-title','🌍 مؤشر التأثير والانتشار — Influence & Outreach Index')

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

  {{-- ================================ --}}
  {{-- HERO: شرح المؤشر                 --}}
  {{-- ================================ --}}
  <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-5">

    <div class="flex flex-wrap items-start justify-between gap-4">

      <div class="space-y-3 max-w-xl">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px]
                    bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30">
          <i class="fa-solid fa-users-rays text-xs"></i>
          <span>مؤشر التأثير والانتشار — IOI</span>
        </div>

        <h1 class="text-xl md:text-2xl font-extrabold text-gray-900 dark:text-white leading-snug">
          من هم <span class="text-emerald-500">سفراء الفريق</span>؟
        </h1>

        <p class="text-xs md:text-[13px] text-gray-600 dark:text-gray-300 leading-relaxed">
          هذا المؤشر لا يقيس فقط التزام العضو داخل النظام، بل يقيس
          <span class="font-semibold">أثره خارج الجدران</span>:
          كم ضيفًا يجلب؟ كم علاقة جديدة يصنع؟ وكم يومًا يكون فيه سببًا في
          إدخال حياة جديدة للتيم؟
        </p>
      </div>

      {{-- موجز سريع --}}
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full md:w-auto text-[11px] text-gray-700 dark:text-gray-200">

        <div class="rounded-2xl border border-emerald-500/30 bg-emerald-500/5 p-3 space-y-1">
          <div class="flex items-center gap-2">
            <i class="fa-solid fa-handshake-angle text-[13px] text-emerald-500"></i>
            <span class="font-semibold">لماذا مهم؟</span>
          </div>
          <ul class="list-disc list-inside space-y-0.5">
            <li>يعرف لك من هم “سفراء التيم”.</li>
            <li>يركّز على التأثير الخارجي لا الحضور فقط.</li>
          </ul>
        </div>

        <div class="rounded-2xl border border-sky-500/30 bg-sky-500/5 p-3 space-y-1">
          <div class="flex items-center gap-2">
            <i class="fa-solid fa-key text-[13px] text-sky-500"></i>
            <span class="font-semibold">مفاتيح الأهمية</span>
          </div>
          <ul class="list-disc list-inside space-y-0.5">
            <li>عدد القستات وساعات الجلسات.</li>
            <li>كم شخص جديد / علاقة جديدة.</li>
            <li>عدد الأيام النشطة في التأثير.</li>
          </ul>
        </div>

      </div>
    </div>

    {{-- وايرفريم كيف نقرأ المؤشر --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-[11px]">

      <div class="rounded-2xl bg-gray-50/80 dark:bg-gray-800/60 border border-gray-200/60 dark:border-gray-700/60 p-3">
        <div class="flex items-center gap-2 mb-1.5">
          <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
          <span class="font-semibold text-gray-800 dark:text-gray-100">+80 نقطة</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300">
          عضو يُعتبر “سفيرًا حقيقيًا”: دائم القستات، يجلب وجوهًا جديدة باستمرار، وله أثر واضح في توسّع دائرة التيم.
        </p>
      </div>

      <div class="rounded-2xl bg-gray-50/80 dark:bg-gray-800/60 border border-gray-200/60 dark:border-gray-700/60 p-3">
        <div class="flex items-center gap-2 mb-1.5">
          <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
          <span class="font-semibold text-gray-800 dark:text-gray-100">بين 40 و 80</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300">
          تأثير موجود لكن غير مستغل بالكامل؛ يمكن رفعه بتنظيم قستات أكثر وتكليف العضو بمهام “سفير”.
        </p>
      </div>

      <div class="rounded-2xl bg-gray-50/80 dark:bg-gray-800/60 border border-gray-200/60 dark:border-gray-700/60 p-3">
        <div class="flex items-center gap-2 mb-1.5">
          <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
          <span class="font-semibold text-gray-800 dark:text-gray-100">أقل من 40</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300">
          تأثير ضعيف أو شبه معدوم؛ العضو يحتاج خطة دعم خاصة أو إعادة توجيه أدواره داخل الفريق.
        </p>
      </div>

    </div>
  </div>

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

    <div class="flex items-start justify-between gap-3 flex-wrap">
      <div>
        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-50">
          اختر عضوًا لقياس تأثيره الخارجي
        </h2>
        <p class="text-[11px] text-gray-500 dark:text-gray-400 mt-1">
          المؤشر يحسب آخر 30 يوم من القستات واللايفات والعلاقات الجديدة.
        </p>
      </div>

      <div class="hidden md:block text-[10px] px-3 py-1 rounded-full border border-gray-300/60 dark:border-gray-700/70
                      text-gray-600 dark:text-gray-300 bg-white/70 dark:bg-gray-900/70">
        <i class="fa-solid fa-circle-info text-[11px] mr-1"></i>
        أفضل استخدام: متابعة سفراء التيم وتحديد من يحتاج دفع للأمام.
      </div>
    </div>

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

        <div class="md:col-span-4">
          <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 text-sm">
            @foreach($users as $u)
              <option value="{{ $u->id }}" @if($selectedUser && $selectedUser->id === $u->id) selected @endif>
                {{ $u->name }} — {{ $u->username }}
              </option>
            @endforeach
          </select>
        </div>

        <button type="submit"
                class="bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-sm font-semibold px-4 py-2.5 mt-1 md:mt-6">
          عرض المؤشر
        </button>
      </form>
    @else
      <div class="text-sm text-gray-500 dark:text-gray-400">
        لا يوجد أعضاء نشطون يمكن عرض مؤشر التأثير لهم.
      </div>
    @endif

  </div>

  @if($selectedUser && $ioi)

    {{-- ========================= --}}
    {{-- بطاقة العضو              --}}
    {{-- ========================= --}}
    <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
        $avatar = $selectedUser->avatar_url
          ?? ($selectedUser->avatar ? asset('storage/avatars/'.$selectedUser->avatar)
          : 'https://ui-avatars.com/api/?name='.urlencode($selectedUser->name));
      @endphp

      <img src="{{ $avatar }}"
           class="w-24 h-24 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>

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

      <div class="flex flex-wrap justify-center gap-2 mt-2 text-[11px]">
        <span class="px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30">
          فترة القياس: {{ $ioi['period']['from'] }} → {{ $ioi['period']['to'] }}
        </span>
        <span class="px-3 py-1 rounded-full bg-sky-500/10 text-sky-700 dark:text-sky-300 border border-sky-500/30">
          أيام تأثير نشط: {{ $ioi['active_days']['current'] }}
        </span>
        <span class="px-3 py-1 rounded-full bg-gray-500/5 text-gray-700 dark:text-gray-200 border border-gray-400/30">
          الترند مقارنة بالفترة السابقة: {{ $ioi['trend_percent'] }}%
        </span>
      </div>
    </div>

    {{-- ========================= --}}
    {{--  العداد الرئيسي          --}}
    {{-- ========================= --}}
    <div class="bg-gradient-to-br from-emerald-600 via-sky-500 to-indigo-600 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">{{ $ioi['label'] }}</p>
        </div>

        <div class="text-center md:text-right">
          <div class="text-[11px] opacity-80 mb-1">الدرجة الإجمالية لمؤشر التأثير</div>
          <div class="px-4 py-1 rounded-full bg-white/20 border border-white/20 inline-block text-[12px]">
            <span class="font-bold text-white">{{ $ioi['score'] }} / 100</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-950/90 flex flex-col items-center justify-center text-white">
            <div class="text-xs text-slate-300 mb-1">Influence & Outreach Index</div>
            <div class="text-4xl font-black">{{ $ioi['score'] }}</div>
          </div>

          {{-- الإبرة --}}
          <div class="absolute left-1/2 bottom-0 origin-bottom"
               style="transform: translateX(-50%) rotate({{ $ioi['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 mb-2">من أين يأتي هذا التأثير؟</h3>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-[12px]">

        {{-- القستات --}}
        <div class="rounded-2xl border border-emerald-500/30 bg-emerald-500/5 p-4 space-y-2">
          <div class="flex items-center gap-2">
            <i class="fa-solid fa-user-group text-xs text-emerald-500"></i>
            <span class="font-semibold text-gray-900 dark:text-white">القستات والجلسات</span>
          </div>
          <p class="text-gray-600 dark:text-gray-300 text-[11px] leading-relaxed">
            كلما زاد عدد القستات وساعات الجلسات، كان العضو أكثر احتكاكًا بالعالم الخارجي
            وأكثر قدرة على جذب الناس إلى الفريق.
          </p>
          <div class="mt-2 grid grid-cols-2 gap-2 text-[11px]">
            <div class="px-3 py-2 rounded-xl bg-white/70 dark:bg-gray-900/70 border border-emerald-500/30">
              <div class="text-gray-500 dark:text-gray-400">عدد القستات / 30 يوم</div>
              <div class="font-bold text-emerald-600 dark:text-emerald-300">
                {{ $ioi['guests']['current_count'] }}
              </div>
            </div>
            <div class="px-3 py-2 rounded-xl bg-white/70 dark:bg-gray-900/70 border border-emerald-500/30">
              <div class="text-gray-500 dark:text-gray-400">ساعات القستات</div>
              <div class="font-bold text-emerald-600 dark:text-emerald-300">
                {{ $ioi['guests']['current_hours'] }}
                <span class="text-[10px] text-gray-400">ساعة تقريبًا</span>
              </div>
            </div>
          </div>
        </div>

        {{-- العلاقات / الأشخاص الجدد --}}
        <div class="rounded-2xl border border-sky-500/30 bg-sky-500/5 p-4 space-y-2">
          <div class="flex items-center gap-2">
            <i class="fa-solid fa-person-circle-plus text-xs text-sky-500"></i>
            <span class="font-semibold text-gray-900 dark:text-white">الانتشار والعلاقات</span>
          </div>
          <p class="text-gray-600 dark:text-gray-300 text-[11px] leading-relaxed">
            تقدير لعدد الأشخاص الجدد، الأصدقاء الجدد أو الدعوات التي تمت عبر هذا العضو
            من خلال القستات واللايفات والأنشطة الحيّة.
          </p>
          <div class="mt-2 flex items-baseline gap-2">
            <div class="text-2xl font-extrabold text-sky-600 dark:text-sky-300">
              {{ $ioi['people']['current'] }}
            </div>
            <div class="text-[11px] text-gray-500 dark:text-gray-400">
              شخص / علاقة جديدة تقريبًا في آخر 30 يوم
            </div>
          </div>
          <div class="text-[10px] text-gray-500 dark:text-gray-400 mt-1">
            مقارنة بالفترة السابقة: {{ $ioi['people']['previous'] }} شخص.
          </div>
        </div>

        {{-- الاستمرارية والترند --}}
        <div class="rounded-2xl border border-indigo-500/30 bg-indigo-500/5 p-4 space-y-2">
          <div class="flex items-center gap-2">
            <i class="fa-solid fa-chart-line text-xs text-indigo-500"></i>
            <span class="font-semibold text-gray-900 dark:text-white">الاستمرارية والترند</span>
          </div>
          <p class="text-gray-600 dark:text-gray-300 text-[11px] leading-relaxed">
            ليس المهم أن يتحمس العضو أسبوعًا واحدًا فقط، بل أن يستمر.
            هذه الكتلة تقيس تطور التأثير بين آخر فترتين وعدد الأيام النشطة.
          </p>

          <div class="mt-2 grid grid-cols-2 gap-2 text-[11px]">
            <div class="px-3 py-2 rounded-xl bg-white/70 dark:bg-gray-900/70 border border-indigo-500/30">
              <div class="text-gray-500 dark:text-gray-400">أيام نشطة (حاليًا)</div>
              <div class="font-bold text-indigo-600 dark:text-indigo-300">
                {{ $ioi['active_days']['current'] }} يوم
              </div>
            </div>
            <div class="px-3 py-2 rounded-xl bg-white/70 dark:bg-gray-900/70 border border-indigo-500/30">
              <div class="text-gray-500 dark:text-gray-400">ترند التأثير</div>
              <div class="font-bold text-indigo-600 dark:text-indigo-300">
                {{ $ioi['trend_percent'] }}%
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>

  @endif

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

</div>
@endsection