import { useMutation } from "@tanstack/react-query";
import { Button } from "../../components/ui/button";
import { Separator } from "../../components/ui/separator";

export default function UpdateInstructions() {
	const getFile = useMutation({
		mutationFn: async () => {
			// 1. Fetch the file from the public folder
			const response = await fetch(
				`/lst/app/stage-now/${window.LST_CONFIG?.server}-stageNow.pdf`,
			);
			if (!response.ok) throw new Error("Network response was not ok");

			// 2. Convert to blob
			return await response.blob();
		},
		onSuccess: (blob) => {
			// 3. Create a temporary anchor element to trigger download
			const url = window.URL.createObjectURL(blob);
			const a = document.createElement("a");
			a.href = url;
			a.download = `${window.LST_CONFIG?.server}-stageNow.pdf`; // Desired filename
			document.body.appendChild(a);
			a.click();

			// 4. Cleanup
			window.URL.revokeObjectURL(url);
			document.body.removeChild(a);
		},
	});

	return (
		<div className="flex flex-row gap-2">
			<div className="w-1/2">
				<div className="flex flex-col gap-1 justify-center">
					<div>
						<p className="text-center text-3xl">
							Updating the lst mobile scanner app
						</p>
						<p className="text-center text-sm">
							NOTE: LST Mobile only works on TC8300
						</p>
					</div>
					<div className="flex justify-center">
						<Button
							onClick={() => getFile.mutate()}
							disabled={getFile.isPending}
						>
							{getFile.isPending ? "Downloading..." : "Get StageNow Codes"}
						</Button>
					</div>
				</div>
				<Separator className="m-3" />
				<div>
					<p className="text-2xl text-center">
						How to know the scanner has an update?
					</p>
					<p>
						The bottom part of the scanner will show a red or orange bar
						indicating there is an update. As shown below
					</p>
					<div className="flex flex-row gap-2 justify-center">
						<div className="w-1/2">
							<img
								src="/lst/app/imgs/docs/mobile/critical_update.png"
								alt="Home"
								className="max-w-[50%] h-auto"
							/>
						</div>

						<div className="w-1/2">
							<img
								src="/lst/app/imgs/docs/mobile/update.png"
								alt="Home"
								className="max-w-[50%] h-auto"
							/>
						</div>
					</div>
				</div>

				<Separator className="m-3" />
				<div>
					<p className="text-2xl text-center">
						To update the scanner follow the below steps.
					</p>
					<p>Step 1) Tap the 3 dots top right of the home screen</p>
					<img
						src="/lst/app/imgs/docs/mobile/ehs_homeScreen.png"
						alt="Home"
						className="max-w-[25%] h-auto m-3"
					/>
					<p>Step 2) Tap tools</p>
					<img
						src="/lst/app/imgs/docs/mobile/ehs_menu.png"
						alt="Home"
						className="max-w-[25%] h-auto m-3"
					/>
					<p>Step 3) Tap Stage Now</p>
					<img
						src="/lst/app/imgs/docs/mobile/tools.png"
						alt="Home"
						className="max-w-[25%] h-auto m-3"
					/>
					<p>
						Step 4) Scan the 3 barcode's to the right or from the printed sheet
					</p>
					<img
						src="/lst/app/imgs/docs/mobile/stagenow.png"
						alt="Home"
						className="max-w-[25%] h-auto m-3"
					/>
				</div>
			</div>
			<div className="w-1/2">
				<p>Scan Commands</p>
				<Separator className="m-3" />
				<div className="flex flex-col justify-center">
					<img
						src={`/lst/app/imgs/docs/mobile/${window.LST_CONFIG?.server}-1.png`}
						alt="Home"
						className="m-3"
					/>
					<img
						src={`/lst/app/imgs/docs/mobile/${window.LST_CONFIG?.server}-2.png`}
						alt="Home"
						className="m-3"
					/>
					<img
						src={`/lst/app/imgs/docs/mobile/${window.LST_CONFIG?.server}-3.png`}
						alt="Home"
						className="m-3"
					/>
				</div>
			</div>
		</div>
	);
}