import { Models } from "@nontara/server/models";
import { useForm } from "@tanstack/react-form";
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useMemo } from "react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import {
	Card,
	CardContent,
	CardDescription,
	CardFooter,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export const Route = createFileRoute("/welcome/")({
	component: WelcomePage,
	head: () => ({
		meta: [
			{
				title: "Create Account - Nontara",
			},
		],
	}),
});

function WelcomePage() {
	const context = Route.useRouteContext();
	const navigate = useNavigate();
	const account = context.onboardSession.getAccount();
	const form = useForm({
		defaultValues: useMemo(() => {
			return {
				email: account.email ?? "",
				name: account.name ?? "",
				password: account.password ?? "",
				confirmPassword: account.confirmPassword ?? "",
			} as Models.AccountData;
		}, [account]),
		onSubmit: async ({ value }) => {
			context.onboardSession.updateAccount(value);
			toast.success(`Welcome aboard, ${value.name}!`);
			navigate({
				to: "/welcome/setup",
			});
		},
		validators: {
			onSubmit: Models.AccountData,
		},
	});

	return (
		<div className="mx-auto flex w-full max-w-3xl flex-1 flex-col items-center justify-center gap-10 text-center">
			<div className="space-y-3">
				<h1 className="font-semibold text-4xl tracking-tight sm:text-5xl">
					Welcome to Nontara
				</h1>
				<p className="max-w-2xl text-lg text-muted-foreground">
					Thanks for choosing Nontara Media Server—we're so glad you're here.
				</p>
			</div>

			<Card className="w-full max-w-xl">
				<CardHeader className="items-center text-center">
					<CardTitle className="font-semibold text-2xl">
						Create your secure account
					</CardTitle>
					<CardDescription className="text-base">
						Enter your email, choose a username, and create a password to set up
						your account.
					</CardDescription>
				</CardHeader>
				<form
					onSubmit={(event) => {
						event.preventDefault();
						event.stopPropagation();
						form.handleSubmit();
					}}
					className="flex flex-col gap-6"
				>
					<CardContent className="flex flex-col items-center gap-6 text-left">
						<form.Field name="email">
							{(field) => (
								<div className="flex w-full max-w-sm flex-col gap-2">
									<Label htmlFor={field.name} className="font-medium text-base">
										Email
									</Label>
									<Input
										id={field.name}
										name={field.name}
										autoComplete="email"
										value={field.state.value}
										onBlur={field.handleBlur}
										onChange={(event) => field.handleChange(event.target.value)}
										placeholder="e.g. user@gmail.com"
										className="w-full text-lg"
										type="email"
									/>
									{field.state.meta.errors.map((error) => (
										<p
											key={error?.message}
											className="text-left text-destructive text-sm"
										>
											{error?.message}
										</p>
									))}
								</div>
							)}
						</form.Field>

						<form.Field name="name">
							{(field) => (
								<div className="flex w-full max-w-sm flex-col gap-2">
									<Label htmlFor={field.name} className="font-medium text-base">
										Name
									</Label>
									<Input
										id={field.name}
										name={field.name}
										autoComplete="name"
										value={field.state.value}
										onBlur={field.handleBlur}
										onChange={(event) => field.handleChange(event.target.value)}
										placeholder="e.g. nontara"
										className="w-full text-lg"
									/>
									{field.state.meta.errors.map((error) => (
										<p
											key={error?.message}
											className="text-left text-destructive text-sm"
										>
											{error?.message}
										</p>
									))}
								</div>
							)}
						</form.Field>

						<form.Field name="password">
							{(field) => (
								<div className="flex w-full max-w-sm flex-col gap-2">
									<Label htmlFor={field.name} className="font-medium text-base">
										Password
									</Label>
									<Input
										id={field.name}
										name={field.name}
										type="password"
										autoComplete="new-password"
										value={field.state.value}
										onBlur={field.handleBlur}
										onChange={(event) => field.handleChange(event.target.value)}
										placeholder="Pick something memorable"
										className="w-full text-lg"
									/>
									{field.state.meta.errors.map((error) => (
										<p
											key={error?.message}
											className="text-left text-destructive text-sm"
										>
											{error?.message}
										</p>
									))}
								</div>
							)}
						</form.Field>

						<form.Field name="confirmPassword">
							{(field) => (
								<div className="flex w-full max-w-sm flex-col gap-2">
									<Label htmlFor={field.name} className="font-medium text-base">
										Confirm Password
									</Label>
									<Input
										id={field.name}
										name={field.name}
										type="password"
										autoComplete="new-password"
										value={field.state.value}
										onBlur={field.handleBlur}
										onChange={(event) => field.handleChange(event.target.value)}
										placeholder="Re-enter your password"
										className="w-full text-lg"
									/>
									{field.state.meta.errors.map((error) => (
										<p
											key={error?.message}
											className="text-left text-destructive text-sm"
										>
											{error?.message}
										</p>
									))}
								</div>
							)}
						</form.Field>
					</CardContent>
					<CardFooter className="flex flex-col items-center gap-4">
						<form.Subscribe>
							{(state) => (
								<Button
									type="submit"
									className="min-w-[200px]"
									disabled={!state.canSubmit || state.isSubmitting}
								>
									{state.isSubmitting ? "Saving..." : "Continue"}
								</Button>
							)}
						</form.Subscribe>
						<p className="text-muted-foreground text-sm">
							We never share your credentials. You&apos;re in full control here.
						</p>
					</CardFooter>
				</form>
			</Card>
		</div>
	);
}
