<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 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') ?? '');
	let isSubmitting = $state(false);

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

	const submit = async (event: SubmitEvent) => {
		event.preventDefault();
		isSubmitting = true;
		try {
			await auth.signIn(identifier, returnTo);
		} finally {
			isSubmitting = false;
		}
	};
</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 text-xl italic text-fg-strong">tightly-knit social coding.</p>
	</div>

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

		<Button
			type="submit"
			size="sm"
			disabled={isSubmitting}
			loading={isSubmitting}
			spinnerClass="size-4"
			aria-label={isSubmitting ? 'Logging in' : undefined}
			class="my-2 mt-6 w-full text-base disabled:opacity-100"
		>
			Login
		</Button>
	</form>

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

	{#if auth.error}
		<div
			class="my-2 flex gap-2 rounded border border-danger bg-danger-soft px-3 py-2 text-danger drop-shadow-sm"
		>
			<span class="py-1" aria-hidden="true"><CircleAlert class="size-4" /></span>
			<div>
				<h5 class="font-medium">Login error</h5>
				<p class="text-sm">{auth.error} Please try again.</p>
			</div>
		</div>
	{/if}
</section>
