@extends('layouts.member')

@section('title', 'مركز النشاط')

@push('styles')
<style>
    .glass {
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-black px-4 sm:px-6 lg:px-8 py-6">
    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 glass shadow-2xl">
        <div class="absolute -top-24 -right-24 w-72 h-72 rounded-full bg-indigo-500/20 blur-3xl"></div>
        <div class="absolute -bottom-28 -left-24 w-80 h-80 rounded-full bg-fuchsia-500/15 blur-3xl"></div>

        <div class="relative p-5 sm:p-6 flex items-start justify-between gap-4">
            <div class="min-w-0">
                <h1 class="text-xl sm:text-2xl font-extrabold text-white truncate">مركز النشاط</h1>
                <p id="mh-sub" class="mt-1 text-[12px] text-white/70">
                    سجلاتك الخاصة فقط داخل النظام.
                </p>

                {{-- quick chips --}}
                <div class="mt-3 flex flex-wrap items-center gap-2 text-[11px]">
                    <span class="px-2 py-1 rounded-full border border-white/10 bg-white/5 text-white/80 font-bold">
                        ID: <span class="text-white">{{ auth()->id() }}</span>
                    </span>
                    <span id="mh-total-chip" class="hidden px-2 py-1 rounded-full border border-rose-400/30 bg-rose-500/10 text-rose-200 font-extrabold">
                        جديد: <span id="mh-total-n">0</span>
                    </span>
                </div>
            </div>

            {{-- actions --}}
            <div class="flex items-center gap-2">
                <button id="mh-markread"
                        class="px-3 py-2 rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 text-white text-[12px] font-extrabold transition disabled:opacity-40 disabled:pointer-events-none">
                    كمقروء
                </button>

                <button id="mh-refresh"
                        class="px-3 py-2 rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 text-white text-[12px] font-extrabold transition">
                    تحديث
                </button>
            </div>
        </div>
    </div>

    {{-- TABS --}}
    <div class="mt-4 grid grid-cols-3 sm:grid-cols-6 gap-2">
        {{-- ملاحظات --}}
        <button data-tab="my_eval_notes" class="mh-tab relative rounded-2xl px-3 py-3 border border-white/10 bg-white/5 hover:bg-white/10 transition text-white">
            <div class="flex flex-col items-center gap-1">
                <i class="fa-solid fa-clipboard-check text-[16px]"></i>
                <span class="text-[12px] font-extrabold">ملاحظات</span>
            </div>
            <span id="mh-badge-notes"
                  class="hidden absolute -top-1 -right-1 min-w-[20px] h-5 px-1.5 rounded-full bg-rose-500 text-white text-[10px] font-extrabold ring-2 ring-slate-950">
                0
            </span>
        </button>

        {{-- تكريم --}}
        <button data-tab="my_honors" class="mh-tab relative rounded-2xl px-3 py-3 border border-white/10 bg-white/5 hover:bg-white/10 transition text-white">
            <div class="flex flex-col items-center gap-1">
                <i class="fa-solid fa-trophy text-[16px]"></i>
                <span class="text-[12px] font-extrabold">تكريم</span>
            </div>
            <span id="mh-badge-honors"
                  class="hidden absolute -top-1 -right-1 min-w-[20px] h-5 px-1.5 rounded-full bg-rose-500 text-white text-[10px] font-extrabold ring-2 ring-slate-950">
                0
            </span>
        </button>

        {{-- طلبات --}}
        <button data-tab="my_requests" class="mh-tab relative rounded-2xl px-3 py-3 border border-white/10 bg-white/5 hover:bg-white/10 transition text-white">
            <div class="flex flex-col items-center gap-1">
                <i class="fa-solid fa-list-check text-[16px]"></i>
                <span class="text-[12px] font-extrabold">طلبات</span>
            </div>
            <span id="mh-badge-requests"
                  class="hidden absolute -top-1 -right-1 min-w-[20px] h-5 px-1.5 rounded-full bg-rose-500 text-white text-[10px] font-extrabold ring-2 ring-slate-950">
                0
            </span>
        </button>

        {{-- حضور --}}
        <button data-tab="presence" class="mh-tab relative rounded-2xl px-3 py-3 border border-white/10 bg-white/5 hover:bg-white/10 transition text-white">
            <div class="flex flex-col items-center gap-1">
                <i class="fa-solid fa-users text-[16px]"></i>
                <span class="text-[12px] font-extrabold">حضور</span>
            </div>
            <span id="mh-badge-presence"
                  class="hidden absolute -top-1 -right-1 min-w-[20px] h-5 px-1.5 rounded-full bg-rose-500 text-white text-[10px] font-extrabold ring-2 ring-slate-950">
                0
            </span>
        </button>

        {{-- علاماتي --}}
        <button data-tab="marks" class="mh-tab relative rounded-2xl px-3 py-3 border border-white/10 bg-white/5 hover:bg-white/10 transition text-white">
            <div class="flex flex-col items-center gap-1">
                <i class="fa-solid fa-star text-[16px]"></i>
                <span class="text-[12px] font-extrabold">علاماتي</span>
            </div>
            {{-- dot --}}
            <span id="mh-dot-marks"
                  class="hidden absolute -top-1 -right-1 w-2.5 h-2.5 rounded-full bg-rose-500 ring-2 ring-slate-950"></span>
        </button>

        {{-- داخلي --}}
        <button data-tab="internal" class="mh-tab relative rounded-2xl px-3 py-3 border border-white/10 bg-white/5 hover:bg-white/10 transition text-white">
            <div class="flex flex-col items-center gap-1">
                <i class="fa-solid fa-bell text-[16px]"></i>
                <span class="text-[12px] font-extrabold">داخلي</span>
            </div>
            <span id="mh-badge-internal"
                  class="hidden absolute -top-1 -right-1 min-w-[20px] h-5 px-1.5 rounded-full bg-rose-500 text-white text-[10px] font-extrabold ring-2 ring-slate-950">
                0
            </span>
        </button>
    </div>

    {{-- MARKS SUMMARY --}}
    <div id="mh-marks-summary" class="hidden mt-4 grid grid-cols-1 sm:grid-cols-3 gap-3">
        <div class="rounded-2xl border border-white/10 bg-white/5 glass p-4">
            <div class="text-[11px] text-white/60 font-bold">العلامة الكليّة</div>
            <div id="mh-marks-total" class="mt-1 text-lg font-extrabold text-white">—</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 glass p-4">
            <div class="text-[11px] text-white/60 font-bold">علامة الشهر</div>
            <div id="mh-marks-month" class="mt-1 text-lg font-extrabold text-white">—</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 glass p-4">
            <div class="text-[11px] text-white/60 font-bold">الشهر</div>
            <div class="mt-2 flex flex-wrap gap-2 text-[11px]">
                <span id="mh-marks-hours" class="px-2 py-1 rounded-full border border-white/10 bg-white/5 text-white/80 font-extrabold">—</span>
                <span id="mh-marks-records" class="px-2 py-1 rounded-full border border-white/10 bg-white/5 text-white/80 font-extrabold">—</span>
            </div>
        </div>
    </div>

    {{-- LIST --}}
    <div class="mt-4 rounded-3xl border border-white/10 bg-white/5 glass shadow-2xl overflow-hidden">
        <div class="p-4 border-b border-white/10 flex items-center justify-between gap-3">
            <div class="min-w-0">
                <div id="mh-list-title" class="text-white font-extrabold">داخلي</div>
                <div id="mh-list-desc" class="text-[12px] text-white/60">الإشعارات/التنبيهات الموجهة لك فقط.</div>
            </div>
            <div class="text-[11px] text-white/60 font-bold">
                <span id="mh-page-info">—</span>
            </div>
        </div>

        <div id="mh-body" class="max-h-[62vh] overflow-y-auto">
            <div class="p-10 text-center text-white/70 font-bold">جاري التحميل…</div>
        </div>

        <div class="p-3 border-t border-white/10 flex items-center justify-between">
            <div class="text-[11px] text-white/60 font-bold">Auto Refresh: <span class="text-white/80">20s</span></div>
            <a href="{{ route('general.marks.my-marks') }}" class="text-[12px] font-extrabold text-sky-300 hover:text-white transition">
                صفحة علاماتي
            </a>
        </div>
    </div>
</div>

<script>
(() => {
    const widgetUrl = @json(route('member.hub.widget'));
    const markUrl   = @json(route('member.hub.mark-read'));
    const csrf      = @json(csrf_token());

    // state
    let tab = 'internal';
    let page = 1;
    let hasMore = true;
    let loading = false;
    const per = 30;
    let lastCounts = {};

    const body = () => document.getElementById('mh-body');

    function setActiveTab(t){
        document.querySelectorAll('.mh-tab').forEach(b => {
            const is = b.getAttribute('data-tab') === t;
            b.classList.toggle('bg-white/15', is);
            b.classList.toggle('border-white/25', is);
        });
    }

    function setBadge(id, n){
        const el = document.getElementById(id);
        if(!el) return;
        n = Number(n||0);
        if(n <= 0){ el.classList.add('hidden'); el.textContent = '0'; return; }
        el.classList.remove('hidden');
        el.textContent = (n > 99 ? '99+' : String(n));
    }

    function setDot(id, on){
        const el = document.getElementById(id);
        if(!el) return;
        el.classList.toggle('hidden', !on);
    }

    function applyCounts(c){
        if(c && typeof c === 'object'){
            lastCounts = Object.assign({}, lastCounts, c);
        }

        setBadge('mh-badge-internal', lastCounts.internal || 0);
        setDot('mh-dot-marks', (Number(lastCounts.marks||0) > 0));
        setBadge('mh-badge-presence', lastCounts.presence || 0);
        setBadge('mh-badge-requests', lastCounts.my_requests || 0);
        setBadge('mh-badge-honors', lastCounts.my_honors || 0);
        setBadge('mh-badge-notes', lastCounts.my_eval_notes || 0);

        // total (بدون presence) + marks نقطة
        const total =
            Number(lastCounts.internal||0) +
            Number(lastCounts.my_requests||0) +
            Number(lastCounts.my_honors||0) +
            Number(lastCounts.my_eval_notes||0) +
            (Number(lastCounts.marks||0) > 0 ? 1 : 0);

        const chip = document.getElementById('mh-total-chip');
        const nEl  = document.getElementById('mh-total-n');
        if(total > 0){
            chip?.classList.remove('hidden');
            if(nEl) nEl.textContent = (total > 99 ? '99+' : String(total));
        } else {
            chip?.classList.add('hidden');
            if(nEl) nEl.textContent = '0';
        }
    }

    function tabMeta(t){
        switch(t){
            case 'my_eval_notes': return {title:'ملاحظات', desc:'ملاحظات المُقيّم المعتمد عنك.'};
            case 'my_honors': return {title:'تكريم', desc:'تكريماتك ومكافآتك المسجلة لك.'};
            case 'my_requests': return {title:'طلبات', desc:'طلباتك الشخصية داخل النظام.'};
            case 'presence': return {title:'حضور', desc:'سجل حضورك اليوم (Online/Tracking).'};
            case 'marks': return {title:'علاماتي', desc:'سجل نقاطك وملخص الشهر/الإجمالي.'};
            default: return {title:'داخلي', desc:'الإشعارات/التنبيهات الموجهة لك فقط.'};
        }
    }

    function canMarkRead(t){
        return t !== 'presence';
    }

    function updateMarkReadBtn(){
        const b = document.getElementById('mh-markread');
        if(!b) return;
        const ok = canMarkRead(tab);
        b.disabled = !ok;
    }

    function esc(s){
        return (s||'').toString()
            .replaceAll('&','&amp;').replaceAll('<','&lt;')
            .replaceAll('>','&gt;').replaceAll('"','&quot;')
            .replaceAll("'","&#039;");
    }

    function iconFor(t){
        // return {wrap, icon}
        switch(t){
            case 'my_eval_notes': return {wrap:'bg-indigo-500/10 border-indigo-400/20 text-indigo-200', icon:'fa-clipboard-check'};
            case 'my_honors': return {wrap:'bg-amber-500/10 border-amber-400/20 text-amber-200', icon:'fa-trophy'};
            case 'my_requests': return {wrap:'bg-sky-500/10 border-sky-400/20 text-sky-200', icon:'fa-list-check'};
            case 'presence': return {wrap:'bg-emerald-500/10 border-emerald-400/20 text-emerald-200', icon:'fa-users'};
            case 'marks': return {wrap:'bg-violet-500/10 border-violet-400/20 text-violet-200', icon:'fa-star'};
            default: return {wrap:'bg-rose-500/10 border-rose-400/20 text-rose-200', icon:'fa-bell'};
        }
    }

    function renderItems(items, t){
        if(!items || items.length === 0){
            return `<div class="p-10 text-center text-white/70 font-bold">لا يوجد شيء جديد</div>`;
        }

        const ic = iconFor(t);

        return items.map(it => {
            const title = esc(it.title || '');
            const msg   = esc(it.message || '');
            const time  = esc(it.time || '');

            let marksMeta = '';
            if (t === 'marks' && it.meta){
                const p = Number(it.meta.points||0);
                const h = Number(it.meta.hours||0);
                const src = esc(it.meta.source_type||'');

                const isPos = p > 0, isNeg = p < 0;
                const pill = isPos
                    ? "bg-emerald-500/10 border-emerald-400/20 text-emerald-200"
                    : isNeg
                        ? "bg-rose-500/10 border-rose-400/20 text-rose-200"
                        : "bg-white/5 border-white/10 text-white/70";

                const sign = p > 0 ? '+' : '';
                const lbl  = isPos ? 'إضافة' : (isNeg ? 'خصم' : '0');

                marksMeta = `
                    <div class="mt-2 flex flex-wrap gap-2 text-[11px]">
                        <span class="px-2 py-1 rounded-full border ${pill} font-extrabold">
                            ${lbl}: ${sign}${p} نقطة
                        </span>
                        ${h ? `<span class="px-2 py-1 rounded-full border bg-sky-500/10 border-sky-400/20 text-sky-200 font-extrabold">${h} س</span>` : ''}
                        ${src ? `<span class="px-2 py-1 rounded-full border bg-white/5 border-white/10 text-white/70 font-bold">${src}</span>` : ''}
                    </div>
                `;
            }

            return `
                <div class="px-4 py-3 border-b border-white/10 hover:bg-white/5 transition">
                    <div class="flex items-start gap-3">
                        <div class="w-9 h-9 rounded-2xl border ${ic.wrap} flex items-center justify-center flex-shrink-0">
                            <i class="fa-solid ${ic.icon} text-[13px]"></i>
                        </div>
                        <div class="min-w-0 flex-1">
                            <div class="text-white font-extrabold text-[13px] truncate">${title}</div>
                            <div class="mt-0.5 text-white/70 text-[12px] leading-snug">${msg}</div>
                            ${marksMeta}
                            <div class="mt-1 text-[11px] text-white/45">${time}</div>
                        </div>
                    </div>
                </div>
            `;
        }).join('');
    }

    async function fetchCounts(){
        try{
            const res = await fetch(`${widgetUrl}?tab=counts`, { headers:{'Accept':'application/json'} });
            if(!res.ok) return;
            const data = await res.json();
            applyCounts(data.counts || {});
        }catch(e){}
    }

    async function loadTab(reset = true){
        const b = body();
        if(!b) return;

        if(reset){
            page = 1;
            hasMore = true;
            loading = false;
            b.scrollTop = 0;
            b.innerHTML = `<div class="p-10 text-center text-white/70 font-bold">جاري التحميل…</div>`;
        }

        const meta = tabMeta(tab);
        document.getElementById('mh-list-title').textContent = meta.title;
        document.getElementById('mh-list-desc').textContent  = meta.desc;
        document.getElementById('mh-sub').textContent        = meta.desc;

        updateMarkReadBtn();
        document.getElementById('mh-marks-summary')?.classList.toggle('hidden', tab !== 'marks');

        try{
            const res = await fetch(`${widgetUrl}?tab=${encodeURIComponent(tab)}&page=${page}&per=${per}`, { headers:{'Accept':'application/json'} });
            if(!res.ok) throw new Error('bad');
            const data = await res.json();

            applyCounts(data.counts || {});

            // marks summary
            if(tab === 'marks' && data.marksSummary){
                const s = data.marksSummary;
                document.getElementById('mh-marks-total').textContent  = `${Number(s.total_points||0)} نقطة`;
                document.getElementById('mh-marks-month').textContent  = `${Number(s.month_points||0)} نقطة`;
                document.getElementById('mh-marks-hours').textContent  = `${Number(s.month_hours||0)} س`;
                document.getElementById('mh-marks-records').textContent= `${Number(s.month_records||0)} سجل`;
            }

            const html = renderItems(data.items || [], tab);

            if(page === 1){
                b.innerHTML = html;
            } else {
                b.insertAdjacentHTML('beforeend', html);
            }

            hasMore = !!data.has_more;
            page++;

            document.getElementById('mh-page-info').textContent = hasMore ? 'تحميل مستمر…' : 'آخر صفحة';

        }catch(e){
            b.innerHTML = `<div class="p-10 text-center text-rose-200 font-extrabold">تعذر تحميل البيانات</div>`;
        }
    }

    async function markRead(){
        if(!canMarkRead(tab)) return;
        try{
            await fetch(markUrl, {
                method:'POST',
                headers:{'Content-Type':'application/json','X-CSRF-TOKEN':csrf,'Accept':'application/json'},
                body: JSON.stringify({ tab })
            });

            // optimistic
            if(tab === 'internal') lastCounts.internal = 0;
            if(tab === 'marks') lastCounts.marks = 0;
            if(tab === 'my_requests') lastCounts.my_requests = 0;
            if(tab === 'my_honors') lastCounts.my_honors = 0;
            if(tab === 'my_eval_notes') lastCounts.my_eval_notes = 0;
            applyCounts(lastCounts);

            await fetchCounts();
            await loadTab(true);
        }catch(e){}
    }

    // events
    document.querySelectorAll('.mh-tab').forEach(btn => {
        btn.addEventListener('click', () => {
            tab = btn.getAttribute('data-tab');
            setActiveTab(tab);
            loadTab(true);

            // نفس سلوك الأدمن: marks => mark read مباشرة
            if(tab === 'marks') markRead();
        });
    });

    document.getElementById('mh-markread')?.addEventListener('click', markRead);
    document.getElementById('mh-refresh')?.addEventListener('click', async () => {
        await fetchCounts();
        await loadTab(true);
    });

    // infinite scroll
    body()?.addEventListener('scroll', () => {
        const b = body();
        if(!b) return;
        if(!hasMore || loading) return;

        const near = (b.scrollTop + b.clientHeight) >= (b.scrollHeight - 90);
        if(!near) return;

        loading = true;
        loadTab(false).finally(() => loading = false);
    });

    // boot
    setActiveTab(tab);
    fetchCounts();
    loadTab(true);

    setInterval(fetchCounts, 20000);
})();
</script>
@endsection