<script lang="ts">
	import { goto } from '$app/navigation';
	
	let { data, event, participants, email, stepConditions } = $props();

	function redirectToFinish() {
		// Generate a random variable name
		const varName = 'event_' + Math.random().toString(36).substr(2, 9);
		// Save the data to sessionStorage
		sessionStorage.setItem(
			varName,
			JSON.stringify({ event, participants, email })
		);
		// Redirect with the variable name as a query parameter
		goto(`/private/events/creator/finish?data=${encodeURIComponent(varName)}`);
	}

</script>

<!-- New Event Overview -->
<div class="mb-4 rounded border border-gray-300 bg-white p-4">
	<h2 class="mb-2 text-xl font-bold">Event Overview</h2>
	<ul class="space-y-1">
		<li><span class="font-semibold">Name:</span> {event.name}</li>
		<li><span class="font-semibold">Date:</span> {event.date}</li>
	</ul>
</div>

<!-- Email Overview -->
<div class="mb-4 rounded border border-gray-300 bg-white p-4">
	<h2 class="mb-2 text-xl font-bold">Email Preview</h2>
	<div class="mb-2"><span class="font-semibold">Subject:</span> {email.subject}</div>
	<div class="rounded border bg-gray-50 p-2 whitespace-pre-line text-gray-700">
		<span class="font-semibold"></span>
		<div>{email.body}</div>
	</div>
</div>

<!-- Participants Overview -->
<div class="rounded border border-gray-300 bg-white p-4">
	<h2 class="mb-2 text-xl font-bold">Participants ({participants.length})</h2>
	<ul class="space-y-1">
		{#each participants.slice(0, 10) as p}
			<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
				<span class="font-semibold">{p.name} {p.surname}</span>
				<span class="flex-1"></span>
				<span class="text-right font-mono text-xs text-gray-600">{p.email}</span>
			</li>
		{/each}
	</ul>
	<p class="mt-2 text-sm text-gray-500">Note: Only the first 10 participants are shown.</p>
</div>

<button
	onclick={redirectToFinish}
	class="mt-4 w-full rounded bg-blue-600 px-4 py-3 font-bold text-white
	transition-colors duration-200 hover:bg-blue-700
	disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500"
	disabled={!stepConditions.every(Boolean)}
>
	Generate QR codes and send
</button>

<div class="mt-2 space-y-1">
	{#if !stepConditions[0]}
		<p class="text-sm text-red-500">Please provide an event name before proceeding.</p>
	{/if}
	{#if !stepConditions[1]}
		<p class="text-sm text-red-500">Please add at least one participant before proceeding.</p>
	{/if}
	{#if !stepConditions[2]}
		<p class="text-sm text-red-500">Please provide an email subject before proceeding.</p>
	{/if}
	{#if !stepConditions[3]}
		<p class="text-sm text-red-500">Please provide an email body before proceeding.</p>
	{/if}
</div>
