<template>
	<Transition
		enter-active-class="transition-all duration-500 ease-out"
		:enter-from-class="enterFromClass"
		leave-active-class="transition-all duration-300 ease-in"
		:leave-to-class="leaveToClass"
	>
		<aside
			v-if="currentNotification"
			class="fixed z-40"
			:class="placementClasses"
		>
			<div
				class="bg-white dark:bg-gray-900 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800 p-4 flex items-center gap-3"
			>
				<!-- Avatar -->
				<img
					v-if="currentNotification.avatar"
					:src="currentNotification.avatar"
					:alt="currentNotification.name"
					class="w-10 h-10 rounded-full object-cover"
				/>
				<div
					v-else
					class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center"
				>
					<span class="text-primary-600 dark:text-primary-400 font-medium">
						{{ currentNotification.name.charAt(0) }}
					</span>
				</div>

				<!-- Content -->
				<div>
					<p class="text-sm text-gray-900 dark:text-white">
						<span class="font-medium">{{ currentNotification.name }}</span>
						{{ currentNotification.action }}
					</p>
					<p class="text-xs text-gray-500 mt-0.5">
						{{ currentNotification.time }}
					</p>
				</div>

				<!-- Status icon -->
				<UIcon
					v-if="showIcon && iconName"
					:name="iconName"
					:class="iconClasses"
				/>
			</div>
		</aside>
	</Transition>
</template>

<script setup>
const props = defineProps({
	/** List of notifications to cycle through [{ name, action, time, avatar? }] */
	notifications: {
		type: Array,
		default: () => [
			{ name: "Alex M.", action: "just signed up", time: "2 minutes ago" },
			{ name: "Sarah K.", action: "upgraded to Pro", time: "5 minutes ago" },
			{
				name: "James T.",
				action: "started a free trial",
				time: "8 minutes ago",
			},
		],
		validator: (arr) => arr.every((n) => n.name && n.action && n.time),
	},
	/** Time between notifications (ms) */
	interval: {
		type: Number,
		default: 4000,
	},
	/** Delay before first notification (ms) */
	initialDelay: {
		type: Number,
		default: 5000,
	},
	/** How long each notification shows (ms) */
	displayDuration: {
		type: Number,
		default: 3000,
	},
	/** Toast placement */
	placement: {
		type: String,
		default: "topRight",
		validator: (v) =>
			["topLeft", "topRight", "bottomLeft", "bottomRight"].includes(v),
	},
	/** Toast type - determines icon and color */
	type: {
		type: String,
		default: "success",
		validator: (v) => ["success", "error", "warning", "info"].includes(v),
	},
	/** Whether to show the status icon */
	showIcon: {
		type: Boolean,
		default: true,
	},
});

const placementClasses = computed(() => {
	const placements = {
		topLeft: "top-6 left-6",
		topRight: "top-6 right-6",
		bottomLeft: "bottom-6 left-6",
		bottomRight: "bottom-6 right-6",
	};
	return placements[props.placement];
});

const iconConfig = {
	success: {
		name: "i-lucide-badge-check",
		color: "text-green-500",
	},
	error: {
		name: "i-lucide-x-circle",
		color: "text-red-500",
	},
	warning: {
		name: "i-lucide-alert-triangle",
		color: "text-yellow-500",
	},
	info: {
		name: "i-lucide-info",
		color: "text-blue-500",
	},
};

const iconName = computed(() => {
	if (!props.showIcon) return null;
	return iconConfig[props.type]?.name || null;
});

const iconClasses = computed(() => {
	const baseClasses = "w-5 h-5 flex-shrink-0";
	const colorClass = iconConfig[props.type]?.color || "text-gray-500";
	return `${baseClasses} ${colorClass}`;
});

const enterFromClass = computed(() => {
	if (props.placement.includes("Left")) {
		return "-translate-x-full opacity-0";
	}
	return "translate-x-full opacity-0";
});

const leaveToClass = computed(() => {
	if (props.placement.includes("Left")) {
		return "-translate-x-full opacity-0";
	}
	return "translate-x-full opacity-0";
});

const currentNotification = ref(null);
const currentIndex = ref(0);
let showTimeout = null;
let hideTimeout = null;
let cycleTimeout = null;

const showNext = () => {
	if (props.notifications.length === 0) return;

	currentNotification.value = props.notifications[currentIndex.value];
	currentIndex.value = (currentIndex.value + 1) % props.notifications.length;

	hideTimeout = setTimeout(() => {
		currentNotification.value = null;

		cycleTimeout = setTimeout(showNext, props.interval - props.displayDuration);
	}, props.displayDuration);
};

onMounted(() => {
	if (import.meta.client && props.notifications.length > 0) {
		showTimeout = setTimeout(showNext, props.initialDelay);
	}
});

onUnmounted(() => {
	if (showTimeout) clearTimeout(showTimeout);
	if (hideTimeout) clearTimeout(hideTimeout);
	if (cycleTimeout) clearTimeout(cycleTimeout);
});
</script>
