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

	// Already logged in as admin → go straight to dashboard
	if (browser && getRole() === 'admin') {
		goto('/admin');
	}

	let password = $state('');
	let error = $state('');
	let loading = $state(false);

	async function handleLogin() {
		if (!password) return;
		loading = true;
		error = '';
		try {
			const res = await api.post<{ jwt: string; user_id: string; display_name: string }>(
				'/admin/login',
				{ password }
			);
			// Admin session goes in sessionStorage (bounded to the tab; §11.1), with the real
			// user id + name so the admin has an identity (own-post affordances on the feed, a
			// name on the Account page rather than "Unbekannt"). No PIN for admins.
			setAdminAuth(res.jwt, res.user_id, res.display_name);
			goto('/admin');
		} 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">
			Admin-Login
		</h1>
		<p class="mb-6 text-center text-gray-500 text-sm dark:text-gray-400">Nur für Veranstalter</p>

		<form
			onsubmit={(e) => {
				e.preventDefault();
				handleLogin();
			}}
		>
			<input
				type="password"
				bind:value={password}
				placeholder="Passwort"
				autocomplete="current-password"
				data-testid="admin-password-input"
				class="input mb-3 text-lg"
			/>

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

			<button
				type="submit"
				disabled={loading || !password}
				data-testid="admin-login-submit"
				class="btn btn-primary btn-lg btn-block"
			>
				{loading ? 'Wird angemeldet…' : 'Anmelden'}
			</button>
		</form>

		<p class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
			<a href="/join" class="text-blue-600 hover:underline dark:text-blue-400">Zurück zum Event</a>
		</p>
	</div>
</div>
