<script lang="ts">
	import { goto } from '$app/navigation';
	import { api, ApiError } from '$lib/api';
	import { setAuth, getPin } from '$lib/auth';
	import { browser } from '$app/environment';

	let displayName = $state('');
	let pin = $state('');
	let error = $state('');
	let loading = $state(false);

	// Pre-fill PIN from localStorage if available
	if (browser) {
		const savedPin = getPin();
		if (savedPin) pin = savedPin;
	}

	async function handleRecover() {
		if (!displayName.trim() || !pin.trim()) return;
		loading = true;
		error = '';
		try {
			const res = await api.post<{
				jwt: string;
				user_id: string;
			}>('/recover', { display_name: displayName.trim(), pin: pin.trim() });

			setAuth(res.jwt, pin.trim(), res.user_id, displayName.trim());
			goto('/feed');
		} catch (e) {
			if (e instanceof ApiError) {
				error = e.message;
			} else {
				error = 'Ein Fehler ist aufgetreten.';
			}
		} finally {
			loading = false;
		}
	}
</script>

<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
	<div class="w-full max-w-sm">
		<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Konto wiederherstellen</h1>
		<p class="mb-6 text-center text-gray-600 dark:text-gray-400">Gib deinen Namen und deinen PIN ein.</p>

		<form onsubmit={(e) => { e.preventDefault(); handleRecover(); }}>
			<input
				type="text"
				bind:value={displayName}
				placeholder="Dein Name"
				maxlength={50}
				data-testid="recover-name-input"
				class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-lg text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
			/>
			<input
				type="text"
				bind:value={pin}
				placeholder="4-stelliger PIN"
				maxlength={4}
				inputmode="numeric"
				pattern="[0-9]*"
				data-testid="recover-pin-input"
				class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-center text-2xl font-mono tracking-widest text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
			/>

			{#if error}
				<p class="mb-3 text-sm text-red-600 dark:text-red-400" data-testid="recover-error">{error}</p>
			{/if}

			<button
				type="submit"
				disabled={loading || !displayName.trim() || pin.length < 4}
				data-testid="recover-submit"
				class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
			>
				{loading ? 'Wird geladen...' : 'Wiederherstellen'}
			</button>
		</form>

		<p class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
			Noch kein Konto?
			<a href="/join" class="text-blue-600 hover:underline dark:text-blue-400">Neu beitreten</a>
		</p>
	</div>
</div>
