import Constants from "expo-constants";
import { Link } from "expo-router";
import { Text, View } from "react-native";
import {
	Card,
	CardContent,
	CardFooter,
	CardHeader,
} from "../components/ui/card";
import { Separator } from "../components/ui/separator";
import { useServerStore } from "../hooks/useServerCheck";

export default function Update() {
	const version = Constants.expoConfig?.version;
	const build = Constants.expoConfig?.android?.versionCode ?? 1;
	const server = useServerStore((s) => s.serverVersion);
	return (
		<View className="flex-1 mt-5 p-5">
			<Card>
				<CardHeader>
					<Text className="text-center underline">Update Required</Text>
				</CardHeader>
				<CardContent>
					<Text>Your app is out of date and needs to be updated</Text>
					<Separator className="mt-5 mb-5" />
					<Text>
						App version - v{version}-{build}
					</Text>
					<Text>
						Server version - v{server?.versionName}-{server?.versionCode}
					</Text>
					<Separator className="mt-5 mb-5" />
					<Text>
						To update the app please head go to a computer and open LST.
					</Text>
					<Text>Then head to Scan.</Text>
					<Text>Click update Then follow the instructions on screen</Text>
				</CardContent>
			</Card>
			{server && server?.versionCode >= build && (
				<Link href={"/"}>
					<Text className="text-center underline">Home</Text>
				</Link>
			)}
		</View>
	);
}