<script lang="ts">
	import type { PageData } from './$types';

	let { data }: { data: PageData } = $props();

	const session = $derived(data.session);
	const identity = $derived(session?.identity);
	const traits = $derived(identity?.traits);
</script>

<svelte:head>
	<title>Home - Example App</title>
</svelte:head>

{#if session}
	<div class="mx-auto max-w-4xl">
		<div class="card-padded overflow-hidden shadow-theme">
			<h1 class="mb-6 text-2xl font-bold text-theme sm:text-3xl">Welcome back!</h1>

			<div class="space-y-6">
				<div>
					<h2 class="text-lg font-medium text-theme">Account Information</h2>
					<dl class="mt-4 grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
						<div>
							<dt class="text-sm font-medium text-theme-muted">Email</dt>
							<dd class="mt-1 text-sm text-theme">{traits?.email || 'Not set'}</dd>
						</div>
						{#if traits?.name?.first || traits?.name?.last}
							<div>
								<dt class="text-sm font-medium text-theme-muted">Name</dt>
								<dd class="mt-1 text-sm text-theme">
									{traits.name.first}
									{traits.name.last}
								</dd>
							</div>
						{/if}
						<div>
							<dt class="text-sm font-medium text-theme-muted">User ID</dt>
							<dd class="mt-1 font-mono text-sm text-theme">{identity?.id}</dd>
						</div>
						<div>
							<dt class="text-sm font-medium text-theme-muted">Session Active</dt>
							<dd class="mt-1 text-sm text-theme">
								{session.active ? 'Yes' : 'No'}
							</dd>
						</div>
						{#if session.expires_at}
							<div>
								<dt class="text-sm font-medium text-theme-muted">Session Expires</dt>
								<dd class="mt-1 text-sm text-theme">
									{new Date(session.expires_at).toLocaleString()}
								</dd>
							</div>
						{/if}
						<div>
							<dt class="text-sm font-medium text-theme-muted">Authentication Level</dt>
							<dd class="mt-1 text-sm text-theme">
								{session.authenticator_assurance_level === 'aal2'
									? 'Two-Factor'
									: 'Single-Factor'}
							</dd>
						</div>
					</dl>
				</div>

				{#if session.authentication_methods && session.authentication_methods.length > 0}
					<div>
						<h3 class="text-lg font-medium text-theme">Authentication Methods</h3>
						<ul class="mt-2 space-y-2">
							{#each session.authentication_methods as method}
								<li class="flex items-center text-sm text-theme-secondary">
									<svg class="mr-2 h-5 w-5 text-success-500" viewBox="0 0 20 20" aria-hidden="true">
										<path
											fill="currentColor"
											fill-rule="evenodd"
											clip-rule="evenodd"
											d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
										/>
									</svg>
									{method.method} (completed at {new Date(
										method.completed_at || ''
									).toLocaleString()})
								</li>
							{/each}
						</ul>
					</div>
				{/if}

				<div class="pt-4">
					<a href="/settings" class="btn-primary">
						Manage Account Settings
					</a>
				</div>
			</div>
		</div>
	</div>
{:else}
	<div class="text-center">
		<h1 class="text-3xl font-bold tracking-tight text-theme sm:text-5xl">
			Welcome to Example App
		</h1>
		<p class="mt-6 text-lg leading-8 text-theme-secondary">
			A secure authentication platform built with Ory Kratos and SvelteKit
		</p>
		<div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row sm:gap-6">
			<a href="/registration" class="btn-primary w-full px-6 py-3 text-base sm:w-auto">
				Get started
			</a>
			<a href="/login" class="text-base font-semibold leading-7 text-theme">
				Sign in <span aria-hidden="true">→</span>
			</a>
		</div>

		<div class="mt-16 grid grid-cols-1 gap-6 sm:grid-cols-3">
			<div class="card-padded shadow-theme">
				<h3 class="text-lg font-semibold text-theme">Secure Authentication</h3>
				<p class="mt-2 text-sm text-theme-secondary">
					Powered by Ory Kratos with support for passwords, 2FA, and passwordless login
				</p>
			</div>
			<div class="card-padded shadow-theme">
				<h3 class="text-lg font-semibold text-theme">Account Recovery</h3>
				<p class="mt-2 text-sm text-theme-secondary">
					Easy password recovery and email verification flows to keep your account secure
				</p>
			</div>
			<div class="card-padded shadow-theme">
				<h3 class="text-lg font-semibold text-theme">Self-Service Settings</h3>
				<p class="mt-2 text-sm text-theme-secondary">
					Manage your profile, change passwords, and configure two-factor authentication
				</p>
			</div>
		</div>
	</div>
{/if}
