@props([
    'position' => 'top-right',
])

@php
    $positions = [
        'top-right' => 'top-4 end-4',
        'top-left' => 'top-4 start-4',
        'bottom-right' => 'bottom-4 end-4',
        'bottom-left' => 'bottom-4 start-4',
    ];
    $positionClass = $positions[$position] ?? $positions['top-right'];
@endphp

<div
    x-data="{
        toasts: [],
        add(toast) {
            const id = Date.now();
            this.toasts.push({ id, ...toast });
            setTimeout(() => this.remove(id), toast.duration || 5000);
        },
        remove(id) {
            this.toasts = this.toasts.filter(t => t.id !== id);
        }
    }"
    x-on:toast.window="add($event.detail)"
    {{ $attributes->merge(['class' => 'fixed z-50 ' . $positionClass]) }}
    aria-live="polite"
    aria-atomic="true"
>
    <template x-for="toast in toasts" :key="toast.id">
        <div
            x-show="true"
            x-transition:enter="toast-enter"
            x-transition:enter-start="toast-enter"
            x-transition:enter-end="toast-enter-active"
            x-transition:leave="toast-enter-active"
            x-transition:leave-start="toast-enter-active"
            x-transition:leave-end="toast-enter"
            class="mb-3 flex items-center gap-3 rounded-lg p-4 shadow-lg min-w-[300px] max-w-md"
            :class="{
                'bg-success text-white': toast.type === 'success',
                'bg-danger text-white': toast.type === 'error',
                'bg-warning text-body': toast.type === 'warning',
                'bg-cta text-white': toast.type === 'info' || !toast.type
            }"
            role="alert"
        >
            {{-- Icon based on type --}}
            <template x-if="toast.type === 'success'">
                <svg class="h-5 w-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
            </template>
            <template x-if="toast.type === 'error'">
                <svg class="h-5 w-5 flex-shrink-0" 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="toast.type === 'warning'">
                <svg class="h-5 w-5 flex-shrink-0" 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="toast.type === 'info' || !toast.type">
                <svg class="h-5 w-5 flex-shrink-0" 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>

            {{-- Message --}}
            <span x-text="toast.message" class="flex-1"></span>

            {{-- Close button --}}
            <button
                x-on:click="remove(toast.id)"
                class="flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity"
                :aria-label="'{{ __('common.close') }}'"
            >
                <svg class="h-4 w-4" 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>
    </template>
</div>