<!-- #region Toast [C:3] [TYPE Component] [SEMANTICS toast, notification, feedback, message] -->
<!-- @BRIEF Toast notifications: transient (auto-dismiss) and persistent (close button only).
     Persistent toasts render above modals (z-[100]) with warning style and close button. -->
<!-- @LAYER UI -->
<!--
@RELATION BINDS_TO -> [EXT:frontend:toasts]

@UX_STATE: Empty -> Toast viewport stays mounted without visible notifications.
@UX_STATE: Visible -> Active toast items render with type-specific emphasis and optional close button.
@UX_STATE: Persistent -> Warning-style toast with close button, stays until manually dismissed.
@UX_FEEDBACK Close button on persistent toasts; auto-dismiss on transient toasts.
-->
<script lang="ts">
    import { toasts, removeToast } from '$lib/toasts.svelte.js';

    function handleDismiss(id) {
        removeToast(id);
    }
</script>

<!-- Persistent toasts: ABOVE the modal (z-[100]), top-center, with close button -->
<div class="pointer-events-none fixed inset-0 z-[100] flex items-start justify-center pt-4">
    {#each $toasts.filter(t => t.persistent) as toast (toast.id)}
        <div
            class="pointer-events-auto mx-4 flex w-full max-w-lg items-start gap-3 rounded-lg border p-4 shadow-2xl
                {toast.type === 'warning' ? 'border-amber-300 bg-amber-50 text-amber-900' : ''}
                {toast.type === 'error' ? 'border-red-300 bg-red-50 text-red-900' : ''}
                {toast.type === 'info' ? 'border-blue-200 bg-blue-50 text-blue-900' : ''}
                {toast.type === 'success' ? 'border-green-200 bg-green-50 text-green-900' : ''}
            "
            role="alert"
            aria-live="assertive"
        >
            <div class="mt-0.5 flex-shrink-0">
                {#if toast.type === 'warning'}
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
                {:else if toast.type === 'error'}
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 9l-6 6m0-6l6 6"/></svg>
                {:else if toast.type === 'success'}
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                {:else}
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 16v-4m0-4h.01"/></svg>
                {/if}
            </div>
            <div class="flex-1 text-sm">
                {toast.message}
            </div>
            <button
                type="button"
                onclick={() => handleDismiss(toast.id)}
                class="flex-shrink-0 rounded p-1 transition-colors
                    {toast.type === 'warning' ? 'hover:bg-amber-100 text-amber-400' : ''}
                    {toast.type === 'error' ? 'hover:bg-red-100 text-red-400' : ''}
                    {toast.type === 'info' ? 'hover:bg-blue-100 text-blue-400' : ''}
                    {toast.type === 'success' ? 'hover:bg-green-100 text-green-400' : ''}
                "
                aria-label="Закрыть"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
    {/each}
</div>

<!-- Transient toasts: above modal (z-[60] > modal z-50), bottom-right, auto-dismiss -->
<div class="pointer-events-none fixed bottom-0 right-0 z-[60] p-4">
    {#each $toasts.filter(t => !t.persistent) as toast (toast.id)}
        <div class="pointer-events-auto mb-2 rounded-lg px-4 py-3 text-sm text-white shadow-lg
            {toast.type === 'info' && 'bg-blue-600'}
            {toast.type === 'success' && 'bg-green-600'}
            {toast.type === 'error' && 'bg-red-600'}
            {toast.type === 'warning' && 'bg-amber-600'}
        ">
            {toast.message}
        </div>
    {/each}
</div>
<!-- [/SECTION] -->

<!-- #endregion Toast -->
