import { useNavigate } from '@solidjs/router';
import { onMount, type Component } from 'solid-js';

import { LoadingState, cardStyles } from '../components/common';
import { useAuth } from '../lib/auth';

export const OAuthCallbackPage: Component = () => {
	const auth = useAuth();
	const navigate = useNavigate();

	onMount(() => {
		void (async () => {
			try {
				const target = await auth.completeSignIn();
				navigate(target, { replace: true });
			} catch {
				// Error is captured in auth state.
			}
		})();
	});

	return (
		<div class={cardStyles('p-10 text-center')}>
			<LoadingState label={auth.error() ?? 'Completing OAuth sign-in...'} />
		</div>
	);
};