<div id="toast" class="fixed bottom-6 right-6 flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg text-white text-sm font-medium max-w-xs z-[999] transition-all duration-300 opacity-0 -translate-y-5 pointer-events-none bg-gray-800">
    <div id="toast-icon"></div>
    <span id="toast-message"></span>
</div>

<style>
    #toast.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
</style>

<script>
    const toast = document.getElementById('toast');
    const toastIcon = document.getElementById('toast-icon');
    const toastMessage = document.getElementById('toast-message');
    let toastTimer;

    // SVG иконки
    const ICONS = {
        success: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-200" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>`,
        error: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-200" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" /></svg>`
    };

    const showToast = (message, type) => {
        clearTimeout(toastTimer);
        toastMessage.textContent = message;

        // Чистим старые классы цвета и добавляем новый
        toast.classList.remove('bg-green-600', 'bg-red-600', 'bg-gray-800');

        if (type === 'success') {
            toast.classList.add('bg-green-600');
            toastIcon.innerHTML = ICONS.success;
        } else {
            toast.classList.add('bg-red-600');
            toastIcon.innerHTML = ICONS.error;
        }

        toast.classList.add('is-visible');
        toastTimer = setTimeout(() => toast.classList.remove('is-visible'), 4000);
    };

    document.addEventListener('show-toast', (event) => {
        // @ts-ignore
        const { message, type } = event.detail;
        showToast(message, type);
    });
</script>