"use client";

import { AlertDialogHeader } from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import {
	Dialog,
	DialogClose,
	DialogContent,
	DialogDescription,
	DialogTitle,
	DialogTrigger,
} from "@/components/ui/dialog";
import { useToast } from "@/components/ui/use-toast";
import { earlyFinishPrintJob } from "@/server/actions/printJobs";
import { CircleCheckBigIcon } from "lucide-react";

interface FinishFormProps {
	jobId: string;
}

export function FinishForm(props: FinishFormProps) {
	const { jobId } = props;
	const { toast } = useToast();

	async function onClick() {
		toast({
			description: "Druckauftrag wird abgeschlossen...",
		});
		try {
			await earlyFinishPrintJob(jobId);
			toast({
				description: "Druckauftrag wurde abgeschlossen.",
			});
		} catch (error) {
			if (error instanceof Error) {
				toast({
					description: error.message,
					variant: "destructive",
				});
			} else {
				toast({
					description: "Ein unbekannter Fehler ist aufgetreten.",
					variant: "destructive",
				});
			}
		}
	}

	return (
		<Dialog>
			<DialogTrigger asChild>
				<Button variant={"ghost"} className="flex-grow gap-2 items-center flex justify-start">
					<CircleCheckBigIcon className="w-4 h-4" />
					<span>Druckauftrag abschließen</span>
				</Button>
			</DialogTrigger>
			<DialogContent>
				<AlertDialogHeader>
					<DialogTitle>Druckauftrag abschließen?</DialogTitle>
					<DialogDescription>
						Du bist dabei, den Druckauftrag als abgeschlossen zu markieren. Dies führt dazu, dass der Drucker
						automatisch herunterfährt.
					</DialogDescription>
				</AlertDialogHeader>
				<div className="flex flex-col gap-4">
					<p className="text-sm text-red-500 font-medium bg-red-500/20 px-4 py-2 rounded-md">
						Bitte bestätige nur, wenn der Druckauftrag tatsächlich erfolgreich abgeschlossen wurde.
					</p>
					<div className="flex flex-row justify-between">
						<DialogClose asChild>
							<Button variant={"secondary"}>Abbrechen</Button>
						</DialogClose>
						<DialogClose asChild onClick={onClick}>
							<Button variant={"default"}>Bestätigen</Button>
						</DialogClose>
					</div>
				</div>
			</DialogContent>
		</Dialog>
	);
}
