@php
    $user = auth()->user();
    $role = $user->membership_status ?? $user->role ?? 'member';

    switch ($role) {
        case 'super-admin': $layout = 'layouts.superadmin'; break;
        case 'advisor':     $layout = 'layouts.advisor'; break;
        case 'admin':
        case 'moderator':   $layout = 'layouts.moderator'; break;
        default:            $layout = 'layouts.member';
    }
@endphp

@extends($layout)

@section('title', 'الرسائل الخاصة')

@section('content')
<div class="max-w-6xl mx-auto px-4 py-8">
    <!-- العنوان الرئيسي -->
    <div class="text-center mb-12">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
            📨 نظام الرسائل الخاصة
        </h1>
        <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
            نظام بسيط لإرسال واستقبال الرسائل بين الأعضاء
        </p>
    </div>

    <!-- بطاقات الخيارات -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
        <!-- الوارد -->
        <a href="{{ route('simple-messages.inbox') }}" 
           class="bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-2xl p-6 text-white shadow-lg hover:shadow-xl transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-xl font-bold mb-2">الوارد</h3>
                    <p class="text-emerald-100">الرسائل المستلمة</p>
                    @if($unreadCount > 0)
                        <div class="mt-3 inline-flex items-center px-3 py-1 bg-white/20 rounded-full">
                            <span class="text-sm font-bold">{{ $unreadCount }} جديد</span>
                        </div>
                    @endif
                </div>
                <i class="fa-solid fa-inbox text-3xl opacity-80"></i>
            </div>
        </a>

        <!-- الصادر -->
        <a href="{{ route('simple-messages.sent') }}" 
           class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl p-6 text-white shadow-lg hover:shadow-xl transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-xl font-bold mb-2">الصادر</h3>
                    <p class="text-blue-100">الرسائل المرسلة</p>
                </div>
                <i class="fa-solid fa-paper-plane text-3xl opacity-80"></i>
            </div>
        </a>

        <!-- رسالة جديدة -->
        <a href="{{ route('simple-messages.create') }}" 
           class="bg-gradient-to-r from-purple-500 to-purple-600 rounded-2xl p-6 text-white shadow-lg hover:shadow-xl transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-xl font-bold mb-2">رسالة جديدة</h3>
                    <p class="text-purple-100">إرسال رسالة جديدة</p>
                </div>
                <i class="fa-solid fa-plus text-3xl opacity-80"></i>
            </div>
        </a>

        <!-- المهمة -->
        <a href="{{ route('simple-messages.important') }}" 
           class="bg-gradient-to-r from-amber-500 to-amber-600 rounded-2xl p-6 text-white shadow-lg hover:shadow-xl transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-xl font-bold mb-2">المهمة</h3>
                    <p class="text-amber-100">الرسائل المميزة</p>
                </div>
                <i class="fa-solid fa-star text-3xl opacity-80"></i>
            </div>
        </a>
    </div>

    <!-- الإحصائيات السريعة -->
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-lg p-6 mb-8">
        <h2 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">إحصائيات سريعة</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
                <div class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{{ $messagesCount }}</div>
                <div class="text-gray-600 dark:text-gray-400 mt-1">إجمالي الرسائل</div>
            </div>
            <div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
                <div class="text-2xl font-bold text-red-600 dark:text-red-400">{{ $unreadCount }}</div>
                <div class="text-gray-600 dark:text-gray-400 mt-1">غير مقروء</div>
            </div>
            <div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
                <div class="text-2xl font-bold text-amber-600 dark:text-amber-400">{{ $importantCount }}</div>
                <div class="text-gray-600 dark:text-gray-400 mt-1">مهمة</div>
            </div>
        </div>
    </div>

    <!-- آخر الرسائل -->
    @if(isset($recentMessages) && count($recentMessages) > 0)
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-lg p-6">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold text-gray-900 dark:text-white">آخر الرسائل</h2>
            <a href="{{ route('simple-messages.inbox') }}" class="text-emerald-600 hover:text-emerald-700 font-medium">
                عرض الكل →
            </a>
        </div>
        
        <div class="space-y-4">
            @foreach($recentMessages as $message)
            <a href="{{ route('simple-messages.show', $message->id) }}" 
               class="block border border-gray-200 dark:border-gray-700 rounded-xl p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                <div class="flex justify-between items-start">
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <div class="w-8 h-8 rounded-full bg-emerald-100 dark:bg-emerald-900 flex items-center justify-center">
                                <span class="text-sm font-bold text-emerald-600 dark:text-emerald-300">
                                    {{ substr($message->sender->name, 0, 1) }}
                                </span>
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900 dark:text-white">{{ $message->sender->name }}</h3>
                                <p class="text-sm text-gray-600 dark:text-gray-400">{{ $message->subject ?? '(بدون موضوع)' }}</p>
                            </div>
                        </div>
                        <p class="text-gray-700 dark:text-gray-300 text-sm line-clamp-2">
                            {{ $message->body }}
                        </p>
                    </div>
                    <div class="text-right">
                        <div class="text-xs text-gray-500">{{ $message->created_at->diffForHumans() }}</div>
                        @if(!$message->read_at && $message->receiver_id == auth()->id())
                            <span class="mt-1 inline-block px-2 py-1 text-xs bg-red-500 text-white rounded-full">جديد</span>
                        @endif
                    </div>
                </div>
            </a>
            @endforeach
        </div>
    </div>
    @endif

    <!-- التعليمات السريعة -->
    <div class="mt-8 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-2xl p-6">
        <h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white">كيفية الاستخدام:</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="flex items-start gap-3">
                <div class="w-8 h-8 rounded-full bg-emerald-100 dark:bg-emerald-900 flex items-center justify-center flex-shrink-0">
                    <i class="fa-solid fa-plus text-emerald-600 dark:text-emerald-300"></i>
                </div>
                <div>
                    <h4 class="font-bold text-gray-900 dark:text-white">إرسال رسالة</h4>
                    <p class="text-sm text-gray-600 dark:text-gray-400">اضغط على "رسالة جديدة" واختر العضو</p>
                </div>
            </div>
            <div class="flex items-start gap-3">
                <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center flex-shrink-0">
                    <i class="fa-solid fa-reply text-blue-600 dark:text-blue-300"></i>
                </div>
                <div>
                    <h4 class="font-bold text-gray-900 dark:text-white">الرد على الرسائل</h4>
                    <p class="text-sm text-gray-600 dark:text-gray-400">اضغط على أي رسالة للرد عليها</p>
                </div>
            </div>
            <div class="flex items-start gap-3">
                <div class="w-8 h-8 rounded-full bg-amber-100 dark:bg-amber-900 flex items-center justify-center flex-shrink-0">
                    <i class="fa-solid fa-star text-amber-600 dark:text-amber-300"></i>
                </div>
                <div>
                    <h4 class="font-bold text-gray-900 dark:text-white">تحديد المهمة</h4>
                    <p class="text-sm text-gray-600 dark:text-gray-400">ضع علامة النجمة للرسائل المهمة</p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>
@endsection