<template>
	<Teleport to="body">
		<Transition
			enter-active-class="transition-opacity duration-300"
			enter-from-class="opacity-0"
			leave-active-class="transition-opacity duration-200"
			leave-to-class="opacity-0"
		>
			<div
				v-if="isOpen"
				class="fixed inset-0 z-50 flex items-center justify-center"
				@click="close"
				@keydown.escape="close"
			>
				<!-- Backdrop -->
				<div class="absolute inset-0 bg-black/90" />

				<!-- Close Button -->
				<button
					class="absolute top-4 right-4 w-10 h-10 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors z-10"
					@click.stop="close"
				>
					<UIcon name="i-lucide-x" class="w-6 h-6" />
					<span class="sr-only">Close</span>
				</button>

				<!-- Navigation (for galleries) -->
				<template v-if="images.length > 1">
					<button
						class="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors z-10"
						@click.stop="prev"
					>
						<UIcon name="i-lucide-chevron-left" class="w-6 h-6" />
						<span class="sr-only">Previous</span>
					</button>
					<button
						class="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors z-10"
						@click.stop="next"
					>
						<UIcon name="i-lucide-chevron-right" class="w-6 h-6" />
						<span class="sr-only">Next</span>
					</button>
				</template>

				<!-- Image Container -->
				<div
					class="relative max-w-[90vw] max-h-[90vh]"
					@click.stop
				>
					<Transition
						:name="slideDirection"
						mode="out-in"
					>
						<figure :key="currentIndex" class="flex flex-col items-center">
							<img
								:src="currentImage.src"
								:alt="currentImage.alt"
								class="max-w-full max-h-[80vh] object-contain rounded-lg"
								@load="loading = false"
							/>
							<figcaption
								v-if="currentImage.caption"
								class="mt-4 text-center text-white/80 text-sm max-w-lg"
							>
								{{ currentImage.caption }}
							</figcaption>
						</figure>
					</Transition>

					<!-- Loading indicator -->
					<div
						v-if="loading"
						class="absolute inset-0 flex items-center justify-center"
					>
						<UIcon name="i-lucide-loader-2" class="w-8 h-8 text-white animate-spin" />
					</div>
				</div>

				<!-- Counter -->
				<div
					v-if="images.length > 1 && hasCounter"
					class="absolute bottom-4 left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-full bg-white/10 text-white text-sm"
				>
					{{ currentIndex + 1 }} / {{ images.length }}
				</div>

				<!-- Thumbnails -->
				<div
					v-if="images.length > 1 && hasThumbnails"
					class="absolute bottom-16 left-1/2 -translate-x-1/2 flex gap-2"
				>
					<button
						v-for="(image, index) in images"
						:key="index"
						class="w-12 h-12 rounded-lg overflow-hidden border-2 transition-all"
						:class="index === currentIndex ? 'border-white' : 'border-transparent opacity-50 hover:opacity-75'"
						@click.stop="currentIndex = index"
					>
						<img
							:src="image.src"
							:alt="image.alt"
							class="w-full h-full object-cover"
						/>
					</button>
				</div>
			</div>
		</Transition>
	</Teleport>
</template>

<script setup>
const props = defineProps({
	/** v-model for lightbox visibility */
	modelValue: {
		type: Boolean,
		default: false,
	},
	/** Array of images or single image */
	images: {
		type: Array,
		default: () => [],
		// Each image: { src, alt, caption? }
	},
	/** Starting index for galleries */
	startIndex: {
		type: Number,
		default: 0,
	},
	/** Show image counter */
	hasCounter: {
		type: Boolean,
		default: true,
	},
	/** Show thumbnail navigation */
	hasThumbnails: {
		type: Boolean,
		default: false,
	},
});

const emit = defineEmits(['update:modelValue', 'change']);

const currentIndex = ref(props.startIndex);
const loading = ref(false);
const slideDirection = ref('slide-left');

const isOpen = computed({
	get: () => props.modelValue,
	set: (value) => emit('update:modelValue', value),
});

const currentImage = computed(() => {
	return props.images[currentIndex.value] || { src: '', alt: '' };
});

const close = () => {
	isOpen.value = false;
};

const next = () => {
	loading.value = true;
	slideDirection.value = 'slide-left';
	currentIndex.value = (currentIndex.value + 1) % props.images.length;
	emit('change', currentIndex.value);
};

const prev = () => {
	loading.value = true;
	slideDirection.value = 'slide-right';
	currentIndex.value = (currentIndex.value - 1 + props.images.length) % props.images.length;
	emit('change', currentIndex.value);
};

// Keyboard navigation
const handleKeydown = (e) => {
	if (!isOpen.value) return;

	if (e.key === 'ArrowRight') next();
	if (e.key === 'ArrowLeft') prev();
	if (e.key === 'Escape') close();
};

onMounted(() => {
	window.addEventListener('keydown', handleKeydown);
});

onUnmounted(() => {
	window.removeEventListener('keydown', handleKeydown);
});

// Reset to startIndex when opening
watch(isOpen, (open) => {
	if (open) {
		currentIndex.value = props.startIndex;
	}
});
</script>

<style scoped>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-left-enter-from {
	transform: translateX(20px);
	opacity: 0;
}

.slide-left-leave-to {
	transform: translateX(-20px);
	opacity: 0;
}

.slide-right-enter-from {
	transform: translateX(-20px);
	opacity: 0;
}

.slide-right-leave-to {
	transform: translateX(20px);
	opacity: 0;
}
</style>
