@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">
                    <th class="py-3 px-4 text-right text-xs font-semibold">المرسل</th>
                    <th class="py-3 px-4 text-right text-xs font-semibold">الموضوع</th>
                    <th class="py-3 px-4 text-right text-xs font-semibold">الوقت</th>
                    <th class="py-3 px-4 text-right text-xs 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/30 dark:bg-emerald-900/10' : '' }}"
                    id="message-row-{{ $message->id }}">
                    <td class="py-3 px-4">
                        <div class="flex items-center gap-2">
                            <div class="w-8 h-8 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-xs">
                                    {{ substr($message->sender->name, 0, 1) }}
                                </span>
                            </div>
                            <div class="min-w-0">
                                <div class="font-bold text-gray-900 dark:text-white text-sm truncate" style="max-width: 120px;">
                                    {{ $message->sender->name }}
                                </div>
                            </div>
                        </div>
                    </td>
                    
                    <td class="py-3 px-4">
                        <div class="flex items-center gap-1 mb-1">
                            <span class="font-semibold text-gray-900 dark:text-white text-sm truncate" style="max-width: 150px;">
                                {{ $message->subject ?? '(بدون موضوع)' }}
                            </span>
                            @if(!$message->read_at)
                                <span class="px-1.5 py-0.5 text-xs bg-red-500 text-white rounded-full">جديد</span>
                            @endif
                            @if($message->important)
                                <i class="fa-solid fa-star text-amber-500 text-xs"></i>
                            @endif
                        </div>
                        <p class="text-xs text-gray-600 dark:text-gray-400 truncate" style="max-width: 200px;">
                            {{ Str::limit($message->body, 50) }}
                        </p>
                    </td>
                    
                    <td class="py-3 px-4">
                        <div class="text-xs text-gray-600 dark:text-gray-400">
                            {{ $message->created_at->diffForHumans() }}
                        </div>
                    </td>
                    
                    <td class="py-3 px-4">
                        <div class="flex items-center gap-1">
                            <a href="{{ route('simple-messages.show', $message->id) }}"
                               target="_blank"
                               class="px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 rounded hover:bg-blue-200">
                                عرض
                            </a>
                            <button onclick="toggleReadModal({{ $message->id }}, this)"
                                    class="px-2 py-1 text-xs {{ $message->read_at ? 'bg-gray-100 dark:bg-gray-800 text-gray-600' : 'bg-emerald-100 dark:bg-emerald-900 text-emerald-600' }} rounded read-toggle-btn">
                                <i class="fa-solid {{ $message->read_at ? 'fa-envelope' : 'fa-envelope-open' }} text-xs"></i>
                            </button>
                            <button onclick="toggleImportantModal({{ $message->id }}, this)"
                                    class="px-2 py-1 text-xs {{ $message->important ? 'bg-amber-100 dark:bg-amber-900 text-amber-600' : 'bg-gray-100 dark:bg-gray-800 text-gray-600' }} rounded">
                                <i class="fa-solid fa-star {{ $message->important ? 'text-amber-500' : '' }} text-xs"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@else
<div class="text-center py-8">
    <div class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-700">
        <i class="fa-solid fa-inbox text-4xl"></i>
    </div>
    <h3 class="text-base font-semibold text-gray-700 dark:text-gray-300 mb-2">
        لا توجد رسائل
    </h3>
    <p class="text-gray-500 dark:text-gray-400 text-sm mb-4">
        {{ $filter === 'all' ? 'لا توجد رسائل واردة حالياً' : 'لا توجد رسائل مطابقة للفلترة المحددة' }}
    </p>
    <a href="{{ route('simple-messages.create') }}"
       class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg font-semibold inline-flex items-center gap-2 text-sm">
        <i class="fa-solid fa-plus"></i>
        رسالة جديدة
    </a>
</div>
@endif