@extends('layouts.superadmin')

@section('title', 'ملف ملاحظات الأعضاء')
@section('page-title', 'ملف ملاحظات الأعضاء (per Member)')

@section('content')
@php
    $from     = $from ?? request('from');
    $to       = $to   ?? request('to');
    $q        = $q    ?? request('q');
    $minCount = $minCount ?? request('min', 2);

    $rows = $rows ?? collect();

    $rowsTotal = method_exists($rows, 'total')
        ? (int) $rows->total()
        : (is_countable($rows) ? count($rows) : 0);

    $baseIndexUrl = url('superadmin/falcon-room/lives-insights/feedback-analysis');
    $memberShowTemplate = url('superadmin/falcon-room/lives-insights/member-feedback/0');
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-6">
    <div class="max-w-6xl mx-auto px-4 rtl text-white">

        {{-- هيدر --}}
        <div class="mb-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="h-11 w-11 rounded-2xl bg-slate-800 flex items-center justify-center
                            ring-2 ring-emerald-500/60 shadow-lg shadow-emerald-500/30">
                    <i class="fa-solid fa-user-pen text-emerald-400 text-xl"></i>
                </div>
                <div class="text-center sm:text-right">
                    <h1 class="text-xl sm:text-2xl font-bold">ملف ملاحظات الأعضاء</h1>
                    <p class="text-sm text-slate-300/80">
                        هذه الصفحة تعرض الأعضاء الذين لديهم أكثر من ملاحظة على لايفاتهم، مع زر لفتح ملف تفصيلي:
                        كل لايف، كل ملاحظة، من كتبها، وماذا كتب.
                    </p>
                </div>
            </div>
        </div>

        {{-- فلاتر --}}
        <form method="GET" action="{{ $baseIndexUrl }}"
              class="mb-6 rounded-2xl border border-slate-700/80 bg-slate-900/90 p-4 sm:p-5 shadow-xl">
            <div class="grid gap-4 md:grid-cols-4 grid-cols-1">
                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">من</label>
                    <input type="date" name="from" value="{{ $from }}"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                  focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">إلى</label>
                    <input type="date" name="to" value="{{ $to }}"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                  focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">بحث عن عضو</label>
                    <input type="text" name="q" value="{{ $q }}"
                           placeholder="اسم / يوزر / إيميل"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm
                                  text-white placeholder:text-slate-500 focus:outline-none focus:ring-2
                                  focus:ring-emerald-500 focus:border-emerald-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">الحد الأدنى لعدد الملاحظات</label>
                    <input type="number" min="1" name="min" value="{{ $minCount }}"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                  focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                    <span class="text-[11px] text-slate-400">مثال: 2 = أظهر الأعضاء الذين لديهم ملاحظتين فأكثر.</span>
                </div>
            </div>

            <div class="mt-3 flex flex-wrap items-center gap-2">
                <button class="inline-flex items-center justify-center rounded-xl bg-emerald-500 px-4 py-2 text-sm font-semibold
                               text-slate-950 hover:bg-emerald-400 transition">
                    <i class="fa-solid fa-filter ml-2 text-xs"></i>
                    تطبيق الفلاتر
                </button>

                <a href="{{ $baseIndexUrl }}"
                   class="inline-flex items-center justify-center rounded-xl border border-slate-600 px-4 py-2 text-sm
                          font-medium text-slate-200 hover:bg-slate-800/80 transition">
                    إعادة ضبط
                </a>

                <span class="text-[11px] text-slate-400">
                    لعرض ملف عضو معيّن، اضغط زر "فتح ملف الملاحظات" أمام اسمه.
                </span>
            </div>
        </form>

        {{-- جدول الأعضاء --}}
        <div class="rounded-2xl border border-slate-700/80 bg-slate-900/90 shadow-xl overflow-hidden">
            <div class="border-b border-slate-800 px-4 py-3 flex items-center justify-between">
                <div>
                    <h2 class="text-sm sm:text-base font-semibold">أعضاء لديهم ملاحظات على اللايفات</h2>
                    <p class="text-[11px] text-slate-400">
                        الترتيب حسب عدد المرات التي ذُكرت فيها نقاط ضعف / توصيات.
                    </p>
                </div>
                <span class="text-[11px] text-slate-400">
                    عدد الأعضاء في الجدول: {{ $rowsTotal }}
                </span>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full text-xs sm:text-sm text-slate-200">
                    <thead class="bg-slate-900/90 border-b border-slate-800 text-[11px] uppercase tracking-wide">
                        <tr>
                            <th class="px-3 py-2 text-right">العضو</th>
                            <th class="px-3 py-2 text-right">إجمالي الملاحظات</th>
                            <th class="px-3 py-2 text-right">نقاط قوة</th>
                            <th class="px-3 py-2 text-right">نقاط ضعف</th>
                            <th class="px-3 py-2 text-right">توصيات</th>
                            <th class="px-3 py-2 text-right">آخر ملاحظة</th>
                            <th class="px-3 py-2 text-right">ملف الملاحظات</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-slate-800">
                        @forelse($rows as $row)
                            @php
                                $name = $row->name ?? $row->username ?? ('#'.$row->id);
                                $lastDate = $row->last_feedback_at
                                    ? \Carbon\Carbon::parse($row->last_feedback_at)->format('Y-m-d H:i')
                                    : '—';
                            @endphp
                            <tr class="hover:bg-slate-800/50">
                                <td class="px-3 py-2 align-top">
                                    <div class="flex flex-col">
                                        <span class="font-semibold text-slate-100">{{ $name }}</span>
                                        <span class="text-[11px] text-slate-400">{{ $row->username ?? '' }}</span>
                                    </div>
                                </td>
                                <td class="px-3 py-2 align-top font-semibold text-slate-100">{{ (int)($row->feedback_count ?? 0) }}</td>
                                <td class="px-3 py-2 align-top text-emerald-200">{{ (int)($row->strengths_count ?? 0) }}</td>
                                <td class="px-3 py-2 align-top text-amber-200">{{ (int)($row->weaknesses_count ?? 0) }}</td>
                                <td class="px-3 py-2 align-top text-violet-200">{{ (int)($row->suggestions_count ?? 0) }}</td>
                                <td class="px-3 py-2 align-top text-[11px] text-slate-300">{{ $lastDate }}</td>
                                <td class="px-3 py-2 align-top">
                                    <button type="button"
                                            class="btn-open-member-feedback inline-flex items-center gap-2 rounded-xl bg-emerald-500/15
                                                   border border-emerald-500/30 px-3 py-1.5 text-xs font-semibold text-emerald-200
                                                   hover:bg-emerald-500/25 transition"
                                            data-user-id="{{ $row->id }}"
                                            data-user-name="{{ e($name) }}">
                                        <i class="fa-solid fa-folder-open"></i>
                                        فتح ملف الملاحظات
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-4 py-8 text-center text-slate-400">
                                    لا يوجد أعضاء لديهم ملاحظات كافية في هذه الفترة.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if(method_exists($rows, 'hasPages') && $rows->hasPages())
                <div class="px-4 py-3 border-t border-slate-800">
                    {{ $rows->links() }}
                </div>
            @endif
        </div>

        {{-- فوتر توضيحي --}}
        <div class="mt-5 text-[11px] text-slate-500 text-center">
            هذا الملف لا يُستخدم للعقوبات المباشرة، بل لرسم صورة متراكمة عن أداء كل عضو في اللايفات،
            كي تستطيع الإدارة العليا تحديد من يحتاج تشجيع، من يحتاج تدريب، ومن يستحق تكريم.
        </div>

        {{-- Drawer ملف الملاحظات للعضو --}}
        <div id="memberFbDrawer" class="fixed inset-0 z-50 hidden">
            <div id="memberFbBackdrop" class="absolute inset-0 bg-black/60"></div>

            <div class="absolute inset-x-0 bottom-0 sm:inset-y-0 sm:right-0 sm:left-auto
                        w-full sm:w-[560px] max-h-[85vh] sm:max-h-none
                        bg-slate-950 border border-slate-700 rounded-t-2xl sm:rounded-none sm:rounded-l-2xl
                        shadow-2xl overflow-hidden flex flex-col">

                <div class="px-4 py-3 border-b border-slate-800 flex items-center justify-between">
                    <div class="flex flex-col">
                        <span class="text-xs text-slate-400">ملف ملاحظات اللايفات للعضو</span>
                        <span id="mfMemberName" class="font-semibold text-slate-100">—</span>
                        <span id="mfRange" class="text-[11px] text-slate-400">—</span>
                    </div>
                    <button id="mfClose"
                            class="h-9 w-9 rounded-xl bg-slate-800 hover:bg-slate-700 transition flex items-center justify-center">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>

                <div class="px-4 py-2 border-b border-slate-800 text-[11px] text-slate-300">
                    <p>يمثل هذا الملف جميع الملاحظات التي كُتبت على لايفات هذا العضو في الفترة المحددة، مع تفاصيل كل لايف.</p>
                </div>

                <div id="mfBody" class="p-4 overflow-y-auto flex-1 space-y-3">
                    <div id="mfLoading" class="text-slate-400 text-sm">جارِ تحميل الملاحظات...</div>
                    <div id="mfList" class="space-y-3 hidden"></div>
                </div>
            </div>
        </div>

        {{-- Toast --}}
        <div id="mfToast" class="fixed top-4 left-4 z-[60] hidden">
            <div id="mfToastBox" class="rounded-xl border border-slate-700 bg-slate-900 text-slate-200 px-4 py-3 shadow-xl text-sm"></div>
        </div>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const drawer   = document.getElementById('memberFbDrawer');
    const backdrop = document.getElementById('memberFbBackdrop');
    const btnClose = document.getElementById('mfClose');
    const nameEl   = document.getElementById('mfMemberName');
    const rangeEl  = document.getElementById('mfRange');
    const loading  = document.getElementById('mfLoading');
    const list     = document.getElementById('mfList');

    const toast    = document.getElementById('mfToast');
    const toastBox = document.getElementById('mfToastBox');

    // بدون route() نهائياً (عشان ما يوقع RouteNotFoundException)
    const urlTemplate = @json($memberShowTemplate);

    function showToast(msg) {
        toastBox.textContent = msg;
        toast.classList.remove('hidden');
        setTimeout(() => toast.classList.add('hidden'), 2500);
    }

    function openDrawer(name, from, to) {
        nameEl.textContent = name || '—';
        rangeEl.textContent = (from && to) ? `الفترة: ${from} → ${to}` : 'الفترة الحالية';
        drawer.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
        loading.classList.remove('hidden');
        list.classList.add('hidden');
        list.innerHTML = '';
    }

    function closeDrawer() {
        drawer.classList.add('hidden');
        document.body.style.overflow = '';
    }

    async function loadMemberFeedback(userId, name) {
        const params = new URLSearchParams(window.location.search);
        const from = params.get('from');
        const to   = params.get('to');

        openDrawer(name, from, to);

        let url = urlTemplate.replace(/\/0$/, '/' + userId);
        if (from || to) {
            const qp = new URLSearchParams();
            if (from) qp.set('from', from);
            if (to)   qp.set('to', to);
            url += '?' + qp.toString();
        }

        try {
            const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
            if (!res.ok) throw new Error('HTTP ' + res.status);

            const data = await res.json();
            if (!data.success) throw new Error(data.message || 'فشل الجلب');

            loading.classList.add('hidden');
            list.classList.remove('hidden');
            list.innerHTML = '';

            if (!data.items || !data.items.length) {
                const empty = document.createElement('div');
                empty.className = 'text-slate-400 text-sm';
                empty.textContent = 'لا توجد ملاحظات لهذا العضو ضمن هذه الفترة.';
                list.appendChild(empty);
                return;
            }

            data.items.forEach((it) => {
                const card = document.createElement('div');
                card.className = 'rounded-2xl border border-slate-800 bg-slate-900/80 p-3';

                const top = document.createElement('div');
                top.className = 'flex items-start justify-between gap-3 mb-2';

                const left = document.createElement('div');
                left.className = 'flex flex-col gap-0.5';

                const t1 = document.createElement('div');
                t1.className = 'font-semibold text-slate-100 text-sm';
                t1.textContent = `لايف #${it.live_id} — ${it.live_date} • ${it.live_time}`;

                const t2 = document.createElement('div');
                t2.className = 'text-[11px] text-slate-400';
                let statusTxt = `حالة: ${it.live_status} • نوع: ${it.live_type}`;
                if (it.is_sahra) statusTxt += ' • سهرة';
                t2.textContent = statusTxt;

                left.appendChild(t1);
                left.appendChild(t2);

                const right = document.createElement('div');
                right.className = 'text-[10px] text-slate-400 text-left';
                const dt = new Date(it.created_at);
                right.textContent = dt.toLocaleString('ar-EG', {
                    year:'numeric', month:'2-digit', day:'2-digit',
                    hour:'2-digit', minute:'2-digit'
                });

                top.appendChild(left);
                top.appendChild(right);

                const actor = document.createElement('div');
                actor.className = 'text-[11px] text-slate-300 mb-2';
                actor.textContent = `كتبها: ${it.actor_name}${it.actor_username ? ' (@'+it.actor_username+')' : ''}`;

                card.appendChild(top);
                card.appendChild(actor);

                if (it.strengths) {
                    const box = document.createElement('div');
                    box.className = 'rounded-xl border border-emerald-500/30 bg-emerald-500/5 p-2 mb-2';
                    const h = document.createElement('div');
                    h.className = 'text-[11px] text-emerald-300 mb-1';
                    h.textContent = 'نقاط القوة:';
                    const p = document.createElement('div');
                    p.className = 'text-[12px] text-slate-100';
                    p.textContent = it.strengths;
                    box.appendChild(h); box.appendChild(p);
                    card.appendChild(box);
                }

                if (it.weaknesses) {
                    const box = document.createElement('div');
                    box.className = 'rounded-xl border border-amber-500/30 bg-amber-500/5 p-2 mb-2';
                    const h = document.createElement('div');
                    h.className = 'text-[11px] text-amber-300 mb-1';
                    h.textContent = 'نقاط تحتاج تحسين:';
                    const p = document.createElement('div');
                    p.className = 'text-[12px] text-slate-100';
                    p.textContent = it.weaknesses;
                    box.appendChild(h); box.appendChild(p);
                    card.appendChild(box);
                }

                if (it.suggestions) {
                    const box = document.createElement('div');
                    box.className = 'rounded-xl border border-violet-500/30 bg-violet-500/5 p-2 mb-2';
                    const h = document.createElement('div');
                    h.className = 'text-[11px] text-violet-300 mb-1';
                    h.textContent = 'توصية للمرة القادمة:';
                    const p = document.createElement('div');
                    p.className = 'text-[12px] text-slate-100';
                    p.textContent = it.suggestions;
                    box.appendChild(h); box.appendChild(p);
                    card.appendChild(box);
                }

                list.appendChild(card);
            });

        } catch (e) {
            loading.classList.add('hidden');
            list.classList.remove('hidden');
            list.innerHTML = `<div class="text-rose-300 text-sm">تعذر تحميل ملف الملاحظات. (${String(e.message || e)})</div>`;
            showToast('تعذر تحميل ملف الملاحظات للعضو.');
        }
    }

    document.querySelectorAll('.btn-open-member-feedback').forEach(btn => {
        btn.addEventListener('click', () => {
            const id   = btn.dataset.userId;
            const name = btn.dataset.userName || ('#'+id);
            loadMemberFeedback(id, name);
        });
    });

    if (btnClose) btnClose.addEventListener('click', closeDrawer);
    if (backdrop) backdrop.addEventListener('click', closeDrawer);
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && !drawer.classList.contains('hidden')) closeDrawer();
    });
});
</script>
@endsection