<script lang="ts">
	let { emailData = $bindable() } = $props<{
		emailData: {
			subject: string;
			body: string;
		};
	}>();

	const templateVariables = [
		{ name: '{name}', description: "Participant's first name" },
		{ name: '{surname}', description: "Participant's last name" }
	];

	const subjectTemplatesDetected = $derived(
		templateVariables.filter((v) => emailData.subject && emailData.subject.includes(v.name))
	);
	const bodyTemplatesDetected = $derived(
		templateVariables.filter((v) => emailData.body && emailData.body.includes(v.name))
	);
</script>

<div class="space-y-6">
	<div>
		<label for="emailSubject" class="mb-2 block text-sm font-medium text-gray-700">
			Email Subject *
		</label>
		<input
			id="emailSubject"
			type="text"
			bind:value={emailData.subject}
			class="w-full rounded border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none"
			placeholder="Event invitation subject"
		/>
		{#if subjectTemplatesDetected.length > 0}
			<p class="mt-1 text-xs text-gray-500">
				Detected templates: {subjectTemplatesDetected.map((v) => v.name).join(', ')}
			</p>
		{/if}
	</div>

	<div>
		<label for="emailBody" class="mb-2 block text-sm font-medium text-gray-700">
			Email Body *
		</label>
		<textarea
			id="emailBody"
			bind:value={emailData.body}
			rows="8"
			class="w-full rounded border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none"
			placeholder="Email message content..."
		></textarea>
		{#if bodyTemplatesDetected.length > 0}
			<p class="text-xs text-gray-500">
				Detected templates: {bodyTemplatesDetected.map((v) => v.name).join(', ')}
			</p>
		{/if}
	</div>

	<div>
		<p class="mt-2 mb-2 block text-sm font-medium text-gray-700">Tip:</p>
		<p class="text-xs text-gray-500">
			Use <code class="rounded bg-gray-100 px-1 py-0.5 text-xs">&#123;name&#125;</code> and
			<code class="rounded bg-gray-100 px-1 py-0.5 text-xs">&#123;surname&#125;</code> to personalize
			your message. Works for both subject and body. (e.g., "Hello &#123;name&#125;, welcome to our event!")
		</p>
	</div>
</div>
