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

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

	function formatScannedAt(dateString: string): string {
		if (!dateString) return '';
		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="border border-gray-300 rounded-lg overflow-hidden h-[200px] mb-4">
	<div class="h-full flex flex-col">
		{#if scan_state === ScanState.scanning}
			<div class="bg-gray-50 p-4 flex-1 flex flex-col justify-center items-center">
				<div class="animate-spin h-8 w-8 border-2 border-gray-500 rounded-full border-t-transparent mb-3"></div>
				<p class="text-gray-700 text-center">Waiting for QR code...</p>
			</div>
		{:else if scan_state === ScanState.scan_failed}
			<div class="bg-red-50 p-4 flex-1 flex flex-col">
				<div class="flex items-center gap-2 mb-3">
					<svg class="h-6 w-6 text-red-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
					</svg>
					<h3 class="font-semibold text-red-800">Invalid Code</h3>
				</div>
				<p class="text-red-700 flex-grow">This QR code is not a valid ticket or doesn't exist in our system.</p>
				<div class="mt-auto pt-2 opacity-0">
					<!-- Spacer to maintain consistent height -->
					<p class="font-medium invisible">Placeholder</p>
					<p class="invisible">Placeholder</p>
				</div>
			</div>
		{:else if scan_state === ScanState.wrong_event}
			<div class="bg-amber-50 p-4 flex-1 flex flex-col">
				<div class="flex items-center gap-2 mb-2">
					<svg class="h-6 w-6 text-amber-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
					</svg>
					<h3 class="font-semibold text-amber-800">Wrong Event</h3>
				</div>
				<p class="text-amber-700 mb-2">This ticket belongs to a different event:</p>
				<div class="bg-white rounded p-3 border border-amber-200 mt-auto">
					<p class="font-medium">{ticket_data.event?.name || ''}</p>
					<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
				</div>
			</div>
		{:else if scan_state === ScanState.already_scanned}
			<div class="bg-amber-50 p-4 flex-1 flex flex-col">
				<div class="flex items-center gap-2 mb-2">
					<svg class="h-6 w-6 text-amber-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
					</svg>
					<h3 class="font-semibold text-amber-800">Already Scanned</h3>
				</div>
				<p class="text-amber-700">
					This ticket was already scanned by: <br/> {ticket_data.scanned_by?.display_name || 'someone'} 
					{ticket_data.scanned_at ? `on ${formatScannedAt(ticket_data.scanned_at)}` : ''}
				</p>
				<div class="bg-white rounded p-3 border border-amber-200 mt-auto">
					<p class="font-medium">{ticket_data.event?.name || ''}</p>
					<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
				</div>
			</div>
		{:else if scan_state === ScanState.scan_successful}
			<div class="bg-green-50 p-4 flex-1 flex flex-col">
				<div class="flex items-center gap-2 mb-2">
					<svg class="h-6 w-6 text-green-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
					</svg>
					<h3 class="font-semibold text-green-800">Valid Ticket</h3>
				</div>
				<p class="text-green-700">Ticket successfully validated.</p>
				<div class="bg-white rounded p-3 border border-green-200 mt-auto">
					<p class="font-medium">{ticket_data.event?.name || ''}</p>
					<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
				</div>
			</div>
		{/if}
	</div>
</div>
