@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';
    }

    // helper label
    $roleLabel = function ($status) {
        return match ($status) {
            'super-admin' => 'سوبر أدمن',
            'admin'       => 'أدمن',
            'moderator'   => 'مشرف',
            'advisor'     => 'مستشار',
            default       => 'عضو',
        };
    };
@endphp

@extends($layout)

@section('title', 'رسالة جديدة')

@section('content')
<div class="max-w-5xl mx-auto px-6 py-10 pb-24">

    {{-- ===== HERO ===== --}}
    <div class="pm-hero mb-8">
        <div class="pm-hero-glow pm-hero-glow-a"></div>
        <div class="pm-hero-glow pm-hero-glow-b"></div>

        <div class="relative p-6 sm:p-8">
            <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
                <div class="min-w-0">
                    <div class="text-xs font-extrabold text-white/80">
                        المراسلات الداخلية / إنشاء رسالة
                    </div>

                    <h1 class="mt-2 text-3xl sm:text-4xl font-extrabold text-white flex items-center gap-3">
                        <i class="fa-solid fa-pen-to-square"></i>
                        رسالة جديدة
                    </h1>

                    <p class="mt-2 text-white/85 text-sm sm:text-base leading-relaxed">
                        اكتب رسالتك بشكل واضح ورسمي. تذكير: لا تشارك بيانات حساسة، واستخدم القوالب لتسريع الردود.
                    </p>

                    <div class="mt-4 flex flex-wrap gap-2 text-[12px] font-extrabold">
                        <span class="pm-chip pm-chip-white">
                            <i class="fa-solid fa-shield-halved"></i>
                            تنبيه أمني
                        </span>
                        <span class="pm-chip pm-chip-white">
                            <i class="fa-solid fa-scale-balanced"></i>
                            عدالة & سلامة
                        </span>
                        <span class="pm-chip pm-chip-white">
                            <i class="fa-solid fa-wand-magic-sparkles"></i>
                            قوالب سريعة
                        </span>
                    </div>
                </div>

                <div class="flex flex-wrap gap-2">
                    <a href="{{ route('simple-messages.inbox') }}" class="pm-btn pm-btn-ghost-white">
                        <i class="fa-solid fa-arrow-right"></i>
                        الرجوع للوارد
                    </a>

                    <button type="button" class="pm-btn pm-btn-white"
                            onclick="document.getElementById('pm-body')?.focus()">
                        <i class="fa-solid fa-feather"></i>
                        ابدأ الكتابة
                    </button>
                </div>
            </div>
        </div>

        <div class="h-1 bg-gradient-to-r from-emerald-400 via-teal-300 to-sky-400"></div>
    </div>

    {{-- ===== Errors summary ===== --}}
    @if($errors->any())
        <div class="pm-card p-5 mb-6 border-rose-200 dark:border-rose-900/40">
            <div class="flex items-start gap-3">
                <div class="h-11 w-11 rounded-2xl bg-rose-100 dark:bg-rose-900/30 text-rose-700 dark:text-rose-200 flex items-center justify-center">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                </div>
                <div class="min-w-0">
                    <div class="font-extrabold text-slate-900 dark:text-white">يوجد أخطاء</div>
                    <ul class="mt-2 text-sm text-slate-700 dark:text-white/75 list-disc ps-5 space-y-1">
                        @foreach($errors->all() as $err)
                            <li>{{ $err }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif

    {{-- ===== Main Form Card ===== --}}
    <div class="pm-card overflow-hidden">
        <div class="p-6 sm:p-7 border-b border-slate-200 dark:border-white/10">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <div class="text-xs font-extrabold text-slate-500 dark:text-white/55">إنشاء رسالة</div>
                    <div class="mt-1 text-lg font-extrabold text-slate-900 dark:text-white">
                        نموذج إرسال رسمي
                    </div>
                    <div class="mt-1 text-sm text-slate-600 dark:text-white/60">
                        اختر المستلم، اكتب الموضوع (اختياري)، ثم نص الرسالة.
                    </div>
                </div>

                <div class="hidden sm:flex items-center gap-2">
                    <span class="pm-chip pm-chip-muted">
                        <i class="fa-solid fa-lock"></i>
                        آمن
                    </span>
                    <span class="pm-chip pm-chip-muted">
                        <i class="fa-solid fa-clipboard-check"></i>
                        موثق
                    </span>
                </div>
            </div>
        </div>

        <div class="p-6 sm:p-7">
            <form id="pm-form"
                  action="{{ route('simple-messages.store') }}"
                  method="POST"
                  class="space-y-6"
                  onsubmit="return pmLockSubmit(this)">
                @csrf

                {{-- Recipient --}}
                <div>
                    <div class="flex items-center justify-between gap-3 mb-2">
                        <label for="receiver_id" class="block text-sm font-extrabold text-slate-900 dark:text-white">
                            المستلم
                        </label>

                        <div class="flex items-center gap-2">
                            <button type="button" class="pm-btn pm-btn-xs pm-btn-soft"
                                    onclick="pmFocusRecipientSearch()">
                                <i class="fa-solid fa-magnifying-glass"></i>
                                بحث
                            </button>
                        </div>
                    </div>

                    {{-- Search inside select --}}
                    <div class="relative mb-2">
                        <input type="text" id="pm-recipient-search"
                               placeholder="ابحث عن اسم/دور..."
                               class="pm-input"
                               autocomplete="off">
                        <i class="fa-solid fa-magnifying-glass pm-input-icon"></i>
                    </div>

                    <select name="receiver_id" id="receiver_id"
                            class="pm-select"
                            required>
                        <option value="" disabled {{ old('receiver_id') ? '' : 'selected' }}>
                            اختر مستلمًا…
                        </option>

                        @foreach($users as $userItem)
                            @php
                                $label = $roleLabel($userItem->membership_status ?? $userItem->role ?? 'member');
                                $selected = (string)old('receiver_id') === (string)$userItem->id;
                            @endphp
                            <option value="{{ $userItem->id }}" {{ $selected ? 'selected' : '' }}>
                                {{ $userItem->name }} — {{ $label }}
                            </option>
                        @endforeach
                    </select>

                    <div class="mt-2 text-xs text-slate-500 dark:text-white/55">
                        💡 ملاحظة: اختر الشخص الصحيح لتسريع الاستجابة وتجنب إرسال الرسالة للجهة غير المناسبة.
                    </div>

                    @error('receiver_id')
                        <div class="mt-2 text-sm font-bold text-rose-600 dark:text-rose-300">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Subject --}}
                <div>
                    <label for="subject" class="block text-sm font-extrabold text-slate-900 dark:text-white mb-2">
                        الموضوع <span class="text-xs font-black text-slate-400 dark:text-white/35">(اختياري)</span>
                    </label>
                    <div class="relative">
                        <input type="text" name="subject" id="subject"
                               value="{{ old('subject') }}"
                               placeholder="مثال: طلب مراجعة / استفسار / ملاحظة"
                               class="pm-input">
                        <i class="fa-solid fa-tag pm-input-icon"></i>
                    </div>
                    <div class="mt-2 text-xs text-slate-500 dark:text-white/55">
                        الموضوع الجيد يساعد على فرز الرسائل وتحديد الأولوية.
                    </div>

                    @error('subject')
                        <div class="mt-2 text-sm font-bold text-rose-600 dark:text-rose-300">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Body --}}
                <div>
                    <div class="flex items-center justify-between gap-3 mb-2">
                        <label for="body" class="block text-sm font-extrabold text-slate-900 dark:text-white">
                            نص الرسالة
                        </label>
                        <span class="text-xs font-extrabold text-slate-500 dark:text-white/55">
                            <span id="pm-count">0</span> حرف
                        </span>
                    </div>

                    {{-- Templates --}}
                    <div class="flex flex-wrap gap-2 mb-3">
                        <button type="button" class="pm-template" data-text="السلام عليكم،\n\nأرفق لكم التفاصيل التالية بخصوص الموضوع أعلاه:\n- \n- \n\nشاكرًا لكم تعاونكم."
                                onclick="pmUseTemplate(this)">قالب رسمي</button>
                        <button type="button" class="pm-template" data-text="تم استلام رسالتكم وسيتم مراجعتها والرد في أقرب وقت ممكن."
                                onclick="pmUseTemplate(this)">استلام + مراجعة</button>
                        <button type="button" class="pm-template" data-text="يرجى تزويدنا بتفاصيل إضافية (أسماء/أوقات/صور إن لزم) لإكمال المتابعة."
                                onclick="pmUseTemplate(this)">طلب تفاصيل</button>
                        <button type="button" class="pm-template" data-text="تم حل المشكلة. إذا تكرر الأمر يرجى إعلامنا مع ذكر الوقت والبيانات اللازمة."
                                onclick="pmUseTemplate(this)">تم الحل</button>
                    </div>

                    <textarea name="body" id="pm-body" rows="7"
                              placeholder="اكتب رسالتك هنا..."
                              class="pm-textarea"
                              required>{{ old('body') }}</textarea>

                    <div class="mt-2 text-xs text-slate-500 dark:text-white/55 leading-relaxed">
                        ✅ كن واضحًا ومباشرًا.  
                        ❌ تجنب كلمات المرور، رموز التحقق، معلومات الدفع، أو أي بيانات حساسة.
                    </div>

                    @error('body')
                        <div class="mt-2 text-sm font-bold text-rose-600 dark:text-rose-300">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Actions --}}
                <div class="flex flex-wrap items-center justify-end gap-2">
                    <a href="{{ route('simple-messages.inbox') }}" class="pm-btn pm-btn-ghost">
                        إلغاء
                    </a>

                    <button type="submit" id="pm-send-btn" class="pm-btn pm-btn-primary">
                        <i class="fa-solid fa-paper-plane"></i>
                        إرسال الرسالة
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- ===== Helpful + Policy Blocks (تحت) ===== --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">

        {{-- Tips --}}
        <div class="pm-card p-6">
            <div class="flex items-start gap-3">
                <div class="h-11 w-11 rounded-2xl bg-sky-100 dark:bg-sky-900/25 text-sky-700 dark:text-sky-200 flex items-center justify-center">
                    <i class="fa-solid fa-lightbulb"></i>
                </div>
                <div class="min-w-0">
                    <div class="font-extrabold text-slate-900 dark:text-white">نصائح تساعد جدًا</div>
                    <div class="mt-2 text-sm text-slate-600 dark:text-white/65 leading-relaxed">
                        • اذكر الهدف في أول سطر (طلب/استفسار/بلاغ).<br>
                        • ضع تفاصيل قابلة للتحقق: وقت/اسم/خطوات/رابط (إن وجد).<br>
                        • إذا كان الموضوع حساسًا: اكتفِ بالحد الأدنى من البيانات.
                    </div>
                </div>
            </div>
        </div>

        {{-- Security / Monitoring / AI Notice --}}
        <div class="pm-card p-6">
            <div class="flex items-start gap-3">
                <div class="h-11 w-11 rounded-2xl bg-emerald-100 dark:bg-emerald-900/25 text-emerald-700 dark:text-emerald-200 flex items-center justify-center">
                    <i class="fa-solid fa-shield-halved"></i>
                </div>
                <div class="min-w-0">
                    <div class="font-extrabold text-slate-900 dark:text-white">تنبيه أمني وسياسة الاستخدام</div>

                    <div class="mt-2 text-sm text-slate-600 dark:text-white/65 leading-relaxed">
                        • يمنع إرسال كلمات مرور، رموز تحقق، بيانات بطاقات/محافظ، أو معلومات شخصية حساسة.<br>
                        • بموجب <span class="font-extrabold">سياسة الاستخدام</span> داخل النظام، يحق للإدارة مراجعة/مراقبة المحادثات عند الحاجة
                        لضمان <span class="font-extrabold">العدالة</span> و<span class="font-extrabold">أمن الأعضاء</span> ومنع إساءة الاستخدام.<br>
                        • قد يتم تحليل الرسائل عبر أدوات آلية (بما فيها تقنيات <span class="font-extrabold">ذكاء اصطناعي</span>) للمساعدة في رصد الإساءة،
                        الرسائل المزعجة، التهديدات، أو محاولات الاحتيال وتحسين جودة الخدمة.
                    </div>

                    <div class="mt-3 text-xs text-slate-500 dark:text-white/55">
                        بإرسال الرسالة أنت توافق على الالتزام بالقوانين الداخلية والسياسة المعتمدة في المنصة.
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<style>
/* ===== Hero ===== */
.pm-hero{
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    box-shadow: 0 30px 80px rgba(2,6,23,.12);
    border: 1px solid rgba(15,23,42,.12);
    background: linear-gradient(135deg, rgba(16,185,129,1), rgba(20,184,166,1), rgba(56,189,248,1));
}
.pm-hero-glow{
    position:absolute; border-radius:9999px; filter: blur(50px); opacity:.30;
}
.pm-hero-glow-a{ width:280px; height:280px; right:-80px; top:-90px; background: rgba(255,255,255,.8); }
.pm-hero-glow-b{ width:280px; height:280px; left:-90px; bottom:-90px; background: rgba(0,0,0,.25); }

/* ===== Card ===== */
.pm-card{
    background:#fff;
    border:1px solid rgba(226,232,240,.9);
    border-radius: 1.75rem;
    box-shadow: 0 24px 60px rgba(2,6,23,.06);
}
.dark .pm-card{
    background: rgba(2,6,23,.55);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
}

/* ===== Chips ===== */
.pm-chip{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.3rem .7rem;
    border-radius:9999px;
    font-size:11px;
    font-weight:950;
    border:1px solid rgba(226,232,240,.9);
    background:#fff; color:#0f172a;
}
.pm-chip-white{
    background: rgba(255,255,255,.90);
    border-color: rgba(255,255,255,.35);
    color: #0f172a;
}

/* ===== Buttons ===== */
.pm-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    padding:.75rem 1rem;
    border-radius: 1rem;
    font-weight: 950;
    font-size:.9rem;
    border:1px solid rgba(226,232,240,.9);
    background:#fff;
    color:#0f172a;
    transition: all .15s ease;
}
.dark .pm-btn{
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.9);
    border-color: rgba(255,255,255,.10);
}
.pm-btn:hover{ transform: translateY(-1px); box-shadow: 0 16px 30px rgba(2,6,23,.10); }
.dark .pm-btn:hover{ box-shadow: 0 16px 30px rgba(0,0,0,.25); }
.pm-btn:disabled{ opacity:.60; cursor:not-allowed; transform:none; box-shadow:none; }

.pm-btn-xs{ padding:.5rem .8rem; border-radius:.9rem; font-size:.78rem; }

.pm-btn-ghost{
    background: rgba(148,163,184,.10);
    border-color: rgba(148,163,184,.25);
}
.dark .pm-btn-ghost{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }

.pm-btn-white{
    background: rgba(255,255,255,.92);
    border-color: rgba(255,255,255,.35);
}
.pm-btn-ghost-white{
    background: rgba(15,23,42,.18);
    color: #fff;
    border-color: rgba(255,255,255,.22);
}
.pm-btn-ghost-white:hover{
    background: rgba(15,23,42,.24);
}

.pm-btn-soft{
    background: rgba(226,232,240,.55);
    border-color: rgba(148,163,184,.30);
}
.dark .pm-btn-soft{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }

.pm-btn-primary{
    background: linear-gradient(90deg, rgba(16,185,129,1), rgba(56,189,248,1));
    border-color: rgba(16,185,129,.35);
    color:#fff;
}
.pm-btn-primary:hover{ filter: brightness(.98); }

/* ===== Inputs ===== */
.pm-input, .pm-select{
    width: 100%;
    border-radius: 1.25rem;
    border:1px solid rgba(226,232,240,.9);
    background:#fff;
    color:#0f172a;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 800;
    outline: none;
    transition: all .15s ease;
}
.pm-input:focus, .pm-select:focus{
    border-color: rgba(16,185,129,.55);
    box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}
.dark .pm-input, .dark .pm-select{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
}
.dark .pm-input:focus, .dark .pm-select:focus{
    box-shadow: 0 0 0 3px rgba(16,185,129,.20);
}

.pm-input-icon{
    position:absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(148,163,184,1);
}
.dark .pm-input-icon{ color: rgba(255,255,255,.45); }

.pm-textarea{
    width:100%;
    border-radius: 1.25rem;
    border:1px solid rgba(226,232,240,.9);
    background:#fff;
    color:#0f172a;
    padding: 14px 14px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: inset 0 2px 10px rgba(2,6,23,.06);
    outline: none;
    transition: all .15s ease;
}
.pm-textarea:focus{
    border-color: rgba(16,185,129,.55);
    box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}
.dark .pm-textarea{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
}
.dark .pm-textarea:focus{
    box-shadow: 0 0 0 3px rgba(16,185,129,.20);
}

/* Templates */
.pm-template{
    border:1px solid rgba(226,232,240,.9);
    background: rgba(241,245,249,.75);
    color:#0f172a;
    padding:.45rem .75rem;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 950;
    transition: all .15s ease;
}
.pm-template:hover{
    transform: translateY(-1px);
    background: rgba(16,185,129,.12);
    border-color: rgba(16,185,129,.25);
}
.dark .pm-template{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
}
</style>

<script>
/* ========= Prevent double submit ========= */
function pmLockSubmit(form){
    const btn = document.getElementById('pm-send-btn');
    if(btn){
        btn.disabled = true;
        btn.innerHTML = `<i class="fa-solid fa-circle-notch fa-spin"></i> جاري الإرسال...`;
    }
    return true;
}

/* ========= Count chars ========= */
function pmUpdateCount(){
    const ta = document.getElementById('pm-body');
    const c  = document.getElementById('pm-count');
    if(!ta || !c) return;
    c.textContent = String((ta.value || '').length);
}

/* ========= Templates ========= */
function pmUseTemplate(btn){
    const txt = btn?.getAttribute('data-text') || '';
    const ta = document.getElementById('pm-body');
    if(!ta) return;

    ta.value = ta.value ? (ta.value.trim() + "\n\n" + txt) : txt;
    ta.focus();
    pmUpdateCount();
}

/* ========= Recipient search filter ========= */
function pmFocusRecipientSearch(){
    document.getElementById('pm-recipient-search')?.focus();
}

function pmFilterRecipients(){
    const input = document.getElementById('pm-recipient-search');
    const sel   = document.getElementById('receiver_id');
    if(!input || !sel) return;

    const q = (input.value || '').trim().toLowerCase();

    // show all if empty
    Array.from(sel.options).forEach((opt) => {
        if(!opt.value){ return; } // keep placeholder
        const text = (opt.textContent || '').toLowerCase();
        opt.hidden = q ? !text.includes(q) : false;
    });

    // If current selected becomes hidden, don't force change (user decision).
}

document.addEventListener('DOMContentLoaded', () => {
    pmUpdateCount();
    document.getElementById('pm-body')?.addEventListener('input', pmUpdateCount);

    const input = document.getElementById('pm-recipient-search');
    input?.addEventListener('input', pmFilterRecipients);
});
</script>
@endsection