<script lang="ts">
	import type { TicketData } from '$lib/types';
	import { ScanState } from '$lib/types';

	let { ticket_data, scan_state }: { ticket_data: TicketData; scan_state: ScanState } = $props();

	function formatScannedAt(dateString: string): string {
		const date = new Date(dateString);
		const day = String(date.getDate()).padStart(2, '0');
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const hours = String(date.getHours()).padStart(2, '0');
		const minutes = String(date.getMinutes()).padStart(2, '0');
		return `${day}.${month}. ${hours}:${minutes}`;
	}
</script>

<div class="py-3">
	{#if scan_state === ScanState.scanning}
		<div class="rounded border-l-4 border-orange-500 bg-orange-100 p-4 text-orange-700">
			<p>Waiting for data...</p>
		</div>
	{:else if scan_state === ScanState.scan_failed}
		<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700">
			<p>Scan failed. Please try again.</p>
		</div>
	{:else if scan_state === ScanState.scan_successful}
		{#if ticket_data.scanned}
			<div class="rounded border-l-4 border-red-500 bg-red-100 p-4 text-red-700">
				<p>Ticket already scanned!</p>
				<p>
					By {ticket_data.scanned_by?.display_name} on
					{formatScannedAt(ticket_data.scanned_at)}
				</p>
				<hr class="my-2 border-t border-red-300" />
				<ol>
					<li>{ticket_data.event.name}</li>
					<li>{ticket_data.name} {ticket_data.surname}</li>
				</ol>
			</div>
		{:else}
			<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700">
				<ol>
					<li>{ticket_data.event.name}</li>
					<li>{ticket_data.name} {ticket_data.surname}</li>
				</ol>
			</div>
		{/if}
	{/if}
</div>
