<script lang="ts">
	import { browser } from "$app/environment";
	import { resolve } from "$app/paths";
	import { page } from "$app/state";
	import { getAuth } from "$lib/auth.svelte";
	import { createAction } from "$lib/action.svelte";
	import Button from "$lib/components/ui/Button.svelte";
	import CircleAlert from "$icon/circle-alert";
	import { onMount } from "svelte";
	import { SvelteURL } from "svelte/reactivity";

	const appPath = (path: string) => resolve(path as "/");
	const auth = getAuth();
	const returnTo = $derived(page.url.searchParams.get("return_url") ?? "/");

	let identifier = $state(page.url.searchParams.get("identifier") ?? "");
	const login = createAction(async (event: SubmitEvent) => {
		event.preventDefault();
		await auth.signIn(identifier, returnTo);
	});

	onMount(() => {
		if (browser && location.hostname === "localhost") {
			const url = new SvelteURL(location.href);
			url.hostname = "127.0.0.1";
			location.replace(url);
		}
	});
</script>

<svelte:head>
	<title>Login &middot; Tangled</title>
</svelte:head>

<section class="w-full max-w-md">
	<div class="mb-4 flex flex-col items-center">
		<a href={appPath("/")} class="flex items-center gap-2 no-underline hover:no-underline">
			<img src="/logos/logotype.svg" alt="tangled" class="h-24 w-48 dark:invert" />
		</a>
		<p class="text-center typography-heading-4 font-normal text-foreground-default italic">
			tightly-knit social coding.
		</p>
	</div>

	<form class="mt-4" onsubmit={login.run}>
		<div class="flex flex-col">
			<label for="identifier" class="py-2 typography-paragraph-small text-foreground-default">Handle</label>
			<input
				id="identifier"
				bind:value={identifier}
				disabled={login.loading}
				type="text"
				autocomplete="username"
				autocapitalize="none"
				spellcheck="false"
				inputmode="url"
				required
				placeholder="akshay.tngl.sh"
				class="w-full rounded-sm border border-border-default bg-background-default p-3 typography-paragraph-large text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
			/>
			<p class="mt-1 typography-paragraph-small text-foreground-subtle">
				Use your <span class="text-foreground-default">AT Protocol</span> handle to log in. If
				you're unsure, this is likely your Tangled
				<code
					class="rounded-sm bg-background-inset px-1 typography-monospace-small font-mono text-foreground-default"
					>(.tngl.sh)</code
				>
				or Bluesky
				<code
					class="rounded-sm bg-background-inset px-1 typography-monospace-small font-mono text-foreground-default"
					>(.bsky.social)</code
				>
				account.
			</p>
		</div>

		<Button
			type="submit"
			size="sm"
			loading={login.loading}
			spinnerClass="size-4"
			aria-label={login.loading ? "Logging in" : undefined}
			class="my-2 mt-6 w-full typography-paragraph-large disabled:opacity-100"
		>
			Login
		</Button>
	</form>

	<p class="typography-paragraph-small text-foreground-subtle">
		Don't have an account? <a href={appPath("/signup")} class="text-foreground-default underline"
			>Create an account</a
		>
		on Tangled now!
	</p>

	{#if auth.state.kind === "failed"}
		<div
			class="my-2 flex gap-2 rounded-sm border border-border-danger bg-background-danger-subtle px-3 py-2 text-foreground-danger shadow-xs"
		>
			<span class="py-1" aria-hidden="true"><CircleAlert class="size-4" /></span>
			<div>
				<h5 class="font-medium">Login error</h5>
				<p class="typography-paragraph-small">{auth.state.message} Please try again.</p>
			</div>
		</div>
	{/if}
</section>
