import { getVersion } from "@tauri-apps/api/app";
import { relaunch } from "@tauri-apps/plugin-process";
import { Update, check } from "@tauri-apps/plugin-updater";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { toast } from "sonner";

export function AboutScreen() {
	const [t] = useTranslation();
	const [version, setVersion] = useState("");
	const [newUpdate, setNewUpdate] = useState<Update>(null);

	const checkUpdate = async () => {
		const update = await check();
		if (!update) toast.info("There is no update available");
		setNewUpdate(update);
	};

	const installUpdate = async () => {
		await newUpdate.downloadAndInstall();
		await relaunch();
	};

	useEffect(() => {
		async function loadVersion() {
			const appVersion = await getVersion();
			setVersion(appVersion);
		}

		loadVersion();
	}, []);

	return (
		<div className="mx-auto w-full max-w-lg">
			<div className="flex flex-col items-center">
				<h1 className="leading-tight text-xl font-semibold">Lume</h1>
				<p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
					{t("settings.about.version")} {version}
				</p>
			</div>
			<div className="mx-auto mt-4 flex w-full max-w-xs flex-col gap-2">
				{!newUpdate ? (
					<button
						type="button"
						onClick={() => checkUpdate()}
						className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 text-sm font-medium text-white hover:bg-blue-600"
					>
						{t("settings.about.checkUpdate")}
					</button>
				) : (
					<button
						type="button"
						onClick={() => installUpdate()}
						className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 text-sm font-medium text-white hover:bg-blue-600"
					>
						{t("settings.about.installUpdate")} {newUpdate.version}
					</button>
				)}
				<Link
					to="https://lume.nu"
					className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-100 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
				>
					Website
				</Link>
				<Link
					to="https://github.com/lumehq/lume/issues"
					className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-100 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
				>
					Report a issue
				</Link>
			</div>
		</div>
	);
}