<script lang="ts">
	import { goto } from '$app/navigation';
	import { pb } from '$lib/pb';
	import logo from '$lib/assets/checkflo-logo.png';

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

	async function login() {
		if (!email || !password) { error = 'Bitte alle Felder ausfüllen.'; return; }
		loading = true;
		error = '';
		try {
			await pb.collection('users').authWithPassword(email, password);
			goto('/admin/dashboard');
		} catch {
			error = 'E-Mail oder Passwort falsch.';
		} finally {
			loading = false;
		}
	}
</script>

<svelte:head><title>Anmelden — checkflo</title></svelte:head>

<div class="page">
	<div class="card">
		<img src={logo} alt="checkflo" class="logo" />
		<h1>Anmelden</h1>

		<form onsubmit={(e) => { e.preventDefault(); login(); }}>
			<div class="field">
				<label for="email">E-Mail</label>
				<input id="email" type="email" autocomplete="email" bind:value={email} />
			</div>
			<div class="field">
				<label for="pw">Passwort</label>
				<input id="pw" type="password" autocomplete="current-password" bind:value={password} />
			</div>
			{#if error}<p class="error">{error}</p>{/if}
			<button type="submit" disabled={loading}>
				{loading ? 'Anmelden…' : 'Anmelden'}
			</button>
		</form>
	</div>
</div>

<style>
	.page {
		min-height: 100dvh;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #F5F7FA;
		padding: 1rem;
	}
	.card {
		background: #fff;
		border-radius: 16px;
		padding: 2.5rem;
		width: 100%;
		max-width: 380px;
		box-shadow: 0 4px 24px rgba(0,0,0,0.08);
	}
	.logo { height: 32px; margin-bottom: 1.5rem; }
	h1 { font-size: 1.4rem; font-weight: 800; color: #0B1023; margin-bottom: 1.5rem; }

	.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
	label { font-size: 0.85rem; font-weight: 600; color: #444; }
	input {
		border: 1.5px solid #ddd;
		border-radius: 8px;
		padding: 0.7rem 0.9rem;
		font-size: 1rem;
		transition: border-color 0.15s;
	}
	input:focus { outline: none; border-color: #F97316; }

	.error {
		background: #fef2f2;
		color: #dc2626;
		padding: 0.6rem 0.9rem;
		border-radius: 8px;
		font-size: 0.9rem;
		margin-bottom: 1rem;
	}

	button {
		width: 100%;
		background: #F97316;
		color: #fff;
		border: none;
		border-radius: 8px;
		padding: 0.85rem;
		font-size: 1rem;
		font-weight: 700;
		cursor: pointer;
		margin-top: 0.5rem;
		transition: background 0.15s;
	}
	button:hover { background: #ea6c10; }
	button:disabled { opacity: 0.6; cursor: not-allowed; }
</style>
