{{--
    Drives the follow-up bell: polls what is due, fills the panel, and announces
    anything newly due as a toast and — with permission — a desktop
    notification.

    Included from partials.shell-scripts, which both layouts load after the
    Bootstrap bundle and after partials.toasts has defined emiToast().

    Three rules this file exists to keep:

      * Announcing is the browser's business.  The endpoint only ever reads.
        `reminder_count` on the task is the record of what was *mailed*, and a
        toast is not a send — so which task has already been shouted about is
        remembered here, in localStorage, keyed on the task's id *and* its due
        time so a snoozed task can announce itself again at its new time.

      * Never nag on arrival.  Work already overdue when the page loads is
        counted on the bell but not announced: opening a screen is not the
        moment to be shouted at about a mail from yesterday. Only a task that
        comes due while the tab is open is announced.

      * Go quiet rather than hammer.  Polling stops while the tab is hidden and
        after repeated failures, and a signed-out session answers 204, which
        ends it cleanly.
--}}
<script>
    (function() {
        var bell = document.getElementById('emiFollowUpBell');
        if (!bell) return;

        var ENDPOINT = @json(route('follow_ups.notifications'));
        var POLL_MS = 60000;
        var STORE_KEY = 'emiFollowUpAnnounced';
        var MAX_FAILURES = 3;

        var button = document.getElementById('emiFollowUpBellButton');
        var countEl = document.getElementById('emiFollowUpBellCount');
        var summaryEl = document.getElementById('emiFollowUpBellSummary');
        var listEl = document.getElementById('emiFollowUpBellList');
        var emptyEl = document.getElementById('emiFollowUpBellEmpty');
        var queueEl = document.getElementById('emiFollowUpBellQueue');
        var permissionEl = document.getElementById('emiFollowUpBellPermission');
        var offEl = document.getElementById('emiFollowUpBellOff');
        var rowTemplate = document.getElementById('emiFollowUpBellRow');

        var timer = null;
        var failures = 0;
        // First response only primes the "already seen" set — see rule two.
        var primed = false;

        /**
         * Announce keys already shown in this browser. Private browsing and
         * cleared site data throw or return null; either way the feature
         * degrades to announcing once more, never to breaking the page.
         */
        function loadSeen() {
            try {
                return JSON.parse(window.localStorage.getItem(STORE_KEY)) || {};
            } catch (e) {
                return {};
            }
        }

        function saveSeen(seen) {
            try {
                // Keep the store from growing without bound: only the keys
                // currently in play are worth remembering.
                var keys = Object.keys(seen);
                if (keys.length > 200) {
                    var trimmed = {};
                    keys.slice(-200).forEach(function(key) {
                        trimmed[key] = seen[key];
                    });
                    seen = trimmed;
                }
                window.localStorage.setItem(STORE_KEY, JSON.stringify(seen));
            } catch (e) {
                /* nothing to do — the bell still works, it just repeats itself */
            }
        }

        function render(data) {
            // The bell itself always stays. An account with follow-ups off gets
            // the panel's explanation and the switch, not a vanished control.
            if (offEl) offEl.hidden = !!data.enabled;

            if (!data.enabled) {
                countEl.hidden = true;
                listEl.textContent = '';
                summaryEl.textContent = '';
                emptyEl.hidden = true;
                return;
            }

            var count = data.count || 0;

            countEl.hidden = count === 0;
            countEl.textContent = count > 99 ? '99+' : count;
            // Overdue is a problem, merely due is a plan.
            countEl.className = 'position-absolute top-0 start-100 translate-middle badge rounded-pill bg-' +
                (data.overdue > 0 ? 'danger' : 'warning');
            button.classList.toggle('btn-outline-danger', data.overdue > 0);
            button.classList.toggle('btn-outline-secondary', data.overdue === 0);

            summaryEl.textContent = data.overdue > 0 ?
                data.overdue + ' overdue, ' + data.due_soon + ' due soon' :
                (count > 0 ? count + ' due soon' : '');

            if (data.queue_url) queueEl.setAttribute('href', data.queue_url);

            listEl.textContent = '';
            (data.items || []).forEach(function(item) {
                var row = rowTemplate.content.cloneNode(true);

                row.querySelector('[data-role="subject"]').textContent = item.subject;
                row.querySelector('[data-role="sender"]').textContent = item.sender;

                var meta = row.querySelector('[data-role="meta"]');
                meta.textContent = item.action + ' · ' + item.due_label;
                meta.className = item.late ? 'text-danger fw-semibold' : 'text-muted';
                meta.style.fontSize = '.7rem';

                var reply = row.querySelector('[data-role="reply"]');
                if (item.reply_url) {
                    reply.setAttribute('href', item.reply_url);
                    reply.hidden = false;
                }

                listEl.appendChild(row);
            });

            emptyEl.hidden = count > 0;
        }

        function announce(data) {
            var items = data.items || [];
            var seen = loadSeen();
            var now = Date.now();

            var fresh = items.filter(function(item) {
                return !seen[item.announce_key];
            });

            items.forEach(function(item) {
                seen[item.announce_key] = now;
            });
            saveSeen(seen);

            // The first poll of a page load only records what was already
            // there. Announcing it would mean being shouted at for opening a
            // screen.
            if (!primed) {
                primed = true;
                return;
            }

            if (!data.announce || fresh.length === 0) return;

            var lead = fresh[0];
            var message = fresh.length === 1 ?
                lead.sender + ' — ' + lead.subject :
                fresh.length + ' follow-ups are due, including ' + lead.subject;

            if (typeof window.emiToast === 'function') {
                window.emiToast(message, {
                    title: lead.late ? 'Follow-up overdue' : 'Follow-up due',
                    type: lead.late ? 'error' : 'warn',
                    // Stays until dismissed: a reminder that disappears while
                    // you are looking at another window has not reminded anyone.
                    timeout: 0
                });
            }

            desktopNotify(fresh.length === 1 ?
                (lead.late ? 'Follow-up overdue' : 'Follow-up due') :
                fresh.length + ' follow-ups due',
                message
            );
        }

        function desktopNotify(title, body) {
            if (!('Notification' in window) || Notification.permission !== 'granted') return;

            try {
                var note = new Notification(title, {
                    body: body,
                    // One tag for the feature, so a queue of five does not
                    // stack five popups: the newest replaces the last.
                    tag: 'emi-follow-up',
                    requireInteraction: false
                });

                note.onclick = function() {
                    window.focus();
                    window.location.href = queueEl.getAttribute('href');
                };
            } catch (e) {
                /* Some browsers refuse construction outside a service worker. */
            }
        }

        function syncPermissionButton() {
            if (!('Notification' in window)) return;
            permissionEl.hidden = Notification.permission !== 'default';
        }

        function poll() {
            if (document.hidden) return;

            fetch(ENDPOINT, {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    credentials: 'same-origin'
                })
                .then(function(response) {
                    // 204 = signed out. Stop, rather than poll a login page
                    // every minute for the rest of the day.
                    if (response.status === 204) {
                        stop();
                        return null;
                    }
                    if (!response.ok) throw new Error('HTTP ' + response.status);
                    return response.json();
                })
                .then(function(data) {
                    if (!data) return;
                    failures = 0;
                    render(data);
                    announce(data);
                })
                .catch(function() {
                    if (++failures >= MAX_FAILURES) stop();
                });
        }

        function stop() {
            if (timer) window.clearInterval(timer);
            timer = null;
        }

        function start() {
            stop();
            timer = window.setInterval(poll, POLL_MS);
            poll();
        }

        if (permissionEl) {
            syncPermissionButton();

            // Browsers only grant permission from a genuine user gesture, which
            // is why this is a button in the panel and not a call on load.
            permissionEl.addEventListener('click', function() {
                if (!('Notification' in window)) return;

                Notification.requestPermission().then(function() {
                    syncPermissionButton();
                });
            });
        }

        // Coming back to the tab is the moment the count is most likely stale.
        document.addEventListener('visibilitychange', function() {
            if (!document.hidden && timer) poll();
        });

        start();
    })();
</script>