/**
 * Alpine Notifications Component
 */
function escapeHtml(text) {
    if (typeof text !== 'string') return text;
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

export function registerNotifications(Alpine) {
    Alpine.data('notifications', () => ({
        toasts: [],
        _counter: 0,

        show(level, title, message = '', options = {}) {
            const duration = options.duration !== undefined ? options.duration : 5000;
            const id = 'toast-' + (++this._counter);
            this.toasts.push({ id, level, title, message, closing: false });
            if (duration > 0) setTimeout(() => this.dismiss(id), duration);
            return id;
        },

        dismiss(id) {
            const t = this.toasts.find(t => t.id === id);
            if (!t) return;
            t.closing = true;
            setTimeout(() => { this.toasts = this.toasts.filter(t => t.id !== id); }, 300);
        },

        success(title, msg) { return this.show('success', title, msg); },
        error(title, msg) { return this.show('error', title, msg); },
        warning(title, msg) { return this.show('warning', title, msg); },
        info(title, msg) { return this.show('info', title, msg); },
    }));

    window.showNotification = function(level, title, message, options) {
        const c = document.querySelector('[x-data*="notifications"]');
        if (c && c.__x) return c.__x.$data.show(level, title, message, options);
        let cont = document.getElementById('notification-container');
        if (!cont) {
            cont = document.createElement('div');
            cont.id = 'notification-container';
            cont.className = 'notification-container';
            document.body.appendChild(cont);
        }
        const id = 'notification-' + Date.now();
        const n = document.createElement('div');
        n.id = id;
        n.className = 'notification ' + level;
        n.innerHTML = '<span class="notification-icon"></span><div class="notification-content"><div class="notification-title">' + escapeHtml(title) + '</div>' + (message ? '<div class="notification-message">' + escapeHtml(message) + '</div>' : '') + '</div><button type="button" class="notification-close" onclick="window.closeNotification(\'' + id + '\')">&times;</button>';
        cont.appendChild(n);
        const dur = options?.duration !== undefined ? options.duration : 5000;
        if (dur) setTimeout(() => window.closeNotification(id), dur);
        return id;
    };

    window.showSuccess = function(t, m) { return window.showNotification('success', t, m); };
    window.showError = function(t, m) { return window.showNotification('error', t, m); };
    window.showWarning = function(t, m) { return window.showNotification('warning', t, m); };
    window.showInfo = function(t, m) { return window.showNotification('info', t, m); };
    window.showNotificationFromResponse = function(r, d) { window.showNotification('info', r?.message || d || ''); };

    window.closeNotification = function(id) {
        const n = document.getElementById(id);
        if (!n) return;
        n.classList.add('closing');
        setTimeout(() => n.remove(), 300);
    };
}
