import { useMutation, useQuery } from "@tanstack/react-query";
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { toast } from "sonner";
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";
import { orpc } from "@/utils/orpc";

export const Route = createFileRoute("/login")({
	validateSearch: (search: Record<string, unknown>) => {
		const signup =
			search.signup === "1" || search.signup === "true" ? "1" : undefined;
		const email = typeof search.email === "string" ? search.email : undefined;
		// Only return defined keys so redirects without search still typecheck
		return {
			...(signup !== undefined && { signup }),
			...(email !== undefined && { email }),
		} as { signup?: "1"; email?: string };
	},
	component: LoginPage,
});

function LoginPage() {
	const navigate = useNavigate();
	const search = Route.useSearch();
	const [isSignup, setIsSignup] = useState(() => search.signup === "1");
	const [email, setEmail] = useState(() => search.email ?? "");
	const [password, setPassword] = useState("");
	const [name, setName] = useState("");

	const sessionQuery = useQuery({
		queryKey: ["session"],
		queryFn: () => authClient.getSession(),
	});

	const loginMutation = useMutation({
		mutationFn: async ({
			email,
			password,
		}: {
			email: string;
			password: string;
		}) => {
			const result = await authClient.signIn.email({
				email,
				password,
			});
			if (result.error) {
				throw new Error(result.error.message);
			}
			return result.data;
		},
		onSuccess: () => {
			toast.success("Succesvol ingelogd!");
			authClient.getSession().then((session) => {
				const user = session.data?.user as { role?: string } | undefined;
				if (user?.role === "admin") {
					navigate({ to: "/admin" });
				} else {
					navigate({ to: "/account" });
				}
			});
		},
		onError: (error) => {
			toast.error(`Login mislukt: ${error.message}`);
		},
	});

	const signupMutation = useMutation({
		mutationFn: async ({
			email,
			password,
			name,
		}: {
			email: string;
			password: string;
			name: string;
		}) => {
			const result = await authClient.signUp.email({
				email,
				password,
				name,
			});
			if (result.error) {
				throw new Error(result.error.message);
			}
			return result.data;
		},
		onSuccess: () => {
			navigate({ to: "/account", search: { welkom: "1" } });
		},
		onError: (error) => {
			toast.error(`Registratie mislukt: ${error.message}`);
		},
	});

	const requestAdminMutation = useMutation({
		...orpc.requestAdminAccess.mutationOptions(),
		onSuccess: () => {
			toast.success("Admin toegang aangevraagd!");
		},
		onError: (error) => {
			toast.error(`Aanvraag mislukt: ${error.message}`);
		},
	});

	const handleSubmit = (e: React.FormEvent) => {
		e.preventDefault();
		if (isSignup) {
			signupMutation.mutate({ email, password, name });
		} else {
			loginMutation.mutate({ email, password });
		}
	};

	const handleRequestAdmin = () => {
		requestAdminMutation.mutate(undefined);
	};

	// If already logged in, redirect to appropriate page
	if (sessionQuery.data?.data?.user) {
		const user = sessionQuery.data.data.user as { role?: string };
		if (user.role === "admin") {
			navigate({ to: "/admin" });
		} else {
			navigate({ to: "/account" });
		}
		return null;
	}

	const isLoggedIn = !!sessionQuery.data?.data?.user;
	const user = sessionQuery.data?.data?.user as
		| { role?: string; name?: string }
		| undefined;

	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">
						{isLoggedIn
							? `Welkom, ${user?.name}`
							: isSignup
								? "Account Aanmaken"
								: "Inloggen"}
					</CardTitle>
					<CardDescription className="text-white/60">
						{isLoggedIn
							? "Je bent al ingelogd"
							: isSignup
								? "Maak een gratis account aan voor je Drinkkaart en inschrijving"
								: "Log in om je account te bekijken"}
					</CardDescription>
				</CardHeader>
				<CardContent>
					{isLoggedIn ? (
						<div className="space-y-4">
							{/* Primary CTA: go to account */}
							<Button
								onClick={() => navigate({ to: "/account" })}
								className="w-full bg-white text-[#214e51] hover:bg-white/90"
							>
								Ga naar mijn account
							</Button>

							{/* Secondary: request admin access */}
							<div className="rounded-lg border border-white/10 bg-white/5 p-4">
								<p className="mb-3 text-center text-sm text-white/60">
									Admin-toegang aanvragen?
								</p>
								<Button
									onClick={handleRequestAdmin}
									disabled={requestAdminMutation.isPending}
									variant="outline"
									className="w-full border-white/20 bg-transparent text-white hover:bg-white/10"
								>
									{requestAdminMutation.isPending
										? "Bezig..."
										: "Vraag Admin Toegang Aan"}
								</Button>
							</div>

							<Button
								onClick={() =>
									authClient.signOut().then(() => navigate({ to: "/" }))
								}
								variant="outline"
								className="w-full border-white/20 bg-transparent text-white/60 hover:bg-white/10 hover:text-white"
							>
								Uitloggen
							</Button>
							<Link
								to="/"
								className="block text-center text-sm text-white/40 hover:text-white"
							>
								← Terug naar website
							</Link>
						</div>
					) : (
						<form onSubmit={handleSubmit} className="space-y-4">
							{isSignup && (
								<div>
									<label
										htmlFor="name"
										className="mb-2 block text-sm text-white/60"
									>
										Naam
									</label>
									<Input
										id="name"
										type="text"
										placeholder="Jouw naam"
										value={name}
										onChange={(e) => setName(e.target.value)}
										required
										className="border-white/20 bg-white/10 text-white placeholder:text-white/40"
									/>
								</div>
							)}
							<div>
								<label
									htmlFor="email"
									className="mb-2 block text-sm text-white/60"
								>
									Email
								</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>
							<div>
								<label
									htmlFor="password"
									className="mb-2 block text-sm text-white/60"
								>
									Wachtwoord
								</label>
								<Input
									id="password"
									type="password"
									placeholder="••••••••"
									value={password}
									onChange={(e) => setPassword(e.target.value)}
									required
									className="border-white/20 bg-white/10 text-white placeholder:text-white/40"
								/>
							</div>
							<Button
								type="submit"
								disabled={loginMutation.isPending || signupMutation.isPending}
								className="w-full bg-white text-[#214e51] hover:bg-white/90"
							>
								{loginMutation.isPending || signupMutation.isPending
									? "Bezig..."
									: isSignup
										? "Account Aanmaken"
										: "Inloggen"}
							</Button>
							<div className="flex flex-col gap-2 text-center">
								<button
									type="button"
									onClick={() => setIsSignup(!isSignup)}
									className="text-sm text-white/60 hover:text-white"
								>
									{isSignup
										? "Al een account? Log in"
										: "Nog geen account? Registreer"}
								</button>
								<Link to="/" className="text-sm text-white/60 hover:text-white">
									← Terug naar website
								</Link>
							</div>
						</form>
					)}
				</CardContent>
			</Card>
		</div>
	);
}
