@php
    $type    = null;
    $message = null;

    if (session('success')) {
        $type    = 'success';
        $message = session('success');
    } elseif (session('error')) {
        $type    = 'error';
        $message = session('error');
    } elseif (session('warning')) {
        $type    = 'warning';
        $message = session('warning');
    } elseif (session('info')) {
        $type    = 'info';
        $message = session('info');
    }

    $config = match($type) {
        'success' => [
            'border'     => 'border-emerald-200',
            'icon_bg'    => 'bg-emerald-50',
            'icon_color' => 'text-emerald-600',
            'title'      => 'text-surface-900',
            'msg'        => 'text-emerald-700',
        ],
        'error'   => [
            'border'     => 'border-red-200',
            'icon_bg'    => 'bg-red-50',
            'icon_color' => 'text-red-600',
            'title'      => 'text-surface-900',
            'msg'        => 'text-red-700',
        ],
        'warning' => [
            'border'     => 'border-amber-200',
            'icon_bg'    => 'bg-amber-50',
            'icon_color' => 'text-amber-600',
            'title'      => 'text-surface-900',
            'msg'        => 'text-amber-700',
        ],
        'info'    => [
            'border'     => 'border-blue-200',
            'icon_bg'    => 'bg-blue-50',
            'icon_color' => 'text-blue-600',
            'title'      => 'text-surface-900',
            'msg'        => 'text-blue-700',
        ],
        default   => null,
    };
@endphp

<div
    x-data="{
        show: {{ $type && $message ? 'true' : 'false' }},
        type: @js($type),
        message: @js($message),
        timer: null,
        listener: null,
        configs: {
            success: { border: 'border-emerald-200', iconBg: 'bg-emerald-50', iconColor: 'text-emerald-600', title: 'text-surface-900', msg: 'text-emerald-700' },
            error: { border: 'border-red-200', iconBg: 'bg-red-50', iconColor: 'text-red-600', title: 'text-surface-900', msg: 'text-red-700' },
            warning: { border: 'border-amber-200', iconBg: 'bg-amber-50', iconColor: 'text-amber-600', title: 'text-surface-900', msg: 'text-amber-700' },
            info: { border: 'border-blue-200', iconBg: 'bg-blue-50', iconColor: 'text-blue-600', title: 'text-surface-900', msg: 'text-blue-700' },
        },
        get config() {
            return this.configs[this.type] || this.configs.info;
        },
        dismiss() {
            this.show = false;
            if (this.timer) clearTimeout(this.timer);
        },
        present(nextType, nextMessage) {
            this.type = nextType;
            this.message = nextMessage;
            this.show = true;
            if (this.timer) clearTimeout(this.timer);
            this.timer = setTimeout(() => this.dismiss(), 4500);
        },
        init() {
            if (this.show && this.message) this.present(this.type, this.message);
            this.listener = (event) => this.present(event.detail.type, event.detail.message);
            window.addEventListener('app-notify', this.listener);
        },
        destroy() {
            if (this.listener) {
                window.removeEventListener('app-notify', this.listener);
            }
            if (this.timer) clearTimeout(this.timer);
        },
    }"
    x-show="show && message"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 translate-x-8"
    x-transition:enter-end="opacity-100 translate-x-0"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="opacity-100 translate-x-0"
    x-transition:leave-end="opacity-0 translate-x-8"
    class="fixed top-4 right-4 z-[60] w-full max-w-sm"
    style="display: none;"
    aria-live="polite"
>
    <div class="flex items-start gap-3 rounded-2xl border bg-white p-4 shadow-soft-lg" :class="config.border">
        <div class="w-8 h-8 rounded-xl flex items-center justify-center shrink-0" :class="config.iconBg">
            <template x-if="type === 'success'">
                <svg class="w-4 h-4" :class="config.iconColor" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                </svg>
            </template>
            <template x-if="type === 'error'">
                <svg class="w-4 h-4" :class="config.iconColor" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </template>
            <template x-if="type === 'warning'">
                <svg class="w-4 h-4" :class="config.iconColor" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
            </template>
            <template x-if="type === 'info'">
                <svg class="w-4 h-4" :class="config.iconColor" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </template>
        </div>

        <div class="flex-1 min-w-0 pt-0.5">
            <p class="text-sm font-semibold capitalize" :class="config.title" x-text="type"></p>
            <p class="mt-0.5 text-xs" :class="config.msg" x-text="message"></p>
        </div>

        <button type="button" @click="dismiss()"
            class="shrink-0 w-7 h-7 rounded-lg flex items-center justify-center
                   text-surface-400 hover:text-surface-600 hover:bg-surface-100 transition-colors"
            aria-label="Dismiss notification">
            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>
</div>