@extends('layouts.admin', ['title' => 'Notifications', 'currentPage' => 'dashboard', 'breadcrumbs' => [ ['title' => 'Notifications'] ]])

@section('content')
<div class="max-w-6xl mx-auto p-6">
    <div class="bg-white rounded-2xl shadow-lg p-6">
        <div class="flex items-center justify-between mb-4">
            <h1 class="text-xl font-bold text-gray-800">Notifications</h1>
            <div class="space-x-2">
                <button id="btnMarkAllRead" class="px-3 py-2 text-sm border rounded-lg hover:bg-gray-50">Mark all read</button>
                <button id="btnArchiveAll" class="px-3 py-2 text-sm border rounded-lg hover:bg-gray-50">Archive all</button>
            </div>
        </div>
        <div class="flex items-center gap-3 mb-4">
            <button id="tabUnread" class="px-3 py-2 text-sm rounded-lg bg-blue-100 text-blue-800">Unread</button>
            <button id="tabAll" class="px-3 py-2 text-sm rounded-lg hover:bg-gray-50">All</button>
            <button id="tabArchived" class="px-3 py-2 text-sm rounded-lg hover:bg-gray-50">Archived</button>
            <div class="ml-auto flex items-center gap-2">
                <input type="text" id="filterSearch" placeholder="Search" class="px-3 py-2 border rounded-lg text-sm">
                <select id="filterType" class="px-3 py-2 border rounded-lg text-sm">
                    <option value="">All types</option>
                    <option value="survey">Survey</option>
                    <option value="poll">Poll</option>
                    <option value="board">Board</option>
                    <option value="forum">Forum</option>
                    <option value="readings">Readings</option>
                </select>
            </div>
        </div>

        <div class="divide-y border rounded-lg" id="notificationsList"></div>
        <div id="notifError" class="hidden mt-3 text-sm text-red-600">Failed to load notifications.</div>
    </div>
    <div class="bg-white rounded-2xl shadow-lg p-6 mt-6">
        <h2 class="text-lg font-semibold text-gray-800 mb-3">Publish a notification</h2>
        <div class="grid grid-cols-1 sm:grid-cols-4 gap-3 items-end">
            <div>
                <label class="block text-xs text-gray-600 mb-1">Title</label>
                <input id="pubTitle" type="text" class="w-full px-3 py-2 border rounded-lg text-sm" placeholder="What’s new?">
            </div>
            <div>
                <label class="block text-xs text-gray-600 mb-1">Type</label>
                <select id="pubType" class="w-full px-3 py-2 border rounded-lg text-sm">
                    <option value="general">General</option>
                    <option value="survey">Survey</option>
                    <option value="poll">Poll</option>
                    <option value="board">Board</option>
                    <option value="forum">Forum</option>
                    <option value="readings">Readings</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-600 mb-1">URL (optional)</label>
                <input id="pubUrl" type="url" class="w-full px-3 py-2 border rounded-lg text-sm" placeholder="https://...">
            </div>
            <div>
                <button id="btnPublish" class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg text-sm">Publish</button>
            </div>
        </div>
        <div id="pubMsg" class="mt-2 text-sm text-gray-500 hidden"></div>
    </div>
</div>
<!-- Slide-over modal for details/results -->
<div id="notifModal" class="hidden fixed inset-0 z-50">
    <div class="absolute inset-0 bg-black/50" data-close></div>
    <div class="absolute right-0 top-0 h-full w-full sm:w-[480px] bg-white shadow-xl flex flex-col">
        <div class="p-3 border-b flex items-center justify-between">
            <h3 class="font-semibold text-gray-800 text-sm">Details</h3>
            <button class="text-gray-500 hover:text-gray-700" data-close><i class="fas fa-times"></i></button>
        </div>
        <iframe id="notifFrame" src="" class="flex-1 w-full border-0"></iframe>
    </div>
    
</div>
@endsection

@push('scripts')
<script>
(function initNotifications(){
    // Ensure elements exist (PJAX-safe)
    if (!document.getElementById('notificationsList')) { setTimeout(initNotifications, 50); return; }
(async function(){
    const list = document.getElementById('notificationsList');
    const tabUnread = document.getElementById('tabUnread');
    const tabAll = document.getElementById('tabAll');
    const tabArchived = document.getElementById('tabArchived');
    const filterType = document.getElementById('filterType');
    const filterSearch = document.getElementById('filterSearch');
    const serverState = await fetch('/admin/api/notifications/state', { credentials:'same-origin' }).then(r=>r.json()).catch(()=>({read:[],archived:[]}));
    const readSet = new Set(serverState.read || []);
    const archivedSet = new Set(serverState.archived || []);
    let showUnreadOnly = true; // if false and showArchived=false -> All; if showArchived=true -> Archived
    let showArchived = false;
    let items = [];
    try {
        const res = await fetch('/admin/api/notifications', { credentials: 'same-origin' });
        if (!res.ok) throw new Error('' + res.status);
        items = await res.json();
        render();
    } catch (e) {
        document.getElementById('notifError').classList.remove('hidden');
    }

    if (tabUnread && tabAll && tabArchived) {
        tabUnread.addEventListener('click', ()=>{ showUnreadOnly = true; showArchived=false; tabUnread.classList.add('bg-blue-100','text-blue-800'); tabAll.classList.remove('bg-blue-100','text-blue-800'); tabArchived.classList.remove('bg-blue-100','text-blue-800'); render(); });
        tabAll.addEventListener('click', ()=>{ showUnreadOnly = false; showArchived=false; tabAll.classList.add('bg-blue-100','text-blue-800'); tabUnread.classList.remove('bg-blue-100','text-blue-800'); tabArchived.classList.remove('bg-blue-100','text-blue-800'); render(); });
        tabArchived.addEventListener('click', ()=>{ showArchived=true; tabArchived.classList.add('bg-blue-100','text-blue-800'); tabUnread.classList.remove('bg-blue-100','text-blue-800'); tabAll.classList.remove('bg-blue-100','text-blue-800'); render(); });
    }
    if (filterType) filterType.addEventListener('change', render);
    if (filterSearch) filterSearch.addEventListener('input', render);

    function render(){
        const fType = filterType.value;
        const q = filterSearch.value.toLowerCase();
        const filtered = items.filter(it => {
            if (!showArchived && archivedSet.has(it.id)) return false;
            if (showArchived && !archivedSet.has(it.id)) return false;
            if (!showArchived && showUnreadOnly && readSet.has(it.id)) return false;
            if (fType && it.type !== fType) return false;
            const blob = `${it.title} ${it.course || ''}`.toLowerCase();
            return !q || blob.includes(q);
        });
        list.innerHTML = filtered.map(it => itemRow(it)).join('') || '<div class="p-4 text-sm text-gray-500">No notifications</div>';
        list.querySelectorAll('[data-action]').forEach(btn => btn.addEventListener('click', handleAction));
        list.querySelectorAll('[data-unarchive]').forEach(btn => btn.addEventListener('click', async (e)=>{ const id=e.currentTarget.getAttribute('data-unarchive'); archivedSet.delete(id); await persist('unarchive', id); render(); }));
    }

    function itemRow(it){
        const isRead = readSet.has(it.id);
        return `
            <div class="p-4 flex items-start gap-3 ${isRead ? 'opacity-70' : ''}">
                <span class="text-xl">${iconFor(it.type)}</span>
                <div class="flex-1">
                    <div class="flex items-center justify-between">
                        <div class="font-medium text-gray-800">${escapeHtml(it.title)}</div>
                        <span class="text-xs text-gray-500">${new Date(it.created_at).toLocaleString()}</span>
                    </div>
                    <div class="text-sm text-gray-500">${escapeHtml(it.course || '')}</div>
                </div>
                ${it.url ? `<a href="#" data-open="${it.url}" class="px-2 py-1 text-xs border rounded-lg hover:bg-gray-50">Open</a>` : ''}
                ${archivedSet.has(it.id) ? `<button data-unarchive="${it.id}" class="px-2 py-1 text-xs border rounded-lg hover:bg-gray-50">Unarchive</button>` : `<button data-action="toggleRead" data-id="${it.id}" class="px-2 py-1 text-xs border rounded-lg hover:bg-gray-50">${isRead?'Unread':'Read'}</button><button data-action="archive" data-id="${it.id}" class="ml-1 px-2 py-1 text-xs border rounded-lg hover:bg-gray-50">Archive</button>`}
            </div>`;
    }

    async function handleAction(e){
        const id = e.currentTarget.getAttribute('data-id');
        const action = e.currentTarget.getAttribute('data-action');
        if (action === 'toggleRead') {
            if (readSet.has(id)) readSet.delete(id); else readSet.add(id);
            await persist('toggleRead', id);
        }
        if (action === 'archive') {
            archivedSet.add(id);
            await persist('archive', id);
        }
        render();
    }
    async function persist(action, id){
        try { await fetch('/admin/api/notifications/state', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({action, id}) }); } catch(_) {}
    }

    // Bulk actions
    const btnMarkAll = document.getElementById('btnMarkAllRead');
    if (btnMarkAll) btnMarkAll.addEventListener('click', async function(){
        const ids = items.map(i=>i.id);
        ids.forEach(id=>readSet.add(id));
        try { await fetch('/admin/api/notifications/state', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({action:'markAllRead', ids}) }); } catch(_) {}
        render();
    });
    const btnArchiveAll = document.getElementById('btnArchiveAll');
    if (btnArchiveAll) btnArchiveAll.addEventListener('click', async function(){
        const ids = items.filter(i=>!archivedSet.has(i.id)).map(i=>i.id);
        ids.forEach(id=>archivedSet.add(id));
        try { await fetch('/admin/api/notifications/state', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({action:'archiveAll', ids}) }); } catch(_) {}
        render();
    });
    // Modal open for notification links using dashboard modal if present
    document.addEventListener('click', function(e){
        const open = e.target.closest('[data-open]');
        if (!open) return;
        e.preventDefault();
        const url = open.getAttribute('data-open');
        const modal = document.getElementById('notifModal');
        if (!modal) { window.open(url, '_blank'); return; }
        document.getElementById('notifFrame').src = url;
        modal.classList.remove('hidden');
    });
    const notifModal = document.getElementById('notifModal');
    if (notifModal) notifModal.addEventListener('click', function(e){ if (e.target.hasAttribute('data-close') || e.target.closest('[data-close]')) this.classList.add('hidden'); });
    // Publish admin notification
    const btnPublish = document.getElementById('btnPublish');
    if (btnPublish) btnPublish.addEventListener('click', async function(){
        const title = document.getElementById('pubTitle').value.trim();
        const type = document.getElementById('pubType').value;
        const url = document.getElementById('pubUrl').value.trim();
        const msg = document.getElementById('pubMsg');
        if (!title) { msg.textContent = 'Title is required'; msg.classList.remove('hidden'); return; }
        msg.textContent = 'Publishing…'; msg.classList.remove('hidden');
        try {
            const res = await fetch('/admin/api/notifications/publish', { method:'POST', headers:{'Content-Type':'application/json','X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}, credentials:'same-origin', body: JSON.stringify({ title, type, url }) });
            if (!res.ok) throw new Error('HTTP '+res.status);
            msg.textContent = 'Published';
            document.getElementById('pubTitle').value = '';
            document.getElementById('pubUrl').value = '';
            // reload list
            try { const r = await fetch('/admin/api/notifications', { credentials:'same-origin' }); items = await r.json(); render(); } catch(_) {}
        } catch(e){ msg.textContent = 'Failed to publish'; }
    });
})();
})();
function iconFor(t){ return t==='survey'?'📊':t==='poll'?'🗳️':t==='board'?'📌':t==='forum'?'💬':'📝'; }
function escapeHtml(s){ return (s||'').replace(/[&<>]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c])); }
</script>
@endpush