@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="flex flex-col md:flex-row justify-between items-center mb-8 gap-4">
        <h1 class="text-3xl font-extrabold text-gray-900 dark:text-white flex items-center gap-3">
            <i class="fa-solid fa-box-archive text-gray-600 dark:text-gray-400"></i>
            الرسائل المؤرشفة
        </h1>

        <a href="{{ route('simple-messages.inbox') }}"
           class="px-5 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 font-bold rounded-3xl shadow-lg flex items-center gap-2 transition-all">
            <i class="fa-solid fa-inbox"></i>
            العودة للصندوق الوارد
        </a>
    </div>

    <!-- قائمة الرسائل -->
    <div class="bg-white dark:bg-gray-900 rounded-3xl shadow-2xl overflow-hidden">
        @if($messages->count() > 0)
        <div class="overflow-x-auto">
            <table class="w-full min-w-[600px]">
                <thead>
                    <tr class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                        <th class="py-4 px-6 text-right text-sm font-semibold">المرسل</th>
                        <th class="py-4 px-6 text-right text-sm font-semibold">الموضوع</th>
                        <th class="py-4 px-6 text-right text-sm font-semibold">الوقت</th>
                        <th class="py-4 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">

                        <!-- المرسل -->
                        <td class="py-4 px-6">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-800
                                            flex items-center justify-center ring-1 ring-gray-300 dark:ring-gray-700">
                                    @if($message->sender->avatar)
                                        <img src="{{ asset('storage/avatars/'.$message->sender->avatar) }}"
                                             alt="{{ $message->sender->name }}"
                                             class="w-full h-full object-cover">
                                    @else
                                        <span class="font-bold text-gray-600 dark:text-gray-300">
                                            {{ mb_substr($message->sender->name, 0, 1) }}
                                        </span>
                                    @endif
                                </div>
                                <div>
                                    <div class="font-bold text-gray-900 dark:text-white">
                                        {{ $message->sender->name }}
                                    </div>
                                    <div class="text-sm text-gray-600 dark:text-gray-400">
                                        {{ $message->sender->email }}
                                    </div>
                                </div>
                            </div>
                        </td>

                        <!-- الموضوع -->
                        <td class="py-4 px-6">
                            <a href="{{ route('simple-messages.show', $message->id) }}"
                               class="font-semibold text-gray-900 dark:text-white hover:underline">
                                {{ $message->subject ?? '(بدون موضوع)' }}
                            </a>
                        </td>

                        <!-- الوقت -->
                        <td class="py-4 px-6 text-gray-600 dark:text-gray-400">
                            {{ $message->created_at->diffForHumans() }}
                        </td>

                        <!-- الإجراءات -->
                        <td class="py-4 px-6 flex gap-2 flex-wrap">
                            <button onclick="unarchiveMessage({{ $message->id }})"
                                    class="px-4 py-2 text-sm bg-blue-100 dark:bg-blue-900
                                           text-blue-600 dark:text-blue-300 rounded-2xl hover:bg-blue-200
                                           transition-all flex items-center gap-1">
                                <i class="fa-solid fa-arrow-up-from-bracket"></i> استرجاع
                            </button>

                            <button onclick="deleteMessage({{ $message->id }})"
                                    class="px-4 py-2 text-sm bg-red-100 dark:bg-red-900
                                           text-red-600 dark:text-red-300 rounded-2xl hover:bg-red-200
                                           transition-all flex items-center gap-1">
                                <i class="fa-solid fa-trash"></i> حذف
                            </button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        @if($messages->hasPages())
            <div class="p-4">{{ $messages->links() }}</div>
        @endif

        @else
        <div class="text-center py-16">
            <i class="fa-solid fa-box-archive text-6xl text-gray-300 dark:text-gray-700 mb-6"></i>
            <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300">
                لا توجد رسائل مؤرشفة
            </h3>
        </div>
        @endif
    </div>
</div>

<script>
function unarchiveMessage(id) {
    if (!confirm('هل تريد استرجاع هذه الرسالة؟')) return;

    fetch(`{{ url('messages/unarchive') }}/${id}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        }
    }).then(() => location.reload());
}

function deleteMessage(id) {
    if (!confirm('هل تريد حذف هذه الرسالة نهائيًا؟')) return;

    fetch(`{{ url('messages/delete') }}/${id}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        }
    }).then(() => location.reload());
}
</script>
@endsection