<script lang="ts">
	let { data } = $props();

	const scannedCount = data.participants.filter((p) => p.scanned).length;
	const notScannedCount = data.participants.length - scannedCount;

</script>

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

<div class="mb-2 rounded border border-gray-300 bg-white p-4">
	<div class="flex flex-col gap-1">
		<span class="text-black-700 text-lg font-semibold">{data.event_data.name}</span>
		<span class="text-black-500 text-sm">{data.event_data.date}</span>
	</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-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>
		<span class="text-sm text-gray-700">Scanned ({scannedCount})</span>
	</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-red-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" />
			<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
			<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
		</svg>
		<span class="text-sm text-gray-700">Not scanned ({notScannedCount})</span>
	</div>
</div>

<div class="rounded border border-gray-300 bg-white p-4">
	<h2 class="mb-2 rounded text-xl font-bold">Participants ({data.participants.length})</h2>
	<ul class="space-y-1">
		{#each data.participants as p}
			<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
				{#if p.scanned}
					<svg
						title="Scanned"
						class="mr-2 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>
				{:else}
					<svg
						title="Not scanned"
						class="mr-2 inline h-4 w-4 text-red-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" />
						<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
						<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
					</svg>
				{/if}
				<span class="font-semibold">{p.name} {p.surname}</span>
				<span class="flex-1"></span>
				{#if p.scanned_by}
					<div class="flex flex-row items-end ml-2">
						<span class="mr-1 text-xs text-gray-500">
							{new Date(p.scanned_at).toLocaleTimeString([], {
								hour: '2-digit',
								minute: '2-digit',
								hour12: false
							})}
						</span>
						<span class="text-xs text-gray-500">by {p.scanned_by.display_name}</span>
					</div>
				{/if}
			</li>
		{/each}
	</ul>
</div>
