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

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

<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
	<!-- Left Column: User Profile -->
	<div class="lg:col-span-1">
		<div class="flex h-full flex-col rounded-lg border border-gray-300 bg-white p-6">
			<div class="flex flex-grow flex-col items-center text-center">
				<div
					class="mb-4 flex h-24 w-24 items-center justify-center rounded-full bg-gray-200 text-4xl font-bold text-gray-600"
				>
					{data.profile?.display_name?.[0]?.toUpperCase() ?? 'U'}
				</div>
				<h2 class="text-xl font-semibold text-gray-900">{data.profile?.display_name}</h2>
				<p class="text-sm text-gray-500">{data.user?.email}</p>
			</div>
			<div class="mt-6 text-center">
				<a
					href="/auth/signout"
					class="text-sm text-red-500 transition hover:text-red-700 hover:underline">Sign Out</a
				>
			</div>
		</div>
	</div>

	<!-- Right Column: Information -->
	<div class="space-y-6 lg:col-span-2">
		<!-- Role Information -->
		<div class="rounded-lg border border-gray-300 bg-white p-6">
			<h2 class="mb-4 text-lg font-semibold text-gray-900">Your Role</h2>
			<dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
				<div class="sm:col-span-1">
					<dt class="text-sm font-medium text-gray-500">Section</dt>
					<dd class="mt-1 text-sm font-semibold text-gray-900">
						{data.profile?.section?.name ?? 'N/A'}
					</dd>
				</div>
				<div class="sm:col-span-1">
					<dt class="text-sm font-medium text-gray-500">Position</dt>
					<dd class="mt-1 text-sm font-semibold text-gray-900">
						{data.profile?.section_position ?? 'N/A'}
					</dd>
				</div>
			</dl>
		</div>

		<!-- User Guide -->
		<div class="rounded-lg border border-gray-300 bg-white p-6">
			<h2 class="mb-2 text-lg font-semibold text-gray-900">User Guide</h2>
			<p class="text-sm leading-relaxed text-gray-700">
				To scan a QR code, head over to <strong>Scanner</strong> in the top right corner. Click on "Start
				Scanning" and allow camera permissions. If your camera gets stuck, simply refresh the page or
				click "Stop Scanning" and then "Start Scanning" again. When you scan a QR code, the participant's
				ticket is automatically marked as scanned.
			</p>
		</div>

		<!-- Events Manager Guide -->
		{#if data.profile?.section_position === 'events_manager'}
			<div class="rounded-lg border border-gray-300 bg-white p-6">
				<h2 class="mb-2 text-lg font-semibold text-gray-900">Events Manager Guide</h2>
				<p class="text-sm leading-relaxed text-gray-700">
					As an Events Manager, you have access to the <strong>Events</strong> section. Here you can
					create new events, manage participants by syncing with Google Sheets, send email invitations
					with QR codes, and view event statistics.
				</p>
			</div>
		{/if}
	</div>
</div>
