<script lang="ts">
	import { resolve } from "$app/paths";
	import { goto } from "$app/navigation";
	import { getAuth } from "$lib/auth.svelte";
	import { onMount } from "svelte";

	const auth = getAuth();
	const appPath = (path: string) => resolve(path as "/");

	onMount(() => {
		void (async () => {
			try {
				const target = await auth.completeSignIn();
				await goto(appPath(target), { replaceState: true });
			} catch (e) {
				console.error(e);
			}
		})();
	});
</script>

<svelte:head>
	<title>Signing in &middot; Tangled</title>
</svelte:head>

{#if auth.state.kind === "failed"}
	<section class="mx-auto flex max-w-md flex-col items-center gap-4 px-7 py-16 text-center">
		<p class="typography-paragraph-large text-foreground-danger">{auth.state.message}</p>
		<a href={appPath("/login")} class="inline-flex underline">Try again</a>
	</section>
{:else}
	<p class="sr-only" role="status">Signing you in&hellip;</p>
{/if}
