{{--
    Toast Notification Container
    Place once in the main layout. Toasts are triggered via $store.toast.show().

    Usage (JS):
      $store.toast.success('Profile updated!');
      $store.toast.error('Something went wrong.');
      $store.toast.warning('Your session will expire soon.');
      $store.toast.info('3 new notifications.');

    Usage (Blade session flash):
      session()->flash('toast-success', 'Saved!');
--}}
<div
    x-data
    aria-live="polite"
    aria-atomic="false"
    class="fixed top-5 right-5 z-[100] flex flex-col gap-3 pointer-events-none"
>
    <template x-for="toast in $store.toast.items" :key="toast.id">
        <div
            x-show="true"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 -translate-y-2 scale-95"
            x-transition:enter-end="opacity-100 translate-y-0 scale-100"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0 -translate-y-1 scale-95"
            :class="{
                'border-green-200 bg-green-50 dark:bg-green-950/80 dark:border-green-800 text-green-800 dark:text-green-200': toast.type === 'success',
                'border-red-200   bg-red-50   dark:bg-red-950/80   dark:border-red-800   text-red-800   dark:text-red-200':   toast.type === 'danger',
                'border-amber-200 bg-amber-50 dark:bg-amber-950/80 dark:border-amber-800 text-amber-800 dark:text-amber-200': toast.type === 'warning',
                'border-blue-200  bg-blue-50  dark:bg-blue-950/80  dark:border-blue-800  text-blue-800  dark:text-blue-200':  toast.type === 'info',
            }"
            class="pointer-events-auto flex min-w-[300px] max-w-sm animate-slide-up items-start gap-3 rounded-xl border p-4 text-sm shadow-hover"
        >
            {{-- Icon --}}
            <span class="flex-shrink-0 mt-0.5">
                <template x-if="toast.type === 'success'">
                    <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </template>
                <template x-if="toast.type === 'danger'">
                    <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </template>
                <template x-if="toast.type === 'warning'">
                    <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <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="toast.type === 'info'">
                    <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <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>
            </span>

            <p class="flex-1 text-sm font-medium" x-text="toast.message"></p>

            <button
                @click="$store.toast.remove(toast.id)"
                type="button"
                class="flex-shrink-0 opacity-60 hover:opacity-100 transition-opacity"
                aria-label="Dismiss"
            >
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
    </template>
</div>

{{-- Flash session toasts --}}
@if(session('toast-success'))
    <script>document.addEventListener('alpine:initialized', () => Alpine.store('toast').success(@js(session('toast-success'))));</script>
@endif
@if(session('toast-error'))
    <script>document.addEventListener('alpine:initialized', () => Alpine.store('toast').error(@js(session('toast-error'))));</script>
@endif
@if(session('toast-warning'))
    <script>document.addEventListener('alpine:initialized', () => Alpine.store('toast').warning(@js(session('toast-warning'))));</script>
@endif
@if(session('toast-info'))
    <script>document.addEventListener('alpine:initialized', () => Alpine.store('toast').info(@js(session('toast-info'))));</script>
@endif