{{-- Global toast channel. Bridges existing session flash AND Livewire
     $dispatch('toast', type, message[, undo]) events. Alpine comes from Livewire
     (loaded portal-wide), registered on alpine:init so script order is safe. --}}
@php
    $initial = [];
    if (session('status')) {
        $initial[] = ['type' => 'success', 'message' => session('status')];
    }
    if (session('error')) {
        $initial[] = ['type' => 'error', 'message' => session('error')];
    }
    if ($errors->any()) {
        $initial[] = ['type' => 'error', 'message' => $errors->first()];
    }
@endphp

<div x-data="toaster(@js($initial))" @toast.window="push($event.detail)"
     class="toast-wrap" role="status" aria-live="polite" aria-atomic="false">
    <template x-for="t in toasts" :key="t.id">
        <div class="toast" :class="'toast--' + t.type"
             x-show="t.show" x-transition.duration.220ms>
            <i class="toast-ic fa-solid" :class="icon(t.type)"></i>
            <div class="toast-body">
                <div class="toast-msg" x-text="t.message"></div>
                <template x-if="t.undo">
                    <button type="button" class="toast-undo" @click="runUndo(t)">
                        <i class="fa-light fa-rotate-left"></i> <span x-text="t.undo.label || 'Undo'"></span>
                    </button>
                </template>
            </div>
            <button type="button" class="toast-x" @click="dismiss(t.id)" aria-label="Dismiss"><i class="fa-light fa-xmark"></i></button>
        </div>
    </template>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('toaster', (initial = []) => ({
            toasts: [],
            init() {
                initial.forEach((t) => this.push(t));
                window.Livewire?.on('toast', (e) => this.push(Array.isArray(e) ? e[0] : e));
            },
            push(t) {
                if (! t || ! t.message) return;
                const id = Date.now() + Math.random();
                this.toasts.push({ id, type: t.type || 'info', message: t.message, show: true, undo: t.undo || null });
                if (t.sticky !== true) {
                    setTimeout(() => this.dismiss(id), t.duration || 5500);
                }
            },
            dismiss(id) {
                const t = this.toasts.find((x) => x.id === id);
                if (t) t.show = false;
                setTimeout(() => { this.toasts = this.toasts.filter((x) => x.id !== id); }, 240);
            },
            runUndo(t) {
                if (t.undo && t.undo.event) {
                    window.Livewire?.dispatch(t.undo.event, t.undo.params || {});
                }
                this.dismiss(t.id);
            },
            icon(type) {
                return { success: 'fa-circle-check', error: 'fa-triangle-exclamation', info: 'fa-circle-info' }[type] || 'fa-circle-info';
            },
        }));
    });
</script>