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 Signup: Component = () => {
	const navigate = useNavigate();
	const auth = useAuth();
	const [isSubmitting, setIsSubmitting] = createSignal(false);
	const [errorMessage, setErrorMessage] = createSignal<string | null>(null);

	const handleSubmit = async (event: Event) => {
		event.preventDefault();
		setErrorMessage(null);
		setIsSubmitting(true);

		const form = event.currentTarget as HTMLFormElement;
		const formData = new FormData(form);
		const password = String(formData.get("password") ?? "");
		const confirmPassword = String(formData.get("confirmPassword") ?? "");

		if (password !== confirmPassword) {
			setErrorMessage("Passwords do not match.");
			setIsSubmitting(false);
			return;
		}

		if (formData.get("agreeTerms") !== "on") {
			setErrorMessage("Please agree to the terms to continue.");
			setIsSubmitting(false);
			return;
		}

		try {
			const user = await auth.signup({
				firstName: String(formData.get("firstName") ?? ""),
				lastName: String(formData.get("lastName") ?? ""),
				email: String(formData.get("email") ?? ""),
				password,
			});

			navigate(getPostAuthRedirectHref(user.role), { replace: true });
		} catch (error) {
			setErrorMessage(error instanceof Error ? error.message : "Unable to create your account right now.");
		} finally {
			setIsSubmitting(false);
		}
	};

	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}>Start learning</p>
					<h1 class={styles.title}>Create your account</h1>
					<p class={styles.description}>Set up your learner profile and jump straight into assignments, progress, and practice.</p>

					<div class={styles["benefit-list"]}>
						<div class={styles["benefit-item"]}>
							<span class={styles["benefit-number"]}>01</span>
							<div>
								<h2>Your own dashboard</h2>
								<p>Track assignments, confidence areas, and recent results in one place.</p>
							</div>
						</div>

						<div class={styles["benefit-item"]}>
							<span class={styles["benefit-number"]}>02</span>
							<div>
								<h2>Save your working</h2>
								<p>Keep your answers, step-by-step thinking, and practice history connected to your account.</p>
							</div>
						</div>
					</div>
				</div>

				<form class={styles["login-card"]} onSubmit={handleSubmit}>
					<div class={styles["card-header"]}>
						<h2>Create account</h2>
						<p>Tell us a little about you to get started.</p>
					</div>

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

					<div class={styles["field-grid"]}>
						<div class={styles["field-group"]}>
							<label for="first-name">First name</label>
							<input id="first-name" type="text" name="firstName" autocomplete="given-name" placeholder="Aisha" />
						</div>

						<div class={styles["field-group"]}>
							<label for="last-name">Last name</label>
							<input id="last-name" type="text" name="lastName" autocomplete="family-name" placeholder="Khan" />
						</div>
					</div>

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

					<div class={styles["field-group"]}>
						<label for="signup-password">Password</label>
						<input id="signup-password" type="password" name="password" autocomplete="new-password" placeholder="Create a password" />
					</div>

					<div class={styles["field-group"]}>
						<label for="signup-confirm-password">Confirm password</label>
						<input
							id="signup-confirm-password"
							type="password"
							name="confirmPassword"
							autocomplete="new-password"
							placeholder="Repeat your password"
						/>
					</div>

					<label class={styles["checkbox-row"]} for="agree-terms">
						<input id="agree-terms" type="checkbox" name="agreeTerms" />
						<span>I agree to the learning platform terms and understand this is a sample signup flow.</span>
					</label>

					<button type="submit" disabled={isSubmitting()}>{isSubmitting() ? "Creating account..." : "Create account"}</button>

					<p class={styles["footer-copy"]}>
						Already have an account? <A href="/auth/login">Sign in</A>
					</p>
				</form>
			</section>
		</main>
	);
};

export default Signup;
