import InlineLink from "@components/InlineLink";
import {
	Tooltip,
	TooltipContent,
	TooltipProvider,
	TooltipTrigger,
} from "@components/Tooltip";
import MemoizedNetBirdIcon from "@components/ui/MemoizedNetBirdIcon";
import { getOperatingSystem } from "@hooks/useOperatingSystem";
import { compareVersions } from "@utils/version";
import { ArrowRightIcon, ArrowUpCircleIcon } from "lucide-react";
import { useTranslations } from "next-intl";
import * as React from "react";
import { useMemo } from "react";
import { useApplicationContext } from "@/contexts/ApplicationProvider";
import { OperatingSystem } from "@/interfaces/OperatingSystem";
import { PeerOperatingSystemIcon } from "@/modules/peers/PeerOperatingSystemIcon";
import FullTooltip from "@components/FullTooltip";

type Props = {
	version: string;
	os: string;
	serial?: string;
	ephemeral?: boolean;
};
export default function PeerVersionCell({
	version,
	os,
	serial,
	ephemeral,
}: Props) {
	const t = useTranslations("peers");
	const { latestVersion, latestUrl } = useApplicationContext();

	const updateAvailable = useMemo(() => {
		if (ephemeral) return false;
		const operatingSystem = getOperatingSystem(os);
		if (
			operatingSystem === OperatingSystem.IOS ||
			operatingSystem === OperatingSystem.ANDROID
		)
			return false;
		if (!latestVersion) return false;
		return !compareVersions(version, latestVersion);
	}, [os, version, latestVersion, ephemeral]);

	const updateIcon = useMemo(() => {
		return <ArrowUpCircleIcon size={15} className={"text-netbird"} />;
	}, []);

	return (
		<div className={"flex flex-col gap-1"}>
			{updateAvailable ? (
				<TooltipProvider>
					<Tooltip delayDuration={10}>
						<TooltipTrigger>
							<div className="flex gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all rounded-md items-center">
								<MemoizedNetBirdIcon />
								{version == "development" ? "dev" : version}
								<div className={"relative"}>
									<span className="animate-ping absolute left-0 inline-flex h-[15px] w-[15px] rounded-full bg-netbird opacity-20"></span>
									{updateIcon}
								</div>
							</div>
						</TooltipTrigger>

						<TooltipContent>
							<div
								className={
									" inline-flex gap-2 items-center rounded-md text-xs my-2"
								}
							>
								<MemoizedNetBirdIcon />
								<span>{version}</span>
								<ArrowRightIcon size={16} className={"text-netbird"} />
								<span className={"text-netbird"}>{latestVersion}</span>
							</div>
							<p className={"font-medium"}>{t("updateAvailable")}</p>

							<div
								className={
									"text-neutral-300 flex flex-col gap-1 max-w-[300px] text-xs mt-1"
								}
							>
								{t("updateDescription")}
							</div>
						{latestUrl && (
							<InlineLink
								onClick={(e) => e.stopPropagation()}
								href={latestUrl}
								target={"_blank"}
								className={"mt-2 mb-2 text-xs"}
							>
								{t("downloadChangelog")}
							</InlineLink>
						)}
						</TooltipContent>
					</Tooltip>
				</TooltipProvider>
			) : (
				<div className="inline-flex gap-2 dark:text-neutral-300 text-neutral-500 items-center">
					<MemoizedNetBirdIcon />
					{version == "development" ? "dev" : version}
				</div>
			)}

			{os && os !== "" && os !== " " && (
				<FullTooltip
					delayDuration={500}
					disabled={!serial || serial === ""}
					content={
						<div className={"text-xs"}>
							<span className={"text-nb-gray-100 font-medium"}>
								{t("serialNumber")}:{" "}
							</span>
							{serial}
						</div>
					}
				>
					<div
						className={
							"flex items-center gap-2 text-neutral-300 whitespace-nowrap"
						}
					>
						<PeerOperatingSystemIcon os={os} />

						{os}
					</div>
				</FullTooltip>
			)}
		</div>
	);
}
