{% comment %}
Component: Toast Host
Container for notifications and feedback messages.
Uses aria-live="polite" to avoid stealing focus. Integrates with showToast events.
{% endcomment %}
<div id="toast-host"
     x-data="{
        toasts: [],
        counter: 0,
        _handler: null,
        _lastEventSig: '',
        _lastEventTime: 0,
        init() {
            this._handler = (e) => {
                if (e._handledByToastHost) return;
                e._handledByToastHost = true;
                if (this.isDuplicate(e.detail)) return;
                this.addToast(e.detail);
            };
            window.addEventListener('showToast', this._handler);
            window.addEventListener('show-toast', this._handler);
            document.body.addEventListener('showToast', this._handler);
        },
        destroy() {
            if (this._handler) {
                window.removeEventListener('showToast', this._handler);
                window.removeEventListener('show-toast', this._handler);
                document.body.removeEventListener('showToast', this._handler);
                this._handler = null;
            }
            this.toasts.forEach(t => { if (t.timer) clearTimeout(t.timer); });
            this.toasts = [];
        },
        isDuplicate(detail) {
            if (!detail || !detail.title) return true;
            const sig = (detail.title || '') + '|' + (detail.body || '') + '|' + (detail.tone || '') + '|' + JSON.stringify(detail.action || {});
            const now = Date.now();
            if (sig === this._lastEventSig && (now - this._lastEventTime) < 200) {
                return true;
            }
            this._lastEventSig = sig;
            this._lastEventTime = now;
            return false;
        },
        sanitizeUrl(url) {
            if (!url) return '#';
            const clean = String(url).trim();
            const norm = clean.replace(/[\x00-\x20\s]+/g, '').toLowerCase();
            if (norm.startsWith('javascript:') || norm.startsWith('data:') || norm.startsWith('vbscript:')) {
                return '#';
            }
            return clean;
        },
        addToast(detail) {
            if (!detail || !detail.title) return;
            const id = 'toast_' + (++this.counter);
            let tone = detail.tone || 'info';
            if (tone === 'error') tone = 'danger';
            if (tone === 'warn') tone = 'warning';
            let duration = detail.duration;
            if (detail.action) {
                duration = (!duration || duration < 5000) ? 5000 : duration;
            } else if (!duration) {
                duration = 3400;
            }
            let action = null;
            if (detail.action && detail.action.label) {
                action = {
                    label: detail.action.label,
                    url: this.sanitizeUrl(detail.action.url)
                };
            }
            const item = {
                id,
                tone,
                title: detail.title,
                body: detail.body || '',
                action,
                timer: null,
                duration,
                remaining: duration,
                start: Date.now()
            };
            this.scheduleDismiss(item);
            this.toasts.push(item);
        },
        scheduleDismiss(item) {
            item.timer = setTimeout(() => this.removeToast(item.id), item.remaining);
            item.start = Date.now();
        },
        pauseToast(item) {
            if (item.timer) {
                clearTimeout(item.timer);
                item.timer = null;
                item.remaining -= (Date.now() - item.start);
                if (item.remaining <= 0) item.remaining = 1000;
            }
        },
        resumeToast(item) {
            if (!item.timer) {
                this.scheduleDismiss(item);
            }
        },
        removeToast(id) {
            const idx = this.toasts.findIndex(t => t.id === id);
            if (idx !== -1) {
                if (this.toasts[idx].timer) clearTimeout(this.toasts[idx].timer);
                this.toasts.splice(idx, 1);
            }
        }
     }"
     aria-live="polite"
     aria-atomic="true"
     class="fixed bottom-5 right-5 z-50 flex flex-col gap-2.5 max-w-sm w-full pointer-events-none">
    <template x-for="toast in toasts" :key="toast.id">
        <div class="pointer-events-auto p-4 rounded-lg bg-surface border shadow-float flex items-start gap-3 transition-all"
             @mouseenter="pauseToast(toast)"
             @mouseleave="resumeToast(toast)"
             @focusin="pauseToast(toast)"
             @focusout="resumeToast(toast)"
             :role="toast.tone === 'danger' ? 'alert' : 'status'"
             :class="{
                'border-success bg-success-soft text-success': toast.tone === 'success',
                'border-warning bg-warning-soft text-warning': toast.tone === 'warning',
                'border-danger bg-danger-soft text-danger': toast.tone === 'danger',
                'border-info bg-info-soft text-info': toast.tone === 'info',
                'border-border text-text': !toast.tone
             }">
            <div class="flex-1">
                <p class="text-sm font-semibold" x-text="toast.title"></p>
                <p class="text-xs text-muted mt-0.5" x-text="toast.body" x-show="toast.body"></p>
                <template x-if="toast.action">
                    <a :href="toast.action.url"
                       class="inline-block mt-2 text-xs font-semibold underline hover:opacity-80"
                       x-text="toast.action.label"></a>
                </template>
            </div>
            <button type="button"
                    @click="removeToast(toast.id)"
                    aria-label="Dispensar notificação"
                    class="text-subtle hover:text-text p-1 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus">
                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
    </template>
</div>