/*
 * NOTIFICATION OVERLAY FIX - JavaScript
 * 
 * This script fixes messenger notifications positioning in both Angular and Vue apps
 * to prevent them from blocking content interaction.
 * 
 * Applied: 2024 - Fix for overlapping notifications
 */

(function () {
    'use strict';

    // Function to fix messenger notification positioning
    function fixMessengerPositioning() {
        // Find all messenger notification containers
        const messengers = document.querySelectorAll('.messenger-theme-future, ul.messenger-theme-future');

        messengers.forEach(function (messenger) {
            // Apply critical positioning fixes
            messenger.style.position = 'fixed';
            messenger.style.top = '80px';
            messenger.style.left = '50%';
            messenger.style.transform = 'translateX(-50%)';
            messenger.style.width = '600px';
            messenger.style.maxWidth = '90vw';
            messenger.style.marginLeft = '0';
            messenger.style.zIndex = '1035';
            messenger.style.pointerEvents = 'auto';

            // Responsive positioning for mobile
            if (window.innerWidth <= 768) {
                messenger.style.top = '65px';
                messenger.style.width = '95vw';
                messenger.style.left = '2.5vw';
                messenger.style.transform = 'none';
            }

            // Specific positioning for admin pages
            if (document.body.classList.contains('admin-settings') ||
                document.body.className.includes('admin')) {
                messenger.style.top = '100px';
            }
        });
    }

    // Fix positioning on page load
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', fixMessengerPositioning);
    } else {
        fixMessengerPositioning();
    }

    // Monitor for dynamically added notifications
    const observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            mutation.addedNodes.forEach(function (node) {
                if (node.nodeType === 1) { // Element node
                    if (node.classList &&
                        (node.classList.contains('messenger-theme-future') ||
                            node.tagName === 'UL' && node.classList.contains('messenger-theme-future'))) {
                        // Apply fixes to newly added messenger notifications
                        setTimeout(fixMessengerPositioning, 10);
                    }

                    // Also check child elements
                    const childMessengers = node.querySelectorAll &&
                        node.querySelectorAll('.messenger-theme-future, ul.messenger-theme-future');
                    if (childMessengers && childMessengers.length > 0) {
                        setTimeout(fixMessengerPositioning, 10);
                    }
                }
            });
        });
    });

    // Start observing
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    // Fix positioning on window resize
    window.addEventListener('resize', function () {
        setTimeout(fixMessengerPositioning, 100);
    });

    // Angular integration
    if (typeof angular !== 'undefined') {
        angular.module('archDB').run(['$rootScope', function ($rootScope) {
            $rootScope.$on('$routeChangeSuccess', function () {
                setTimeout(fixMessengerPositioning, 100);
            });
        }]);
    }

    // Vue integration
    if (typeof Vue !== 'undefined') {
        Vue.mixin({
            mounted: function () {
                this.$nextTick(function () {
                    setTimeout(fixMessengerPositioning, 50);
                });
            }
        });
    }

})();