<script lang="ts">
	import { goto } from '$app/navigation';
	import { api } from '$lib/api';
	import { user } from '$lib/user';
	import type { AppUser } from '$lib/user';

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

	async function login() {
		error = '';
		loading = true;
		try {
			const u = await api.post<AppUser & { token: string }>('/auth/login', { email, password });
			user.set(u);
			goto('/');
		} catch {
			error = 'E-Mail oder Passwort falsch.';
		} finally {
			loading = false;
		}
	}
</script>

<svelte:head>
	<title>Anmelden — vereins.haus</title>
</svelte:head>

<h1>Anmelden</h1>

<form onsubmit={(e) => { e.preventDefault(); login(); }}>
	<div class="field">
		<label for="email">E-Mail</label>
		<input
			id="email"
			type="email"
			bind:value={email}
			autocomplete="email"
			required
		/>
	</div>

	<div class="field">
		<label for="password">Passwort</label>
		<input
			id="password"
			type="password"
			bind:value={password}
			autocomplete="current-password"
			required
		/>
	</div>

	{#if error}
		<p class="error">{error}</p>
	{/if}

	<button type="submit" disabled={loading}>
		{loading ? 'Anmelden…' : 'Anmelden'}
	</button>
</form>

<p class="switch">
	Noch kein Konto? <a href="/register">Verein registrieren</a>
</p>

<style>
	h1 {
		font-size: 1.4rem;
		font-weight: 700;
		margin-bottom: 1.5rem;
		color: #1e293b;
	}

	.field {
		display: flex;
		flex-direction: column;
		gap: 0.35rem;
		margin-bottom: 1rem;
	}

	label {
		font-size: 0.9rem;
		font-weight: 500;
		color: #475569;
	}

	input {
		padding: 0.65rem 0.85rem;
		border: 1.5px solid #e2e8f0;
		border-radius: 8px;
		font-size: 1rem;
		transition: border-color .15s;
		background: #fff;
	}

	input:focus {
		outline: none;
		border-color: #1e40af;
	}

	.error {
		color: #dc2626;
		font-size: 0.9rem;
		margin-bottom: 0.75rem;
	}

	button {
		width: 100%;
		padding: 0.75rem;
		background: #1e40af;
		color: #fff;
		border: none;
		border-radius: 8px;
		font-size: 1rem;
		font-weight: 600;
		margin-top: 0.5rem;
		transition: background .15s;
	}

	button:hover:not(:disabled) {
		background: #1d3a9e;
	}

	button:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.switch {
		margin-top: 1.25rem;
		font-size: 0.9rem;
		color: #64748b;
		text-align: center;
	}

	.switch a {
		color: #1e40af;
		font-weight: 500;
	}
</style>
