package popup

// ToastNotification displays an individual toast notification
templ ToastNotification() {
	<div
		class="pointer-events-auto rounded-lg shadow-lg overflow-hidden w-full"
		:class="{
			'bg-dark-green border-2 border-green': toast.type === 'success',
			'bg-dark-yellow border-2 border-yellow': toast.type === 'warning',
			'bg-dark-blue border-2 border-blue': toast.type === 'info'
		}"
		x-transition:enter="transition ease-out duration-300"
		x-transition:enter-start="opacity-0 translate-x-full"
		x-transition:enter-end="opacity-100 translate-x-0"
		x-transition:leave="transition ease-in duration-200"
		x-transition:leave-start="opacity-100 translate-x-0"
		x-transition:leave-end="opacity-0 translate-x-full"
		@mouseenter="toast.paused = true"
		@mouseleave="toast.paused = false"
		role="alert"
	>
		<!-- Toast Content -->
		<div class="p-4">
			<div class="flex justify-between items-start gap-3">
				<!-- Icon + Content -->
				<div class="flex items-start gap-3 flex-1">
					<!-- Icon -->
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 24 24"
						fill="currentColor"
						class="size-5 flex-shrink-0"
						:class="{
							'text-green': toast.type === 'success',
							'text-yellow': toast.type === 'warning',
							'text-blue': toast.type === 'info'
						}"
					>
						<!-- Success Icon (checkmark) -->
						<template x-if="toast.type === 'success'">
							<path
								fill-rule="evenodd"
								d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
								clip-rule="evenodd"
							></path>
						</template>
						<!-- Warning Icon (exclamation) -->
						<template x-if="toast.type === 'warning'">
							<path
								fill-rule="evenodd"
								d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
								clip-rule="evenodd"
							></path>
						</template>
						<!-- Info Icon (information) -->
						<template x-if="toast.type === 'info'">
							<path
								fill-rule="evenodd"
								d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z"
								clip-rule="evenodd"
							></path>
						</template>
					</svg>
					<!-- Text Content -->
					<div class="flex-1 min-w-0">
						<p
							class="font-semibold"
							:class="{
								'text-green': toast.type === 'success',
								'text-yellow': toast.type === 'warning',
								'text-blue': toast.type === 'info'
							}"
							x-text="toast.title"
						></p>
						<p class="text-sm text-subtext0 mt-1" x-text="toast.message"></p>
					</div>
				</div>
				<!-- Close Button -->
				<button
					@click="removeToast(toast.id)"
					class="text-subtext0 hover:text-text transition flex-shrink-0"
					aria-label="Close notification"
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke-width="1.5"
						stroke="currentColor"
						class="size-5"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							d="M6 18L18 6M6 6l12 12"
						></path>
					</svg>
				</button>
			</div>
		</div>
		<!-- Progress Bar -->
		<div class="h-1 bg-surface0">
			<div
				class="h-full"
				:class="{
					'bg-green': toast.type === 'success',
					'bg-yellow': toast.type === 'warning',
					'bg-blue': toast.type === 'info'
				}"
				:style="`width: ${toast.progress}%`"
			></div>
		</div>
	</div>
}