{{-- resources/views/superadmin/falcon-room/messages-members.blade.php --}}
@extends('layouts.superadmin')

@section('title','غرفة الصقر — رسائل إدارية للأعضاء')
@section('page-title','غرفة الصقر — رسائل إدارية للأعضاء')

@section('content')
@php
    use Illuminate\Pagination\LengthAwarePaginator;
    use Illuminate\Support\Str;

    // ✅ Fallback: لو $logs غير مُمرّر من الكنترولر لأي سبب، لا تُسقط الصفحة
    if (!isset($logs)) {
        $logs = new LengthAwarePaginator(
            collect(),                                 // عناصر فارغة
            0,                                         // إجمالي
            (int) request('per_page', 12),             // لكل صفحة
            (int) request('page', 1),                  // الصفحة الحالية
            ['path'=>request()->url(),'query'=>request()->query()] // حافظ على الاستعلامات
        );
    }

    // ترجمة الفئات بالعربي
    $segMap = [
        'all'        => 'جميع الأعضاء',
        'official'   => 'الأعضاء الرسميون',
        'beta'       => 'أعضاء بيتا',
        'moderators' => 'المشرفون',
        'advisors'   => 'المستشارون',
    ];
@endphp

<div class="space-y-6">

  {{-- تنبيهات --}}
  @if(session('success'))
    <div class="rounded-lg border border-emerald-300 bg-emerald-50 text-emerald-800 p-3">{{ session('success') }}</div>
  @endif
  @if(session('error'))
    <div class="rounded-lg border border-rose-300 bg-rose-50 text-rose-800 p-3">{{ session('error') }}</div>
  @endif

  {{-- HERO --}}
  <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 md:p-8">
    <div class="flex items-start justify-between gap-6">
      <div class="min-w-0">
        <div class="flex items-center gap-3 mb-2">
          <div class="grid h-12 w-12 place-items-center rounded-xl bg-blue-600/10 text-blue-600 dark:text-blue-300">
            <svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor"><path d="M3 8l9 6 9-6-9-6-9 6zm0 2l9 6 9-6v6l-9 6-9-6v-6z"/></svg>
          </div>
          <h1 class="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white">غرفة الصقر — رسائل إدارية للأعضاء</h1>
        </div>
        <p class="text-gray-700 dark:text-gray-300">
          إرسال إشعارات Firebase لكل الأعضاء أو لفئات محددة مع حفظ سجلّ مُفصّل بكل عملية.
        </p>
      </div>
    </div>
  </div>

  {{-- نموذج إنشاء رسالة --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-100 dark:border-gray-700">
    <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">إنشاء رسالة جديدة</h3>

    {{-- عرض أخطاء التحقق --}}
    @if ($errors->any())
      <div class="rounded-lg border border-rose-300 bg-rose-50 text-rose-800 p-3 mb-4 text-sm">
        <ul class="list-disc list-inside">
          @foreach ($errors->all() as $err)
            <li>{{ $err }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <form method="POST" action="{{ route('superadmin.falcon-room.messages.members.send') }}"
          class="grid grid-cols-1 md:grid-cols-3 gap-4" novalidate>
      @csrf

      <div class="md:col-span-2">
        <label class="block text-sm mb-1">عنوان الرسالة</label>
        <input type="text" name="title" required maxlength="200"
               value="{{ old('title') }}"
               class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white px-3 py-2.5"
               autocomplete="off">
      </div>

      <div>
        <label class="block text-sm mb-1">الفئة المستهدفة</label>
        <select name="segment" required
                class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white px-3 py-2.5">
          @foreach ($segMap as $k=>$label)
            <option value="{{ $k }}" @selected(old('segment','all')===$k)>{{ $label }}</option>
          @endforeach
        </select>
      </div>

      <div class="md:col-span-3">
        <label class="block text-sm mb-1">نص الرسالة</label>
        <textarea name="content" rows="4" required maxlength="2000"
                  class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white px-3 py-2.5">{{ old('content') }}</textarea>
      </div>

      <div>
        <label class="block text-sm mb-1">الأولوية</label>
        <select name="priority"
                class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white px-3 py-2.5">
          <option value="normal" @selected(old('priority','normal')==='normal')>عادية</option>
          <option value="high"   @selected(old('priority')==='high')>عالية</option>
          <option value="urgent" @selected(old('priority')==='urgent')>عاجلة</option>
        </select>
      </div>

      <div>
        <label class="block text-sm mb-1">أيقونة (اختياري)</label>
        <input type="url" name="icon" maxlength="255" placeholder="https://…"
               value="{{ old('icon') }}"
               class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white px-3 py-2.5">
      </div>

      <div>
        <label class="block text-sm mb-1">اللون (اختياري)</label>
        <input type="text" name="color" maxlength="20" placeholder="#0ea5e9"
               pattern="^#?[0-9a-fA-F]{3,6}$"
               title="مثال: #0ea5e9 أو 0ea5e9"
               value="{{ old('color') }}"
               class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white px-3 py-2.5">
      </div>

      <div class="md:col-span-3 flex items-center justify-end gap-2">
        <button type="submit"
                class="px-5 py-2.5 rounded-lg bg-gradient-to-r from-blue-500 to-cyan-600 text-white font-semibold hover:from-blue-600 hover:to-cyan-700">
          🚀 إرسال الآن
        </button>
      </div>
    </form>
  </div>

  {{-- السجلّات --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 font-semibold flex items-center justify-between">
      <span>آخر الرسائل المُرسلة</span>
      <form method="GET" class="flex items-center gap-2">
        <select name="segment" class="rounded-lg bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-sm">
          <option value="">جميع الفئات</option>
          @foreach ($segMap as $k=>$label)
            <option value="{{ $k }}" @selected(request('segment')===$k)>{{ $label }}</option>
          @endforeach
        </select>
        <input type="text" name="search" value="{{ request('search') }}" placeholder="بحث…"
               maxlength="100"
               class="rounded-lg bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-sm px-3 py-1.5">
        <button class="px-3 py-1.5 rounded-lg bg-primary-600 text-white">بحث</button>
      </form>
    </div>

    <div class="divide-y divide-gray-100 dark:divide-gray-700">
      @forelse($logs as $log)
        <div class="grid grid-cols-1 md:grid-cols-12 gap-3 px-4 py-3">
          <div class="md:col-span-6">
            <div class="font-bold text-gray-900 dark:text-white">{{ $log->title }}</div>
            <div class="text-sm text-gray-600 dark:text-gray-300">{{ $log->content }}</div>
            @if($log->icon)
              <div class="text-xs text-gray-500">Icon: {{ $log->icon }}</div>
            @endif
          </div>

          <div class="md:col-span-3 text-sm">
            <div><span class="text-gray-500">الفئة: </span>{{ $segMap[$log->segment] ?? $log->segment }}</div>
            <div><span class="text-gray-500">الأولوية: </span>{{ $log->priority }}</div>
            <div>
              <span class="text-gray-500">الحالة: </span>
              @if($log->status === 'sent')
                <span class="px-2 py-0.5 rounded bg-emerald-50 text-emerald-700 text-xs">تم الإرسال</span>
              @else
                <span class="px-2 py-0.5 rounded bg-rose-50 text-rose-700 text-xs">فشل</span>
              @endif
            </div>
          </div>

          <div class="md:col-span-3 text-xs text-gray-500 dark:text-gray-400">
            <div>المرسل: {{ optional($log->sender)->name ?? '—' }}</div>
            <div>التاريخ: {{ $log->created_at->format('Y-m-d H:i') }}</div>
            @if($log->error_message)
              <div class="mt-1 text-rose-600">خطأ: {{ Str::limit($log->error_message, 120) }}</div>
            @endif
          </div>
        </div>
      @empty
        <div class="px-4 py-8 text-center text-sm text-gray-500">لا توجد رسائل بعد.</div>
      @endforelse
    </div>

    @if(method_exists($logs, 'hasPages') && $logs->hasPages())
      <div class="px-4 py-3">
        {{ $logs->withQueryString()->links() }}
      </div>
    @endif
  </div>

</div>
@endsection