<template>
	<Transition
		enter-active-class="transition-all duration-300 ease-out"
		enter-from-class="translate-y-4 opacity-0"
		leave-active-class="transition-all duration-200 ease-in"
		leave-to-class="translate-y-4 opacity-0"
	>
		<aside v-if="isVisible" class="fixed bottom-6 right-6 z-40 max-w-sm">
			<div class="xGlass rounded-2xl p-4 shadow-xl">
				<!-- Close button -->
				<button
					class="absolute top-2 right-2 p-1 rounded-full hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
					aria-label="Close"
					@click="dismiss"
				>
					<UIcon name="i-lucide-x" class="w-4 h-4 text-gray-400" />
				</button>

				<!-- Content -->
				<div class="flex gap-3">
					<!-- Avatar -->
					<img
						v-if="avatar"
						:src="avatar"
						:alt="name"
						class="w-12 h-12 rounded-full object-cover flex-shrink-0"
					/>
					<div
						v-else
						class="w-12 h-12 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center flex-shrink-0"
					>
						<span
							class="text-primary-600 dark:text-primary-400 font-medium text-lg"
						>
							{{ name.charAt(0) }}
						</span>
					</div>

					<div class="flex-1 min-w-0">
						<!-- Header -->
						<div class="flex items-center gap-2 mb-1">
							<span class="font-medium text-gray-900 dark:text-white">
								{{ name }}
							</span>
							<span v-if="online" class="w-2 h-2 rounded-full bg-green-500" />
						</div>

						<!-- Message -->
						<p class="text-sm text-gray-600 dark:text-gray-400">
							{{ message }}
						</p>

						<!-- Action -->
						<UButton
							v-if="actionText"
							size="sm"
							class="mt-3"
							@click="handleAction"
						>
							{{ actionText }}
						</UButton>
					</div>
				</div>
			</div>
		</aside>
	</Transition>
</template>

<script setup>
const props = defineProps({
	/** v-model visibility */
	modelValue: {
		type: Boolean,
		default: false,
	},
	/** Avatar image URL */
	avatar: {
		type: String,
		default: "",
	},
	/** Person/bot name */
	name: {
		type: String,
		default: "Support",
	},
	/** Chat message */
	message: {
		type: String,
		default: "Hi there! 👋 How can I help you today?",
	},
	/** Show online indicator */
	online: {
		type: Boolean,
		default: true,
	},
	/** Button text */
	actionText: {
		type: String,
		default: "",
	},
	/** Auto-dismiss after ms (0 = never) */
	autoDismiss: {
		type: Number,
		default: 0,
	},
	/** Delay before showing (ms) */
	delay: {
		type: Number,
		default: 3000,
	},
});

const emit = defineEmits(["update:modelValue", "action", "dismiss"]);

const isVisible = ref(false);
let dismissTimeout = null;
let showTimeout = null;

const dismiss = () => {
	isVisible.value = false;
	emit("update:modelValue", false);
	emit("dismiss");
};

const handleAction = () => {
	emit("action");
};

watch(
	() => props.modelValue,
	(val) => {
		if (val) {
			showTimeout = setTimeout(() => {
				isVisible.value = true;

				if (props.autoDismiss > 0) {
					dismissTimeout = setTimeout(dismiss, props.autoDismiss);
				}
			}, props.delay);
		} else {
			isVisible.value = false;
		}
	},
	{ immediate: true }
);

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