import { EyeOffIcon, EyeOnIcon, LoaderIcon } from "@lume/icons";
import { useStorage } from "@lume/storage";
import { invoke } from "@tauri-apps/api/core";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { Trans, useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";

export function LoginWithKey() {
	const storage = useStorage();
	const navigate = useNavigate();

	const [showKey, setShowKey] = useState(false);
	const [loading, setLoading] = useState(false);

	const { t } = useTranslation("loginWithPrivkey.subtitle");
	const {
		register,
		handleSubmit,
		setError,
		formState: { errors, isValid },
	} = useForm();

	const onSubmit = async (data: { nsec: string }) => {
		try {
			if (!data.nsec.startsWith("nsec1"))
				return toast.error("You need to enter a private key start with nsec1");

			setLoading(true);

			// trigger save key
			const save = await invoke("save_key", { nsec: data.nsec });

			if (!save) {
				setLoading(false);
				toast.error("Save account keys failed, please try again later.");
			}

			// redirect to next step
			return navigate("/auth/onboarding", { replace: true });
		} catch (e) {
			setLoading(false);
			setError("nsec", {
				type: "manual",
				message: String(e),
			});
		}
	};

	return (
		<div className="relative flex items-center justify-center w-full h-full">
			<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
				<div className="flex flex-col gap-1 text-center items-center">
					<h1 className="text-2xl font-semibold">
						{t("loginWithPrivkey.title")}
					</h1>
					<p className="text-lg font-medium whitespace-pre-line leading-snug text-neutral-600 dark:text-neutral-500">
						<Trans t={t}>
							Lume will put your private key to{" "}
							<span className="text-teal-500">
								{storage.platform === "macos"
									? "Apple Keychain"
									: storage.platform === "windows"
									  ? "Credential Manager"
									  : "Secret Service"}
							</span>
							. It will be secured by your OS.
						</Trans>
					</p>
				</div>
				<div className="flex flex-col gap-6">
					<form
						onSubmit={handleSubmit(onSubmit)}
						className="flex flex-col gap-4 mb-0"
					>
						<div className="relative flex flex-col gap-1">
							<input
								type={showKey ? "text" : "password"}
								{...register("nsec", { required: false })}
								spellCheck={false}
								autoCapitalize="none"
								autoCorrect="none"
								placeholder="nsec1..."
								className="pl-3 pr-11 text-xl border-transparent rounded-xl h-14 bg-neutral-950 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-800"
							/>
							{errors.nsec && (
								<p className="text-sm text-center text-red-600">
									{errors.nsec.message as string}
								</p>
							)}
							<button
								type="button"
								onClick={() => setShowKey((state) => !state)}
								className="absolute right-2 top-2 size-10 inline-flex items-center justify-center rounded-lg text-white bg-neutral-900 hover:bg-neutral-800"
							>
								{showKey ? (
									<EyeOnIcon className="size-5" />
								) : (
									<EyeOffIcon className="size-5" />
								)}
							</button>
						</div>
						<button
							type="submit"
							disabled={!isValid || loading}
							className="inline-flex items-center justify-center w-full text-lg h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
						>
							{loading ? (
								<LoaderIcon className="size-5 animate-spin" />
							) : (
								t("global.continue")
							)}
						</button>
					</form>
				</div>
			</div>
		</div>
	);
}