"use client";

import { signIn } from "next-auth/react";
import { useTranslations } from "next-intl";
import { type FormEvent, useId, useState } from "react";
import { precheckLogin } from "@/actions/auth-precheck";
import {
	type CaptchaPublicConfig,
	CaptchaWidget,
	readCaptchaToken,
} from "@/components/auth/captcha-widget";
import Link from "@/components/link";
import { signInWithTransientRetry } from "@/lib/auth/sign-in-retry";

export type LoginFormVariant =
	/** Full page: labelled fields, plus the register / forgot-password footer. */
	| "page"
	/** Homepage sidebar: visible labels, no footer, tighter spacing. */
	| "compact";

export interface LoginFormProps {
	captcha?: CaptchaPublicConfig;
	nonce?: string;
	variant?: LoginFormVariant;
	/** Where to land after a successful sign-in. */
	redirectTo?: string;
}

/**
 * The single sign-in form for both `/login` and the homepage sidebar. It runs a
 * cheap server-side precheck first so the visitor gets a specific reason
 * (bad password, unverified email, 2FA required, captcha) instead of NextAuth's
 * generic failure, then completes the credentials sign-in.
 */
export function LoginForm({
	captcha = { provider: "none" },
	nonce,
	variant = "page",
	redirectTo = "/me",
}: LoginFormProps = {}) {
	const t = useTranslations("pages.login");
	const fieldId = useId();
	const [username, setUsername] = useState("");
	const [password, setPassword] = useState("");
	const [showPassword, setShowPassword] = useState(false);
	const [code, setCode] = useState("");
	const [needs2fa, setNeeds2fa] = useState(false);
	const [error, setError] = useState<string | null>(null);
	const [pending, setPending] = useState(false);

	const showFooter = variant === "page";
	const labelled = variant === "compact";
	const lockCredentials = needs2fa ? "opacity-50 pointer-events-none" : "";

	async function onSubmit(e: FormEvent<HTMLFormElement>) {
		e.preventDefault();
		setError(null);
		setPending(true);
		try {
			if (!needs2fa) {
				const captchaToken = readCaptchaToken(e.currentTarget, captcha);
				const pre = await precheckLogin(username, password, captchaToken);
				if (pre === "invalid") {
					setError(t("errorInvalidCredentials"));
					return;
				}
				if (pre === "captcha") {
					setError(t("errorCaptcha"));
					return;
				}
				if (pre === "unverified") {
					setError(t("errorUnverified"));
					return;
				}
				if (pre === "twofactor") {
					setNeeds2fa(true);
					return;
				}
			}
			const res = await signInWithTransientRetry(() =>
				signIn("credentials", {
					username,
					password,
					code,
					redirect: false,
				}),
			);
			if (!res || res.error) {
				setError(
					needs2fa ? t("errorInvalid2fa") : t("errorInvalidCredentials"),
				);
				return;
			}
			window.location.href = redirectTo;
		} catch {
			setError(needs2fa ? t("errorInvalid2fa") : t("errorInvalidCredentials"));
		} finally {
			setPending(false);
		}
	}

	return (
		<>
			{needs2fa && (
				<p
					className="animate-fade-in-up mb-4 text-sm font-semibold"
					style={{ color: "var(--color-text-muted)" }}
				>
					{t("subtitle2fa")}
				</p>
			)}

			<form
				onSubmit={onSubmit}
				aria-label={t("signIn")}
				className="relative flex flex-col gap-4"
			>
				<div className={labelled ? "space-y-1" : lockCredentials}>
					<label
						htmlFor={`${fieldId}-username`}
						className={
							labelled
								? "block text-xs font-bold uppercase tracking-wider"
								: "sr-only"
						}
						style={{ color: "var(--color-text-muted)" }}
					>
						{t("username")}
					</label>
					<input
						id={`${fieldId}-username`}
						name="username"
						type="text"
						value={username}
						onChange={(e) => setUsername(e.target.value)}
						placeholder={t("usernamePlaceholder")}
						autoComplete="username"
						disabled={needs2fa}
						required
						className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
						style={{
							backgroundColor: "var(--color-background)",
							color: "var(--color-text-readable)",
							borderColor: needs2fa
								? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
								: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
						}}
					/>
				</div>

				<div className={`${labelled ? "space-y-1" : lockCredentials} relative`}>
					<label
						htmlFor={`${fieldId}-password`}
						className={
							labelled
								? "block text-xs font-bold uppercase tracking-wider"
								: "sr-only"
						}
						style={{ color: "var(--color-text-muted)" }}
					>
						{t("password")}
					</label>
					<input
						id={`${fieldId}-password`}
						name="password"
						type={showPassword ? "text" : "password"}
						value={password}
						onChange={(e) => setPassword(e.target.value)}
						placeholder={t("passwordPlaceholder")}
						autoComplete="current-password"
						disabled={needs2fa}
						required
						className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
						style={{
							backgroundColor: "var(--color-background)",
							color: "var(--color-text-readable)",
							borderColor: needs2fa
								? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
								: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
						}}
					/>
					<button
						type="button"
						onClick={() => setShowPassword(!showPassword)}
						className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 transition-opacity hover:opacity-100"
						style={{ color: "var(--color-text-muted)" }}
						tabIndex={-1}
						aria-label={showPassword ? t("hidePassword") : t("showPassword")}
						aria-pressed={showPassword}
					>
						{showPassword ? t("hidePassword") : t("showPassword")}
					</button>
				</div>

				{needs2fa ? (
					<div className={`animate-scale-in ${labelled ? "space-y-1" : ""}`}>
						<label
							htmlFor={`${fieldId}-2fa`}
							className={
								labelled
									? "block text-xs font-bold uppercase tracking-wider"
									: "sr-only"
							}
							style={{ color: "var(--color-text-muted)" }}
						>
							{t("codePlaceholder")}
						</label>
						<input
							id={`${fieldId}-2fa`}
							name="code"
							type="text"
							value={code}
							onChange={(e) => setCode(e.target.value)}
							placeholder={t("codePlaceholder")}
							inputMode="numeric"
							autoComplete="one-time-code"
							className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
							style={{
								backgroundColor: "var(--color-background)",
								color: "var(--color-text-readable)",
								borderColor:
									"color-mix(in srgb, var(--color-primary) 30%, transparent)",
							}}
						/>
					</div>
				) : (
					<CaptchaWidget captcha={captcha} nonce={nonce} />
				)}

				{error && (
					<p
						role="alert"
						aria-live="polite"
						className="m-0 animate-fade-in-up text-center text-sm font-semibold"
						style={{ color: "var(--color-danger)" }}
					>
						{error}
					</p>
				)}

				<button
					type="submit"
					disabled={pending}
					className="btn-shine w-full cursor-pointer rounded-xl py-3.5 text-sm font-extrabold shadow-lg transition-all duration-200 hover:scale-[1.02] active:scale-95 disabled:opacity-60"
					style={{
						background: "var(--color-primary)",
						color: "var(--color-primary-foreground)",
						boxShadow:
							"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
					}}
				>
					{pending ? (
						<span className="inline-flex items-center justify-center gap-2">
							<svg
								className="h-4 w-4 animate-spin"
								viewBox="0 0 24 24"
								fill="none"
								role="img"
								aria-label={t("pleaseWait")}
							>
								<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>

			{showFooter && (
				<p
					className="mt-6 text-center text-xs"
					style={{ color: "var(--color-text-muted)" }}
				>
					{t("noAccount")}{" "}
					<Link
						href="/register"
						className="font-extrabold hover:underline"
						style={{ color: "var(--color-primary)" }}
					>
						{t("createOne")}
					</Link>{" "}
					·{" "}
					<Link
						href="/forgot"
						className="font-extrabold hover:underline"
						style={{ color: "var(--color-primary)" }}
					>
						{t("forgotPassword")}
					</Link>
				</p>
			)}
		</>
	);
}