@extends('layouts.app')

@section('title', 'Notifications')

@push('styles')
<style>
    .notifications-page-card .notification-row {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        transition: background-color 0.15s ease;
    }
    .notifications-page-card .notification-row:last-child {
        border-bottom: none;
    }
    .notifications-page-card .notification-row.is-unread {
        background: rgba(255, 193, 7, 0.12);
    }
    .notifications-page-card .notification-row:hover {
        background: rgba(0, 123, 255, 0.06);
    }
    body.dark-mode .notifications-page-card .notification-row {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }
    body.dark-mode .notifications-page-card .notification-row.is-unread {
        background: rgba(255, 193, 7, 0.1);
    }
    .notification-row__dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #ffc107;
        flex-shrink: 0;
        margin-top: 0.35rem;
    }
    .notification-row.is-read .notification-row__dot {
        visibility: hidden;
    }
    .notification-row__icon {
        width: 2rem;
        text-align: center;
        flex-shrink: 0;
        margin-top: 0.15rem;
    }
    .notification-row__body {
        flex: 1;
        min-width: 0;
    }
    .notification-row__title {
        font-weight: 600;
        margin-bottom: 0.15rem;
        word-break: break-word;
    }
    .notification-row__message {
        color: #6c757d;
        margin-bottom: 0.25rem;
        word-break: break-word;
    }
    body.dark-mode .notification-row__message {
        color: rgba(255, 255, 255, 0.65);
    }
    .notification-row__meta {
        font-size: 0.8125rem;
        color: #6c757d;
    }
    .notifications-toolbar .form-control-sm {
        max-width: 220px;
    }
    .notifications-empty {
        padding: 2.5rem 1rem;
        text-align: center;
        color: #6c757d;
    }
    .notifications-loading {
        padding: 2rem;
        text-align: center;
    }
</style>
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-info notifications-page-card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="far fa-bell mr-2"></i>Notifications
                            <span class="badge badge-warning ml-2" id="notificationsPageUnreadBadge" style="{{ ($initialUnreadCount ?? 0) > 0 ? '' : 'display:none' }}">
                                <span id="notificationsPageUnreadCount">{{ $initialUnreadCount ?? 0 }}</span> unread
                            </span>
                        </h3>
                        <div class="card-tools">
                            <button type="button" class="btn btn-sm btn-light" id="notificationsMarkAllReadBtn" title="Mark all as read">
                                <i class="fas fa-check-double mr-1"></i>Mark all as read
                            </button>
                        </div>
                    </div>
                    <div class="card-body pb-2">
                        <div class="d-flex flex-wrap align-items-center justify-content-between notifications-toolbar mb-3">
                            <ul class="nav nav-pills mb-0" id="notificationsStatusTabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#" data-status="all">All</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#" data-status="unread">Unread</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#" data-status="read">Read</a>
                                </li>
                            </ul>
                            <div class="d-flex flex-wrap align-items-center" style="gap:0.5rem">
                                <select class="form-control form-control-sm" id="notificationsPeriodFilter" aria-label="Date range">
                                    <option value="">All time</option>
                                    <option value="today">Today</option>
                                    <option value="week">This week</option>
                                    <option value="month">This month</option>
                                </select>
                                <div class="input-group input-group-sm">
                                    <input type="search" class="form-control" id="notificationsSearchInput" placeholder="Search title or message…" autocomplete="off" aria-label="Search notifications">
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-outline-secondary" id="notificationsSearchBtn" title="Search">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body pt-0 px-0">
                        <div id="notificationsListLoading" class="notifications-loading d-none">
                            <div class="spinner-border text-primary" role="status"></div>
                            <p class="mt-2 mb-0 text-muted">Loading notifications…</p>
                        </div>
                        <div id="notificationsListEmpty" class="notifications-empty d-none">
                            <i class="far fa-bell-slash fa-2x mb-2 d-block opacity-50"></i>
                            <p class="mb-0" id="notificationsListEmptyText">No notifications found.</p>
                        </div>
                        <div id="notificationsList"></div>
                        <div class="px-3 pb-3 d-none" id="notificationsPaginationWrap">
                            <nav aria-label="Notifications pagination">
                                <ul class="pagination pagination-sm justify-content-end mb-0" id="notificationsPagination"></ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
(function () {
    var listUrl = @json(route('notifications.index'));
    var readUrlBase = @json(url('notifications'));
    var readAllUrl = @json(route('notifications.read-all'));
    var unreadCountUrl = @json(route('notifications.unread-count'));
    var csrfMeta = document.querySelector('meta[name="csrf-token"]');
    var csrfToken = csrfMeta ? csrfMeta.getAttribute('content') : '';

    var state = {
        page: 1,
        status: 'all',
        period: '',
        search: '',
        lastPage: 1,
        loading: false
    };

    var els = {
        list: document.getElementById('notificationsList'),
        loading: document.getElementById('notificationsListLoading'),
        empty: document.getElementById('notificationsListEmpty'),
        emptyText: document.getElementById('notificationsListEmptyText'),
        paginationWrap: document.getElementById('notificationsPaginationWrap'),
        pagination: document.getElementById('notificationsPagination'),
        unreadBadge: document.getElementById('notificationsPageUnreadBadge'),
        unreadCount: document.getElementById('notificationsPageUnreadCount'),
        markAllBtn: document.getElementById('notificationsMarkAllReadBtn'),
        searchInput: document.getElementById('notificationsSearchInput'),
        periodFilter: document.getElementById('notificationsPeriodFilter'),
        statusTabs: document.getElementById('notificationsStatusTabs')
    };

    var escapeHtml = window.pmsEscapeHtml;
    var escapeAttr = window.pmsEscapeAttr;

    function updateUnreadBadge(count) {
        count = parseInt(count, 10) || 0;
        if (els.unreadCount) els.unreadCount.textContent = count;
        if (els.unreadBadge) els.unreadBadge.style.display = count > 0 ? 'inline-block' : 'none';
        var navbarBadge = document.getElementById('navbarNotificationsBadge');
        var navbarHeader = document.getElementById('navbarNotificationsHeader');
        if (navbarBadge) {
            navbarBadge.textContent = count;
            navbarBadge.style.display = count > 0 ? 'inline-block' : 'none';
        }
        if (navbarHeader) {
            navbarHeader.textContent = count ? (count + ' Notification' + (count !== 1 ? 's' : '')) : 'Notifications';
        }
        if (typeof window.pmsReloadNavbarNotifications === 'function') {
            window.pmsReloadNavbarNotifications();
        }
    }

    function fetchUnreadCount() {
        return fetch(unreadCountUrl, {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                updateUnreadBadge(data.unread_count || 0);
            })
            .catch(function () {});
    }

    function markRead(id) {
        return fetch(readUrlBase + '/' + encodeURIComponent(id) + '/read', {
            method: 'PATCH',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({})
        })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (data && typeof data.unread_count !== 'undefined') {
                    updateUnreadBadge(data.unread_count);
                }
                return data;
            });
    }

    function buildQueryParams() {
        var params = new URLSearchParams();
        params.set('page', String(state.page));
        params.set('status', state.status);
        if (state.period) params.set('period', state.period);
        if (state.search) params.set('search', state.search);
        return params.toString();
    }

    function renderPagination(current, last) {
        if (!els.pagination || !els.paginationWrap) return;
        if (last <= 1) {
            els.paginationWrap.classList.add('d-none');
            els.pagination.innerHTML = '';
            return;
        }
        els.paginationWrap.classList.remove('d-none');
        var html = '';
        var addItem = function (label, page, disabled, active) {
            var cls = 'page-item' + (disabled ? ' disabled' : '') + (active ? ' active' : '');
            html += '<li class="' + cls + '"><a class="page-link" href="#" data-page="' + page + '">' + label + '</a></li>';
        };
        addItem('&laquo;', current - 1, current <= 1, false);
        var start = Math.max(1, current - 2);
        var end = Math.min(last, current + 2);
        for (var p = start; p <= end; p++) {
            addItem(String(p), p, false, p === current);
        }
        addItem('&raquo;', current + 1, current >= last, false);
        els.pagination.innerHTML = html;
    }

    function renderList(items) {
        if (!els.list) return;
        if (!items || !items.length) {
            els.list.innerHTML = '';
            els.empty.classList.remove('d-none');
            var emptyMsg = 'No notifications found.';
            if (state.status === 'unread') emptyMsg = 'You have no unread notifications.';
            else if (state.status === 'read') emptyMsg = 'You have no read notifications.';
            if (state.search) emptyMsg = 'No notifications match your search.';
            els.emptyText.textContent = emptyMsg;
            return;
        }
        els.empty.classList.add('d-none');
        els.list.innerHTML = items.map(function (n) {
            var unread = !n.is_read;
            var rowClass = 'notification-row' + (unread ? ' is-unread' : ' is-read');
            var href = n.action_url ? escapeHtml(n.action_url) : '#';
            var tagOpen = n.action_url
                ? '<a class="' + rowClass + ' text-body text-decoration-none" href="' + href + '" data-id="' + escapeHtml(n.id) + '" data-has-link="1">'
                : '<div class="' + rowClass + '" data-id="' + escapeHtml(n.id) + '">';
            var tagClose = n.action_url ? '</a>' : '</div>';
            var markBtn = unread
                ? '<button type="button" class="btn btn-xs btn-outline-secondary btn-mark-read ml-2" data-id="' + escapeHtml(n.id) + '" title="Mark as read"><i class="fas fa-check"></i></button>'
                : '<span class="badge badge-light ml-2">Read</span>';
            return tagOpen +
                '<span class="notification-row__dot" aria-hidden="true"></span>' +
                '<span class="notification-row__icon"><i class="fas ' + escapeHtml(n.icon) + ' ' + escapeHtml(n.icon_class) + '"></i></span>' +
                '<span class="notification-row__body">' +
                '<div class="d-flex justify-content-between align-items-start flex-wrap">' +
                '<span class="notification-row__title">' + escapeHtml(n.title) + '</span>' +
                markBtn +
                '</div>' +
                '<div class="notification-row__message">' + escapeHtml(n.message) + '</div>' +
                '<div class="notification-row__meta">' +
                (n.type_label ? '<span class="badge badge-info mr-1">' + escapeHtml(n.type_label) + '</span>' : '') +
                '<span title="' + escapeHtml(n.created_at_iso) + '">' + escapeHtml(n.created_at_formatted || n.created_at) + '</span>' +
                '</div></span>' +
                tagClose;
        }).join('');
    }

    function loadNotifications() {
        if (state.loading) return;
        state.loading = true;
        els.loading.classList.remove('d-none');
        els.empty.classList.add('d-none');

        fetch(listUrl + '?' + buildQueryParams(), {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
            .then(function (r) {
                if (!r.ok) {
                    return r.json().catch(function () { return {}; }).then(function (body) {
                        var msg = (body && body.message) ? body.message : ('HTTP ' + r.status);
                        throw new Error(msg);
                    });
                }
                return r.json();
            })
            .then(function (data) {
                state.lastPage = data.last_page || 1;
                updateUnreadBadge(data.unread_count || 0);
                renderList(data.notifications || []);
                renderPagination(data.page || 1, state.lastPage);
            })
            .catch(function (err) {
                els.list.innerHTML = '';
                els.empty.classList.remove('d-none');
                els.emptyText.textContent = 'Failed to load notifications' + (err && err.message ? ': ' + err.message : '.') + ' Please refresh the page.';
            })
            .finally(function () {
                state.loading = false;
                els.loading.classList.add('d-none');
            });
    }

    if (els.statusTabs) {
        els.statusTabs.addEventListener('click', function (e) {
            var tab = e.target.closest('[data-status]');
            if (!tab) return;
            e.preventDefault();
            els.statusTabs.querySelectorAll('.nav-link').forEach(function (el) { el.classList.remove('active'); });
            tab.classList.add('active');
            state.status = tab.getAttribute('data-status') || 'all';
            state.page = 1;
            loadNotifications();
        });
    }

    if (els.periodFilter) {
        els.periodFilter.addEventListener('change', function () {
            state.period = els.periodFilter.value;
            state.page = 1;
            loadNotifications();
        });
    }

    document.getElementById('notificationsSearchBtn').addEventListener('click', function () {
        state.search = (els.searchInput.value || '').trim();
        state.page = 1;
        loadNotifications();
    });

    if (els.searchInput) {
        els.searchInput.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                state.search = (els.searchInput.value || '').trim();
                state.page = 1;
                loadNotifications();
            }
        });
    }

    if (els.pagination) {
        els.pagination.addEventListener('click', function (e) {
            var link = e.target.closest('[data-page]');
            if (!link) return;
            e.preventDefault();
            var page = parseInt(link.getAttribute('data-page'), 10);
            if (!page || page < 1 || page > state.lastPage) return;
            state.page = page;
            loadNotifications();
        });
    }

    if (els.list) {
        els.list.addEventListener('click', function (e) {
            var markBtn = e.target.closest('.btn-mark-read');
            if (markBtn) {
                e.preventDefault();
                e.stopPropagation();
                var mid = markBtn.getAttribute('data-id');
                if (!mid) return;
                markRead(mid).then(function () { loadNotifications(); });
                return;
            }
            var row = e.target.closest('[data-has-link="1"]');
            if (row && row.dataset.id) {
                markRead(row.dataset.id);
            }
        });
    }

    if (els.markAllBtn) {
        els.markAllBtn.addEventListener('click', function () {
            fetch(readAllUrl, {
                method: 'PATCH',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({})
            })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    updateUnreadBadge(data.unread_count || 0);
                    loadNotifications();
                });
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', loadNotifications);
    } else {
        loadNotifications();
    }
})();
</script>
@endpush