<script lang="ts">
	import QRScanner from './QRScanner.svelte';
	import TicketDisplay from './TicketDisplay.svelte';
	import { onMount } from 'svelte';

	import type { TicketData } from '$lib/types/types';
	import { ScanState, defaultTicketData } from '$lib/types/types';

	let { data } = $props();
	let scanned_id = $state<string>('');
	let ticket_data = $state<TicketData>(defaultTicketData);
	let scan_state = $state<ScanState>(ScanState.scanning);

	// Events related state
	interface Event {
		id: string;
		name: string;
		date: string;
	}

	let events = $state<Event[]>([]);
	let selectedEventId = $state<string>('');
	let isLoadingEvents = $state(true);
	let eventsError = $state('');

	onMount(async () => {
		await loadEvents();
	});

	async function loadEvents() {
		isLoadingEvents = true;
		eventsError = '';

		try {
			const { data: eventsData, error } = await data.supabase
				.from('events')
				.select('id, name, date')
				.order('date', { ascending: false });

			if (error) throw error;
			events = eventsData || [];

			// If there are events, select the first one by default
			if (events.length > 0) {
				selectedEventId = events[0].id;
			}
		} catch (err) {
			console.error('Error loading events:', err);
			eventsError = 'Failed to load events';
		} finally {
			isLoadingEvents = false;
		}
	}

	// Process a scanned QR code
	$effect(() => {
		if (scanned_id === '') return;
		scan_state = ScanState.scanning;

		console.log('Scanned ID:', scanned_id);

		data.supabase
			.from('participants')
			.select(`*, event ( id, name ), scanned_by ( id, display_name )`)
			.eq('id', scanned_id)
			.then((response) => {
				if (response.data && response.data.length > 0) {
					const participant = response.data[0];
					ticket_data = participant;

					// Check if the participant belongs to the selected event
					if (selectedEventId && participant.event.id !== selectedEventId) {
						scan_state = ScanState.wrong_event;
					} else if (participant.scanned) {
						scan_state = ScanState.already_scanned; // Already scanned
					} else {
						scan_state = ScanState.scan_successful;
						data.supabase.rpc('scan_ticket', { _ticket_id: scanned_id }).then();
					}
				} else {
					ticket_data = defaultTicketData;
					scan_state = ScanState.scan_failed;
				}

				// Reset the scanned_id after 3 seconds to allow for a new scan
				setTimeout(() => {
					scanned_id = '';
				}, 3000);
			});
	});
</script>

<h1 class="text-2xl font-bold mb-4 mt-2 text-center">Code Scanner</h1>

<!-- Event Selector -->
<div class="mb-4 rounded-lg border border-gray-300 p-4">
	<h2 class="mb-3 text-lg font-semibold">Select Event</h2>
	{#if isLoadingEvents}
		<div class="flex h-10 items-center justify-center">
			<div
				class="h-5 w-5 animate-spin rounded-full border-2 border-gray-500 border-t-transparent"
			></div>
		</div>
	{:else if eventsError}
		<div class="py-2 text-center text-red-600">
			{eventsError}
			<button onclick={loadEvents} class="ml-2 text-blue-600 underline"> Try again </button>
		</div>
	{:else if events.length === 0}
		<p class="py-2 text-center text-gray-500">No events found</p>
	{:else}
		<select
			bind:value={selectedEventId}
			class="w-full rounded border border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
		>
			{#each events as event}
				<option value={event.id}>
					{event.name} ({new Date(event.date).toLocaleDateString('en-GB')})
				</option>
			{/each}
		</select>
	{/if}
</div>

<!-- Scanner Section -->
<div class="mb-4">
	<QRScanner bind:message={scanned_id} />
</div>

<!-- Ticket Display Section -->
<h2 class="mb-2 text-lg font-semibold">Ticket Information</h2>
<TicketDisplay {ticket_data} {scan_state} />
