"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

import { Button } from "@/components/ui/button";
import {
	Dialog,
	DialogClose,
	DialogContent,
	DialogDescription,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "@/components/ui/dialog";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { useToast } from "@/components/ui/use-toast";
import { abortPrintJob } from "@/server/actions/printJobs";
import { TriangleAlertIcon } from "lucide-react";
import { useState } from "react";

const formSchema = z.object({
	abortReason: z
		.string()
		.min(1, {
			message: "Bitte gebe einen Grund für den Abbruch an.",
		})
		.max(255, {
			message: "Der Grund darf maximal 255 Zeichen lang sein.",
		}),
});

interface CancelFormProps {
	jobId: string;
}

export function CancelForm(props: CancelFormProps) {
	const { jobId } = props;
	const form = useForm<z.infer<typeof formSchema>>({
		resolver: zodResolver(formSchema),
		defaultValues: {
			abortReason: "",
		},
	});
	const { toast } = useToast();
	const [open, setOpen] = useState(false);

	async function onSubmit(values: z.infer<typeof formSchema>) {
		toast({
			description: "Druckauftrag wird abgebrochen...",
		});
		try {
			await abortPrintJob(jobId, values.abortReason);
			setOpen(false);
			toast({
				description: "Druckauftrag wurde abgebrochen.",
			});
		} catch (error) {
			if (error instanceof Error) {
				toast({
					description: error.message,
					variant: "destructive",
				});
			} else {
				toast({
					description: "Ein unbekannter Fehler ist aufgetreten.",
					variant: "destructive",
				});
			}
		}
	}

	return (
		<Dialog open={open} onOpenChange={setOpen}>
			<DialogTrigger asChild>
				<Button
					variant={"ghost"}
					className="text-red-500 hover:text-red-600 flex-grow gap-2 items-center flex justify-start"
				>
					<TriangleAlertIcon className="w-4 h-4" />
					<span>Druckauftrag abbrechen</span>
				</Button>
			</DialogTrigger>
			<DialogContent>
				<DialogHeader>
					<DialogTitle>Druckauftrag abbrechen?</DialogTitle>
					<DialogDescription>
						Du bist dabei, den Druckauftrag abzubrechen. Bitte beachte, dass ein abgebrochener Druckauftrag nicht wieder
						aufgenommen werden kann und der Drucker sich automatisch abschaltet.
					</DialogDescription>
				</DialogHeader>
				<Form {...form}>
					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
						<FormField
							control={form.control}
							name="abortReason"
							render={({ field }) => (
								<FormItem>
									<FormLabel>Grund für den Abbruch</FormLabel>
									<FormControl>
										<Input {...field} />
									</FormControl>
									<FormDescription>
										Bitte teile uns den Grund für den Abbruch des Druckauftrags mit. Wenn der Drucker eine Fehlermeldung
										anzeigt, gib bitte nur diese Fehlermeldung an.
									</FormDescription>
									<FormMessage />
								</FormItem>
							)}
						/>
						<div className="flex flex-row justify-between">
							<DialogClose asChild>
								<Button variant={"secondary"}>Nein</Button>
							</DialogClose>
							<Button variant={"destructive"} type="submit">
								Ja, Druck abbrechen
							</Button>
						</div>
					</form>
				</Form>
			</DialogContent>
		</Dialog>
	);
}
