@props(['type' => 'success', 'message' => ''])

<div
    x-data="{ 
        show: false,
        message: '{{ $message }}',
        type: '{{ $type }}', // success, error, info
        timeout: null,
        init() {
            window.addEventListener('toast-show', event => {
                this.message = event.detail.message;
                this.type = event.detail.type || 'success';
                this.show = true;
                
                if (this.timeout) clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    this.show = false;
                }, 3000);
            });
            
            @if(session('success'))
                this.message = '{{ session('success') }}';
                this.type = 'success';
                this.show = true;
                setTimeout(() => { this.show = false; }, 3000);
            @endif
            
            @if(session('error'))
                this.message = '{{ session('error') }}';
                this.type = 'error';
                this.show = true;
                setTimeout(() => { this.show = false; }, 3000);
            @endif
        }
    }"
    x-show="show"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 transform translate-y-2"
    x-transition:enter-end="opacity-100 transform translate-y-0"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="opacity-100 transform translate-y-0"
    x-transition:leave-end="opacity-0 transform translate-y-2"
    class="fixed bottom-5 right-5 z-99999 flex items-center gap-3 rounded-lg border px-4 py-3 shadow-lg"
    :class="{
        'bg-white border-gray-200 text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300': true, // Base
        'border-l-4 border-l-success-500': type === 'success',
        'border-l-4 border-l-error-500': type === 'error',
        'border-l-4 border-l-brand-500': type === 'info',
    }"
    style="display: none;"
>
    <!-- Icons -->
    <template x-if="type === 'success'">
        <svg class="h-6 w-6 text-success-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <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="type === 'error'">
        <svg class="h-6 w-6 text-error-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
    </template>
    
    <template x-if="type === 'info'">
         <svg class="h-6 w-6 text-brand-500" 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>
        <h4 class="font-medium text-sm" x-text="message"></h4>
    </div>
    
    <button @click="show = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
        <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>
