@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto space-y-8">
    <!-- Header -->
    <div class="text-center">
        <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
            💰 المحفظة والنقاط
        </h1>
        <p class="text-xl text-gray-600 dark:text-gray-400">
            احصل على نقاط واستخدمها للحصول على ميزات حصرية
        </p>
    </div>

    <!-- Current Balance -->
    <div class="card-hover p-8 bg-gradient-to-r from-yellow-50 to-amber-50 dark:from-yellow-900/20 dark:to-amber-900/20 border-l-4 border-yellow-400">
        <div class="text-center">
            <div class="w-24 h-24 mx-auto mb-6 bg-yellow-100 dark:bg-yellow-900/30 rounded-full flex items-center justify-center">
                <svg class="w-12 h-12 text-yellow-600" 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>
            
            <h2 class="text-3xl font-bold text-yellow-800 dark:text-yellow-200 mb-2">
                رصيدك الحالي
            </h2>
            
            <div class="text-6xl font-black text-yellow-600 mb-4">
                {{ $user->coins ?? 0 }}
            </div>
            
            <p class="text-yellow-700 dark:text-yellow-300 text-lg">
                نقطة
            </p>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <a href="{{ route('wallet.buy') }}" class="card-hover p-6 text-center group">
            <div class="w-16 h-16 mx-auto mb-4 bg-green-100 dark:bg-green-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
            </div>
            <h3 class="font-semibold text-gray-900 dark:text-white mb-2">شراء نقاط</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">اشتر نقاط جديدة</p>
        </a>

        <a href="{{ route('wallet.history') }}" class="card-hover p-6 text-center group">
            <div class="w-16 h-16 mx-auto mb-4 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <svg class="w-8 h-8 text-blue-600" 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="font-semibold text-gray-900 dark:text-white mb-2">سجل المعاملات</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">شاهد معاملاتك</p>
        </a>

        <a href="{{ route('wallet.rewards') }}" class="card-hover p-6 text-center group">
            <div class="w-16 h-16 mx-auto mb-4 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
                </svg>
            </div>
            <h3 class="font-semibold text-gray-900 dark:text-white mb-2">المكافآت</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">احصل على مكافآت</p>
        </a>
    </div>

    <!-- How to Earn Points -->
    <div class="card-hover p-6">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center">
            🎯 كيف تحصل على النقاط
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="text-center p-4">
                <div class="w-16 h-16 mx-auto mb-4 bg-green-100 dark:bg-green-900/30 rounded-2xl flex items-center justify-center">
                    <svg class="w-8 h-8 text-green-600" 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="font-semibold text-gray-900 dark:text-white mb-2">اكتمال الملف الشخصي</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">+50 نقطة</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">عند إكمال جميع المعلومات</p>
            </div>
            
            <div class="text-center p-4">
                <div class="w-16 h-16 mx-auto mb-4 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center">
                    <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">رسائل يومية</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">+5 نقاط</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">لكل رسالة يومياً</p>
            </div>
            
            <div class="text-center p-4">
                <div class="w-16 h-16 mx-auto mb-4 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center">
                    <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">إضافة اهتمامات</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">+10 نقاط</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">لكل اهتمام جديد</p>
            </div>
            
            <div class="text-center p-4">
                <div class="w-16 h-16 mx-auto mb-4 bg-yellow-100 dark:bg-yellow-900/30 rounded-2xl flex items-center justify-center">
                    <svg class="w-8 h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">تقييم المستخدمين</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">+15 نقطة</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">لكل تقييم صادق</p>
            </div>
            
            <div class="text-center p-4">
                <div class="w-16 h-16 mx-auto mb-4 bg-pink-100 dark:bg-pink-900/30 rounded-2xl flex items-center justify-center">
                    <svg class="w-8 h-8 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">مشاركة الموقع</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">+25 نقطة</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">عند مشاركة الموقع</p>
            </div>
            
            <div class="text-center p-4">
                <div class="w-16 h-16 mx-auto mb-4 bg-indigo-100 dark:bg-indigo-900/30 rounded-2xl flex items-center justify-center">
                    <svg class="w-8 h-8 text-indigo-600" 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"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">تسجيل يومي</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">+5 نقاط</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">لكل تسجيل يومي</p>
            </div>
        </div>
    </div>

    <!-- What You Can Buy -->
    <div class="card-hover p-6">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center">
            🛒 ما يمكنك شراؤه بالنقاط
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="text-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
                <div class="w-16 h-16 mx-auto mb-4 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center">
                    <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">عرض ملفي</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">100 نقطة</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">عرض ملفك لمدة 24 ساعة</p>
            </div>
            
            <div class="text-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
                <div class="w-16 h-16 mx-auto mb-4 bg-green-100 dark:bg-green-900/30 rounded-2xl flex items-center justify-center">
                    <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">تعزيز الملف</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">200 نقطة</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">أولوية في نتائج البحث</p>
            </div>
            
            <div class="text-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
                <div class="w-16 h-16 mx-auto mb-4 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center">
                    <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">رسائل إضافية</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">50 نقطة</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">5 رسائل إضافية</p>
            </div>
            
            <div class="text-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
                <div class="w-16 h-16 mx-auto mb-4 bg-yellow-100 dark:bg-yellow-900/30 rounded-2xl flex items-center justify-center">
                    <svg class="w-8 h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">إعجاب خاص</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">150 نقطة</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">إعجاب مع رسالة</p>
            </div>
        </div>
    </div>

    <!-- Recent Transactions -->
    <div class="card-hover p-6">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center">
            📊 آخر المعاملات
        </h2>
        
        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left">
                <thead class="text-xs uppercase bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th class="px-6 py-3 text-gray-900 dark:text-white">التاريخ</th>
                        <th class="px-6 py-3 text-gray-900 dark:text-white">النوع</th>
                        <th class="px-6 py-3 text-gray-900 dark:text-white">الوصف</th>
                        <th class="px-6 py-3 text-gray-900 dark:text-white text-center">النقاط</th>
                        <th class="px-6 py-3 text-gray-900 dark:text-white text-center">الرصيد</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($transactions ?? [] as $transaction)
                        <tr class="bg-white dark:bg-gray-800 border-b dark:border-gray-700">
                            <td class="px-6 py-4 text-gray-900 dark:text-white">
                                {{ $transaction->created_at?->format('Y/m/d H:i') ?? 'غير محدد' }}
                            </td>
                            <td class="px-6 py-4">
                                @if($transaction->type === 'earn')
                                    <span class="inline-flex items-center px-2.5 py-0.5 bg-green-100 text-green-800 text-xs font-medium rounded-full">
                                        ربح
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2.5 py-0.5 bg-red-100 text-red-800 text-xs font-medium rounded-full">
                                        إنفاق
                                    </span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-gray-600 dark:text-gray-400">
                                {{ $transaction->description ?? 'غير محدد' }}
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span class="font-medium {{ $transaction->type === 'earn' ? 'text-green-600' : 'text-red-600' }}">
                                    {{ $transaction->type === 'earn' ? '+' : '-' }}{{ $transaction->points ?? 0 }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-center font-medium text-gray-900 dark:text-white">
                                {{ $transaction->balance_after ?? 0 }}
                            </td>
                        </tr>
                    @empty
                        <tr class="bg-white dark:bg-gray-800">
                            <td colspan="5" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                                لا توجد معاملات حتى الآن
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if(($transactions ?? collect())->count() > 0)
            <div class="text-center mt-6">
                <a href="{{ route('wallet.history') }}" class="btn-outline">
                    عرض جميع المعاملات
                </a>
            </div>
        @endif
    </div>

    <!-- Quick Actions -->
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="{{ route('dashboard') }}" class="btn-secondary text-center">
            🏠 العودة للوحة التحكم
        </a>
        <a href="{{ route('membership.index') }}" class="btn-outline text-center">
            ⭐ ترقية العضوية
        </a>
        <a href="{{ route('profile.edit') }}" class="btn-ghost text-center">
            ✏️ تعديل الملف الشخصي
        </a>
    </div>
</div>
@endsection