import { useStorage } from "@lume/ark";
import { EyeOffIcon, EyeOnIcon, LoaderIcon } from "@lume/icons";
import { getPublicKey, nip19 } from "nostr-tools";
import { useState } from "react";
import { useForm } from "react-hook-form";
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 {
		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);

			const privkey = nip19.decode(data.nsec).data as string;
			const pubkey = getPublicKey(privkey);

			await storage.createAccount({
				pubkey: pubkey,
				privkey: privkey,
			});

			return navigate("/auth/onboarding");
		} 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">Enter your Private Key</h1>
					<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
						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>
						.
						<br />
						It will be secured by your OS.
					</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}
							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" />
							) : (
								"Continue"
							)}
						</button>
					</form>
				</div>
			</div>
		</div>
	);
}