"use client";

import { KeyRound, Lock, Mail } from "lucide-react";
import Link from "next/link";
import { signIn } from "next-auth/react";
import { useTranslations } from "next-intl";
import { type FormEvent, useState } from "react";
import { precheckLogin } from "@/actions/auth-precheck";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export default function LoginPage() {
	const t = useTranslations("pages.login");
	const [username, setUsername] = useState("");
	const [password, setPassword] = useState("");
	const [code, setCode] = useState("");
	const [needs2fa, setNeeds2fa] = useState(false);
	const [error, setError] = useState<string | null>(null);
	const [pending, setPending] = useState(false);

	async function onSubmit(e: FormEvent) {
		e.preventDefault();
		setError(null);
		setPending(true);
		try {
			if (!needs2fa) {
				const pre = await precheckLogin(username, password);
				if (pre === "invalid") {
					setError(t("errorInvalidCredentials"));
					return;
				}
				if (pre === "twofactor") {
					setNeeds2fa(true);
					return;
				}
			}
			const res = await signIn("credentials", {
				username,
				password,
				code,
				redirect: false,
			});
			if (!res || res.error) {
				setError(
					needs2fa ? t("errorInvalid2fa") : t("errorInvalidCredentials"),
				);
				return;
			}
			window.location.href = "/";
		} finally {
			setPending(false);
		}
	}

	return (
		<div className="flex min-h-[70vh] items-center justify-center px-4 py-12">
			<div className="w-full max-w-md animate-fade-in">
				<div className="text-center mb-8">
					<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 shadow-lg">
						<Lock className="h-8 w-8 text-[var(--color-primary)]" />
					</div>
					<h1 className="text-2xl font-extrabold tracking-tight m-0">
						{t("title")}
					</h1>
					<p className="mt-1.5 text-sm text-[var(--color-text-muted-readable)]">
						{needs2fa ? t("subtitle2fa") : t("subtitle")}
					</p>
				</div>

				<Card className="border-[var(--border-subtle)] shadow-elevated">
					<CardHeader className="px-6 pt-6 pb-0">
						<CardTitle className="text-base font-bold">
							{needs2fa ? t("subtitle2fa") : t("subtitle")}
						</CardTitle>
						<CardDescription>
							{needs2fa ? "Enter your authentication code" : "Sign in to your account"}
						</CardDescription>
					</CardHeader>
					<CardContent className="p-6">
						<form onSubmit={onSubmit} className="space-y-4">
							<div className="space-y-3">
								<div className="relative">
									<Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--color-text-muted)]" />
									<input
										value={username}
										onChange={(e) => setUsername(e.target.value)}
										placeholder={t("usernamePlaceholder")}
										autoComplete="username"
										disabled={needs2fa}
										className="w-full rounded-xl border-2 border-[var(--input-border-color)] bg-[var(--color-background)] px-10 py-2.5 text-sm transition-all duration-200 focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
									/>
								</div>
								<div className="relative">
									<KeyRound className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--color-text-muted)]" />
									<input
										type="password"
										value={password}
										onChange={(e) => setPassword(e.target.value)}
										placeholder={t("passwordPlaceholder")}
										autoComplete="current-password"
										disabled={needs2fa}
										className="w-full rounded-xl border-2 border-[var(--input-border-color)] bg-[var(--color-background)] px-10 py-2.5 text-sm transition-all duration-200 focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
									/>
								</div>
								{needs2fa ? (
									<input
										value={code}
										onChange={(e) => setCode(e.target.value)}
										placeholder={t("codePlaceholder")}
										inputMode="numeric"
										autoComplete="one-time-code"
										autoFocus
										className="w-full rounded-xl border-2 border-[var(--input-border-color)] bg-[var(--color-background)] px-4 py-2.5 text-sm transition-all duration-200 focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
									/>
								) : null}
							</div>

							{error ? (
								<div className="rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900 px-4 py-3">
									<p className="text-sm font-medium text-red-600 dark:text-red-400 text-center m-0">
										{error}
									</p>
								</div>
							) : null}

							<Button
								type="submit"
								disabled={pending}
								size="lg"
								className="w-full font-bold text-base h-12 rounded-xl"
							>
								{pending ? (
									<span className="flex items-center justify-center gap-2">
										<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
											<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
											<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
										</svg>
										{t("pleaseWait")}
									</span>
								) : needs2fa ? t("verify") : t("signIn")}
							</Button>
						</form>

						{!needs2fa ? (
							<>
								<div className="relative my-6">
									<div className="absolute inset-0 flex items-center">
										<div className="w-full border-t border-[var(--border-subtle)]" />
									</div>
									<div className="relative flex justify-center text-xs uppercase">
										<span className="bg-[var(--color-card)] px-3 text-[var(--color-text-muted-readable)] font-bold">
											{t("or")}
										</span>
									</div>
								</div>

								<div className="grid gap-3">
									<Button
										type="button"
										variant="outline"
										size="lg"
										className="w-full font-semibold h-11 rounded-xl"
										onClick={() => signIn("discord", { callbackUrl: "/" })}
									>
										<svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
											<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z" />
										</svg>
										{t("continueWithDiscord")}
									</Button>
									<Button
										type="button"
										variant="outline"
										size="lg"
										className="w-full font-semibold h-11 rounded-xl"
										onClick={() => signIn("google", { callbackUrl: "/" })}
									>
										<svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
											<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
											<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
											<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
											<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
										</svg>
										{t("continueWithGoogle")}
									</Button>
								</div>
							</>
						) : null}

						<div className="mt-6 text-center">
							<p className="text-sm text-[var(--color-text-muted-readable)]">
								{t("noAccount")}{" "}
								<Link href="/register" className="font-bold text-[var(--color-primary)] hover:underline">
									{t("createOne")}
								</Link>
								<span className="mx-2 text-[var(--border-subtle)]">·</span>
								<Link href="/forgot" className="font-bold text-[var(--color-primary)] hover:underline">
									{t("forgotPassword")}
								</Link>
							</p>
						</div>
					</CardContent>
				</Card>
			</div>
		</div>
	);
}