// Path: Frontend/src/routes/auth/login.tsx

import { A, useNavigate } from "@solidjs/router";
import type { Component } from "solid-js";
import styles from "./login.module.scss";

const Login: Component = () => {
	const navigate = useNavigate();

	const handleSubmit = (event: Event) => {
		event.preventDefault();

		navigate("/dashboard");
	};

	return (
		<main class={styles["login-page"]}>
			<section class={styles["login-shell"]}>
				<div class={styles["login-copy"]}>
					<A href="/" class={styles["back-link"]}>
						Back to home
					</A>

					<p class={styles.eyebrow}>Welcome back</p>
					<h1 class={styles.title}>Sign in to Rooster AI</h1>
					<p class={styles.description}>Access your learning dashboard, questions, and progress in one place.</p>

					<div class={styles["benefit-list"]}>
						<div class={styles["benefit-item"]}>
							<span class={styles["benefit-number"]}>01</span>
							<div>
								<h2>Track your progress</h2>
								<p>Pick up from the last lesson, review performance, and keep your momentum.</p>
							</div>
						</div>

						<div class={styles["benefit-item"]}>
							<span class={styles["benefit-number"]}>02</span>
							<div>
								<h2>Ask better questions</h2>
								<p>Get help on Maths and English topics with a cleaner learning workflow.</p>
							</div>
						</div>
					</div>
				</div>

				<form class={styles["login-card"]} onSubmit={handleSubmit}>
					<div class={styles["card-header"]}>
						<h2>Sign in</h2>
						<p>Use your email and password to continue.</p>
					</div>

					<div class={styles["field-group"]}>
						<label for="email">Email address</label>
						<input id="email" type="email" name="email" autocomplete="email" placeholder="you@example.com" />
					</div>

					<div class={styles["field-group"]}>
						<div class={styles["field-header"]}>
							<label for="password">Password</label>
							<A href="/auth/forgot-password">Forgot password?</A>
						</div>

						<input id="password" type="password" name="password" autocomplete="current-password" placeholder="Enter your password" />
					</div>

					<label class={styles["checkbox-row"]} for="remember-me">
						<input id="remember-me" type="checkbox" name="rememberMe" />
						<span>Keep me signed in</span>
					</label>

					<button type="submit">
						Sign in
					</button>

					<p class={styles["footer-copy"]}>
						Don&apos;t have an account yet? <A href="/auth/signup">Create one</A>
					</p>
				</form>
			</section>
		</main>
	);
};

export default Login;
