<template>
	<div>
		<!-- Single Featured -->
		<template v-if="layout === 'featured'">
			<div class="relative max-w-4xl mx-auto text-center">
				<!-- Navigation Arrows -->
				<button
					v-if="testimonials.length > 1"
					class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 lg:-translate-x-16 w-11 h-11 flex items-center justify-center rounded-full bg-white dark:bg-neutral-800 shadow-lg border border-neutral-200 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all duration-300 opacity-60 hover:opacity-100"
					@click="prev"
				>
					<UIcon
						name="i-lucide-chevron-left"
						class="w-5 h-5 text-neutral-700 dark:text-neutral-300"
					/>
				</button>
				<button
					v-if="testimonials.length > 1"
					class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 lg:translate-x-16 w-11 h-11 flex items-center justify-center rounded-full bg-white dark:bg-neutral-800 shadow-lg border border-neutral-200 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all duration-300 opacity-60 hover:opacity-100"
					@click="next"
				>
					<UIcon
						name="i-lucide-chevron-right"
						class="w-5 h-5 text-neutral-700 dark:text-neutral-300"
					/>
				</button>

				<!-- Quote Icon -->
				<!-- <div class="relative inline-block mb-8">
					<span class="text-8xl font-serif text-primary-500/20 select-none leading-none serif">"</span>
				</div> -->

				<!-- Quote with crossfade -->
				<Transition name="fade" mode="out-in">
					<blockquote
						:key="currentIndex"
						class="xText-headline text-neutral-900 dark:text-white xText-balance"
					>
						"{{ currentTestimonial.quote }}"
					</blockquote>
				</Transition>

				<!-- Stars -->
				<div
					v-if="hasStars && currentTestimonial.rating"
					class="flex justify-center gap-1 mt-6"
				>
					<UIcon
						v-for="i in 5"
						:key="i"
						name="i-lucide-star"
						class="w-5 h-5"
						:class="
							i <= currentTestimonial.rating
								? 'text-yellow-400'
								: 'text-neutral-300 dark:text-neutral-600'
						"
					/>
				</div>

				<!-- Attribution with crossfade -->
				<Transition name="fade" mode="out-in">
					<div
						:key="currentIndex"
						class="mt-8 flex items-center justify-center gap-4"
					>
						<div class="relative">
							<img
								v-if="currentTestimonial.avatar"
								:src="currentTestimonial.avatar"
								:alt="currentTestimonial.name"
								class="w-14 h-14 rounded-full object-cover ring-2 ring-white dark:ring-neutral-800 shadow-lg"
							/>
							<div
								class="absolute inset-0 rounded-full ring-2 ring-primary-500/20 ring-offset-2 ring-offset-white dark:ring-offset-neutral-950"
							/>
						</div>
						<div class="text-left">
							<p class="font-semibold text-neutral-900 dark:text-white">
								{{ currentTestimonial.name }}
							</p>
							<p class="text-sm text-neutral-600 dark:text-neutral-400">
								{{ currentTestimonial.title }}
								<span v-if="currentTestimonial.company">
									at {{ currentTestimonial.company }}
								</span>
							</p>
						</div>
						<img
							v-if="currentTestimonial.logo"
							:src="currentTestimonial.logo"
							:alt="currentTestimonial.company"
							class="h-8 w-auto ml-4 opacity-60"
						/>
					</div>
				</Transition>

				<!-- Navigation Dots -->
				<div
					v-if="testimonials.length > 1"
					class="mt-8 flex justify-center gap-2"
				>
					<button
						v-for="(_, index) in testimonials"
						:key="index"
						class="w-2 h-2 rounded-full transition-colors duration-300"
						:class="
							index === currentIndex
								? 'bg-primary-500'
								: 'bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-400 dark:hover:bg-neutral-600'
						"
						@click="goToIndex(index)"
					/>
				</div>
			</div>
		</template>

		<!-- Grid Layout -->
		<template v-else-if="layout === 'grid'">
			<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
				<article
					v-for="(testimonial, index) in testimonials"
					:key="testimonial.name"
					class="xGlass rounded-2xl p-6 xFadeUp transition-all duration-300 ease-out hover:-translate-y-1 hover:shadow-[0_12px_40px_rgba(128,128,128,0.2)] dark:hover:shadow-[0_12px_40px_rgba(255,255,255,0.1)]"
					:style="{ transitionDelay: `${index * 100}ms` }"
				>
					<!-- Stars -->
					<div v-if="hasStars" class="flex gap-1 mb-4">
						<UIcon
							v-for="i in 5"
							:key="i"
							name="i-lucide-star"
							class="w-5 h-5"
							:class="
								i <= (testimonial.rating || 5)
									? 'text-yellow-400'
									: 'text-neutral-300 dark:text-neutral-600'
							"
						/>
					</div>

					<!-- Quote -->
					<p class="text-neutral-700 dark:text-neutral-300">
						"{{ testimonial.quote }}"
					</p>

					<!-- Attribution -->
					<div class="mt-6 flex items-center gap-3">
						<img
							v-if="testimonial.avatar"
							:src="testimonial.avatar"
							:alt="testimonial.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">
								{{ testimonial.name.charAt(0) }}
							</span>
						</div>
						<div>
							<p class="font-medium text-neutral-900 dark:text-white text-sm">
								{{ testimonial.name }}
							</p>
							<p class="text-xs text-neutral-500">
								{{ testimonial.title }}
								<span v-if="testimonial.company">
									at {{ testimonial.company }}</span
								>
							</p>
						</div>
					</div>
				</article>
			</div>
		</template>

		<!-- Carousel Layout -->
		<template v-else-if="layout === 'carousel'">
			<div class="relative overflow-hidden">
				<div
					class="flex transition-transform duration-500"
					:style="{
						transform: `translateX(-${currentIndex * 100}%)`,
						transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
					}"
				>
					<article
						v-for="testimonial in testimonials"
						:key="testimonial.name"
						class="w-full flex-shrink-0 px-4"
					>
						<div class="max-w-2xl mx-auto text-center">
							<!-- Stars -->
							<div v-if="hasStars" class="flex justify-center gap-1 mb-6">
								<UIcon
									v-for="i in 5"
									:key="i"
									name="i-lucide-star"
									class="w-5 h-5"
									:class="
										i <= (testimonial.rating || 5)
											? 'text-yellow-400'
											: 'text-neutral-300'
									"
								/>
							</div>

							<!-- Quote -->
							<blockquote class="text-xl text-neutral-900 dark:text-white">
								"{{ testimonial.quote }}"
							</blockquote>

							<!-- Attribution -->
							<div class="mt-6 flex items-center justify-center gap-3">
								<img
									v-if="testimonial.avatar"
									:src="testimonial.avatar"
									:alt="testimonial.name"
									class="w-12 h-12 rounded-full object-cover"
								/>
								<div class="text-left">
									<p class="font-medium text-neutral-900 dark:text-white">
										{{ testimonial.name }}
									</p>
									<p class="text-sm text-neutral-500">
										{{ testimonial.title }}
									</p>
								</div>
							</div>
						</div>
					</article>
				</div>

				<!-- Navigation Arrows -->
				<button
					v-if="testimonials.length > 1"
					class="absolute left-0 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-white/80 dark:bg-neutral-800/80 shadow-lg hover:bg-white dark:hover:bg-neutral-800 transition-colors"
					@click="prev"
				>
					<UIcon name="i-lucide-chevron-left" class="w-5 h-5" />
				</button>
				<button
					v-if="testimonials.length > 1"
					class="absolute right-0 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-white/80 dark:bg-neutral-800/80 shadow-lg hover:bg-white dark:hover:bg-neutral-800 transition-colors"
					@click="next"
				>
					<UIcon name="i-lucide-chevron-right" class="w-5 h-5" />
				</button>

				<!-- Dots -->
				<div
					v-if="testimonials.length > 1"
					class="mt-8 flex justify-center gap-2"
				>
					<button
						v-for="(_, index) in testimonials"
						:key="index"
						class="w-2 h-2 rounded-full transition-colors"
						:class="
							index === currentIndex
								? 'bg-primary-500'
								: 'bg-neutral-300 dark:bg-neutral-700'
						"
						@click="goToIndex(index)"
					/>
				</div>
			</div>
		</template>
	</div>
</template>

<script setup>
// Initialize scroll reveal animations
useScrollReveal();

const props = defineProps({
	/** Array of testimonials [{ quote, name, title?, company?, avatar?, logo?, rating? }] */
	testimonials: {
		type: Array,
		default: () => [
			{
				quote:
					"This product completely transformed how our team works. Highly recommended.",
				name: "Alex Johnson",
				title: "CEO",
				company: "Acme Inc",
				rating: 5,
			},
			{
				quote:
					"The best investment we made this year. Setup was a breeze and results were immediate.",
				name: "Sarah Chen",
				title: "CTO",
				company: "TechCorp",
				rating: 5,
			},
			{
				quote:
					"Outstanding support and a product that actually delivers on its promises.",
				name: "Marcus Williams",
				title: "Product Manager",
				company: "StartupXYZ",
				rating: 5,
			},
		],
	},
	/** Display layout */
	layout: {
		type: String,
		default: "featured",
		validator: (v) => ["featured", "grid", "carousel"].includes(v),
	},
	/** Show star ratings */
	hasStars: {
		type: Boolean,
		default: true,
	},
	/** Auto-rotate (featured/carousel) */
	autoplay: {
		type: Boolean,
		default: true,
	},
	/** Autoplay interval (ms) */
	interval: {
		type: Number,
		default: 5000,
	},
});

const currentIndex = ref(0);
let autoplayInterval = null;

const currentTestimonial = computed(() => {
	return props.testimonials[currentIndex.value] || props.testimonials[0];
});

const goToIndex = (index) => {
	currentIndex.value = index;
	resetAutoplay();
};

const next = () => {
	currentIndex.value = (currentIndex.value + 1) % props.testimonials.length;
	resetAutoplay();
};

const prev = () => {
	currentIndex.value =
		currentIndex.value === 0
			? props.testimonials.length - 1
			: currentIndex.value - 1;
	resetAutoplay();
};

const startAutoplay = () => {
	if (props.autoplay && props.testimonials.length > 1) {
		autoplayInterval = setInterval(() => {
			currentIndex.value = (currentIndex.value + 1) % props.testimonials.length;
		}, props.interval);
	}
};

const resetAutoplay = () => {
	if (autoplayInterval) {
		clearInterval(autoplayInterval);
		startAutoplay();
	}
};

onMounted(() => {
	startAutoplay();
});

onUnmounted(() => {
	if (autoplayInterval) {
		clearInterval(autoplayInterval);
	}
});
</script>

<style scoped>
/* Fade transition for testimonial changes */
.fade-enter-active,
.fade-leave-active {
	transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}
</style>
