<script lang="ts">
	import StepConnectGoogle from './steps/StepConnectGoogle.svelte';
	import StepCraftEmail from './steps/StepCraftEmail.svelte';
	import StepCreateEvent from './steps/StepCreateEvent.svelte';
	import StepOverview from './steps/StepOverview.svelte';
	import StepUploadParticipants from './steps/StepUploadParticipants.svelte';
	import { onMount } from 'svelte';
	import { page } from '$app/state';

	let { data, form } = $props();

	let event = $state({});
	let participants = $state([]);
	let email = $state({ body: '', subject: '' });
	let authorized = $state(false);
	let existingEventId = $state(null);
	let isAddingParticipants = $state(false);

	onMount(async () => {
		const eventId = page.url.searchParams.get('eventId');
		if (eventId) {
			existingEventId = eventId;
			isAddingParticipants = true;

			// Fetch existing event data to prefill the form
			const { data: existingEvent } = await data.supabase
				.from('events')
				.select('*')
				.eq('id', eventId)
				.single();

			if (existingEvent) {
				event = {
					name: existingEvent.name,
					date: existingEvent.date,
					id: existingEvent.id
				};
			}
		}
	});

	$effect(() => {
		if (form && form.event) {
			event = form.event;
		}
		if (form && form.participants) {
			participants = form.participants;
		}
	});

	// Array of step components in order
	const steps = [
		StepConnectGoogle,
		StepCreateEvent,
		StepUploadParticipants,
		StepCraftEmail,
		StepOverview
	];

	let step: number = $state(0);

	let stepConditions = $derived([
		authorized,
		!!event?.name,
		!!participants?.length,
		!!email.subject
	]);

	function nextStep() {
		if (step < steps.length - 1) step += 1;
	}
	function prevStep() {
		if (step > 0) step -= 1;
	}
</script>

{#if isAddingParticipants}
	<div class="mt-2 mb-4">
		<h1 class="text-center text-xl font-semibold text-gray-700">
			Adding Participants to "{event.name}"
		</h1>
	</div>
{/if}

{#if step == 0}
	<StepConnectGoogle bind:authorized />
{:else if step == 1}
	<StepCreateEvent bind:event readonly={isAddingParticipants} />
{:else if step == 2}
	<StepUploadParticipants bind:participants />
{:else if step == 3}
	<StepCraftEmail bind:email />
{:else if step == 4}
	<StepOverview
		{data}
		{event}
		{participants}
		{email}
		{stepConditions}
		{existingEventId}
		{isAddingParticipants}
	/>
{/if}

<div class="pb-20"></div>

<div
	class="fixed bottom-0 left-0 z-10 flex w-full items-center justify-between gap-4 border-t border-gray-300 bg-white px-4 py-2"
	style="max-width: 100vw;"
>
	<div class="justify-content-center container mx-auto flex max-w-2xl p-2">
		<button
			onclick={prevStep}
			disabled={step === 0}
			class="min-w-[100px] rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
			aria-label="Previous step"
		>
			Previous
		</button>
		<span class="flex flex-1 items-center justify-center text-center font-medium text-gray-600">
			Step {step + 1} of {steps.length}
		</span>
		<button
			onclick={nextStep}
			disabled={step === steps.length - 1 || !stepConditions[step]}
			class="min-w-[100px] rounded border border-gray-300 bg-white px-4 py-2 text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
		>
			Next
		</button>
	</div>
</div>
