<script lang="ts">
	import { toastStore, type ToastType } from '$lib/stores/toast.svelte';

	const typeStyles: Record<ToastType, { bg: string; border: string; icon: string }> = {
		error: {
			bg: 'bg-red-50 dark:bg-red-900/40',
			border: 'border-red-200 dark:border-red-800',
			icon: 'text-red-500 dark:text-red-400'
		},
		warning: {
			bg: 'bg-amber-50 dark:bg-amber-900/40',
			border: 'border-amber-200 dark:border-amber-800',
			icon: 'text-amber-500 dark:text-amber-400'
		},
		success: {
			bg: 'bg-green-50 dark:bg-green-900/40',
			border: 'border-green-200 dark:border-green-800',
			icon: 'text-green-500 dark:text-green-400'
		},
		info: {
			bg: 'bg-blue-50 dark:bg-blue-900/40',
			border: 'border-blue-200 dark:border-blue-800',
			icon: 'text-blue-500 dark:text-blue-400'
		}
	};

	const typeLabels: Record<ToastType, string> = {
		error: 'Error',
		warning: 'Warning',
		success: 'Success',
		info: 'Info'
	};
</script>

{#if toastStore.toasts.length > 0}
	<div class="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none">
		{#each toastStore.toasts as toast (toast.id)}
			{@const style = typeStyles[toast.type]}
			<div
				class="pointer-events-auto flex items-start gap-3 rounded-lg border px-4 py-3 shadow-lg {style.bg} {style.border}"
				role="alert"
			>
				<!-- Icon -->
				<div class="mt-0.5 shrink-0 {style.icon}">
					{#if toast.type === 'error'}
						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
						</svg>
					{:else if toast.type === 'warning'}
						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
						</svg>
					{:else if toast.type === 'success'}
						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
						</svg>
					{:else}
						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
						</svg>
					{/if}
				</div>

				<!-- Content -->
				<div class="min-w-0 flex-1">
					<p class="text-xs font-medium text-gray-900 dark:text-gray-100">{typeLabels[toast.type]}</p>
					<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-300">{toast.message}</p>
				</div>

				<!-- Dismiss button -->
				{#if toast.dismissable}
					<button
						type="button"
						onclick={() => toastStore.removeToast(toast.id)}
						class="shrink-0 rounded-md p-1 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
						aria-label="Dismiss"
					>
						<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
						</svg>
					</button>
				{/if}
			</div>
		{/each}
	</div>
{/if}
