import { User } from "@/components/user";
import { NostrAccount } from "@lume/system";
import { displayNsec } from "@lume/utils";
import { createFileRoute } from "@tanstack/react-router";
import { invoke } from "@tauri-apps/api/core";
import { writeText } from "@tauri-apps/plugin-clipboard-manager";
import { useState } from "react";
import { toast } from "sonner";

interface Account {
	npub: string;
	nsec: string;
}

export const Route = createFileRoute("/settings/backup")({
	component: Screen,
	loader: async () => {
		const npubs = await NostrAccount.getAccounts();
		const accounts: Account[] = [];

		for (const npub of npubs) {
			const nsec: string = await invoke("get_stored_nsec", { npub });
			accounts.push({ npub, nsec });
		}

		return accounts;
	},
});

function Screen() {
	const accounts = Route.useLoaderData();

	return (
		<div className="mx-auto w-full max-w-xl">
			<div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
				{accounts.map((account) => (
					<List key={account.npub} account={account} />
				))}
			</div>
		</div>
	);
}

function List({ account }: { account: Account }) {
	const [key, setKey] = useState(account.nsec);
	const [copied, setCopied] = useState(false);
	const [passphase, setPassphase] = useState("");

	const encrypt = async () => {
		const encrypted: string = await invoke("get_encrypted_key", {
			npub: account.npub,
			password: passphase,
		});
		setKey(encrypted);
	};

	const copyKey = async () => {
		try {
			await writeText(key);
			setCopied(true);
		} catch (e) {
			toast.error(e);
		}
	};

	return (
		<div className="flex flex-1 flex-col gap-2 py-3">
			<User.Provider pubkey={account.npub}>
				<User.Root className="flex items-center gap-2">
					<User.Avatar className="size-8 rounded-full object-cover" />
					<div className="flex flex-col">
						<User.Name className="text-sm leading-tight" />
						<User.NIP05 />
					</div>
				</User.Root>
			</User.Provider>
			<div className="flex flex-col gap-2">
				<div className="flex w-full flex-col gap-1">
					<label
						htmlFor="nsec"
						className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
					>
						Private Key
					</label>
					<div className="flex items-center gap-2">
						<input
							readOnly
							name="nsec"
							type="text"
							value={displayNsec(key, 36)}
							className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
						/>
						<button
							type="button"
							onClick={() => copyKey()}
							className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
						>
							{copied ? "Copied" : "Copy"}
						</button>
					</div>
				</div>
				<div className="flex w-full flex-col gap-1">
					<label
						htmlFor="passphase"
						className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
					>
						Set a passphase to secure your key
					</label>
					<div className="flex items-center gap-2">
						<input
							name="passphase"
							type="password"
							value={passphase}
							onChange={(e) => setPassphase(e.target.value)}
							className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
						/>
						<button
							type="button"
							onClick={() => encrypt()}
							className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
						>
							Update
						</button>
					</div>
				</div>
			</div>
		</div>
	);
}