import { useMutation } from "@tanstack/react-query";
import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { authClient } from "@/lib/auth-client";

export const Route = createFileRoute("/forgot-password")({
	component: ForgotPasswordPage,
});

function ForgotPasswordPage() {
	const [email, setEmail] = useState("");
	const [sent, setSent] = useState(false);

	const mutation = useMutation({
		mutationFn: async (email: string) => {
			const result = await authClient.requestPasswordReset({
				email,
				redirectTo: "/reset-password",
			});
			if (result.error) {
				throw new Error(result.error.message);
			}
			return result.data;
		},
		onSuccess: () => {
			setSent(true);
		},
	});

	const handleSubmit = (e: React.FormEvent) => {
		e.preventDefault();
		mutation.mutate(email);
	};

	return (
		<div className="flex min-h-[calc(100dvh-2.75rem)] items-center justify-center overflow-y-auto px-4 py-8 sm:min-h-[calc(100dvh-3.5rem)]">
			<Card className="my-auto w-full max-w-md border-white/10 bg-white/5">
				<CardHeader className="text-center">
					<CardTitle className="font-['Intro',sans-serif] text-3xl text-white">
						Wachtwoord vergeten
					</CardTitle>
					<CardDescription className="text-white/60">
						{sent
							? "Controleer je inbox"
							: "Vul je e-mailadres in en we sturen je een link"}
					</CardDescription>
				</CardHeader>
				<CardContent>
					{sent ? (
						<div className="space-y-4">
							<div className="rounded-lg border border-white/10 bg-white/5 p-5 text-center">
								<p className="text-sm text-white/80 leading-relaxed">
									Als er een account bestaat voor{" "}
									<span className="font-medium text-white">{email}</span>, is er
									een e-mail verstuurd met een link om je wachtwoord opnieuw in
									te stellen. De link is 1 uur geldig.
								</p>
							</div>
							<Link
								to="/login"
								className="block text-center text-sm text-white/60 hover:text-white"
							>
								← Terug naar inloggen
							</Link>
						</div>
					) : (
						<form onSubmit={handleSubmit} className="space-y-4">
							<div>
								<label
									htmlFor="email"
									className="mb-2 block text-sm text-white/60"
								>
									E-mailadres
								</label>
								<Input
									id="email"
									type="email"
									placeholder="jouw@email.be"
									value={email}
									onChange={(e) => setEmail(e.target.value)}
									required
									className="border-white/20 bg-white/10 text-white placeholder:text-white/40"
								/>
							</div>
							{mutation.isError && (
								<p className="text-red-400 text-sm">{mutation.error.message}</p>
							)}
							<Button
								type="submit"
								disabled={mutation.isPending}
								className="w-full bg-white text-[#214e51] hover:bg-white/90"
							>
								{mutation.isPending ? "Bezig..." : "Stuur reset-link"}
							</Button>
							<div className="text-center">
								<Link
									to="/login"
									className="text-sm text-white/60 hover:text-white"
								>
									← Terug naar inloggen
								</Link>
							</div>
						</form>
					)}
				</CardContent>
			</Card>
		</div>
	);
}
