@php
    $notifStackStyle = $notifStackStyle ?? 'position:fixed;right:24px;bottom:24px;z-index:10000;display:flex;flex-direction:column;gap:10px;align-items:stretch;pointer-events:none;';
@endphp

<div id="notif-stack" style="{{ $notifStackStyle }}"></div>

<script>
(function() {
    var icons = {
        solved:   'bi-check-circle-fill',
        replied:  'bi-chat-right-dots-fill',
        success:  'bi-check-circle-fill',
        error:    'bi-x-circle-fill',
        warning:  'bi-exclamation-triangle-fill',
        wait:     'bi-hourglass-split'
    };

    window.showNotif = function(type, title, sub, href) {
        var stack = document.getElementById('notif-stack');
        if (!stack) return;

        var el = document.createElement('div');
        el.className = 'notif-toast ' + type;
        el.style.pointerEvents = 'all';
        el.innerHTML =
            '<i class="bi ' + (icons[type] || 'bi-info-circle-fill') + ' notif-icon"></i>' +
            '<div class="notif-body">' +
            '<p class="notif-title">' + title + '</p>' +
            '<p class="notif-sub">' + sub + '</p>' +
            (href ? '<a class="notif-link" href="' + href + '">Ver acompanhamentos \u2192</a>' : '') +
            '</div>' +
            '<button class="notif-close" aria-label="Fechar"><i class="bi bi-x"></i></button>';

        el.querySelector('.notif-close').addEventListener('click', function() {
            el.style.transition = 'opacity .2s';
            el.style.opacity = '0';
            setTimeout(function() { el.remove(); }, 220);
        });

        stack.appendChild(el);

        var delay = (type === 'success' || type === 'error') ? 6000 : 15000;
        if (type === 'wait') delay = 30000;
        setTimeout(function() {
            el.style.transition = 'opacity .35s,transform .35s';
            el.style.opacity = '0';
            el.style.transform = 'translateX(12px)';
            setTimeout(function() { el.remove(); }, 380);
        }, delay);
    };

    window.addEventListener('load', function() {
        var flash = @json($flashMessages);
        if (flash) {
            flash.forEach(function(m, i) {
                setTimeout(function() { showNotif(m.type, m.title, m.sub); }, i * 400);
            });
        }
    });
})();
</script>