@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);

  $labels = [
    'moderator'    => ['اللون'=>'from-blue-50 to-blue-100 dark:from-blue-900 dark:to-blue-800','حد'=>'border-blue-500','عنوان'=>'المشرفون'],
    'official'     => ['اللون'=>'from-green-50 to-green-100 dark:from-green-900 dark:to-green-800','حد'=>'border-green-500','عنوان'=>'الأعضاء الرسميون'],
    'beta'         => ['اللون'=>'from-yellow-50 to-yellow-100 dark:from-yellow-900 dark:to-yellow-800','حد'=>'border-yellow-500','عنوان'=>'أعضاء بيتا'],
    'advisor'      => ['اللون'=>'from-purple-50 to-purple-100 dark:from-purple-900 dark:to-purple-800','حد'=>'border-purple-500','عنوان'=>'المستشارون'],
    'super-admin'  => ['اللون'=>'from-rose-50 to-rose-100 dark:from-rose-900 dark:to-rose-800','حد'=>'border-rose-500','عنوان'=>'الإدارة العليا'],
    ''             => ['اللون'=>'from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800','حد'=>'border-gray-500','عنوان'=>'غير مصنّف'],
  ];
  $groups = $collection->groupBy(fn($u)=>$u->membership_status ?? '');
@endphp

{{-- تنبيهات --}}
@if(session('success') || session('error') || !empty($tempPasswordJustSet ?? null))
  <div class="space-y-3 mb-4">
    @if(session('success'))
      <div class="rounded-xl border border-emerald-200 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-900/20 px-4 py-3 text-emerald-800 dark:text-emerald-200">
        <div class="font-semibold">{{ session('success') }}</div>
        @if(!empty($tempPasswordJustSet ?? null))
          <div class="mt-1 text-xs">
            <span class="font-semibold">الكلمة المؤقتة:</span>
            <code class="px-2 py-1 rounded bg-emerald-800/10 dark:bg-emerald-200/10 select-all">{{ $tempPasswordJustSet }}</code>
            <span class="opacity-70">— انسخها الآن، لن تظهر مرة أخرى.</span>
          </div>
        @endif
      </div>
    @endif
    @if(session('error'))
      <div class="rounded-xl border border-rose-200 dark:border-rose-800 bg-rose-50 dark:bg-rose-900/20 px-4 py-3 text-rose-800 dark:text-rose-200">
        {{ session('error') }}
      </div>
    @endif
  </div>
@endif

{{-- شريط البحث والفلاتر — نفس روح صفحاتك --}}

{{-- HERO (أعلى الصفحة) --}}
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-6 md:p-7 border border-gray-100 dark:border-gray-700">
  <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
    <div class="min-w-0">
      <div class="flex items-center gap-3">
        <div class="grid h-12 w-12 place-items-center rounded-xl bg-gradient-to-br from-cyan-100 to-emerald-100
                    dark:from-cyan-900/30 dark:to-emerald-900/30 border border-cyan-200/50 dark:border-cyan-800/40">
          <svg class="w-6 h-6 text-cyan-700 dark:text-cyan-200" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2l3 4h4l-3 4 3 4h-4l-3 4-3-4H5l3-4-3-4h4l3-4z"/>
          </svg>
        </div>
        <div class="min-w-0">
          <h1 class="text-2xl md:text-3xl font-black tracking-tight text-gray-900 dark:text-white">
            غرفة الصقر — إدارة كلمات مرور الأعضاء
          </h1>
          <p class="mt-1 text-sm md:text-[15px] leading-6 text-gray-600 dark:text-gray-300">
            لوحة رسمية لتبديل كلمات المرور بأمان: <span class="font-semibold">تعيين يدوي</span> أو
            <span class="font-semibold">كلمة مؤقتة</span> تُعرض مرة واحدة فقط بعد التوليد. لا يتم عرض أي كلمة مرور محفوظة نصًا.
          </p>
        </div>
      </div>

      {{-- نقاط سريعة تحت العنوان (اختياري) --}}
      <div class="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-3">
        <div class="stats-card bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900 dark:to-blue-800 rounded-xl p-4 border-r-4 border-blue-500">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-blue-700 dark:text-blue-200 text-xs font-medium">عناصر معروضة الآن</p>
              <p class="text-xl font-bold text-blue-900 dark:text-white mt-1">{{ ($collection ?? collect())->count() }}</p>
            </div>
            <div class="p-2.5 bg-blue-200 dark:bg-blue-700 rounded-xl">
              <svg class="w-5 h-5 text-blue-700 dark:text-blue-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            </div>
          </div>
        </div>
        <div class="stats-card bg-gradient-to-br from-emerald-50 to-emerald-100 dark:from-emerald-900 dark:to-emerald-800 rounded-xl p-4 border-r-4 border-emerald-500">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-emerald-700 dark:text-emerald-200 text-xs font-medium">فلتر العضوية</p>
              <p class="text-xl font-bold text-emerald-900 dark:text-white mt-1">
                {{ request('membership_status') ?: 'الكل' }}
              </p>
            </div>
            <div class="p-2.5 bg-emerald-200 dark:bg-emerald-700 rounded-xl">
              <svg class="w-5 h-5 text-emerald-700 dark:text-emerald-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
            </div>
          </div>
        </div>
        <div class="stats-card bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-900 dark:to-amber-800 rounded-xl p-4 border-r-4 border-amber-500">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-amber-700 dark:text-amber-200 text-xs font-medium">فلتر الحالة</p>
              <p class="text-xl font-bold text-amber-900 dark:text-white mt-1">
                {{ request('account_status') ?: 'الكل' }}
              </p>
            </div>
            <div class="p-2.5 bg-amber-200 dark:bg-amber-700 rounded-xl">
              <svg class="w-5 h-5 text-amber-700 dark:text-amber-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1z"/>
              </svg>
            </div>
          </div>
        </div>
      </div>

      {{-- سطر إرشادي بسيط --}}
      <div class="mt-4 text-xs text-gray-500 dark:text-gray-400">
        • استخدم “حفظ” لتعيين كلمة جديدة (مع تأكيد) — أو “كلمة مؤقتة” لتوليد كلمة قوية تظهر مرة واحدة فقط.
      </div>
    </div>
  </div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-100 dark:border-gray-700">
  <form method="GET" action="{{ route('superadmin.falcon.passwords.index') }}" class="space-y-4">
    <div class="grid grid-cols-1 md:grid-cols-6 gap-4">
      <div class="md:col-span-2">
        <div class="relative">
          <input type="text" name="search" value="{{ request('search') }}" placeholder="البحث عن عضو (اسم/إيميل/يوزر)"
                 class="w-full pr-10 pl-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition-all">
          <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
          </div>
        </div>
      </div>

      <div>
        <select name="membership_status" class="w-full py-2.5 px-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:text-white">
          <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 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:text-white">
          <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 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:text-white">
          <option value="">التواجد</option>
          <option value="present" @selected(request('team_status')=='present')>داخل الفريق</option>
          <option value="left"    @selected(request('team_status')=='left')>مغادر</option>
        </select>
      </div>

      <button class="bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white px-6 py-2.5 rounded-lg transition-all duration-200 shadow-sm hover:shadow-md">
        تصفية
      </button>
    </div>
  </form>
</div>

{{-- أقسام حسب العضوية + بطاقات أعضاء بنفس منظومة ألوانك --}}
@forelse($groups as $key => $members)
  @php $sty = $labels[$key] ?? $labels['']; @endphp

  <div class="stats-card bg-gradient-to-br {{ $sty['اللون'] }} rounded-xl shadow-sm p-4 border-r-4 {{ $sty['حد'] }} transition-all duration-300">
    <div class="flex items-center justify-between">
      <div>
        <p class="text-sm font-medium text-gray-700 dark:text-gray-200">{{ $sty['عنوان'] }}</p>
        <p class="text-lg font-bold text-gray-900 dark:text-white mt-1">{{ $members->count() }}</p>
      </div>
      <div class="p-3 rounded-xl bg-white/60 dark:bg-white/10">
        <svg class="w-6 h-6 text-gray-700 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m7-3a10 10 0 11-20 0 10 10 0 0120 0z"/>
        </svg>
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    @foreach($members as $u)
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden border border-gray-100 dark:border-gray-700">
        <div class="flex items-center gap-3 p-4 border-b border-gray-100 dark:border-gray-700">
          <img src="{{ $u->avatar_url }}" class="w-12 h-12 rounded-xl object-cover border-2 border-white dark:border-gray-700 shadow" alt="">
          <div class="min-w-0">
            <div class="font-bold text-gray-900 dark:text-white truncate">{{ $u->name }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ $u->username }} • {{ $u->email }}</div>
          </div>
          @if(($u->account_status ?? 'active') !== 'active')
            <span class="ml-auto px-2 py-0.5 text-xs rounded-full {{ $u->account_status === 'suspended' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-200' : 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-200' }}">
              {{ $u->account_status === 'suspended' ? 'معلّق' : 'محظور' }}
            </span>
          @endif
        </div>

        {{-- إجراءات كلمة المرور --}}
        <div class="p-4 space-y-3">
          <form method="POST" action="{{ route('superadmin.falcon.passwords.update', $u) }}" class="grid grid-cols-1 sm:grid-cols-5 gap-2" onsubmit="this.querySelector('button[type=submit]').disabled=true;">
            @csrf
            <input type="hidden" name="mode" value="manual">
            <input type="password" name="new_password" placeholder="كلمة جديدة" autocomplete="new-password"
                   class="sm:col-span-2 w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:text-white" required>
            <input type="password" name="new_password_confirmation" placeholder="تأكيد" autocomplete="new-password"
                   class="sm:col-span-2 w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:text-white" required>
            <button type="submit" class="sm:col-span-1 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg px-4 py-2 font-semibold flex items-center justify-center">
              حفظ
            </button>
          </form>

          <form method="POST" action="{{ route('superadmin.falcon.passwords.update', $u) }}" onsubmit="this.querySelector('button[type=submit]').disabled=true;">
            @csrf
            <input type="hidden" name="mode" value="temp">
            <button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-white rounded-lg px-4 py-2 font-semibold flex items-center justify-center">
              كلمة مؤقتة
            </button>
          </form>
        </div>
      </div>
    @endforeach
  </div>
@endforeach

{{-- Pagination --}}
@if($paginator && $paginator->hasPages())
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4 border border-gray-100 dark:border-gray-700 mt-6">
    {{ $paginator->withQueryString()->links('pagination::tailwind') }}
  </div>
@endif
@endsection