<!-- #region Toast [C:3] [TYPE Component] [SEMANTICS toast, notification, feedback, message] -->
<!-- @ingroup UI -->
<!-- @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';
    import { Icon } from '$lib/ui';

    function handleDismiss(id: string) {
        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-warning bg-warning-light text-amber-900' : ''}
                {toast.type === 'error' ? 'border-destructive-ring bg-destructive-light text-destructive' : ''}
                {toast.type === 'info' ? 'border-primary-ring bg-primary-light text-primary' : ''}
                {toast.type === 'success' ? 'border-success bg-success-light text-green-900' : ''}
            "
            role="alert"
            aria-live="assertive"
        >
            <div class="mt-0.5 flex-shrink-0">
                {#if toast.type === 'warning'}
                <Icon name="warning" size={20} class="text-warning" strokeWidth={2} />
                {:else if toast.type === 'error'}
                <Icon name="error" size={20} class="text-destructive" strokeWidth={2} />
                {:else if toast.type === 'success'}
                <Icon name="check" size={20} class="text-success" strokeWidth={2} />
                {:else}
                <Icon name="info" size={20} class="text-primary" strokeWidth={2} />
                {/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-warning-light text-warning' : ''}
                    {toast.type === 'error' ? 'hover:bg-destructive-light text-destructive' : ''}
                    {toast.type === 'info' ? 'hover:bg-primary-light text-primary' : ''}
                    {toast.type === 'success' ? 'hover:bg-success-light text-success' : ''}
                "
                aria-label="Закрыть"
            >
                <Icon name="close" size={16} strokeWidth={2} />
            </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-primary'}
            {toast.type === 'success' && 'bg-success'}
            {toast.type === 'error' && 'bg-destructive'}
            {toast.type === 'warning' && 'bg-warning'}
        ">
            {toast.message}
        </div>
    {/each}
</div>
<!-- #endregion Toast -->
