@extends('layouts.superadmin')

@section('title','غرفة الصقر — ملف متابعة: '.$user->name)
@section('page-title','غرفة الصقر — ملف متابعة العضو')

@section('content')

@php
  $needsAttentionLevels = ['watch','needs_attention'];
  $isAttention = in_array($case->level, $needsAttentionLevels);

  $upcomingFollowups = $case->notes
      ->filter(function($n){ return $n->next_action_at && $n->next_action_at->isFuture(); })
      ->sortBy('next_action_at')
      ->take(3);

  $lastNote = $case->notes->sortByDesc('created_at')->first();
@endphp

{{-- هيرو العضو --}}
<section class="relative overflow-hidden rounded-3xl border border-white/30 dark:border-gray-800 
                bg-gradient-to-br from-cyan-50 via-emerald-50 to-amber-50 
                dark:from-cyan-900/20 dark:via-emerald-900/20 dark:to-amber-900/20 mb-6 shadow-lg backdrop-blur">
  
  <div class="absolute -top-32 -start-32 w-[650px] h-[650px] rounded-full blur-3xl 
              bg-gradient-to-tr from-cyan-400/25 via-emerald-400/20 to-amber-400/25"></div>
  <div class="absolute -bottom-36 -end-36 w-[480px] h-[480px] rounded-full blur-3xl 
              bg-gradient-to-tr from-fuchsia-400/20 via-indigo-400/20 to-sky-400/20 animate-[spin_30s_linear_infinite]"></div>

  <div class="relative z-10 px-6 md:px-10 py-8 md:py-10">
    <div class="flex flex-col md:flex-row md:items-center gap-4">
      {{-- الصورة --}}
      <div class="shrink-0">
        <div class="w-20 h-20 rounded-2xl overflow-hidden border-4 border-white dark:border-gray-700 shadow-lg">
          <img src="{{ $user->avatar_url ?? asset('default-avatar.png') }}" class="w-full h-full object-cover">
        </div>
      </div>

      <div class="flex-1 min-w-0">
        <h1 class="text-2xl md:text-3xl font-black text-gray-900 dark:text-white truncate">
          {{ $user->name }}
        </h1>
        <p class="text-gray-600 dark:text-gray-300 text-sm truncate">
          {{ $user->username }} • {{ $user->email }}
        </p>

        <div class="mt-3 flex flex-wrap items-center gap-2 text-xs">
          {{-- حالة الملف --}}
          <span class="px-3 py-1 rounded-full font-semibold 
            {{ $case->status=='open' 
                ? 'bg-emerald-100 text-emerald-800 border border-emerald-300/60' 
                : 'bg-gray-200 text-gray-700 border border-gray-300/70' }}">
            {{ $case->status=='open' ? 'ملف مفتوح' : 'ملف مغلق' }}
          </span>

          {{-- مستوى العضو --}}
          <span class="px-3 py-1 rounded-full font-semibold
            @if($case->level=='normal') bg-blue-100 text-blue-800 border border-blue-300/70
            @elseif($case->level=='watch') bg-amber-100 text-amber-800 border border-amber-300/70
            @elseif($case->level=='needs_attention') bg-rose-100 text-rose-800 border border-rose-300/70
            @else bg-emerald-100 text-emerald-800 border border-emerald-300/70 @endif">
            @switch($case->level)
              @case('normal') عادي @break
              @case('watch') تحت المراقبة @break
              @case('needs_attention') يحتاج اهتمام @break
              @case('star') عضو نجم ⭐ @break
            @endswitch
          </span>

          @if($lastNote)
            <span class="px-3 py-1 rounded-full bg-white/70 dark:bg-gray-900/70 border border-white/60 dark:border-gray-700 text-gray-700 dark:text-gray-200">
              آخر ملاحظة: {{ $lastNote->created_at->diffForHumans() }}
            </span>
          @endif
        </div>

        <p class="mt-3 text-xs text-gray-700/80 dark:text-gray-200/80 max-w-3xl leading-relaxed">
          هذا الملف مخصص لمتابعة <span class="font-semibold">{{ $user->name }}</span> إداريًا وإنسانيًا:
          تسجيل الإشادات، الإنذارات، المشاكل، وجلسات المتابعة، مع خطة عمل واضحة.
        </p>
      </div>

      {{-- مؤشر حاجة للاهتمام --}}
      @if($isAttention)
        <div class="md:w-64">
          <div class="rounded-2xl border border-rose-300/70 dark:border-rose-800 bg-rose-50/90 dark:bg-rose-900/40 p-4 shadow-sm">
            <div class="flex items-center gap-2 text-rose-800 dark:text-rose-100">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M12 9v3m0 4h.01M4.93 4.93l14.14 14.14M12 2a10 10 0 100 20 10 10 0 000-20z" />
              </svg>
              <span class="font-semibold">
                هذا العضو محدّد كـ
                {{ $case->level=='watch' ? 'تحت المراقبة' : 'يحتاج اهتمام خاص' }}.
              </span>
            </div>
            <p class="mt-2 text-[11px] leading-5 text-rose-900/80 dark:text-rose-100/80">
              يُفضّل متابعة هذا الملف بانتظام، وإضافة ملاحظات لكل تطوّر أو جلسة مع العضو.
            </p>
          </div>
        </div>
      @endif

    </div>
  </div>
</section>


{{-- شبكة المحتوى: يسار (إعدادات + استعلامات) / يمين (ملاحظات) --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

  {{-- العمود الأيسر: حالة الملف + استعلامات + متابعات فعّالة --}}
  <div class="space-y-5 lg:col-span-1">

    {{-- تحديث حالة الملف (تصميم زجاجي/ملون) --}}
    <div class="relative overflow-hidden rounded-2xl border border-emerald-200/70 dark:border-emerald-800/70
                bg-gradient-to-br from-emerald-50/90 via-cyan-50/90 to-white/90 
                dark:from-emerald-900/40 dark:via-cyan-900/40 dark:to-gray-900/60 shadow-md">
      <div class="absolute -top-10 -end-10 w-32 h-32 rounded-full bg-emerald-400/15 blur-2xl"></div>
      <div class="absolute -bottom-16 -start-16 w-40 h-40 rounded-full bg-cyan-400/15 blur-3xl"></div>

      <div class="relative z-10 p-5">
        <h2 class="font-bold text-sm md:text-base mb-1 text-emerald-900 dark:text-emerald-100 flex items-center gap-2">
          <span>ضبط حالة متابعة العضو</span>
          <span class="text-[10px] px-2 py-0.5 rounded-full bg-white/70 dark:bg-gray-900/70 border border-emerald-200/60 dark:border-emerald-700/70 text-emerald-700 dark:text-emerald-200">
            للصقر والإدارة فقط
          </span>
        </h2>
        <p class="text-[11px] text-emerald-900/80 dark:text-emerald-100/80 mb-4 leading-5">
          حدّد حالة الملف ومستوى العضو وسبب التركيز، واكتب خطة عمل مختصرة لما تنوي القيام به معه
          (متابعة، جلسة دعم، مراقبة سلوك، ترشيح لترقية...).
        </p>

        <form method="POST" action="{{ route('superadmin.falcon.member_care.store_case', $user) }}" class="space-y-3">
          @csrf

          <div class="grid grid-cols-1 gap-3">
            <div>
              <label class="text-xs font-semibold text-emerald-900 dark:text-emerald-100">حالة الملف</label>
              <select name="status"
                      class="mt-1 w-full rounded-lg border-emerald-200/80 dark:border-emerald-700/80 bg-white/80 dark:bg-gray-900/80 text-xs text-gray-900 dark:text-gray-100 focus:ring-emerald-500 focus:border-emerald-500">
                <option value="open"  @selected($case->status=='open')>ملف مفتوح (تحت المتابعة)</option>
                <option value="closed" @selected($case->status=='closed')>ملف مغلق (لا حاجة لمتابعة حالياً)</option>
              </select>
            </div>

            <div>
              <label class="text-xs font-semibold text-emerald-900 dark:text-emerald-100">مستوى العضو</label>
              <select name="level"
                      class="mt-1 w-full rounded-lg border-emerald-200/80 dark:border-emerald-700/80 bg-white/80 dark:bg-gray-900/80 text-xs text-gray-900 dark:text-gray-100 focus:ring-emerald-500 focus:border-emerald-500">
                <option value="normal" @selected($case->level=='normal')>عادي — لا توجد ملاحظات خاصة</option>
                <option value="watch" @selected($case->level=='watch')>تحت المراقبة — نراجع سلوكه بشكل دوري</option>
                <option value="needs_attention" @selected($case->level=='needs_attention')>يحتاج اهتمام — مشاكل/ضعف يحتاج تدخل</option>
                <option value="star" @selected($case->level=='star')>عضو نجم ⭐ — نتابع نجاحه وتميّزه</option>
              </select>
            </div>

            <div>
              <label class="text-xs font-semibold text-emerald-900 dark:text-emerald-100">سبب التركيز على هذا العضو</label>
              <input type="text" name="focus_reason"
                     value="{{ $case->focus_reason }}"
                     class="mt-1 w-full rounded-lg border-emerald-200/80 dark:border-emerald-700/80 bg-white/80 dark:bg-gray-900/80 text-xs text-gray-900 dark:text-gray-100 focus:ring-emerald-500 focus:border-emerald-500"
                     placeholder="مثال: ضعف متكرر بالحضور، مشاكل مع الأعضاء، أداء مميز جداً...">
            </div>

            <div>
              <label class="text-xs font-semibold text-emerald-900 dark:text-emerald-100">خطة العمل (بشكل ملخّص)</label>
              <textarea name="plan_summary" rows="3"
                        class="mt-1 w-full rounded-lg border-emerald-200/80 dark:border-emerald-700/80 bg-white/80 dark:bg-gray-900/80 text-xs text-gray-900 dark:text-gray-100 focus:ring-emerald-500 focus:border-emerald-500"
                        placeholder="مثال: متابعة أسبوعية، جلسة خاصة مع سيف، مراقبة تفاعله في اللايفات، ترشيح لجائزة شهرية...">{{ $case->plan_summary }}</textarea>
            </div>
          </div>

          <button class="w-full mt-2 px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold shadow-md">
            حفظ إعدادات المتابعة
          </button>
        </form>
      </div>
    </div>

    {{-- متابعات فعّالة (ملاحظات فيها موعد متابعة) --}}
    <div class="rounded-2xl border border-primary-200/80 dark:border-primary-700/80 bg-white/90 dark:bg-gray-900/80 shadow-sm p-5">
      <h3 class="text-sm font-semibold text-primary-900 dark:text-primary-100 flex items-center gap-2 mb-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 8v4l2 2m4-6a8 8 0 11-16 0 8 8 0 0116 0z" />
        </svg>
        متابعات فعّالة لهذا العضو
      </h3>
      <p class="text-[11px] text-gray-600 dark:text-gray-300 mb-3">
        تظهر هنا الملاحظات التي تم تحديد موعد متابعة لها. استخدمها لتعرف من يحتاج متابعة قريبة.
      </p>

      @if($upcomingFollowups->isNotEmpty())
        <ul class="space-y-2 text-xs">
          @foreach($upcomingFollowups as $n)
            <li class="rounded-lg border border-primary-100 dark:border-primary-700 bg-primary-50/80 dark:bg-primary-900/30 px-3 py-2">
              <div class="flex items-center justify-between gap-2">
                <span class="font-semibold text-primary-900 dark:text-primary-50">
                  المتابعة: {{ $n->next_action_at->format('Y-m-d') }}
                </span>
                <span class="text-[10px] text-primary-800/80 dark:text-primary-100/80">
                  {{ $n->created_at->diffForHumans() }}
                </span>
              </div>
              <div class="mt-1 text-[11px] text-primary-950/80 dark:text-primary-50/90 line-clamp-2">
                {{ $n->body }}
              </div>
            </li>
          @endforeach
        </ul>
      @else
        <p class="text-[11px] text-gray-500 dark:text-gray-400">
          لا توجد متابعات مجدولة حاليًا. يمكنك إضافة ملاحظة جديدة وتحديد موعد متابعة لها.
        </p>
      @endif
    </div>

    {{-- معرض استعلامات وشرح --}}
    <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white/90 dark:bg-gray-900/80 shadow-sm p-5">
      <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
        معرض استعلامات &amp; شرح استخدام الملف
      </h3>
      <p class="text-[11px] text-gray-600 dark:text-gray-300 mb-3">
        أفكار عملية لكيفية استخدام ملف المتابعة، وأسئلة جاهزة تساعد الصقر والإدارة على قراءة وضع العضو بسرعة:
      </p>

      <div class="space-y-3 text-[11px] text-gray-700 dark:text-gray-200">
        <div>
          <p class="font-semibold mb-1">أسئلة ذكية يمكن للصقر يسأل نفسه:</p>
          <ul class="list-disc list-inside space-y-0.5">
            <li>هل هذا العضو يتحسن أم يتراجع خلال آخر شهر؟</li>
            <li>كم مرة تم تسجيل إنذار/مشكلة له مقابل إشادات؟</li>
            <li>هل يحتاج جلسة دعم فردية أم ضبط إداري؟</li>
          </ul>
        </div>

        <div>
          <p class="font-semibold mb-1">أمثلة لملاحظات مفيدة:</p>
          <div class="flex flex-wrap gap-1.5">
            <span class="px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-100">
              إشادة: التزام قوي بحضور اللايفات هذا الأسبوع.
            </span>
            <span class="px-2 py-0.5 rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-100">
              تحذير: نقاش حاد مع عضو آخر، تم تنبيهه شفهيًا.
            </span>
            <span class="px-2 py-0.5 rounded-full bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-100">
              خطة: جلسة متابعة مع سيف يوم الجمعة لمناقشة وضعه.
            </span>
          </div>
        </div>

        <div>
          <p class="font-semibold mb-1">متى نرفع مستوى العضو إلى "يحتاج اهتمام"؟</p>
          <ul class="list-disc list-inside space-y-0.5">
            <li>وجود أكثر من مشكلة/إنذار خلال فترة قصيرة.</li>
            <li>تراجع حاد بالحضور أو المزاج العام في التيم.</li>
            <li>مشاكل شخصية تحتاج احتواء ودعم من الإدارة.</li>
          </ul>
        </div>
      </div>
    </div>

  </div>

  {{-- العمود الأيمن: الملاحظات (التايم لاين) --}}
  <div class="lg:col-span-2 space-y-5">

    {{-- إضافة ملاحظة جديدة --}}
    <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-gradient-to-br from-gray-50 via-white to-gray-50 dark:from-gray-900 dark:via-gray-900 dark:to-gray-950 shadow-sm p-5">
      <h2 class="font-bold text-sm md:text-base mb-2 text-gray-900 dark:text-white flex items-center gap-2">
        <span>إضافة ملاحظة جديدة لهذا العضو</span>
        <span class="text-[10px] px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300">
          تظهر مباشرة في التايم لاين
        </span>
      </h2>
      <p class="text-[11px] text-gray-600 dark:text-gray-300 mb-3">
        اختر نوع الملاحظة، ثم اكتب ما حدث أو ما الذي تريده من العضو. يمكنك تحديد موعد متابعة إذا أردت تذكيرًا إداريًا.
      </p>

      <form method="POST" action="{{ route('superadmin.falcon.member_care.store_note',$user) }}" class="space-y-3">
        @csrf

        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
          <select name="type"
                  class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-white text-sm">
            <option value="info">ملاحظة عامة</option>
            <option value="praise">إشادة ✨</option>
            <option value="warning">إنذار ⚠️</option>
            <option value="issue">مشكلة 🚫</option>
            <option value="meeting">جلسة متابعة 👥</option>
            <option value="private">ملاحظة سرية 🔒</option>
          </select>

          <input name="next_action_at" type="date"
                 class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-white text-sm"
                 placeholder="موعد متابعة (اختياري)">

          <button class="bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg px-4 py-2 text-sm">
            إضافة الملاحظة
          </button>
        </div>

        <textarea name="body" rows="2"
                  class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-white text-sm"
                  placeholder="اكتب هنا تفاصيل الملاحظة أو ما حدث مع العضو، أو ما الذي تريده منه في الفترة القادمة..."></textarea>
      </form>
    </div>

    {{-- قائمة الملاحظات --}}
    <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white/90 dark:bg-gray-900/90 shadow-sm p-5">
      <h2 class="font-bold text-sm md:text-base mb-4 text-gray-900 dark:text-white flex items-center gap-2">
        التايم لاين — كل ما تم تسجيله على هذا العضو
      </h2>

      <div class="space-y-4">
        @forelse($case->notes as $note)
          <div class="p-4 rounded-xl border
            @switch($note->type)
              @case('praise') border-emerald-200 bg-emerald-50/80 dark:border-emerald-800 dark:bg-emerald-900/20 @break
              @case('warning') border-amber-200 bg-amber-50/80 dark:border-amber-800 dark:bg-amber-900/20 @break
              @case('issue') border-rose-200 bg-rose-50/80 dark:border-rose-800 dark:bg-rose-900/20 @break
              @case('meeting') border-sky-200 bg-sky-50/80 dark:border-sky-800 dark:bg-sky-900/20 @break
              @case('private') border-purple-200 bg-purple-50/80 dark:border-purple-800 dark:bg-purple-900/20 @break
              @default border-gray-200 bg-gray-50/80 dark:border-gray-700 dark:bg-gray-900/60
            @endswitch">
            <div class="flex items-center justify-between mb-1">
              <span class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                @switch($note->type)
                  @case('info') ملاحظة عامة @break
                  @case('praise') إشادة ✨ @break
                  @case('warning') إنذار ⚠️ @break
                  @case('issue') مشكلة 🚫 @break
                  @case('meeting') جلسة متابعة 👥 @break
                  @case('private') ملاحظة سرية 🔒 @break
                @endswitch
              </span>

              <span class="text-[11px] text-gray-500 dark:text-gray-400">
                {{ $note->created_at->diffForHumans() }} • {{ $note->creator->name }}
              </span>
            </div>

            <div class="text-sm text-gray-800 dark:text-gray-100 whitespace-pre-line">
              {{ $note->body }}
            </div>

            @if($note->next_action_at)
              <div class="mt-2 text-[11px] font-semibold
                          {{ $note->next_action_at->isPast() ? 'text-rose-700 dark:text-rose-300' : 'text-primary-700 dark:text-primary-300' }}">
                المتابعة القادمة: {{ $note->next_action_at->format('Y-m-d') }}
                @if($note->next_action_at->isPast())
                  (موعد متابعة متأخر — يفضّل مراجعة الملف الآن)
                @endif
              </div>
            @endif
          </div>
        @empty
          <p class="text-gray-500 dark:text-gray-300 text-center py-6 text-sm">
            لا توجد ملاحظات بعد. ابدأ بإضافة أول ملاحظة من النموذج أعلاه.
          </p>
        @endforelse
      </div>
    </div>

  </div>

</div>

@endsection