@if($messages->count() > 0)
<div class="bg-white dark:bg-gray-800 rounded-xl shadow overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
                    <th class="py-3 px-6 text-right text-sm font-semibold">المرسل</th>
                    <th class="py-3 px-6 text-right text-sm font-semibold">الموضوع</th>
                    <th class="py-3 px-6 text-right text-sm font-semibold">الوقت</th>
                    <th class="py-3 px-6 text-right text-sm font-semibold">الإجراءات</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                @foreach($messages as $message)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors
                          {{ !$message->read_at ? 'bg-emerald-50/50 dark:bg-emerald-900/20' : '' }}">
                    <td class="py-4 px-6">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-900 flex items-center justify-center">
                                <span class="font-bold text-emerald-600 dark:text-emerald-300 text-sm">
                                    {{ substr($message->sender->name, 0, 1) }}
                                </span>
                            </div>
                            <div>
                                <div class="font-bold text-gray-900 dark:text-white">{{ $message->sender->name }}</div>
                                <div class="text-xs text-gray-600 dark:text-gray-400">{{ $message->sender->email }}</div>
                            </div>
                        </div>
                    </td>
                    
                    <td class="py-4 px-6">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="font-semibold text-gray-900 dark:text-white">
                                {{ $message->subject ?? '(بدون موضوع)' }}
                            </span>
                            @if(!$message->read_at)
                                <span class="px-2 py-1 text-xs bg-red-500 text-white rounded-full">جديد</span>
                            @endif
                            @if($message->important)
                                <i class="fa-solid fa-star text-amber-500"></i>
                            @endif
                        </div>
                        <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                            {{ Str::limit($message->body, 100) }}
                        </p>
                        
                        @if($message->replies->count() > 0)
                        <div class="mt-2">
                            <span class="text-xs text-blue-600 dark:text-blue-400">
                                <i class="fa-solid fa-reply mr-1"></i>
                                {{ $message->replies->count() }} ردود
                            </span>
                        </div>
                        @endif
                    </td>
                    
                    <td class="py-4 px-6">
                        <div class="text-sm text-gray-600 dark:text-gray-400">
                            {{ $message->created_at->diffForHumans() }}
                        </div>
                    </td>
                    
                    <td class="py-4 px-6">
                        <div class="flex items-center gap-2">
                            <a href="{{ route('simple-messages.show', $message->id) }}"
                               target="_blank"
                               class="px-3 py-1 text-sm bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 rounded-lg hover:bg-blue-200">
                                عرض
                            </a>
                            <button onclick="toggleRead({{ $message->id }}, this)"
                                    class="px-3 py-1 text-sm {{ $message->read_at ? 'bg-gray-100 dark:bg-gray-800 text-gray-600' : 'bg-emerald-100 dark:bg-emerald-900 text-emerald-600' }} rounded-lg read-toggle-btn">
                                <i class="fa-solid {{ $message->read_at ? 'fa-envelope' : 'fa-envelope-open' }}"></i>
                            </button>
                            <button onclick="toggleImportant({{ $message->id }}, this)"
                                    class="px-3 py-1 text-sm {{ $message->important ? 'bg-amber-100 dark:bg-amber-900 text-amber-600' : 'bg-gray-100 dark:bg-gray-800 text-gray-600' }} rounded-lg">
                                <i class="fa-solid fa-star {{ $message->important ? 'text-amber-500' : '' }}"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@else
<div class="text-center py-12">
    <div class="w-20 h-20 mx-auto mb-6 text-gray-300 dark:text-gray-700">
        <i class="fa-solid fa-inbox text-5xl"></i>
    </div>
    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">
        لا توجد رسائل
    </h3>
    <p class="text-gray-500 dark:text-gray-400 mb-6">
        {{ currentFilter === 'all' ? 'لا توجد رسائل واردة حالياً' : 'لا توجد رسائل مطابقة للفلترة المحددة' }}
    </p>
    <a href="{{ route('simple-messages.create') }}"
       class="px-6 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg font-semibold inline-flex items-center gap-2">
        <i class="fa-solid fa-plus"></i>
        إرسال رسالة جديدة
    </a>
</div>
@endif