<script lang="ts">
	import { authStore } from '$lib/stores/auth.svelte.js';

	let email = $state('');
	let username = $state('');
	let password = $state('');
	let confirmPassword = $state('');
	let role = $state<'Student' | 'Lehrer'>('Student');
	let isLoading = $state(false);
	let validationError = $state<string | null>(null);

	function validateForm(): boolean {
		validationError = null;

		// Email-Validierung
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
		if (!emailRegex.test(email)) {
			validationError = 'Bitte geben Sie eine gültige E-Mail-Adresse ein';
			return false;
		}

		// Username-Validierung
		if (username.length < 3) {
			validationError = 'Benutzername muss mindestens 3 Zeichen lang sein';
			return false;
		}

		// Passwort-Validierung
		if (password.length < 6) {
			validationError = 'Passwort muss mindestens 6 Zeichen lang sein';
			return false;
		}

		// Passwort-Bestätigung
		if (password !== confirmPassword) {
			validationError = 'Passwörter stimmen nicht überein';
			return false;
		}

		return true;
	}

	async function handleSubmit(e: Event) {
		e.preventDefault();

		if (!validateForm()) {
			return;
		}

		isLoading = true;
		authStore.clearError();

		await authStore.register(email, username, password, role);

		isLoading = false;
	}
</script>

<div class="register-container">
	<div class="card register-card">
		<h1>Registrieren</h1>
		<p class="subtitle">Erstellen Sie Ihr Konto</p>

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

		<form onsubmit={handleSubmit}>
			<div class="form-group">
				<label for="email" class="form-label">E-Mail-Adresse</label>
				<input
					type="email"
					id="email"
					class="form-input"
					bind:value={email}
					placeholder="beispiel@email.de"
					disabled={isLoading}
					required
				/>
			</div>

			<div class="form-group">
				<label for="username" class="form-label">Benutzername</label>
				<input
					type="text"
					id="username"
					class="form-input"
					bind:value={username}
					placeholder="Mindestens 3 Zeichen"
					disabled={isLoading}
					required
				/>
			</div>

			<div class="form-group">
				<label for="password" class="form-label">Passwort</label>
				<input
					type="password"
					id="password"
					class="form-input"
					bind:value={password}
					placeholder="Mindestens 6 Zeichen"
					disabled={isLoading}
					required
				/>
			</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 wiederholen"
					disabled={isLoading}
					required
				/>
			</div>

			<div class="form-group">
				<label for="role" class="form-label">Rolle</label>
				<select id="role" class="form-select" bind:value={role} disabled={isLoading}>
					<option value="Student">Student</option>
					<option value="Lehrer">Lehrer</option>
				</select>
			</div>

			<button type="submit" class="btn btn-primary btn-block" disabled={isLoading}>
				{#if isLoading}
					<span class="loading-spinner" style="width: 1rem; height: 1rem; border-width: 2px;"></span>
				{/if}
				{isLoading ? 'Registrierung läuft...' : 'Registrieren'}
			</button>
		</form>

		<p class="login-link text-center text-sm mt-md">
			Bereits ein Konto? <a href="/login">Hier anmelden</a>
		</p>
	</div>
</div>

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

	.register-card {
		width: 100%;
		max-width: 450px;
	}

	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>
