<script lang="ts">
	import LoginPage from '$lib/components/LoginPage.svelte';
	import { goto } from '$app/navigation'; // Example using SvelteKit navigation

	let isLoading = false;
	let errorMessage: string | null = null;

	// --- Mock Authentication Function ---
	// Replace this with your actual API call to your backend
	async function attemptLogin(email: string, password: string): Promise<void> {
		console.log('Attempting login for:', email);
		return new Promise((resolve, reject) => {
			setTimeout(() => {
				if (email === 'test@example.com' && password === 'password') {
					console.log('Login successful (mock)');
					resolve(); // Simulate success
				} else {
					console.log('Login failed (mock)');
					reject(new Error('Invalid email or password.')); // Simulate failure
				}
			}, 1500); // Simulate network delay
		});
	}

	// --- Event Handler ---
	async function handleLoginRequest(event: CustomEvent<{ email: string; password: string }>) {
		isLoading = true;
		errorMessage = null;
		const { email, password } = event.detail;

		try {
			await attemptLogin(email, password);
			// SUCCESS: Store user session/token (using your auth library/stores)
			// then navigate to the dashboard or protected area
			goto('/dashboard'); // Navigate after successful login
		} catch (err: any) {
			// FAILURE: Display error
			errorMessage = err.message || 'An unknown login error occurred.';
		} finally {
			isLoading = false;
		}
	}
</script>

<!-- Pass loading state and error message down, listen for the login event -->
<LoginPage bind:isLoading serverError={errorMessage} on:login={handleLoginRequest} />
