<template>
	<form @submit.prevent="handleSubmit" class="space-y-6">
		<div>
			<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name *</label>
			<input
				id="name"
				v-model="form.name"
				type="text"
				required
				class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
				placeholder="Ihr Name"
			/>
		</div>

		<div>
			<label for="email" class="block text-sm font-medium text-gray-700 mb-1">E-Mail *</label>
			<input
				id="email"
				v-model="form.email"
				type="email"
				required
				class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
				placeholder="ihre@email.de"
			/>
		</div>

		<div>
			<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Betreff</label>
			<input
				id="subject"
				v-model="form.subject"
				type="text"
				class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
				placeholder="Betreff Ihrer Nachricht"
			/>
		</div>

		<div>
			<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Nachricht *</label>
			<textarea
				id="message"
				v-model="form.message"
				required
				rows="5"
				class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent resize-none"
				placeholder="Ihre Nachricht an uns..."
			></textarea>
		</div>

		<!-- Honeypot field for spam protection -->
		<div class="hidden" aria-hidden="true">
			<input v-model="form.honeypot" type="text" name="website" tabindex="-1" autocomplete="off" />
		</div>

		<div v-if="status === 'success'" class="p-4 bg-green-50 text-green-800 rounded-lg">Vielen Dank für Ihre Nachricht! Wir werden uns so schnell wie möglich bei Ihnen melden.</div>

		<div v-if="status === 'error'" class="p-4 bg-red-50 text-red-800 rounded-lg">Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut oder kontaktieren Sie uns direkt per E-Mail.</div>

		<button type="submit" :disabled="isSubmitting" class="w-full sm:w-auto px-8 py-3 bg-gray-900 text-white font-semibold rounded-full hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
			<span v-if="isSubmitting">Wird gesendet...</span>
			<span v-else>Nachricht senden</span>
		</button>
	</form>
</template>

<script setup lang="ts">
const form = reactive({
	name: "",
	email: "",
	subject: "",
	message: "",
	honeypot: "", // spam protection
});

const isSubmitting = ref(false);
const status = ref<"idle" | "success" | "error">("idle");

async function handleSubmit() {
	// Check honeypot
	if (form.honeypot) {
		status.value = "success"; // Fake success for bots
		return;
	}

	isSubmitting.value = true;
	status.value = "idle";

	try {
		await $fetch("/api/contact", {
			method: "POST",
			body: {
				name: form.name,
				email: form.email,
				subject: form.subject || "Kontaktanfrage über Website",
				message: form.message,
			},
		});

		status.value = "success";
		// Reset form
		form.name = "";
		form.email = "";
		form.subject = "";
		form.message = "";
	} catch (error) {
		console.error("Contact form error:", error);
		status.value = "error";
	} finally {
		isSubmitting.value = false;
	}
}
</script>
