<template>
	<div :class="containerClasses">
		<!-- Default Variant -->
		<template v-if="variant === 'default'">
			<div class="text-center max-w-2xl mx-auto">
				<h3 class="xText-headline text-neutral-900 dark:text-white">
					{{ title }}
				</h3>
				<p v-if="description" class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
					{{ description }}
				</p>

				<form class="mt-8 flex flex-col sm:flex-row gap-3 max-w-md mx-auto" @submit.prevent="handleSubmit">
					<UInput
						v-model="email"
						type="email"
						placeholder="Enter your email"
						class="flex-1"
						required
					/>
					<UButton type="submit" :loading="loading" :color="button?.color || 'primary'">
						{{ button?.label || 'Subscribe' }}
					</UButton>
				</form>

				<p v-if="hasPrivacy" class="mt-4 text-sm text-neutral-500">
					No spam. Unsubscribe anytime.
				</p>
			</div>
		</template>

		<!-- Inline Variant -->
		<template v-else-if="variant === 'inline'">
			<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
				<div>
					<h3 class="text-xl font-semibold text-neutral-900 dark:text-white">
						{{ title }}
					</h3>
					<p v-if="description" class="mt-1 text-neutral-600 dark:text-neutral-400">
						{{ description }}
					</p>
				</div>

				<form class="flex gap-2 flex-shrink-0" @submit.prevent="handleSubmit">
					<UInput
						v-model="email"
						type="email"
						placeholder="Enter your email"
						class="w-64"
						required
					/>
					<UButton type="submit" :loading="loading" :color="button?.color || 'primary'">
						{{ button?.label || 'Subscribe' }}
					</UButton>
				</form>
			</div>
		</template>

		<!-- Card Variant -->
		<template v-else-if="variant === 'card'">
			<div class="rounded-2xl bg-primary-50 dark:bg-primary-950/30 p-8 md:p-12">
				<div class="max-w-xl mx-auto text-center">
					<h3 class="xText-title text-neutral-900 dark:text-white">
						{{ title }}
					</h3>
					<p v-if="description" class="mt-3 text-neutral-600 dark:text-neutral-400">
						{{ description }}
					</p>

					<form class="mt-6 flex flex-col sm:flex-row gap-3" @submit.prevent="handleSubmit">
						<UInput
							v-model="email"
							type="email"
							placeholder="Enter your email"
							class="flex-1"
							required
						/>
						<UButton type="submit" :loading="loading" :color="button?.color || 'primary'">
							{{ button?.label || 'Subscribe' }}
						</UButton>
					</form>

					<p v-if="hasPrivacy" class="mt-4 text-sm text-neutral-500">
						No spam. Unsubscribe anytime.
					</p>
				</div>
			</div>
		</template>

		<!-- Compact Variant -->
		<template v-else-if="variant === 'compact'">
			<div class="rounded-xl bg-neutral-100 dark:bg-neutral-900 p-6">
				<h4 class="font-semibold text-neutral-900 dark:text-white">
					{{ title }}
				</h4>
				<p v-if="description" class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
					{{ description }}
				</p>

				<form class="mt-4 space-y-3" @submit.prevent="handleSubmit">
					<UInput
						v-model="email"
						type="email"
						placeholder="Enter your email"
						class="w-full"
						required
					/>
					<UButton type="submit" :loading="loading" :color="button?.color || 'primary'" block>
						{{ button?.label || 'Subscribe' }}
					</UButton>
				</form>

				<p v-if="hasPrivacy" class="mt-3 text-xs text-neutral-500">
					No spam. Unsubscribe anytime.
				</p>
			</div>
		</template>
	</div>
</template>

<script setup>
const props = defineProps({
	/** CTA title */
	title: {
		type: String,
		default: 'Subscribe to our newsletter',
	},
	/** CTA description */
	description: {
		type: String,
		default: '',
	},
	/** Button config { label: string, color?: string } */
	button: {
		type: Object,
		default: () => ({ label: 'Subscribe' }),
	},
	/** Style variant */
	variant: {
		type: String,
		default: 'default',
		validator: (v) => ['default', 'inline', 'card', 'compact'].includes(v),
	},
	/** Has privacy note */
	hasPrivacy: {
		type: Boolean,
		default: true,
	},
});

const emit = defineEmits(['submit']);

const email = ref('');
const loading = ref(false);

const containerClasses = computed(() => {
	if (props.variant === 'default') {
		return '';
	}
	return '';
});

const handleSubmit = async () => {
	if (!email.value) return;

	loading.value = true;
	emit('submit', email.value);

	// Reset after emit (parent handles actual submission)
	setTimeout(() => {
		loading.value = false;
	}, 1000);
};
</script>
