@extends('layouts.superadmin')

@section('title','عرض الرسالة — ProSanta')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 sm:py-8">
    <div class="max-w-5xl mx-auto px-3 sm:px-4 space-y-6 rtl">

        {{-- HEADER --}}
        <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-cyan-600/20 via-slate-900 to-black
                    border border-cyan-400/30 shadow-2xl">
            <div class="absolute -top-24 -right-24 w-72 h-72 bg-cyan-400/20 blur-3xl rounded-full"></div>

            <div class="relative p-6">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-cyan-300/30 text-[11px] text-cyan-100">
                    <i class="fa-solid fa-eye"></i>
                    مراقبة رسالة — SuperAdmin
                </div>

                <h1 class="mt-3 text-2xl sm:text-3xl font-extrabold text-white">
                    {{ $message->subject ?? '(بدون موضوع)' }}
                </h1>

                <p class="mt-2 text-sm text-slate-300">
                    عرض كامل لمحتوى الرسالة وسجل الردود — مع معلومات المراقبة.
                </p>
            </div>
        </div>

        {{-- MESSAGE CARD --}}
        <div class="rounded-3xl border border-white/10 bg-slate-950/70 shadow-xl p-6 space-y-4">

            <div class="grid sm:grid-cols-2 gap-4 text-sm text-slate-200">
                <div>
                    <div class="text-[11px] text-slate-400">المرسل</div>
                    <div class="font-bold text-white">
                        {{ $message->sender->name ?? '—' }}
                        <span class="text-xs text-slate-400">
                            ({{ $message->sender->email ?? '' }})
                        </span>
                    </div>
                </div>

                <div>
                    <div class="text-[11px] text-slate-400">المستلم</div>
                    <div class="font-bold text-white">
                        {{ $message->receiver->name ?? '—' }}
                        <span class="text-xs text-slate-400">
                            ({{ $message->receiver->email ?? '' }})
                        </span>
                    </div>
                </div>

                <div>
                    <div class="text-[11px] text-slate-400">التاريخ</div>
                    <div class="font-bold">
                        {{ optional($message->created_at)->format('Y-m-d H:i') }}
                    </div>
                </div>

                <div>
                    <div class="text-[11px] text-slate-400">الحالة</div>
                    <div class="flex gap-2">
                        @if($message->read_at)
                            <span class="px-2 py-1 rounded-full text-xs bg-emerald-500/20 text-emerald-200">مقروءة</span>
                        @else
                            <span class="px-2 py-1 rounded-full text-xs bg-amber-500/20 text-amber-200">غير مقروءة</span>
                        @endif

                        @if($message->important)
                            <span class="px-2 py-1 rounded-full text-xs bg-rose-500/20 text-rose-200">مهمة</span>
                        @endif
                    </div>
                </div>
            </div>

            <div class="pt-4 border-t border-white/10">
                <div class="text-[11px] text-slate-400 mb-2">نص الرسالة</div>
                <div class="rounded-2xl bg-black/40 border border-white/10 p-4 text-white whitespace-pre-line leading-relaxed">
                    {{ $message->body }}
                </div>
            </div>
        </div>

        {{-- FLAG INFO --}}
        @if($flag)
            <div class="rounded-3xl border border-rose-400/30 bg-rose-500/10 p-5 shadow-xl">
                <h3 class="text-sm font-extrabold text-rose-200 mb-2">
                    🚨 رسالة مخالفة (Flag)
                </h3>

                <div class="grid sm:grid-cols-2 gap-4 text-sm text-rose-100">
                    <div>
                        <div class="text-[11px] opacity-70">التصنيف</div>
                        <div class="font-bold">{{ $flag->primary_type }}</div>
                    </div>

                    <div>
                        <div class="text-[11px] opacity-70">الخطورة</div>
                        <div class="font-bold uppercase">{{ $flag->risk_level }}</div>
                    </div>

                    <div>
                        <div class="text-[11px] opacity-70">الحالة</div>
                        <div class="font-bold">{{ $flag->status }}</div>
                    </div>

                    <div>
                        <div class="text-[11px] opacity-70">التاريخ</div>
                        <div class="font-bold">{{ optional($flag->created_at)->format('Y-m-d H:i') }}</div>
                    </div>
                </div>
            </div>
        @endif

        {{-- ACTIONS --}}
        <div class="flex flex-wrap gap-3">
            <a href="{{ route('superadmin.messages-monitor.messages') }}"
               class="px-5 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-sm font-bold hover:bg-white/15 transition">
                ← رجوع لقائمة الرسائل
            </a>

            <a href="{{ route('superadmin.messages-monitor.archives') }}"
               class="px-5 py-2 rounded-2xl bg-slate-500/10 border border-slate-400/20 text-slate-200 text-sm font-bold hover:bg-slate-500/20 transition">
                الأرشيف
            </a>
        </div>

    </div>
</div>
@endsection