@props([
    'on',
    'timeout' => 3000,
    'closeable' => true,
])

@php
    $typeClasses = [
        'success' => 'border-success-500',
        'error'   => 'border-red-500',
        'warning' => 'border-yellow-500',
        'info'    => 'border-blue-500',
    ];

    $iconWrapClasses = [
        'success' => 'text-success-600 dark:text-success-500 bg-success-50 dark:bg-success-500/[0.15]',
        'error'   => 'text-red-600 dark:text-red-500 bg-red-50 dark:bg-red-500/[0.15]',
        'warning' => 'text-yellow-700 dark:text-yellow-500 bg-yellow-50 dark:bg-yellow-500/[0.15]',
        'info'    => 'text-blue-600 dark:text-blue-500 bg-blue-50 dark:bg-blue-500/[0.15]',
    ];
@endphp

<div
    x-data="{ shown: false, timeout: null, message: '', type: 'success' }"
    x-init="
    @this.on('{{ $on }}', (...args) => {
        clearTimeout(timeout);

        // Livewire أحياناً بيمررها كـ args: [ {type, message} ]
        let payload = args?.[0] ?? args ?? {};

        // لو payload نفسه Array (احتياط)
        if (Array.isArray(payload)) payload = payload?.[0] ?? {};

        type = payload.type ?? 'success';
        message = payload.message ?? '';

        shown = true;

        timeout = setTimeout(() => { shown = false }, {{ $timeout }});
    })
"
    x-show.transition.out.opacity.duration.500ms="shown"
    x-transition:leave.opacity.duration.500ms
    x-transition:enter.opacity.duration.500ms
    style="display: none;"
    x-cloak
    {{ $attributes->merge(['class' => 'fixed right-6 bottom-6 p-2 z-999 flex items-center justify-between gap-3 w-full sm:max-w-[340px] rounded-md border-b-4 bg-white p-3 shadow-theme-sm dark:bg-[#1E2634]']) }}
    :class="{
        'border-success-500': type === 'success',
        'border-red-500': type === 'error',
        'border-yellow-500': type === 'warning',
        'border-blue-500': type === 'info',
    }"
>
    <div class="flex items-center gap-4">
        <div
            class="flex h-10 w-10 items-center justify-center rounded-lg"
            :class="{
                'text-success-600 dark:text-success-500 bg-success-50 dark:bg-success-500/[0.15]': type === 'success',
                'text-red-600 dark:text-red-500 bg-red-50 dark:bg-red-500/[0.15]': type === 'error',
                'text-yellow-700 dark:text-yellow-500 bg-yellow-50 dark:bg-yellow-500/[0.15]': type === 'warning',
                'text-blue-600 dark:text-blue-500 bg-blue-50 dark:bg-blue-500/[0.15]': type === 'info',
            }"
        >
            <svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M3.55078 12C3.55078 7.33417 7.3332 3.55176 11.999 3.55176C16.6649 3.55176 20.4473 7.33417 20.4473 12C20.4473 16.6659 16.6649 20.4483 11.999 20.4483C7.3332 20.4483 3.55078 16.6659 3.55078 12ZM11.999 2.05176C6.50477 2.05176 2.05078 6.50574 2.05078 12C2.05078 17.4943 6.50477 21.9483 11.999 21.9483C17.4933 21.9483 21.9473 17.4943 21.9473 12C21.9473 6.50574 17.4933 2.05176 11.999 2.05176ZM15.5126 10.6333C15.8055 10.3405 15.8055 9.86558 15.5126 9.57269C15.2197 9.27979 14.7448 9.27979 14.4519 9.57269L11.1883 12.8364L9.54616 11.1942C9.25327 10.9014 8.7784 10.9014 8.4855 11.1942C8.19261 11.4871 8.19261 11.962 8.4855 12.2549L10.6579 14.4273C10.7986 14.568 10.9894 14.647 11.1883 14.647C11.3872 14.647 11.578 14.568 11.7186 14.4273L15.5126 10.6333Z"
                    fill=""></path>
            </svg>
        </div>

        <h4 class="sm:text-base text-sm text-gray-800 dark:text-white/90">
            <span x-text="message || '{{ addslashes($slot->isEmpty() ? 'Saved.' : $slot) }}'"></span>
        </h4>
    </div>

    @if ($closeable)
        <button @click="shown = false" class="text-gray-400 hover:text-gray-800 dark:hover:text-white/90">
            <svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M6.04289 16.5418C5.65237 16.9323 5.65237 17.5655 6.04289 17.956C6.43342 18.3465 7.06658 18.3465 7.45711 17.956L11.9987 13.4144L16.5408 17.9565C16.9313 18.347 17.5645 17.347 17.955 17.9565C18.3455 17.566 18.3455 16.9328 17.955 16.5423L13.4129 12.0002L17.955 7.45808C18.3455 7.06756 18.3455 6.43439 17.955 6.04387C17.5645 5.65335 16.9313 5.65335 16.5408 6.04387L11.9987 10.586L7.45711 6.04439C7.06658 5.65386 6.43342 5.65386 6.04289 6.04439C5.65237 6.43491 5.65237 7.06808 6.04289 7.4586L10.5845 12.0002L6.04289 16.5418Z"
                    fill=""></path>
            </svg>
        </button>
    @endif
</div>