@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 flex flex-col md:flex-row gap-6">

    {{-- السايدبار --}}
    <div class="w-full md:w-64 flex-shrink-0">
        <div class="bg-white dark:bg-gray-900 rounded-3xl shadow-2xl p-6 mb-6">
            <h2 class="font-extrabold text-lg mb-4">محادثات سريعة</h2>
            <ul class="space-y-2">
                <li>
                    <a href="{{ route('simple-messages.inbox') }}"
                       class="block px-4 py-2 rounded-2xl hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center gap-3">
                        <i class="fa-solid fa-inbox text-emerald-500"></i> الوارد
                    </a>
                </li>
                <li>
                    <a href="{{ route('simple-messages.sent') }}"
                       class="block px-4 py-2 rounded-2xl hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center gap-3 bg-gradient-to-r from-blue-400 to-indigo-500 text-white shadow-lg">
                        <i class="fa-solid fa-paper-plane"></i> الصادر
                    </a>
                </li>
                <li>
                    <a href="{{ route('simple-messages.important') }}"
                       class="block px-4 py-2 rounded-2xl hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center gap-3">
                        <i class="fa-solid fa-star text-amber-500"></i> المهمة
                    </a>
                </li>
                <li>
                    <a href="{{ route('simple-messages.archived') }}"
                       class="block px-4 py-2 rounded-2xl hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center gap-3">
                        <i class="fa-solid fa-box-archive text-gray-500"></i> المؤرشفة
                    </a>
                </li>
            </ul>
        </div>
    </div>

    {{-- المحتوى الرئيسي --}}
    <div class="flex-1">
        <!-- العنوان والأزرار -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
            <div>
                <h1 class="text-3xl font-extrabold text-gradient bg-clip-text text-transparent
                           bg-gradient-to-r from-blue-400 to-indigo-500 flex items-center gap-3">
                    <i class="fa-solid fa-paper-plane"></i>
                    الرسائل الصادرة
                </h1>
                <p class="text-gray-600 dark:text-gray-400 mt-2">
                    الرسائل التي أرسلتها للأعضاء
                </p>
            </div>

            <div class="flex flex-wrap gap-3">
                <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 shadow-2xl flex items-center gap-3 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-6">
            @forelse($messages as $message)
            <div class="bg-white dark:bg-gray-900 rounded-3xl shadow-2xl p-6 border border-gray-200 dark:border-gray-700
                        hover:shadow-3xl transition-shadow transform hover:-translate-y-1">
                <a href="{{ route('simple-messages.show', $message->id) }}" class="block">
                    <div class="flex justify-between items-start mb-4">
                        <div class="flex-1 flex items-start gap-4">
                            <div class="w-12 h-12 rounded-full {{ $message->receiver_id == auth()->id() ? 'bg-emerald-100 dark:bg-emerald-900' : 'bg-blue-100 dark:bg-blue-900' }} flex items-center justify-center shadow-inner">
                                <span class="font-bold {{ $message->receiver_id == auth()->id() ? 'text-emerald-600 dark:text-emerald-300' : 'text-blue-600 dark:text-blue-300' }}">
                                    {{ substr($message->receiver->name, 0, 1) }}
                                </span>
                            </div>
                            <div>
                                <div class="flex items-center gap-2 mb-1">
                                    <h3 class="font-bold text-gray-900 dark:text-white">إلى: {{ $message->receiver->name }}</h3>
                                    @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">{{ $message->receiver->email }}</p>
                            </div>
                        </div>

                        <div class="text-right text-sm text-gray-500 dark:text-gray-400">
                            {{ $message->created_at->diffForHumans() }}
                            <div class="mt-1 text-xs">
                                @if($message->read_at)
                                    <span class="px-3 py-1 bg-emerald-100 dark:bg-emerald-900 text-emerald-600 dark:text-emerald-300 rounded-full">
                                        مقروءة
                                    </span>
                                @else
                                    <span class="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 rounded-full">
                                        لم تقرأ
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div>
                        <h4 class="font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">
                            {{ $message->subject ?? '(بدون موضوع)' }}
                        </h4>
                        <p class="text-gray-700 dark:text-gray-300 line-clamp-3">
                            {{ $message->body }}
                        </p>
                    </div>

                   @if($message->replies_count > 0)
    <a href="{{ route('simple-messages.thread', $message->id) }}" 
       class="mt-4 inline-flex items-center gap-2 px-3 py-1 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 rounded-full text-sm">
        <i class="fa-solid fa-reply"></i>
        {{ $message->replies_count }} رد
    </a>
@endif
                </a>
            </div>
            @empty
            <div class="text-center py-16 col-span-full">
                <div class="w-24 h-24 mx-auto mb-6 text-gray-300 dark:text-gray-700">
                    <i class="fa-solid fa-paper-plane text-6xl"></i>
                </div>
                <h3 class="text-xl font-extrabold text-gray-700 dark:text-gray-300 mb-2">
                    لا توجد رسائل صادرة
                </h3>
                <p class="text-gray-500 dark:text-gray-400 mb-8 max-w-md mx-auto">
                    لم ترسل أي رسائل بعد. يمكنك البدء بإرسال رسالة لأي عضو في النظام
                </p>
                <a href="{{ route('simple-messages.create') }}"
                   class="px-8 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 shadow-2xl transform hover:scale-105 inline-flex items-center gap-3">
                    <i class="fa-solid fa-plus"></i>
                    إرسال أول رسالة
                </a>
            </div>
            @endforelse
        </div>

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

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