{{-- resources/views/superadmin/falcon-room/member-reality.blade.php --}}
@extends('layouts.superadmin')

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

  {{-- العنوان + وصف سريع --}}
  <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
    <div>
      <h1 class="text-2xl font-bold flex items-center gap-2">
        <span>🧠 التقييم الواقعي — Member Reality Score</span>
      </h1>
      <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">
        اختر أحد أعضاء الفريق لمشاهدة تقييمه الواقعي بناءً على القستات، اللايفات، التفاعل والانضباط.
      </p>
    </div>

    <a href="#reality-breakdown"
       class="inline-flex items-center justify-center px-4 py-2 rounded-lg bg-primary-600 text-white text-sm font-semibold shadow hover:bg-primary-700">
      عرض التقييم 👁️
    </a>
  </div>

  {{-- اختيار العضو --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 space-y-3">
    <form method="GET" class="space-y-3">
      <div>
        <label class="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">العضو</label>
        <select name="user_id"
                class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white px-3 py-2 text-sm">
          @foreach($users as $u)
            <option value="{{ $u->id }}" @selected($selectedUser && $selectedUser->id === $u->id)>
              {{ $u->name }} — {{ $u->username }}
            </option>
          @endforeach
        </select>
      </div>

      <button type="submit"
              class="w-full md:w-auto inline-flex items-center justify-center px-4 py-2 rounded-lg
                     bg-primary-600 text-white text-sm font-semibold hover:bg-primary-700">
        🔍 عرض تقييم هذا العضو
      </button>
    </form>
  </div>

  @if(!$selectedUser)
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 text-center text-gray-600 dark:text-gray-300">
      لا يوجد أعضاء لعرضهم حالياً.
    </div>
  @else
    @php
      // 🔧 إصلاح الصورة: نفس منطق members.blade
      $avatarUrl = $selectedUser->avatar_url
        ?? ($selectedUser->avatar
              ? asset('storage/'.$selectedUser->avatar)
              : 'https://ui-avatars.com/api/?name='.urlencode($selectedUser->name ?? 'عضو'));

      $memberSince = $selectedUser->created_at
        ? \Carbon\Carbon::parse($selectedUser->created_at)->diffForHumans()
        : 'غير معروف';

      $membershipLabel = [
        'official'     => 'رسمي',
        'beta'         => 'بيتا',
        'moderator'    => 'مشرف',
        'advisor'      => 'مستشار',
        'super-admin'  => 'إدارة عليا',
      ][$selectedUser->membership_status ?? 'beta'] ?? 'عضو';

      $accountStatus = $selectedUser->account_status ?? 'active';
    @endphp

    {{-- كرت العضو (نفس روح كروت الأعضاء) --}}
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow p-4 md:p-5 flex flex-col md:flex-row items-center md:items-stretch gap-4">
      <div class="flex flex-col items-center gap-2 md:w-1/3">
        <img src="{{ $avatarUrl }}"
             class="w-24 h-24 md:w-28 md:h-28 rounded-2xl object-cover border-4 border-white dark:border-gray-700 shadow">
        <span class="px-3 py-1 rounded-full text-xs bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-100">
          {{ $membershipLabel }}
        </span>
      </div>

      <div class="flex-1 space-y-2 text-center md:text-right">
        <h2 class="text-xl font-bold">{{ $selectedUser->name }}</h2>
        <p class="text-xs text-gray-500 dark:text-gray-400">{{ '@'.$selectedUser->username }}</p>

        <div class="flex flex-wrap justify-center md:justify-start gap-2 mt-1">
          <span class="px-3 py-1 rounded-full text-xs
                       {{ $accountStatus === 'active'
                            ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-200'
                            : ($accountStatus === 'suspended'
                                ? 'bg-amber-50 text-amber-700 dark:bg-amber-900 dark:text-amber-200'
                                : 'bg-rose-50 text-rose-700 dark:bg-rose-900 dark:text-rose-200') }}">
            حالة الحساب: {{ $accountStatus }}
          </span>

          <span class="px-3 py-1 rounded-full text-xs bg-sky-50 text-sky-700 dark:bg-sky-900 dark:text-sky-200">
            عضو منذ: {{ $memberSince }}
          </span>
        </div>
      </div>
    </div>

    {{-- الكرت الرئيسي للتقييم --}}
    <div id="reality-breakdown"
         class="bg-gradient-to-r from-sky-600 via-indigo-600 to-emerald-500 rounded-2xl shadow p-4 md:p-6 text-white">
      <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div class="space-y-1">
          <p class="text-xs md:text-sm text-white/80">الوصف العام للتقييم الواقعي</p>
          <h3 class="text-sm md:text-base font-semibold">{{ $score['label'] }}</h3>
        </div>
        <div class="flex items-center gap-4">
          <div class="text-right">
            <p class="text-xs md:text-sm tracking-wide">MEMBER REALITY SCORE</p>
            <p class="text-3xl md:text-4xl font-extrabold">{{ number_format($score['total'],0) }}/100</p>
          </div>
          <div class="px-4 py-2 rounded-2xl bg-white/15 border border-white/20 text-center">
            <p class="text-xs">التصنيف</p>
            <p class="text-xl font-extrabold">{{ $score['grade'] }}</p>
          </div>
        </div>
      </div>
    </div>

    {{-- كروت الأقسام الأربعة (شبَه ستايل الأعضاء) --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 space-y-2">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-xs text-gray-500 dark:text-gray-400">الالتزام والتواجد</p>
            <p class="text-lg font-bold">{{ $parts['commit'] }}/20</p>
          </div>
          <span class="text-2xl">📡</span>
        </div>
        <p class="text-xs md:text-sm text-gray-600 dark:text-gray-300">
          ساعات لايف/نشاط هذا الشهر (قستات + لايفات مؤكدة):
          <span class="font-semibold">{{ $parts['stats']['live_hours_month'] }}</span> ساعة.
        </p>
      </div>

      <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 space-y-2">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-xs text-gray-500 dark:text-gray-400">النشاط والمشاركة</p>
            <p class="text-lg font-bold">{{ $parts['activity'] }}/35</p>
          </div>
          <span class="text-2xl">🔥</span>
        </div>
        <p class="text-xs md:text-sm text-gray-600 dark:text-gray-300">
          تقارير: {{ $parts['stats']['total_reports'] }} ·
          ProActive: {{ $parts['stats']['proactive_count'] }} ·
          مسابقات: {{ $parts['stats']['competitions'] }}.
        </p>
      </div>

      <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 space-y-2">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-xs text-gray-500 dark:text-gray-400">الانضباط والسلوك</p>
            <p class="text-lg font-bold">{{ $parts['discipline'] }}/25</p>
          </div>
          <span class="text-2xl">🛡️</span>
        </div>
        <p class="text-xs md:text-sm text-gray-600 dark:text-gray-300">
          مخالفات: {{ $parts['stats']['violations_count'] }} ·
          غياب بدون عذر: {{ $parts['stats']['unexcused_absences'] }}.
        </p>
      </div>

      <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 space-y-2">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-xs text-gray-500 dark:text-gray-400">النموّ والإيجابية</p>
            <p class="text-lg font-bold">{{ $parts['growth'] }}/20</p>
          </div>
          <span class="text-2xl">🌱</span>
        </div>
        <p class="text-xs md:text-sm text-gray-600 dark:text-gray-300">
          يعتمد على تطور التقييمات بين هذا الشهر والماضي، مع مساحة مستقبلية للملاحظات الإيجابية/السلبية.
        </p>
      </div>
    </div>

    {{-- مربعين توضيح: قستات / لايفات كنسبة من الالتزام --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      {{-- قستات --}}
      <div class="bg-emerald-50 dark:bg-emerald-900/40 border border-emerald-200 dark:border-emerald-700 rounded-xl p-4 space-y-2">
        <div class="flex items-center justify-between">
          <h3 class="text-sm font-semibold text-emerald-800 dark:text-emerald-100">ساعات القستات هذا الشهر</h3>
          <span class="text-xl">🤝</span>
        </div>
        <p class="text-xs md:text-sm text-emerald-900 dark:text-emerald-100">
          الساعات: <span class="font-bold">{{ $parts['stats']['guest_hours_month'] }}</span> ساعة
          ({{ $parts['stats']['guest_count_month'] }} قست مكتمل/معتمد).
        </p>
        <p class="text-xs md:text-sm text-emerald-900 dark:text-emerald-100">
          مساهمتها في الالتزام: <span class="font-bold">{{ $parts['commit_from_guests'] }}</span> / 20.
        </p>
      </div>

      {{-- لايفات --}}
      <div class="bg-sky-50 dark:bg-sky-900/40 border border-sky-200 dark:border-sky-700 rounded-xl p-4 space-y-2">
        <div class="flex items-center justify-between">
          <h3 class="text-sm font-semibold text-sky-800 dark:text-sky-100">ساعات اللايفات هذا الشهر</h3>
          <span class="text-xl">📺</span>
        </div>
        <p class="text-xs md:text-sm text-sky-900 dark:text-sky-100">
          الساعات: <span class="font-bold">{{ $parts['stats']['live_stream_hours_month'] }}</span> ساعة
          ({{ $parts['stats']['live_stream_count_month'] }} لايف مؤكد).
        </p>
        <p class="text-xs md:text-sm text-sky-900 dark:text-sky-100">
          مساهمتها في الالتزام: <span class="font-bold">{{ $parts['commit_from_live_streams'] }}</span> / 20.
        </p>
      </div>
    </div>

    {{-- رأي الذكاء الاصطناعي --}}
    <div class="bg-emerald-50 dark:bg-emerald-900/40 border border-emerald-200 dark:border-emerald-700 rounded-xl p-4 flex gap-3">
      <div class="mt-1 text-2xl">🤖</div>
      <div>
        <h3 class="text-sm md:text-base font-semibold text-emerald-900 dark:text-emerald-100 mb-1">
          رأي الذكاء الاصطناعي في وضع العضو
        </h3>
        <p class="text-xs md:text-sm text-emerald-900 dark:text-emerald-100 leading-relaxed">
          {{ $aiSummary }}
        </p>
      </div>
    </div>

  @endif

</div>
@endsection