<template>
	<section
		class="relative border-t overflow-hidden"
		:class="[
			variant === 'dark'
				? 'bg-neutral-950 border-neutral-800'
				: 'bg-neutral-50 dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800'
		]"
	>
		<!-- Background Pattern -->
		<XMarkPatternBg
			v-if="pattern"
			:pattern="pattern"
			:opacity="patternOpacity"
			:fade="false"
		/>

		<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
			<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-8">
				<!-- Content -->
				<div class="flex-1">
					<h3
						class="text-xl font-semibold"
						:class="variant === 'dark' ? 'text-white' : 'text-neutral-900 dark:text-white'"
					>
						{{ title }}
					</h3>
					<p
						v-if="description"
						class="mt-2"
						:class="variant === 'dark' ? 'text-neutral-400' : 'text-neutral-600 dark:text-neutral-400'"
					>
						{{ description }}
					</p>
				</div>

				<!-- Form -->
				<div class="flex-shrink-0 w-full md:w-auto">
					<!-- Success State -->
					<Transition
						enter-active-class="transition-all duration-300"
						enter-from-class="opacity-0 translate-y-2"
						leave-active-class="transition-all duration-200"
						leave-to-class="opacity-0"
					>
						<div
							v-if="submitted"
							class="flex items-center gap-3 px-4 py-3 rounded-lg"
							:class="variant === 'dark' ? 'bg-primary-500/20 text-primary-300' : 'bg-primary-50 dark:bg-primary-950/30 text-primary-600 dark:text-primary-400'"
						>
							<UIcon name="i-lucide-check-circle" class="w-5 h-5" />
							<span class="text-sm font-medium">{{ successMessage }}</span>
						</div>
					</Transition>

					<!-- Form -->
					<form
						v-if="!submitted"
						class="flex flex-col sm:flex-row gap-3"
						@submit.prevent="handleSubmit"
					>
						<UInput
							v-model="email"
							type="email"
							:placeholder="placeholder"
							class="w-full sm:w-72"
							:disabled="loading"
							required
						/>
						<UButton
							type="submit"
							:loading="loading"
							:color="button?.color || 'primary'"
							class="whitespace-nowrap"
						>
							{{ button?.label || 'Subscribe' }}
						</UButton>
					</form>

					<!-- Privacy Note -->
					<p
						v-if="hasPrivacy && !submitted"
						class="mt-3 text-xs"
						:class="variant === 'dark' ? 'text-neutral-500' : 'text-neutral-500 dark:text-neutral-500'"
					>
						{{ privacyText }}
					</p>
				</div>
			</div>
		</div>
	</section>
</template>

<script setup>
const props = defineProps({
	/** Section title */
	title: {
		type: String,
		default: 'Subscribe to our newsletter',
	},
	/** Section description */
	description: {
		type: String,
		default: 'Get the latest news and updates.',
	},
	/** Email placeholder */
	placeholder: {
		type: String,
		default: 'Enter your email',
	},
	/** Button config { label: string, color?: string } */
	button: {
		type: Object,
		default: () => ({ label: 'Subscribe' }),
	},
	/** Has privacy note */
	hasPrivacy: {
		type: Boolean,
		default: true,
	},
	/** Privacy note text */
	privacyText: {
		type: String,
		default: 'No spam. Unsubscribe anytime.',
	},
	/** Success message after submission */
	successMessage: {
		type: String,
		default: 'Thanks for subscribing!',
	},
	/** Style variant */
	variant: {
		type: String,
		default: 'dark',
		validator: (v) => ['dark', 'light'].includes(v),
	},
	/** Background pattern type (dots, grid, diagonal, topography, circuit, waves) or falsy to disable */
	pattern: {
		type: String,
		default: null,
		validator: (v) => !v || ['dots', 'grid', 'diagonal', 'topography', 'circuit', 'waves'].includes(v),
	},
	/** Pattern opacity (0-1) */
	patternOpacity: {
		type: Number,
		default: 0.05,
	},
	/** Reset form after delay (ms), 0 to not reset */
	resetDelay: {
		type: Number,
		default: 5000,
	},
});

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

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

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

	loading.value = true;

	// Emit the email for parent to handle
	emit('submit', email.value);

	// Simulate submission delay
	await new Promise((resolve) => setTimeout(resolve, 800));

	loading.value = false;
	submitted.value = true;

	// Reset after delay if configured
	if (props.resetDelay > 0) {
		setTimeout(() => {
			submitted.value = false;
			email.value = '';
		}, props.resetDelay);
	}
};
</script>
