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

@section('title','غرفة الصقر — إدارة أسماء المستخدمين (اليوزر)')
@section('page-title','غرفة الصقر — إدارة أسماء المستخدمين')

@section('content')
@php
  use Illuminate\Contracts\Pagination\Paginator as PaginatorContract;
  $users      = $users ?? collect();
  $paginator  = ($users instanceof PaginatorContract) ? $users : null;
  $collection = $paginator ? $paginator->getCollection() : collect($users);
@endphp

{{-- هيرو — شرح النظام --}}
<section class="relative overflow-hidden rounded-3xl border border-white/40 dark:border-gray-800 
                bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900
                text-white mb-6 shadow-lg">

  <div class="absolute inset-0 opacity-60">
    <div class="absolute -top-32 -end-20 w-80 h-80 rounded-full blur-3xl 
                bg-gradient-to-tr from-cyan-500/40 via-emerald-400/40 to-sky-500/30"></div>
    <div class="absolute -bottom-40 -start-24 w-80 h-80 rounded-full blur-3xl 
                bg-gradient-to-tr from-amber-500/35 via-rose-400/35 to-fuchsia-500/35"></div>
  </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-center md:justify-between gap-6">
      <div class="space-y-3 max-w-2xl">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full 
                    bg-cyan-500/10 border border-cyan-400/50 text-xs font-semibold text-cyan-100">
          <span class="h-1.5 w-1.5 rounded-full bg-cyan-300 animate-pulse"></span>
          نظام مركزي لأسماء المستخدمين — اليوزر
        </div>

        <h1 class="text-2xl md:text-3xl font-black tracking-tight">
          إدارة أسماء المستخدمين لأعضاء التيم والمشرفين والإدارة
        </h1>

        <p class="text-sm md:text-[15px] leading-7 text-slate-100/85">
          هنا تتحكم في <span class="font-semibold text-emerald-200">اليوزر الرسمي لكل عضو</span> —
          وهو <span class="font-bold text-amber-200">الاسم الذي يستخدم عند الدخول للنظام</span>. 
          أي تعديل هنا يعني أن العضو لن يستطيع تسجيل الدخول إلا بالـ <span class="underline decoration-amber-300/80">يوزر الجديد</span>.
        </p>

        <ul class="text-[13px] space-y-1.5 text-slate-100/85">
          <li>• لكل عضو، مشرف، أو إداري: تقدر تشوف يوزره الحالي وتعدّله مباشرة من نفس البطاقة.</li>
          <li>• النظام يتأكد تلقائيًا أن <span class="font-semibold text-rose-200">اليوزر غير مكرر</span> على أي حساب آخر.</li>
          <li>• يُفضّل الحفاظ على يوزر واضح، قصير، ومعروف عند العضو حتى ما يتوه وقت تسجيل الدخول.</li>
        </ul>
      </div>

      <div class="grid grid-cols-2 gap-3 md:w-64">
        <div class="rounded-2xl p-3.5 bg-slate-900/70 border border-white/10 shadow-sm">
          <p class="text-[11px] text-slate-400">أعضاء لديهم يوزر</p>
          <p class="mt-1 text-xl font-bold text-emerald-200">{{ $stats['haveUser'] ?? 0 }}</p>
        </div>
        <div class="rounded-2xl p-3.5 bg-slate-900/70 border border-white/10 shadow-sm">
          <p class="text-[11px] text-slate-400">بدون يوزر محدد</p>
          <p class="mt-1 text-xl font-bold text-amber-200">{{ $stats['noUser'] ?? 0 }}</p>
        </div>
        <div class="rounded-2xl p-3.5 bg-slate-900/70 border border-white/10 shadow-sm col-span-2">
          <p class="text-[11px] text-slate-400">إجمالي الحسابات في النظام</p>
          <p class="mt-1 text-xl font-bold text-slate-100">{{ $stats['total'] ?? 0 }}</p>
        </div>
      </div>
    </div>

    <p class="mt-4 text-[11px] text-slate-300/85">
      💡 بعد تعديل اليوزر، تأكد دائمًا من إبلاغ العضو: 
      <span class="font-semibold text-amber-200">"هذا هو الاسم الجديد الذي ستدخل به على النظام"</span>.
    </p>
  </div>
</section>

{{-- تنبيهات --}}
@if(session('success') || session('error') || $errors->any())
  <div class="mb-4 space-y-2">
    @if(session('success'))
      <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-emerald-800 text-sm">
        {{ session('success') }}
      </div>
    @endif
    @if(session('error'))
      <div class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-rose-800 text-sm">
        {{ session('error') }}
      </div>
    @endif
    @if($errors->any())
      <div class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-amber-800 text-xs">
        <ul class="list-disc list-inside space-y-0.5">
          @foreach($errors->all() as $e)
            <li>{{ $e }}</li>
          @endforeach
        </ul>
      </div>
    @endif
  </div>
@endif

{{-- فلاتر --}}
<div class="mb-5 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-4 shadow-sm">
  <form method="GET" action="{{ route('superadmin.falcon.usernames.index') }}" class="space-y-3">
    <div class="grid grid-cols-1 md:grid-cols-6 gap-3">
      <div class="md:col-span-2">
        <div class="relative">
          <input type="text" name="search" value="{{ request('search') }}"
                 placeholder="بحث (اسم / يوزر / إيميل)"
                 class="w-full pr-10 pl-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600
                        dark:bg-gray-800 dark:text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent text-sm">
          <div class="absolute inset-y-0 right-0 pr-3 grid place-items-center pointer-events-none">
            <i class="fa-solid fa-magnifying-glass text-gray-400 text-xs"></i>
          </div>
        </div>
      </div>

      <div>
        <select name="membership_status"
                class="w-full py-2.5 px-3 rounded-lg border border-gray-300 dark:border-gray-600
                       dark:bg-gray-800 dark:text-white text-sm">
          <option value="">كل العضويات</option>
          <option value="official"     @selected(request('membership_status')=='official')>رسمي</option>
          <option value="beta"         @selected(request('membership_status')=='beta')>بيتا</option>
          <option value="moderator"    @selected(request('membership_status')=='moderator')>مشرف</option>
          <option value="advisor"      @selected(request('membership_status')=='advisor')>مستشار</option>
          <option value="super-admin"  @selected(request('membership_status')=='super-admin')>إدارة عليا</option>
        </select>
      </div>

      <div>
        <select name="account_status"
                class="w-full py-2.5 px-3 rounded-lg border border-gray-300 dark:border-gray-600
                       dark:bg-gray-800 dark:text-white text-sm">
          <option value="">كل الحالات</option>
          <option value="active"    @selected(request('account_status')=='active')>نشط</option>
          <option value="suspended" @selected(request('account_status')=='suspended')>معلّق</option>
          <option value="banned"    @selected(request('account_status')=='banned')>محظور</option>
        </select>
      </div>

      <div>
        <select name="team_status"
                class="w-full py-2.5 px-3 rounded-lg border border-gray-300 dark:border-gray-600
                       dark:bg-gray-800 dark:text-white text-sm">
          <option value="">داخل/خارج التيم</option>
          <option value="present" @selected(request('team_status')=='present')>داخل التيم</option>
          <option value="left"    @selected(request('team_status')=='left')>خارج التيم</option>
        </select>
      </div>

      <div class="flex items-stretch gap-2 md:justify-end">
        <button class="w-full md:w-auto inline-flex items-center justify-center gap-1.5 px-4 py-2.5
                       rounded-lg bg-cyan-600 hover:bg-cyan-700 text-white text-sm font-semibold shadow-sm">
          <i class="fa-solid fa-filter text-xs"></i>
          <span>تصفية</span>
        </button>
      </div>
    </div>
  </form>
</div>

{{-- قائمة الأعضاء + تعديل اليوزر --}}
<div class="space-y-6">
  @if($collection->isEmpty())
    <div class="rounded-2xl border border-dashed border-gray-300 dark:border-gray-700
                bg-white dark:bg-gray-900 py-10 text-center">
      <p class="text-gray-500 dark:text-gray-300 text-sm">
        لا يوجد أعضاء حسب الفلاتر الحالية.
      </p>
    </div>
  @else
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
      @foreach($collection as $u)
        @php
          $avatarUrl = $u->avatar_url ?? (!empty($u->avatar) ? asset('storage/avatars/'.$u->avatar) : null);
          $status    = $u->account_status ?? 'active';
          $isLeft    = (bool)($u->isLeft ?? false);
        @endphp

        <div class="group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700
                    rounded-2xl shadow-sm hover:shadow-md transition-all duration-300 flex flex-col">
          {{-- رأس الكرت --}}
          <div class="flex items-center gap-3 px-4 pt-4 pb-3 border-b border-gray-100 dark:border-gray-800">
            <div class="relative">
              @if($avatarUrl)
                <img src="{{ $avatarUrl }}" class="w-11 h-11 rounded-xl object-cover border border-white dark:border-gray-700 shadow-sm">
              @else
                <div class="w-11 h-11 rounded-xl grid place-items-center bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200">
                  {{ mb_substr($u->name ?? '؟',0,1) }}
                </div>
              @endif
            </div>
            <div class="min-w-0 flex-1">
              <div class="flex items-center gap-1.5">
                <p class="font-semibold text-sm text-gray-900 dark:text-white truncate">
                  {{ $u->name }}
                </p>
                @if($isLeft)
                  <span class="px-1.5 py-0.5 rounded-full text-[10px] bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-200">
                    خارج التيم
                  </span>
                @endif
              </div>
              <p class="text-[11px] text-gray-500 dark:text-gray-400 truncate">
                عضوية: {{ $u->membership_status ?? 'غير محدد' }} • حالة: {{ $status }}
              </p>
            </div>
          </div>

          {{-- نموذج تعديل اليوزر --}}
          <div class="px-4 pt-3 pb-4 space-y-2 text-[13px]">
            <form method="POST" action="{{ route('superadmin.falcon.usernames.update', $u) }}" class="space-y-2">
              @csrf

              <div class="flex flex-col gap-1.5">
                <label class="text-[11px] font-semibold text-gray-700 dark:text-gray-300">
                  اسم المستخدم (اليوزر عند الدخول)
                </label>
                <input type="text" name="username" value="{{ old('username', $u->username) }}"
                       class="w-full rounded-lg border border-gray-300 dark:border-gray-600
                              dark:bg-gray-800 dark:text-white px-3 py-2 text-[13px]
                              focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
                       placeholder="مثال: falcon_{{ $u->id }}">
                <p class="text-[10px] text-gray-500 dark:text-gray-400">
                  هذا هو الاسم الذي سيستخدمه العضو عند تسجيل الدخول للنظام.
                </p>
              </div>

              <div class="flex flex-col gap-1.5">
                <label class="text-[11px] font-semibold text-gray-700 dark:text-gray-300">
                  ملاحظة إدارية (اختياري)
                </label>
                <input type="text" name="note"
                       class="w-full rounded-lg border border-gray-200 dark:border-gray-700
                              dark:bg-gray-900 dark:text-white px-3 py-1.5 text-[12px]"
                       placeholder="مثال: بناءً على طلب العضو / توحيد مع يوزره على إنستا...">
              </div>

              <div class="flex justify-between items-center gap-2 pt-1">
                <button type="submit"
                        class="inline-flex items-center justify-center gap-1.5 px-4 py-1.5
                               rounded-lg bg-cyan-600 hover:bg-cyan-700 text-white text-[12px] font-semibold">
                  <i class="fa-solid fa-floppy-disk text-[11px]"></i>
                  <span>حفظ اليوزر</span>
                </button>

                @if($u->username)
                  <span class="text-[11px] text-gray-500 dark:text-gray-400">
                    اليوزر الحالي: <span class="font-mono bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded-md">{{ $u->username }}</span>
                  </span>
                @endif
              </div>
            </form>
          </div>
        </div>
      @endforeach
    </div>
  @endif
</div>

{{-- Pagination --}}
@if($paginator && $paginator->hasPages())
  <div class="mt-6">
    {{ $paginator->withQueryString()->links('pagination::tailwind') }}
  </div>
@endif

@endsection