@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-7xl mx-auto px-6 py-10">

    <!-- العنوان والإجراءات -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-8">
        <div>
            <h1 class="text-4xl font-extrabold text-gradient bg-clip-text text-transparent 
                       bg-gradient-to-r from-amber-400 via-amber-500 to-orange-500 flex items-center gap-4">
                <i class="fa-solid fa-star"></i>
                الرسائل المهمة
            </h1>
            <p class="text-gray-500 dark:text-gray-300 mt-2 text-lg">
                جميع الرسائل التي وضعت عليها علامة النجمة
            </p>
        </div>

        <div class="flex flex-wrap gap-4">
            <a href="{{ route('simple-messages.create') }}"
               class="px-6 py-3 bg-gradient-to-r from-emerald-500 via-teal-400 to-cyan-500 
                      hover:from-emerald-600 hover:via-teal-500 hover:to-cyan-600
                      text-white rounded-3xl font-bold flex items-center gap-3 shadow-2xl
                      transform hover:scale-105 transition-all">
                <i class="fa-solid fa-plus"></i>
                رسالة جديدة
            </a>

            <a href="{{ route('simple-messages.inbox') }}"
               class="px-6 py-3 bg-gray-700 dark:bg-gray-800 hover:bg-gray-800 dark:hover:bg-gray-900
                      text-white rounded-3xl font-bold flex items-center gap-3 shadow-lg
                      transform hover:scale-105 transition-all">
                <i class="fa-solid fa-inbox"></i>
                الوارد
            </a>
        </div>
    </div>

    <!-- قائمة الرسائل -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        @if($messages->count() > 0)
            @foreach($messages as $message)
            <div class="rounded-3xl p-6 shadow-2xl border border-amber-200 dark:border-amber-800
                        bg-gradient-to-r from-amber-50 to-white dark:from-amber-900/20 dark:to-gray-900
                        hover:shadow-3xl transition-shadow transform hover:-translate-y-1
                        {{ !$message->read_at ? 'animate-pulse-slow' : '' }}">
                
                <div class="flex items-start justify-between mb-4">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 rounded-full flex items-center justify-center
                                    {{ $message->sender_id == auth()->id() ? 'bg-blue-100 dark:bg-blue-900' : 'bg-emerald-100 dark:bg-emerald-900' }}">
                            <span class="font-bold text-lg
                                         {{ $message->sender_id == auth()->id() ? 'text-blue-600 dark:text-blue-300' : 'text-emerald-600 dark:text-emerald-300' }}">
                                {{ substr($message->sender_id == auth()->id() ? $message->receiver->name : $message->sender->name, 0, 1) }}
                            </span>
                        </div>
                        <div>
                            <div class="font-bold text-gray-900 dark:text-white">
                                {{ $message->sender_id == auth()->id() ? 'إلى: ' . $message->receiver->name : 'من: ' . $message->sender->name }}
                            </div>
                            <div class="text-sm text-gray-500 dark:text-gray-400">
                                {{ $message->sender_id == auth()->id() ? $message->receiver->email : $message->sender->email }}
                            </div>
                        </div>
                    </div>
                    
                    <button onclick="toggleImportant({{ $message->id }}, this)"
                            class="text-2xl text-amber-500 hover:text-amber-600 transition-transform">
                        <i class="fa-solid fa-star {{ $message->important ? 'text-amber-500' : 'text-gray-400 dark:text-gray-500' }}"></i>
                    </button>
                </div>
                
                <div class="mb-4">
                    <h4 class="font-semibold text-gray-900 dark:text-white mb-2">{{ $message->subject ?? '(بدون موضوع)' }}</h4>
                    <p class="text-gray-700 dark:text-gray-300 text-sm line-clamp-3">{{ $message->body }}</p>
                </div>
                
                <div class="flex justify-between items-center pt-4 border-t border-amber-100 dark:border-amber-800">
                    <div class="text-sm text-gray-500">{{ $message->created_at->diffForHumans() }}</div>
                    <div class="flex gap-2 items-center">
                        <a href="{{ route('simple-messages.show', $message->id) }}"
                           class="px-3 py-1 text-sm bg-amber-100 dark:bg-amber-900 text-amber-600 dark:text-amber-300 rounded-xl hover:bg-amber-200 transition-all">
                            عرض
                        </a>
                        @if($message->receiver_id == auth()->id() && !$message->read_at)
                        <span class="px-2 py-1 text-xs bg-red-500 text-white rounded-full shadow-lg animate-pulse">جديد</span>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        @else
            <div class="col-span-full text-center py-24">
                <div class="w-32 h-32 mx-auto mb-8 text-gray-300 dark:text-gray-700">
                    <i class="fa-solid fa-star text-8xl"></i>
                </div>
                <h3 class="text-3xl font-extrabold text-gray-700 dark:text-gray-300 mb-4">لا توجد رسائل مهمة</h3>
                <p class="text-gray-500 dark:text-gray-400 mb-10 max-w-xl mx-auto text-lg">
                    يمكنك وضع علامة النجمة على أي رسالة مهمة من صندوق الوارد أو الصادر
                </p>
                <div class="flex gap-4 justify-center">
                    <a href="{{ route('simple-messages.inbox') }}"
                       class="px-8 py-3 bg-emerald-500 hover:bg-emerald-600 text-white rounded-3xl font-bold shadow-2xl transform hover:scale-105 transition-all flex items-center gap-3">
                        <i class="fa-solid fa-inbox"></i>
                        الوارد
                    </a>
                    <a href="{{ route('simple-messages.sent') }}"
                       class="px-8 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-3xl font-bold shadow-2xl transform hover:scale-105 transition-all flex items-center gap-3">
                        <i class="fa-solid fa-paper-plane"></i>
                        الصادر
                    </a>
                </div>
            </div>
        @endif
    </div>

    <!-- الترقيم -->
    @if($messages->hasPages())
        <div class="mt-6">{{ $messages->links() }}</div>
    @endif
</div>

<script>
function toggleImportant(messageId, el) {
    fetch(`/messages/${messageId}/important`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        }
    })
    .then(res => res.json())
    .then(data => {
        if(data.success){
            const icon = el.querySelector('i');
            if(data.important){
                icon.classList.remove('text-gray-400','dark:text-gray-500');
                icon.classList.add('text-amber-500');
            } else {
                icon.classList.add('text-gray-400','dark:text-gray-500');
                icon.classList.remove('text-amber-500');
            }
        }
    });
}
</script>

<style>
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* تأثير pulse خفيف للرسائل الجديدة */
@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.animate-pulse-slow { animation: pulse-slow 2s infinite; }
</style>
@endsection