<script lang="ts">
	import { page } from '$app/stores';
	import { goto } from '$app/navigation';
	import { onMount } from 'svelte';
	import { getSupabase } from '$lib/supabase';
	import { isAuthenticated } from '$lib/stores/auth';
	import { login } from '$lib/auth';
	import * as m from '$lib/paraglide/messages';

	type Status = 'loading' | 'ready' | 'accepting' | 'error' | 'success';

	let status = $state<Status>('loading');
	let errorKey = $state<string>('');

	const token = $page.params.token ?? '';

	onMount(async () => {
		if (!token) {
			errorKey = 'not_found';
			status = 'error';
			return;
		}
		if (!$isAuthenticated) {
			// After login, GoTrue redirects to /auth/callback which goes to /.
			// We store the invitation token so we can resume after login.
			sessionStorage.setItem('pendingInvitationToken', token);
			await login(`${window.location.origin}/auth/callback`);
			return;
		}
		status = 'ready';
	});

	async function accept() {
		status = 'accepting';

		const { data, error } = await getSupabase().rpc('accept_invitation', { p_token: token });

		if (error || !data) {
			errorKey = error?.message ?? 'unknown';
			status = 'error';
			return;
		}

		const result = data as { ok?: boolean; error?: string; collective_id?: string };

		if (result.error) {
			errorKey = result.error;
			status = 'error';
			return;
		}

		status = 'success';
		setTimeout(() => goto('/lists'), 1500);
	}

	function errorMessage(key: string): string {
		const map: Record<string, string> = {
			not_found:      m.invitation_error_not_found(),
			already_used:   m.invitation_error_already_used(),
			expired:        m.invitation_error_expired(),
			already_member: m.invitation_error_already_member(),
			unauthenticated: m.invitation_error_unauthenticated()
		};
		return map[key] ?? m.invitation_error_unknown();
	}
</script>

<div class="flex min-h-screen items-center justify-center bg-background px-4">
	<div class="w-full max-w-sm text-center">
		{#if status === 'loading'}
			<p class="text-sm text-text-secondary">{m.loading()}</p>

		{:else if status === 'ready'}
			<div class="mb-6 text-5xl">🏠</div>
			<h1 class="mb-2 text-xl font-bold text-slate-900 dark:text-slate-50">
				{m.invitation_title()}
			</h1>
			<p class="mb-8 text-sm text-text-secondary">{m.invitation_subtitle()}</p>
			<button
				onclick={accept}
				class="w-full rounded-lg bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white
					hover:opacity-90 dark:bg-slate-50 dark:text-slate-900"
			>
				{m.invitation_accept_btn()}
			</button>

		{:else if status === 'accepting'}
			<p class="text-sm text-text-secondary">{m.loading()}</p>

		{:else if status === 'success'}
			<div class="mb-4 text-4xl">✓</div>
			<p class="text-sm font-medium text-slate-700 dark:text-slate-300">
				{m.invitation_success()}
			</p>

		{:else if status === 'error'}
			<div class="mb-4 text-4xl">✕</div>
			<p class="mb-4 text-sm text-red-600">{errorMessage(errorKey)}</p>
			<a href="/" class="text-sm text-slate-600 underline">{m.auth_back_to_home()}</a>
		{/if}
	</div>
</div>
