{{--
    Toast notifications globales — API: window.FSG.toast.show({...}).

    Tipos:    'success' | 'error' | 'warning' | 'info'
    Posición: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'

    Cualquier vista puede dispararlos:
        window.FSG.toast.show({ title: 'Hola', message: 'Mundo', type: 'success' });

    También los consume `template/_echo-init.blade.php` cuando llega
    un evento .notification.new por WebSocket.
--}}
<style>
    .fsg-toast-container {
        position: fixed;
        z-index: 9999;
        pointer-events: none;
    }
    .fsg-toast-container.top-left     { top: 20px;    left: 20px; }
    .fsg-toast-container.top-right    { top: 20px;    right: 20px; }
    .fsg-toast-container.bottom-left  { bottom: 20px; left: 20px; }
    .fsg-toast-container.bottom-right { bottom: 20px; right: 20px; }

    .fsg-toast {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        min-width: 300px;
        max-width: 400px;
        padding: 16px;
        margin-bottom: 10px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
        pointer-events: auto;
        animation: fsgToastSlideInRight .3s ease-out;
    }
    .fsg-toast.removing { animation: fsgToastSlideOutRight .3s ease-in forwards; }

    .fsg-toast-container.top-left   .fsg-toast,
    .fsg-toast-container.bottom-left .fsg-toast            { animation-name: fsgToastSlideInLeft; }
    .fsg-toast-container.top-left   .fsg-toast.removing,
    .fsg-toast-container.bottom-left .fsg-toast.removing   { animation-name: fsgToastSlideOutLeft; }

    @keyframes fsgToastSlideInRight  { from { transform: translateX(100%);  opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    @keyframes fsgToastSlideOutRight { from { transform: translateX(0);     opacity: 1; } to { transform: translateX(100%);  opacity: 0; } }
    @keyframes fsgToastSlideInLeft   { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    @keyframes fsgToastSlideOutLeft  { from { transform: translateX(0);     opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }

    .fsg-toast.toast-success { background: #d1e7dd; border-left: 4px solid #198754; color: #0f5132; }
    .fsg-toast.toast-error   { background: #f8d7da; border-left: 4px solid #dc3545; color: #842029; }
    .fsg-toast.toast-warning { background: #fff3cd; border-left: 4px solid #ffc107; color: #664d03; }
    .fsg-toast.toast-info    { background: #cff4fc; border-left: 4px solid #0dcaf0; color: #055160; }

    .fsg-toast .toast-icon    { font-size: 1.25rem; flex-shrink: 0; }
    .fsg-toast .toast-content { flex-grow: 1; }
    .fsg-toast .toast-title   { font-weight: 600; margin-bottom: 4px; }
    .fsg-toast .toast-message { font-size: .9rem; opacity: .9; }
    .fsg-toast .toast-close   {
        background: none; border: none; font-size: 1.25rem;
        cursor: pointer; opacity: .5; padding: 0; line-height: 1;
        transition: opacity .2s;
    }
    .fsg-toast .toast-close:hover { opacity: 1; }

    .fsg-toast .toast-progress {
        position: absolute; bottom: 0; left: 0; height: 3px;
        border-radius: 0 0 0 8px;
        animation: fsgToastProgress linear forwards;
    }
    .fsg-toast.toast-success .toast-progress { background: #198754; }
    .fsg-toast.toast-error   .toast-progress { background: #dc3545; }
    .fsg-toast.toast-warning .toast-progress { background: #ffc107; }
    .fsg-toast.toast-info    .toast-progress { background: #0dcaf0; }
    @keyframes fsgToastProgress { from { width: 100%; } to { width: 0%; } }
</style>

<div id="fsg-toast-container" class="fsg-toast-container top-right"></div>

<audio id="fsg-toast-sound" preload="auto">
    <source src="{{ asset('assets/audio/sound_notificacion.mp3') }}" type="audio/mpeg">
</audio>

<script>
(function () {
    'use strict';

    window.FSG       = window.FSG       || {};
    window.FSG.toast = window.FSG.toast || {};

    var ICONS = {
        success: '<i class="bi bi-check-circle-fill"></i>',
        error:   '<i class="bi bi-x-circle-fill"></i>',
        warning: '<i class="bi bi-exclamation-triangle-fill"></i>',
        info:    '<i class="bi bi-info-circle-fill"></i>'
    };

    var DEFAULT = {
        title:        'Notificación',
        message:      '',
        type:         'info',
        position:     'top-right',
        duration:     5000,
        playSound:    false,
        showProgress: true
    };

    function setPosition (container, position) {
        container.className = 'fsg-toast-container ' + position;
    }

    function playSound () {
        var audio = document.getElementById('fsg-toast-sound');
        if (!audio || !audio.currentSrc) return;
        try {
            audio.currentTime = 0;
            var p = audio.play();
            if (p && typeof p.catch === 'function') p.catch(function () { /* autoplay bloqueado, ignorar */ });
        } catch (_) { /* ignorar */ }
    }

    /**
     * @param {Object} opts
     * @param {string} opts.title
     * @param {string} opts.message
     * @param {string} [opts.type='info']
     * @param {string} [opts.position='top-right']
     * @param {number} [opts.duration=5000]   0 = sin auto-cierre
     * @param {boolean} [opts.playSound=true]
     * @param {boolean} [opts.showProgress=true]
     */
    window.FSG.toast.show = function (opts) {
        var cfg = Object.assign({}, DEFAULT, opts || {});
        var container = document.getElementById('fsg-toast-container');
        if (!container) return null;

        setPosition(container, cfg.position);

        var toast = document.createElement('div');
        toast.className = 'fsg-toast toast-' + cfg.type;
        toast.innerHTML =
            '<div class="toast-icon">' + (ICONS[cfg.type] || ICONS.info) + '</div>' +
            '<div class="toast-content">' +
                '<div class="toast-title"></div>' +
                (cfg.message ? '<div class="toast-message"></div>' : '') +
            '</div>' +
            '<button class="toast-close" aria-label="Cerrar">&times;</button>' +
            (cfg.showProgress && cfg.duration > 0
                ? '<div class="toast-progress" style="animation-duration:' + cfg.duration + 'ms"></div>'
                : '');

        // Asignar texto vía textContent para evitar inyección de HTML.
        toast.querySelector('.toast-title').textContent = cfg.title;
        if (cfg.message) toast.querySelector('.toast-message').textContent = cfg.message;

        function remove () {
            toast.classList.add('removing');
            setTimeout(function () {
                if (toast.parentNode) toast.parentNode.removeChild(toast);
            }, 300);
        }

        toast.querySelector('.toast-close').addEventListener('click', remove);
        container.appendChild(toast);

        if (cfg.playSound)        playSound();
        if (cfg.duration > 0)     setTimeout(remove, cfg.duration);

        return toast;
    };
})();
</script>