<script lang="ts">
	import { api } from '$lib/api';
	import { page } from '$app/stores';
	import { onMount } from 'svelte';
	import { goto } from '$app/navigation';

	let token = $state('');
	let newPassword = $state('');
	let confirmPassword = $state('');
	let isLoading = $state(false);
	let message = $state('');
	let error = $state('');

	onMount(() => {
		token = $page.url.searchParams.get('token') || '';
		if (!token) {
			error = 'Kein Token zum Zurücksetzen des Passworts gefunden.';
		}
	});

	async function handleSubmit(e: Event) {
		e.preventDefault();
		isLoading = true;
		message = '';
		error = '';

		if (newPassword !== confirmPassword) {
			error = 'Passwörter stimmen nicht überein.';
			isLoading = false;
			return;
		}

		if (!token) {
			error = 'Token fehlt.';
			isLoading = false;
			return;
		}

		try {
			const res = await api.post<{ message: string }>('/auth/reset-password', { token, newPassword });
			if (res.data) {
				message = res.data.message + ' Du wirst zum Login weitergeleitet...';
				newPassword = '';
				confirmPassword = '';
				setTimeout(() => {
					goto('/login');
				}, 3000);
			} else {
				error = res.error || 'Ein Fehler ist aufgetreten.';
			}
		} catch (err: any) {
			error = err.message || 'Ein Fehler ist aufgetreten.';
		} finally {
			isLoading = false;
		}
	}
</script>

<div class="container">
	<div class="card reset-card">
		<h1>Passwort zurücksetzen</h1>
		<p class="subtitle">Gib dein neues Passwort ein.</p>

		{#if message}
			<div class="alert alert-success">
				<div class="alert-content">
					{message}
				</div>
			</div>
		{/if}

		{#if error}
			<div class="alert alert-error">
				<div class="alert-content">
					{error}
				</div>
				<button onclick={() => error = ''} class="btn-ghost" style="padding: 0; min-height: auto; width: auto;">×</button>
			</div>
		{/if}

		{#if token && !error}
			<form onsubmit={handleSubmit}>
				<div class="form-group">
					<label for="newPassword" class="form-label">Neues Passwort</label>
					<input
						type="password"
						id="newPassword"
						class="form-input"
						bind:value={newPassword}
						placeholder="Neues Passwort eingeben"
						disabled={isLoading}
						required
						minlength="6"
					/>
				</div>

				<div class="form-group">
					<label for="confirmPassword" class="form-label">Passwort bestätigen</label>
					<input
						type="password"
						id="confirmPassword"
						class="form-input"
						bind:value={confirmPassword}
						placeholder="Passwort bestätigen"
						disabled={isLoading}
						required
						minlength="6"
					/>
				</div>

				<button type="submit" class="btn btn-primary btn-block" disabled={isLoading}>
					{isLoading ? 'Zurücksetzen...' : 'Passwort zurücksetzen'}
				</button>
			</form>
		{/if}

		{#if !token && !error}
			<p>Lade...</p>
		{/if}
		
		<p class="back-to-login text-center text-sm mt-md">
			<a href="/login">Zurück zum Login</a>
		</p>
	</div>
</div>

<style>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background: var(--neutral-50);
		padding: var(--space-md);
	}

	.reset-card {
		width: 100%;
		max-width: 400px;
	}

	h1 {
		margin: 0 0 var(--space-xs);
		font-family: var(--font-heading);
		font-size: var(--text-2xl);
		text-align: center;
	}

	.subtitle {
		color: var(--neutral-500);
		text-align: center;
		margin: 0 0 var(--space-xl);
	}
</style>
