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

import { A, useNavigate } from "@solidjs/router";
import { createSignal, type Component } from "solid-js";
import { useAuth } from "../../context/auth/context";
import { getPostAuthRedirectHref } from "../../lib/routes";
import styles from "./login.module.scss";

const DEMO_PASSWORD = "password123";
const STUDENT_DEMO = {
	email: "aisha.201@boostai.example",
	label: "Student demo",
	name: "Aisha Khan",
};
const TEACHER_DEMO = {
	email: "sarah.johnson@boostai.example",
	label: "Teacher demo",
	name: "Sarah Johnson",
};

const Login: Component = () => {
	const navigate = useNavigate();
	const auth = useAuth();
	const [isSubmitting, setIsSubmitting] = createSignal(false);
	const [errorMessage, setErrorMessage] = createSignal<string | null>(null);

	const runLogin = async (input: { email: string; password: string; rememberMe: boolean }) => {
		setErrorMessage(null);
		setIsSubmitting(true);

		try {
			const user = await auth.login(input);
			navigate(getPostAuthRedirectHref(user.role), { replace: true });
		} catch (error) {
			setErrorMessage(error instanceof Error ? error.message : "Unable to sign in right now.");
		} finally {
			setIsSubmitting(false);
		}
	};

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

		const form = event.currentTarget as HTMLFormElement;
		const formData = new FormData(form);

		await runLogin({
			email: String(formData.get("email") ?? ""),
			password: String(formData.get("password") ?? ""),
			rememberMe: formData.get("rememberMe") === "on",
		});
	};

	const loginDemo = async (email: string) => {
		await runLogin({
			email,
			password: DEMO_PASSWORD,
			rememberMe: true,
		});
	};

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

					<img class={styles.mobileLogo} src="/brand/boost-ai-logo-purple.png" alt="Boost AI" />
				</div>

				<div class={styles["login-copy"]}>
					<A href="/" class={styles["back-link"]}>
						Back to home
					</A>

					<img class={styles.brandLogo} src="/brand/boost-ai-logo-purple.png" alt="Boost AI" />

					<p class={styles.eyebrow}>Welcome back</p>
					<h1 class={styles.title}>Sign in to Boost AI</h1>
					<p class={styles.description}>Access your Boost AI dashboard for Maths and English practice, homework, and progress.</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 assignment, review performance, and spot the next topic that needs support.</p>
							</div>
						</div>

						<div class={styles["benefit-item"]}>
							<span class={styles["benefit-number"]}>02</span>
							<div>
								<h2>Teach with less admin</h2>
								<p>Assign, review, and follow up on Maths and English work in one teacher-friendly flow.</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>
						<p class={styles.formHint}>
							Seeded dev login password: <strong>password123</strong>
						</p>
					</div>

					<div class={styles.demoSection}>
						<p class={styles.demoTitle}>Quick demo access</p>
						<div class={styles.demoButtons}>
							<button type="button" class={styles.demoButton} data-demo="student" disabled={isSubmitting()} onClick={[loginDemo, STUDENT_DEMO.email]}>
								<span class={styles.demoButtonLabel}>{STUDENT_DEMO.label}</span>
							</button>
							<button type="button" class={styles.demoButton} data-demo="teacher" disabled={isSubmitting()} onClick={[loginDemo, TEACHER_DEMO.email]}>
								<span class={styles.demoButtonLabel}>{TEACHER_DEMO.label}</span>
							</button>
						</div>
					</div>

					{errorMessage() ? <p class={styles.formError}>{errorMessage()}</p> : null}

					<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" class={styles.submitButton} disabled={isSubmitting()}>
						{isSubmitting() ? "Signing in..." : "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;
