<script lang="ts">
	import { onMount } from 'svelte';
  import { page } from '$app/state';
  import EventInformation from './components/EventInformation.svelte';
  import Statistics from './components/Statistics.svelte';

	let { data } = $props();

	// Types
	interface ArchivedEvent {
		id: string;
		name: string;
		date: string;
		total_participants: number;
		scanned_participants: number;
	}

	let event_data = $state<ArchivedEvent | null>(null);
	let loading = $state(true);

	onMount(async () => {
		const event_id = page.url.searchParams.get('id');
        
		if (!event_id) {
			loading = false;
			return;
		}

		const { data: event } = await data.supabase
			.from('events_archived')
			.select('*')
			.eq('id', event_id)
			.single();

		event_data = event;
		loading = false;
	});
</script>

<h1 class="mt-2 mb-4 text-center text-2xl font-bold">Archived Event Overview</h1>

<EventInformation 
  event={event_data}
  loading={loading} 
/>

<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
  <h2 class="mb-4 text-lg font-semibold text-gray-900">Event Statistics</h2>
  <Statistics 
    loading={loading}
    totalParticipants={event_data?.total_participants ?? 0}
    scannedParticipants={event_data?.scanned_participants ?? 0}
  />
</div>
