@php
    // Map the passed `position` to flex alignment
    $pos = $position ?? 'top-right';
    $containerAlign = match ($pos) {
        'top-right'    => 'items-start justify-end',
        'top-left'     => 'items-start justify-start',
        'bottom-right' => 'items-end justify-end',
        'bottom-left'  => 'items-end justify-start',
        default        => 'items-start justify-end',
    };
@endphp

<div
    x-data="toastCenter({ maxVisible: 4 })"
    x-on:notify.window="add($event.detail)"
    class="fixed inset-0 z-[9999] pointer-events-none flex {{ $containerAlign }} p-4 sm:p-6"
    aria-live="polite"
    aria-atomic="true"
>
    <div class="w-full max-w-sm space-y-3">
        <template x-for="t in toasts" :key="t.id">
            <div
                class="pointer-events-auto relative rounded-xl shadow-lg ring-1 ring-black/5 overflow-hidden bg-white"
                x-show="t.visible"
                x-transition.opacity.duration.150ms
                role="status"
                @mouseenter="pause(t.id)"
                @mouseleave="resume(t.id)"
            >
                <div class="p-4 flex items-start gap-3">
                    <!-- Icon -->
                    <div class="mt-0.5">
                        <template x-if="t.type === 'success'">
                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                            </svg>
                        </template>
                        <template x-if="t.type === 'error'">
                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </template>
                        <template x-if="t.type === 'info'">
                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M12 18a6 6 0 110-12 6 6 0 010 12z" />
                            </svg>
                        </template>
                        <template x-if="t.type === 'warning'">
                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
                            </svg>
                        </template>
                    </div>

                    <!-- Text -->
                    <div class="flex-1">
                        <p class="text-sm font-semibold"
                           :class="{
                                'text-green-700': t.type==='success',
                                'text-red-700': t.type==='error',
                                'text-blue-700': t.type==='info',
                                'text-amber-700': t.type==='warning'
                           }"
                           x-text="t.title || (t.type === 'success' ? 'Success' : t.type === 'error' ? 'Error' : t.type === 'warning' ? 'Warning' : 'Info')"
                        ></p>
                        <p class="mt-0.5 text-sm text-gray-700" x-text="t.message"></p>
                    </div>

                    <!-- Close -->
                    <button
                        @click="remove(t.id)"
                        class="shrink-0 rounded-md p-1 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                        aria-label="Close notification"
                    >
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>

                <!-- Progress bar -->
                <div class="h-1"
                     :class="{
                        'bg-green-200': t.type==='success',
                        'bg-red-200': t.type==='error',
                        'bg-blue-200': t.type==='info',
                        'bg-amber-200': t.type==='warning'
                     }"
                >
                    <div class="h-1"
                         :class="{
                            'bg-green-600': t.type==='success',
                            'bg-red-600': t.type==='error',
                            'bg-blue-600': t.type==='info',
                            'bg-amber-600': t.type==='warning'
                         }"
                         :style="`width:${t.progress}%`"
                    ></div>
                </div>
            </div>
        </template>
    </div>
</div>

{{-- Alpine module (guarded so it only registers once even if component is included multiple times) --}}
<script>
    window.__notifyInit = window.__notifyInit || false;
    if (!window.__notifyInit) {
        document.addEventListener('alpine:init', () => {
            Alpine.data('toastCenter', ({ maxVisible = 4 } = {}) => ({
                toasts: [],
                maxVisible,

                add(detail) {
                    const d = typeof detail === 'string' ? { message: detail } : (detail || {});
                    const toast = {
                        id: d.id || `t_${Date.now()}_${Math.random().toString(36).slice(2)}`,
                        type: ['success','error','info','warning'].includes(d.type) ? d.type : 'info',
                        title: d.title || null,
                        message: String(d.message || ''),
                        duration: Number.isFinite(d.duration) ? Number(d.duration) : 4000,
                        visible: true,
                        progress: 100,
                        _timer: null,
                        _remaining: null,
                        _lastTickAt: null,
                        _paused: false,
                    };
                    if (!toast.message) return;

                    // Update if same id exists
                    const i = this.toasts.findIndex(x => x.id === toast.id);
                    if (i !== -1) {
                        this.toasts[i] = { ...this.toasts[i], ...toast };
                        this._startTimer(this.toasts[i]);
                        return;
                    }

                    // Enforce stack size
                    if (this.toasts.filter(t => t.visible).length >= this.maxVisible) {
                        const first = this.toasts.find(t => t.visible);
                        if (first) this.remove(first.id);
                    }

                    this.toasts.push(toast);
                    this._startTimer(toast);
                },

                remove(id) {
                    const t = this.toasts.find(x => x.id === id);
                    if (!t) return;
                    t.visible = false;
                    if (t._timer) clearInterval(t._timer);
                    setTimeout(() => { this.toasts = this.toasts.filter(x => x.id !== id); }, 180);
                },

                pause(id) {
                    const t = this.toasts.find(x => x.id === id);
                    if (!t || t._paused) return;
                    t._paused = true;
                    if (t._timer) clearInterval(t._timer);
                    // keep remaining based on last tick
                    const now = Date.now();
                    if (t._lastTickAt) t._remaining = Math.max(0, (t._remaining ?? t.duration) - (now - t._lastTickAt));
                },

                resume(id) {
                    const t = this.toasts.find(x => x.id === id);
                    if (!t || !t._paused) return;
                    t._paused = false;
                    this._startTimer(t, t._remaining ?? t.duration);
                },

                _startTimer(t, remaining = null) {
                    if (t._timer) clearInterval(t._timer);
                    t._remaining = remaining ?? t.duration;
                    t._lastTickAt = Date.now();

                    const tick = 50;
                    t._timer = setInterval(() => {
                        const now = Date.now();
                        const elapsed = now - (t._lastTickAt || now);
                        t._lastTickAt = now;

                        if (!t._paused) {
                            t._remaining = Math.max(0, t._remaining - elapsed);
                            t.progress = (t._remaining / t.duration) * 100;
                        }

                        if (t._remaining <= 0) {
                            clearInterval(t._timer);
                            this.remove(t.id);
                        }
                    }, tick);
                },
            }));
        });

        window.__notifyInit = true;
    }
</script>