{{-- resources/views/superadmin/iman-room/usernames-center.blade.php --}}
@extends('layouts.superadmin')

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

@section('content')
@php
  // Helpers
  $qs = request()->query();
  $q = fn($k,$d=null) => request()->get($k,$d);

  $view        = $view ?? 'table';
  $teamStatus  = $teamStatus ?? 'present';
  $scoreMode   = $scoreMode ?? 'strict';
  $search      = $search ?? '';
  $membership  = $membership ?? '';
  $accountStatus = $accountStatus ?? '';
  $policy      = $policy ?? [];
  $stats       = $stats ?? ['total'=>0,'haveUser'=>0,'noUser'=>0,'dupesUser'=>0];
  $dupes       = $dupes ?? collect();
  $drawer      = $drawer ?? ['open'=>false,'user'=>null,'score'=>null,'level'=>null,'reasons'=>[],'suggestions'=>[],'dup_count'=>0,'same_username_users'=>[],'focus_id'=>null,'mode'=>'auto'];
  $items       = $items ?? collect();

  // نستخدم URL ثابت لتحديث اليوزر (بدون الاعتماد على route name)
  $updateBase = '/superadmin/falcon/usernames'; // ✅ عدّلها إذا مسارك مختلف
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 sm:py-8 rtl"
     x-data="usernameCenter()"
     x-init="init({{ ($drawer['open'] ?? false) ? 'true' : 'false' }})">

  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-fuchsia-400/25 shadow-2xl shadow-fuchsia-500/10">
      <div class="pointer-events-none absolute -top-28 -right-16 w-96 h-96 rounded-full bg-fuchsia-400/15 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-24 -left-20 w-96 h-96 rounded-full bg-cyan-400/15 blur-3xl"></div>

      <div class="p-5 sm:p-6 lg:p-7 flex flex-col gap-5">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div class="space-y-1">
            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl border border-white/10 bg-white/5 text-white/80">
              <i class="fa-solid fa-fingerprint text-fuchsia-200"></i>
              <span class="text-[12px]">غرفة إيمان • Falcon Room</span>
            </div>
            <h1 class="text-xl sm:text-2xl lg:text-3xl font-black text-white tracking-tight">
              مركز أسماء المستخدمين
              <span class="text-white/60 font-semibold text-sm sm:text-base">— Username Center</span>
            </h1>
            <p class="text-white/70 text-sm sm:text-[15px] leading-relaxed max-w-3xl">
              هذا المركز يضبط هوية العضو داخل النظام: بحث أسرع، تقارير أدق، ربط محكم بين التقييمات والرسائل والتنبيهات.
              <span class="text-white/55">أي Username غير منضبط = قابلية لبَس/تكرار/فوضى.</span>
            </p>
          </div>

          <div class="flex items-center gap-2">
            <a href="{{ url()->current() }}?{{ http_build_query(array_merge($qs, ['view'=>'table'])) }}"
               class="px-3 py-2 rounded-2xl text-sm font-semibold border {{ $view==='table' ? 'border-fuchsia-400/40 bg-fuchsia-500/15 text-fuchsia-100' : 'border-white/10 bg-white/5 text-white/80 hover:text-white hover:bg-white/10' }}">
              <i class="fa-solid fa-table-list ml-1"></i> جدول
            </a>
            <a href="{{ url()->current() }}?{{ http_build_query(array_merge($qs, ['view'=>'cards'])) }}"
               class="px-3 py-2 rounded-2xl text-sm font-semibold border {{ $view==='cards' ? 'border-cyan-400/40 bg-cyan-500/15 text-cyan-100' : 'border-white/10 bg-white/5 text-white/80 hover:text-white hover:bg-white/10' }}">
              <i class="fa-solid fa-id-card ml-1"></i> كروت
            </a>
          </div>
        </div>

        {{-- STATS --}}
        <div class="grid grid-cols-1 sm:grid-cols-4 gap-3">
          <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
            <div class="text-white/60 text-xs">إجمالي الأعضاء</div>
            <div class="mt-1 text-white text-2xl font-black">{{ (int)($stats['total'] ?? 0) }}</div>
          </div>
          <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 p-4">
            <div class="text-emerald-100/80 text-xs">لديهم Username</div>
            <div class="mt-1 text-emerald-50 text-2xl font-black">{{ (int)($stats['haveUser'] ?? 0) }}</div>
          </div>
          <div class="rounded-2xl border border-amber-400/20 bg-amber-500/10 p-4">
            <div class="text-amber-100/80 text-xs">بدون Username</div>
            <div class="mt-1 text-amber-50 text-2xl font-black">{{ (int)($stats['noUser'] ?? 0) }}</div>
          </div>
          <div class="rounded-2xl border border-rose-400/20 bg-rose-500/10 p-4">
            <div class="text-rose-100/80 text-xs">تكرارات (Top)</div>
            <div class="mt-1 text-rose-50 text-2xl font-black">{{ (int)($stats['dupesUser'] ?? 0) }}</div>
          </div>
        </div>

        {{-- POLICY --}}
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
            <div class="space-y-2">
              <div class="text-white font-extrabold flex items-center gap-2">
                <i class="fa-solid fa-circle-info text-cyan-200"></i>
                <span>{{ $policy['title'] ?? 'قواعد وأهمية اليوزرنيم' }}</span>
                <span class="text-[11px] px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/70">
                  وضع التحليل: {{ $policy['mode'] ?? $scoreMode }}
                </span>
              </div>
              <ul class="text-white/75 text-sm leading-relaxed space-y-1">
                @foreach(($policy['why'] ?? []) as $line)
                  <li class="flex items-start gap-2">
                    <i class="fa-solid fa-bolt text-fuchsia-200 mt-1"></i>
                    <span>{{ $line }}</span>
                  </li>
                @endforeach
              </ul>
            </div>

            <div class="rounded-2xl border border-white/10 bg-black/20 p-4 lg:w-[420px]">
              <div class="text-white/90 font-bold mb-2 flex items-center gap-2">
                <i class="fa-solid fa-shield-halved text-emerald-200"></i>
                <span>قواعد رسمية</span>
              </div>
              <ul class="text-white/70 text-sm space-y-1">
                @foreach(($policy['rules'] ?? []) as $r)
                  <li class="flex items-start gap-2">
                    <i class="fa-solid fa-check text-emerald-200 mt-1"></i>
                    <span>{{ $r }}</span>
                  </li>
                @endforeach
              </ul>
            </div>
          </div>
        </div>

      </div>
    </div>

    {{-- FILTERS --}}
    <form method="GET" action="{{ url()->current() }}" class="rounded-3xl border border-white/10 bg-white/5 p-4 sm:p-5">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-3">
        <div class="lg:col-span-4">
          <label class="text-white/70 text-xs">بحث (اسم/إيميل/يوزر)</label>
          <div class="mt-1 relative">
            <i class="fa-solid fa-magnifying-glass absolute right-3 top-1/2 -translate-y-1/2 text-white/35"></i>
            <input name="search" value="{{ $search }}" placeholder="ابحث هنا..."
                   class="w-full pr-10 pl-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
          </div>
        </div>

        <div class="lg:col-span-2">
          <label class="text-white/70 text-xs">حالة التيم</label>
          <select name="team_status" class="mt-1 w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
            <option value="" {{ $teamStatus==='present' ? 'selected' : '' }}>داخل التيم</option>
            <option value="present" {{ $teamStatus==='present' ? 'selected' : '' }}>داخل التيم</option>
            <option value="left" {{ $teamStatus==='left' ? 'selected' : '' }}>خارج التيم</option>
            <option value="all" {{ $teamStatus==='all' ? 'selected' : '' }}>الكل</option>
          </select>
        </div>

        <div class="lg:col-span-2">
          <label class="text-white/70 text-xs">العضوية</label>
          <input name="membership_status" value="{{ $membership }}" placeholder="مثال: moderator"
                 class="mt-1 w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
        </div>

        <div class="lg:col-span-2">
          <label class="text-white/70 text-xs">حالة الحساب</label>
          <input name="account_status" value="{{ $accountStatus }}" placeholder="active"
                 class="mt-1 w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
        </div>

        <div class="lg:col-span-2">
          <label class="text-white/70 text-xs">سلوك التحليل</label>
          <select name="score_mode" class="mt-1 w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white focus:outline-none focus:ring-2 focus:ring-emerald-500/40">
            <option value="strict" {{ $scoreMode==='strict' ? 'selected' : '' }}>Strict (منضبط)</option>
            <option value="lenient" {{ $scoreMode==='lenient' ? 'selected' : '' }}>Lenient (مرن)</option>
          </select>
        </div>

        <div class="lg:col-span-12 flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between pt-1">
          <div class="flex items-center gap-2">
            <input type="hidden" name="view" value="{{ $view }}">
            <input type="hidden" name="drawer" value="{{ $q('drawer','auto') }}">
            @if($q('focus'))
              <input type="hidden" name="focus" value="{{ $q('focus') }}">
            @endif

            <button class="px-4 py-2.5 rounded-2xl bg-fuchsia-600/80 hover:bg-fuchsia-600 text-white font-extrabold border border-fuchsia-400/30 shadow-lg shadow-fuchsia-500/15">
              <i class="fa-solid fa-filter ml-1"></i> تطبيق
            </button>

            <a href="{{ url()->current() }}"
               class="px-4 py-2.5 rounded-2xl bg-white/5 hover:bg-white/10 text-white/85 font-semibold border border-white/10">
              <i class="fa-solid fa-rotate-left ml-1"></i> تصفير
            </a>
          </div>

          <div class="text-white/55 text-xs">
            * تلميح: اضغط “فتح” على أي عضو لعرض Drawer رسمي وتحليل اليوزر + تعديل مباشر.
          </div>
        </div>
      </div>
    </form>

    {{-- DUPES TOP --}}
    @if(($dupes instanceof \Illuminate\Support\Collection) && $dupes->isNotEmpty())
      <div class="rounded-3xl border border-rose-400/20 bg-rose-500/10 p-4 sm:p-5">
        <div class="flex items-center justify-between gap-3">
          <div class="text-white font-extrabold flex items-center gap-2">
            <i class="fa-solid fa-triangle-exclamation text-rose-200"></i>
            <span>أفضل 50 تكرارًا (Username Duplicates)</span>
          </div>
          <div class="text-white/60 text-xs">التكرار خطر لأنه يسبب لبس وتقارير غير دقيقة.</div>
        </div>
        <div class="mt-3 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
          @foreach($dupes as $d)
            <div class="rounded-2xl border border-white/10 bg-black/20 p-3 flex items-center justify-between">
              <div class="text-white/85 font-semibold">{{ $d->username ?? '—' }}</div>
              <div class="text-rose-100 font-black">{{ (int)($d->c ?? 0) }}×</div>
            </div>
          @endforeach
        </div>
      </div>
    @endif

    {{-- LIST --}}
    @if($view === 'cards')
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        @foreach($items as $u)
          @php
            $uname = trim((string)($u->username ?? ''));
            $lvl = $u->username_level ?? 'good';
            $issues = (int)($u->username_issues ?? 0);
            $badge = $lvl==='bad' ? 'border-rose-400/25 bg-rose-500/15 text-rose-100'
                  : ($lvl==='mid' ? 'border-amber-400/25 bg-amber-500/15 text-amber-100'
                  : 'border-emerald-400/25 bg-emerald-500/15 text-emerald-100');
          @endphp
          <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
            <div class="flex items-start justify-between gap-3">
              <div class="flex items-center gap-3">
                <div class="w-11 h-11 rounded-2xl bg-black/25 border border-white/10 overflow-hidden flex items-center justify-center">
                  <img
                    src="{{ $u->avatar_url }}"
                    class="w-full h-full object-cover"
                    alt=""
                    onerror="this.onerror=null;this.src='{{ $u->gender==='female' ? asset('images/default-female-avatar.png') : asset('images/default-male-avatar.png') }}';"
                  >
                </div>
                <div>
                  <div class="text-white font-extrabold leading-tight">{{ $u->name ?? '—' }}</div>
                  <div class="text-white/55 text-xs">{{ $u->membership_status ?? '—' }} • {{ $u->account_status ?? '—' }}</div>
                </div>
              </div>

              <button type="button" @click="openDrawer({{ (int)$u->id }})"
                      class="px-3 py-2 rounded-2xl bg-cyan-600/70 hover:bg-cyan-600 text-white font-bold border border-cyan-400/25">
                <i class="fa-solid fa-up-right-from-square ml-1"></i> فتح
              </button>
            </div>

            <div class="mt-4 flex items-center justify-between gap-2">
              <div class="text-white/70 text-sm">Username</div>
              <span class="px-2.5 py-1 rounded-xl border {{ $badge }} text-xs font-extrabold">
                {{ $lvl==='bad' ? 'خطر' : ($lvl==='mid' ? 'متوسط' : 'جيد') }}
              </span>
            </div>

            <div class="mt-2 rounded-2xl border border-white/10 bg-black/20 p-3">
              <div class="text-white font-black text-sm">
                {{ $uname !== '' ? '@'.$uname : '— بدون Username —' }}
              </div>
              <div class="mt-1 text-white/55 text-xs">
                مؤشرات: {{ $issues }} • ID: {{ (int)$u->id }}
              </div>
            </div>

            <div class="mt-3 flex flex-wrap gap-2 text-[11px]">
              @if(($u->username_flags['missing'] ?? false))
                <span class="px-2 py-1 rounded-xl border border-rose-400/25 bg-rose-500/10 text-rose-100">بدون يوزر</span>
              @endif
              @if(($u->username_flags['has_spaces'] ?? 0) === 1)
                <span class="px-2 py-1 rounded-xl border border-amber-400/25 bg-amber-500/10 text-amber-100">مسافات</span>
              @endif
              @if(($u->username_flags['bad_chars'] ?? 0) === 1)
                <span class="px-2 py-1 rounded-xl border border-rose-400/25 bg-rose-500/10 text-rose-100">رموز ممنوعة</span>
              @endif
              @if(($u->username_flags['upper'] ?? 0) === 1)
                <span class="px-2 py-1 rounded-xl border border-cyan-400/25 bg-cyan-500/10 text-cyan-100">حروف كبيرة</span>
              @endif
              @if(($u->username_flags['edge_dot'] ?? 0) === 1)
                <span class="px-2 py-1 rounded-xl border border-amber-400/25 bg-amber-500/10 text-amber-100">بداية/نهاية ./_</span>
              @endif
              @if(($u->username_flags['repeat_sep'] ?? 0) === 1)
                <span class="px-2 py-1 rounded-xl border border-amber-400/25 bg-amber-500/10 text-amber-100">تكرار ./_</span>
              @endif
            </div>
          </div>
        @endforeach
      </div>
    @else
      <div class="rounded-3xl border border-white/10 bg-white/5 overflow-hidden">
        <div class="px-4 py-3 border-b border-white/10 flex items-center justify-between">
          <div class="text-white font-extrabold flex items-center gap-2">
            <i class="fa-solid fa-list-check text-fuchsia-200"></i>
            <span>قائمة الأعضاء</span>
          </div>
          <div class="text-white/55 text-xs">اضغط فتح لتحليل وتعديل من Drawer.</div>
        </div>

        <div class="overflow-x-auto">
          <table class="min-w-full text-sm">
            <thead class="bg-black/25 text-white/70">
              <tr>
                <th class="px-4 py-3 text-right font-bold">العضو</th>
                <th class="px-4 py-3 text-right font-bold">Username</th>
                <th class="px-4 py-3 text-right font-bold">مؤشرات</th>
                <th class="px-4 py-3 text-right font-bold">الحالة</th>
                <th class="px-4 py-3 text-right font-bold">إجراء</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
              @foreach($items as $u)
                @php
                  $uname = trim((string)($u->username ?? ''));
                  $lvl = $u->username_level ?? 'good';
                  $issues = (int)($u->username_issues ?? 0);
                  $badge = $lvl==='bad' ? 'border-rose-400/25 bg-rose-500/15 text-rose-100'
                        : ($lvl==='mid' ? 'border-amber-400/25 bg-amber-500/15 text-amber-100'
                        : 'border-emerald-400/25 bg-emerald-500/15 text-emerald-100');
                @endphp
                <tr class="text-white/85 hover:bg-white/5">
                  <td class="px-4 py-3">
                    <div class="flex items-center gap-3">
                      <div class="w-10 h-10 rounded-2xl bg-black/25 border border-white/10 overflow-hidden flex items-center justify-center">
                        <img
                          src="{{ $u->avatar_url }}"
                          class="w-full h-full object-cover"
                          alt=""
                          onerror="this.onerror=null;this.src='{{ $u->gender==='female' ? asset('images/default-female-avatar.png') : asset('images/default-male-avatar.png') }}';"
                        >
                      </div>
                      <div>
                        <div class="font-extrabold">{{ $u->name ?? '—' }}</div>
                        <div class="text-xs text-white/55">{{ $u->membership_status ?? '—' }} • ID: {{ (int)$u->id }}</div>
                      </div>
                    </div>
                  </td>

                  <td class="px-4 py-3">
                    <div class="font-black">{{ $uname !== '' ? '@'.$uname : '— بدون Username —' }}</div>
                    <div class="text-xs text-white/50">{{ $u->email ?? '' }}</div>
                  </td>

                  <td class="px-4 py-3">
                    <div class="text-xs text-white/65">عدد المؤشرات: <span class="font-black text-white">{{ $issues }}</span></div>
                    <div class="mt-1 flex flex-wrap gap-1.5 text-[11px]">
                      @if(($u->username_flags['missing'] ?? false))
                        <span class="px-2 py-0.5 rounded-xl border border-rose-400/25 bg-rose-500/10 text-rose-100">بدون</span>
                      @endif
                      @if(($u->username_flags['has_spaces'] ?? 0) === 1)
                        <span class="px-2 py-0.5 rounded-xl border border-amber-400/25 bg-amber-500/10 text-amber-100">مسافات</span>
                      @endif
                      @if(($u->username_flags['bad_chars'] ?? 0) === 1)
                        <span class="px-2 py-0.5 rounded-xl border border-rose-400/25 bg-rose-500/10 text-rose-100">رموز</span>
                      @endif
                      @if(($u->username_flags['upper'] ?? 0) === 1)
                        <span class="px-2 py-0.5 rounded-xl border border-cyan-400/25 bg-cyan-500/10 text-cyan-100">Upper</span>
                      @endif
                      @if(($u->username_flags['edge_dot'] ?? 0) === 1)
                        <span class="px-2 py-0.5 rounded-xl border border-amber-400/25 bg-amber-500/10 text-amber-100">Edge</span>
                      @endif
                      @if(($u->username_flags['repeat_sep'] ?? 0) === 1)
                        <span class="px-2 py-0.5 rounded-xl border border-amber-400/25 bg-amber-500/10 text-amber-100">Repeat</span>
                      @endif
                    </div>
                  </td>

                  <td class="px-4 py-3">
                    <span class="px-3 py-1 rounded-xl border {{ $badge }} text-xs font-extrabold">
                      {{ $lvl==='bad' ? 'خطر' : ($lvl==='mid' ? 'متوسط' : 'جيد') }}
                    </span>
                  </td>

                  <td class="px-4 py-3">
                    <button type="button" @click="openDrawer({{ (int)$u->id }})"
                            class="px-3 py-2 rounded-2xl bg-cyan-600/70 hover:bg-cyan-600 text-white font-bold border border-cyan-400/25">
                      <i class="fa-solid fa-up-right-from-square ml-1"></i> فتح
                    </button>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>

        <div class="px-4 py-4 border-t border-white/10">
          {{ $users->links() }}
        </div>
      </div>
    @endif

  </div>

  {{-- DRAWER --}}
  <div x-show="drawerOpen" x-cloak class="fixed inset-0 z-50" @keydown.escape.window="closeDrawer()">
    <div class="absolute inset-0 bg-black/70" @click="closeDrawer()"></div>

    <div class="absolute inset-y-0 left-0 w-full sm:w-[520px] bg-gradient-to-b from-slate-950 via-slate-900 to-black border-r border-white/10 shadow-2xl"
         @click.stop
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="-translate-x-full opacity-0"
         x-transition:enter-end="translate-x-0 opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="translate-x-0 opacity-100"
         x-transition:leave-end="-translate-x-full opacity-0">

      <div class="h-full flex flex-col">

        <div class="px-5 py-4 border-b border-white/10 flex items-center justify-between">
          <div class="text-white font-black flex items-center gap-2">
            <i class="fa-solid fa-pen-to-square text-fuchsia-200"></i>
            <span>لوحة تعديل Username</span>
          </div>
          <button type="button" @click="closeDrawer()"
                  class="w-10 h-10 rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10 text-white/80">
            <i class="fa-solid fa-xmark"></i>
          </button>
        </div>

        <div class="flex-1 overflow-y-auto p-5 space-y-4">
          @if(!empty($drawer['user']))
            @php
              $u = $drawer['user'];
              $score = (int)($drawer['score'] ?? 0);
              $level = (string)($drawer['level'] ?? 'mid');

              $lvlBadge = $level==='excellent' ? 'border-emerald-400/25 bg-emerald-500/15 text-emerald-100'
                        : ($level==='good' ? 'border-cyan-400/25 bg-cyan-500/15 text-cyan-100'
                        : ($level==='mid' ? 'border-amber-400/25 bg-amber-500/15 text-amber-100'
                        : 'border-rose-400/25 bg-rose-500/15 text-rose-100'));
            @endphp

            <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
              <div class="flex items-start gap-3">
                <div class="w-14 h-14 rounded-3xl bg-black/25 border border-white/10 overflow-hidden flex items-center justify-center">
                  <img
                    src="{{ $u->avatar_url }}"
                    class="w-full h-full object-cover"
                    alt=""
                    onerror="this.onerror=null;this.src='{{ $u->gender==='female' ? asset('images/default-female-avatar.png') : asset('images/default-male-avatar.png') }}';"
                  >
                </div>

                <div class="flex-1">
                  <div class="flex items-center justify-between gap-2">
                    <div>
                      <div class="text-white font-black text-lg leading-tight">{{ $u->name ?? '—' }}</div>
                      <div class="text-white/55 text-xs">
                        {{ $u->membership_status ?? '—' }} • {{ $u->account_status ?? '—' }} • ID: {{ (int)$u->id }}
                      </div>
                    </div>
                    <span class="px-3 py-1 rounded-xl border {{ $lvlBadge }} text-xs font-extrabold">
                      {{ $score }}/100
                    </span>
                  </div>

                  <div class="mt-3">
                    <div class="flex items-center justify-between text-xs text-white/60 mb-1">
                      <span>جودة اليوزر</span>
                      <span class="font-black">{{ $level }}</span>
                    </div>
                    <div class="h-3 rounded-full bg-black/30 border border-white/10 overflow-hidden">
                      <div class="h-full bg-white/70" style="width: {{ $score }}%"></div>
                    </div>
                  </div>

                  <div class="mt-3 rounded-2xl border border-white/10 bg-black/20 p-3">
                    <div class="text-white/70 text-xs">Username الحالي</div>
                    <div class="text-white font-black mt-1">
                      {{ trim((string)($u->username ?? '')) !== '' ? '@'.trim((string)$u->username) : '— بدون Username —' }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {{-- REASONS --}}
            <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
              <div class="text-white font-extrabold flex items-center gap-2">
                <i class="fa-solid fa-list-ul text-amber-200"></i>
                <span>أسباب/ملاحظات التحليل</span>
              </div>
              <div class="mt-3 space-y-2 text-sm">
                @forelse(($drawer['reasons'] ?? []) as $r)
                  <div class="rounded-2xl border border-white/10 bg-black/20 p-3 text-white/80">{{ $r }}</div>
                @empty
                  <div class="rounded-2xl border border-white/10 bg-black/20 p-3 text-white/60">لا توجد ملاحظات.</div>
                @endforelse
              </div>
            </div>

            {{-- SUGGESTIONS --}}
            <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
              <div class="text-white font-extrabold flex items-center gap-2">
                <i class="fa-solid fa-wand-magic-sparkles text-emerald-200"></i>
                <span>اقتراحات جاهزة</span>
              </div>
              <div class="mt-3 space-y-2 text-sm">
                @foreach(($drawer['suggestions'] ?? []) as $s)
                  <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 p-3 text-emerald-50">{{ $s }}</div>
                @endforeach
              </div>
            </div>

            {{-- DUP USERS --}}
            @if(!empty($drawer['dup_count']) && (int)$drawer['dup_count'] > 0)
              <div class="rounded-3xl border border-rose-400/20 bg-rose-500/10 p-4">
                <div class="text-white font-extrabold flex items-center gap-2">
                  <i class="fa-solid fa-triangle-exclamation text-rose-200"></i>
                  <span>تكرار Username</span>
                  <span class="text-[11px] px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/70">
                    {{ (int)$drawer['dup_count'] }} عضو/أعضاء
                  </span>
                </div>
                <div class="mt-3 space-y-2">
                  @foreach(($drawer['same_username_users'] ?? []) as $x)
                    <div class="rounded-2xl border border-white/10 bg-black/20 p-3 flex items-center justify-between">
                      <div class="text-white/85 font-semibold">{{ $x->name ?? '—' }}</div>
                      <div class="text-white/60 text-xs">ID: {{ (int)$x->id }} • {{ $x->membership_status ?? '—' }}</div>
                    </div>
                  @endforeach
                </div>
              </div>
            @endif

            {{-- UPDATE FORM --}}
            <div class="rounded-3xl border border-fuchsia-400/20 bg-fuchsia-500/10 p-4">
              <div class="text-white font-extrabold flex items-center gap-2">
                <i class="fa-solid fa-pen text-fuchsia-200"></i>
                <span>تحديث Username</span>
              </div>

              <form method="POST" action="{{ $updateBase }}/{{ (int)$u->id }}" id="usernameUpdateForm">
                @csrf
                @method('PUT')

                <div class="mt-3 space-y-3">
                  <div>
                    <label class="text-white/70 text-xs">Username الجديد</label>
                    <input name="username"
                           value="{{ old('username', (string)($u->username ?? '')) }}"
                           autocomplete="off"
                           inputmode="latin"
                           dir="ltr"
                           data-username-input
                           class="mt-1 w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40"
                           placeholder="مثال: amir_2026">
                    <div class="mt-1 flex items-center justify-between gap-2">
                      <div class="text-white/50 text-[11px]">
                        مسموح: A-Z a-z 0-9 . _ — بدون مسافات.
                      </div>
                      <div class="text-[11px] font-bold" data-username-hint></div>
                    </div>
                  </div>

                  <div>
                    <label class="text-white/70 text-xs">ملاحظة إدارية (اختياري)</label>
                    <textarea name="note" rows="2"
                              class="mt-1 w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/40"
                              placeholder="سبب التعديل / توضيح مختصر...">{{ old('note') }}</textarea>
                  </div>

                  <div class="flex items-center gap-2">
                    <button type="submit"
                            data-save-btn
                            class="px-4 py-2.5 rounded-2xl bg-fuchsia-600/80 hover:bg-fuchsia-600 text-white font-extrabold border border-fuchsia-400/30 shadow-lg shadow-fuchsia-500/15">
                      <i class="fa-solid fa-floppy-disk ml-1"></i> حفظ التعديل
                    </button>

                    <button type="button" @click="closeDrawer()"
                            class="px-4 py-2.5 rounded-2xl bg-white/5 hover:bg-white/10 text-white/85 font-semibold border border-white/10">
                      إغلاق
                    </button>
                  </div>

                  <div class="hidden" data-saving>
                    <div class="mt-2 rounded-2xl border border-white/10 bg-black/20 p-3 text-white/70 text-sm">
                      <i class="fa-solid fa-circle-notch fa-spin ml-1"></i>
                      جارِ حفظ التعديل...
                    </div>
                  </div>
                </div>
              </form>
            </div>

          @else
            <div class="rounded-3xl border border-white/10 bg-white/5 p-5 text-white/70">
              لا يوجد عضو محدد. اضغط “فتح” من القائمة.
            </div>
          @endif
        </div>

        <div class="px-5 py-4 border-t border-white/10 text-white/55 text-xs">
          * هذه اللوحة جزء من <span class="text-white/80 font-bold">غرفة إيمان</span> — تعديل Username ينعكس على البحث والتقارير فورًا.
        </div>
      </div>
    </div>
  </div>

</div>

{{-- ✅ JavaScript مناسب (بدون تغيير خوارزميات) --}}
<script>
  function usernameCenter(){
    return {
      drawerOpen: false,
      init(open){
        this.drawerOpen = !!open;
        // منع سكرول الخلفية عند فتح الدروَر (موبايل)
        if(this.drawerOpen) document.documentElement.classList.add('overflow-hidden');
      },
      openDrawer(id){
        const url = new URL(window.location.href);
        url.searchParams.set('focus', id);
        url.searchParams.set('drawer', 'auto');
        window.location.href = url.toString();
      },
      closeDrawer(){
        const url = new URL(window.location.href);
        url.searchParams.delete('focus');
        url.searchParams.set('drawer','off');
        window.location.href = url.toString();
      }
    }
  }

  // تحسين تجربة الإدخال بدون كسر أي شيء:
  // - تنظيف whitespace فقط أثناء الكتابة (لا يمنع إرسال الفورم)
  // - إظهار تلميح رسمي عن الصحة
  document.addEventListener('DOMContentLoaded', () => {
    const input = document.querySelector('[data-username-input]');
    const hint  = document.querySelector('[data-username-hint]');
    const form  = document.getElementById('usernameUpdateForm');
    const savingBox = document.querySelector('[data-saving]');
    const saveBtn = document.querySelector('[data-save-btn]');

    if(input){
      const normalize = (v) => {
        v = (v ?? '').toString();
        v = v.replace(/\s+/g,''); // فقط شيل مسافات
        return v;
      };

      const isValid = (v) => /^[a-zA-Z0-9._-]+$/.test(v) && v.length > 0;

      const renderHint = () => {
        if(!hint) return;
        const v = input.value.trim();
        if(v === ''){
          hint.textContent = 'مطلوب';
          hint.className = 'text-[11px] font-black text-rose-200';
          return;
        }
        if(isValid(v)){
          hint.textContent = 'صحيح';
          hint.className = 'text-[11px] font-black text-emerald-200';
        } else {
          hint.textContent = 'غير صالح';
          hint.className = 'text-[11px] font-black text-amber-200';
        }
      };

      input.addEventListener('input', () => {
        const v = normalize(input.value);
        if(v !== input.value) input.value = v;
        renderHint();
      });

      renderHint();
    }

    if(form){
      form.addEventListener('submit', () => {
        if(savingBox) savingBox.classList.remove('hidden');
        if(saveBtn){
          saveBtn.disabled = true;
          saveBtn.classList.add('opacity-60','cursor-not-allowed');
        }
      });
    }
  });
</script>
@endsection