@extends('admin.layouts.app')
@section('title','تفاصيل المستخدم')
@section('content')
<div class="max-w-7xl mx-auto px-6 py-10" dir="rtl">
  <!-- Header -->
  <div class="flex justify-between items-center mb-8">
    <div>
      <h1 class="text-3xl font-extrabold text-gradient">تفاصيل المستخدم</h1>
      <p class="text-gray-600 dark:text-gray-400 mt-2">عرض معلومات المستخدم وسجل العمليات</p>
    </div>
    <div class="flex gap-4">
      <a href="{{ route('admin.users.index') }}" class="btn-secondary">
        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
        </svg>
        العودة
      </a>
      <a href="{{ route('admin.users.edit', $user) }}" class="btn-primary">
        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
        </svg>
        تعديل
      </a>
    </div>
  </div>

  <!-- User Info Cards -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <!-- Basic Info -->
    <div class="card-hover bg-white dark:bg-gray-800 rounded-2xl p-6 border border-gray-200 dark:border-gray-700 shadow-lg">
      <div class="flex items-center mb-4">
        <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
          <span class="text-2xl font-bold text-white">{{ substr($user->name, 0, 1) }}</span>
        </div>
        <div class="mr-4">
          <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">{{ $user->name }}</h2>
          <p class="text-gray-600 dark:text-gray-400">{{ $user->email }}</p>
        </div>
      </div>

      <div class="space-y-3">
        <div class="flex justify-between">
          <span class="text-gray-600 dark:text-gray-400">معرف المستخدم:</span>
          <span class="font-semibold">#{{ $user->id }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-600 dark:text-gray-400">تاريخ التسجيل:</span>
          <span class="font-semibold">{{ $user->created_at->format('Y-m-d') }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-600 dark:text-gray-400">آخر تحديث:</span>
          <span class="font-semibold">{{ $user->updated_at->format('Y-m-d H:i') }}</span>
        </div>
      </div>
    </div>

    <!-- Membership Info -->
    <div class="card-hover bg-white dark:bg-gray-800 rounded-2xl p-6 border border-gray-200 dark:border-gray-700 shadow-lg">
      <div class="flex items-center mb-4">
        <div class="w-12 h-12 bg-gradient-to-r from-green-500 to-blue-600 rounded-xl flex items-center justify-center">
          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
          </svg>
        </div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mr-3">معلومات العضوية</h3>
      </div>

      <div class="space-y-3">
        <div class="flex justify-between">
          <span class="text-gray-600 dark:text-gray-400">نوع العضوية:</span>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
            {{ $user->membership_level === 'free' ? 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300' : 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300' }}">
            {{ $user->membership_level === 'free' ? 'مجاني' : ucfirst($user->membership_level) }}
          </span>
        </div>

        @if($user->membership_expires_at)
        <div class="flex justify-between">
          <span class="text-gray-600 dark:text-gray-400">ينتهي في:</span>
          <span class="font-semibold">{{ $user->membership_expires_at->format('Y-m-d') }}</span>
        </div>
        @endif

        <div class="flex justify-between">
          <span class="text-gray-600 dark:text-gray-400">النقاط:</span>
          <span class="font-semibold">{{ $user->coins ?? 0 }}</span>
        </div>
      </div>
    </div>

    <!-- Status Info -->
    <div class="card-hover bg-white dark:bg-gray-800 rounded-2xl p-6 border border-gray-200 dark:border-gray-700 shadow-lg">
      <div class="flex items-center mb-4">
        <div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-600 rounded-xl flex items-center justify-center">
          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mr-3">حالة الحساب</h3>
      </div>

      <div class="space-y-3">
        <div class="flex justify-between">
          <span class="text-gray-600 dark:text-gray-400">صلاحيات المشرف:</span>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
            {{ $user->is_admin ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300' }}">
            {{ $user->is_admin ? 'مشرف' : 'مستخدم عادي' }}
          </span>
        </div>

        <div class="flex justify-between">
          <span class="text-gray-600 dark:text-gray-400">البريد مؤكد:</span>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
            {{ $user->email_verified_at ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300' : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300' }}">
            {{ $user->email_verified_at ? 'مؤكد' : 'غير مؤكد' }}
          </span>
        </div>

        @if($user->last_login_at)
        <div class="flex justify-between">
          <span class="text-gray-600 dark:text-gray-400">آخر دخول:</span>
          <span class="font-semibold">{{ $user->last_login_at->format('Y-m-d H:i') }}</span>
        </div>
        @endif
      </div>
    </div>
  </div>

  <!-- Location Info -->
  @if($user->country || $user->state || $user->city)
  <div class="card-hover bg-white dark:bg-gray-800 rounded-2xl p-6 border border-gray-200 dark:border-gray-700 shadow-lg mb-8">
    <div class="flex items-center mb-4">
      <div class="w-12 h-12 bg-gradient-to-r from-indigo-500 to-cyan-600 rounded-xl flex items-center justify-center">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
      </div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mr-3">معلومات الموقع</h3>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      @if($user->country)
      <div class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
        <div class="text-sm text-gray-600 dark:text-gray-400">البلد</div>
        <div class="font-semibold">{{ $user->country->name }}</div>
      </div>
      @endif

      @if($user->state)
      <div class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
        <div class="text-sm text-gray-600 dark:text-gray-400">المحافظة</div>
        <div class="font-semibold">{{ $user->state->name }}</div>
      </div>
      @endif

      @if($user->city)
      <div class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
        <div class="text-sm text-gray-600 dark:text-gray-400">المدينة</div>
        <div class="font-semibold">{{ $user->city->name }}</div>
      </div>
      @endif
    </div>
  </div>
  @endif

  <!-- Profile Info -->
  @if($user->about_me || $user->birth_date || $user->gender)
  <div class="card-hover bg-white dark:bg-gray-800 rounded-2xl p-6 border border-gray-200 dark:border-gray-700 shadow-lg mb-8">
    <div class="flex items-center mb-4">
      <div class="w-12 h-12 bg-gradient-to-r from-orange-500 to-red-600 rounded-xl flex items-center justify-center">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
        </svg>
      </div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mr-3">معلومات الملف الشخصي</h3>
    </div>

    <div class="space-y-4">
      @if($user->about_me)
      <div>
        <div class="text-sm text-gray-600 dark:text-gray-400 mb-2">نبذة شخصية:</div>
        <div class="text-gray-800 dark:text-gray-200">{{ $user->about_me }}</div>
      </div>
      @endif

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        @if($user->birth_date)
        <div>
          <div class="text-sm text-gray-600 dark:text-gray-400">تاريخ الميلاد:</div>
          <div class="font-semibold">{{ $user->birth_date->format('Y-m-d') }}</div>
        </div>
        @endif

        @if($user->gender)
        <div>
          <div class="text-sm text-gray-600 dark:text-gray-400">الجنس:</div>
          <div class="font-semibold">{{ $user->gender === 'male' ? 'ذكر' : 'أنثى' }}</div>
        </div>
        @endif
      </div>
    </div>
  </div>
  @endif

  <!-- Activity Log -->
  <div class="card-hover bg-white dark:bg-gray-800 rounded-2xl p-6 border border-gray-200 dark:border-gray-700 shadow-lg">
    <div class="flex items-center justify-between mb-6">
      <div class="flex items-center">
        <div class="w-12 h-12 bg-gradient-to-r from-teal-500 to-green-600 rounded-xl flex items-center justify-center">
          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
          </svg>
        </div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mr-3">سجل العمليات</h3>
      </div>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full">
        <thead>
          <tr class="text-right text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
            <th class="py-4 px-4 font-semibold">التاريخ</th>
            <th class="py-4 px-4 font-semibold">الإجراء</th>
            <th class="py-4 px-4 font-semibold">التفاصيل</th>
            <th class="py-4 px-4 font-semibold">عنوان IP</th>
          </tr>
        </thead>
        <tbody>
          @forelse($auditLogs ?? collect() as $log)
            <tr class="border-t border-gray-100 dark:border-gray-700/50 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
              <td class="py-4 px-4">
                <div class="text-sm font-medium text-gray-800 dark:text-gray-200">
                  {{ \Carbon\Carbon::parse($log->created_at)->format('Y-m-d H:i') }}
                </div>
              </td>
              <td class="py-4 px-4">
                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                  {{ $log->action }}
                </span>
              </td>
              <td class="py-4 px-4">
                @if(!empty($log->details))
                  <div class="text-sm text-gray-600 dark:text-gray-400 max-w-xs">
                    {{ is_array($log->details) ? json_encode($log->details, JSON_UNESCAPED_UNICODE) : $log->details }}
                  </div>
                @else
                  <span class="text-gray-400 text-sm">-</span>
                @endif
              </td>
              <td class="py-4 px-4">
                <span class="text-sm text-gray-500">{{ $log->ip_address ?? '-' }}</span>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="4" class="py-12 text-center">
                <div class="flex flex-col items-center">
                  <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                  </div>
                  <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-2">لا يوجد سجلات</h3>
                  <p class="text-sm text-gray-500 dark:text-gray-400">لم يتم تسجيل أي عمليات لهذا المستخدم بعد</p>
                </div>
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
</div>
@endsection