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

	let { data } = $props();

	let event_data = $state();
	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>

<div class="mb-2 rounded border border-gray-300 bg-white p-4">
	<div class="flex flex-col gap-1">
		{#if loading}
			<div class="h-6 w-40 bg-gray-200 rounded animate-pulse mb-2"></div>
			<div class="h-4 w-24 bg-gray-100 rounded animate-pulse"></div>
		{:else}
			<span class="text-black-700 text-lg font-semibold">{event_data?.name}</span>
			<span class="text-black-500 text-sm">{event_data?.date}</span>
		{/if}
	</div>
</div>

<div class="mb-2 flex items-center rounded border border-gray-300 bg-white p-4">
    <div class="flex flex-1 items-center justify-center gap-2">
        <svg
            class="inline h-4 w-4 text-blue-600"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            viewBox="0 0 24 24"
        >
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
        </svg>
        {#if loading}
            <div class="h-4 w-20 bg-gray-200 rounded animate-pulse"></div>
        {:else}
            <span class="text-sm text-gray-700">Total participants ({event_data?.total_participants})</span>
        {/if}
    </div>
    <div class="mx-4 h-8 w-px bg-gray-300"></div>
    <div class="flex flex-1 items-center justify-center gap-2">
        <svg
            class="inline h-4 w-4 text-green-600"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            viewBox="0 0 24 24"
        >
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
        </svg>
        {#if loading}
            <div class="h-4 w-28 bg-gray-200 rounded animate-pulse"></div>
        {:else}
            <span class="text-sm text-gray-700">Scanned participants ({event_data?.scanned_participants})</span>
        {/if}
    </div>
</div>
