"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, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { useToast } from "@/components/ui/use-toast";
import { extendPrintJob } from "@/server/actions/printJobs";
import { CircleFadingPlusIcon } from "lucide-react";
import { useState } from "react";
import { useSWRConfig } from "swr";

const formSchema = z.object({
	minutes: z.coerce.number().int().max(59, {
		message: "Die Minuten müssen zwischen 0 und 59 liegen.",
	}),
	hours: z.coerce.number().int().max(24, {
		message: "Die Stunden müssen zwischen 0 und 24 liegen.",
	}),
});

interface ExtendFormProps {
	jobId: string;
}

export function ExtendForm(props: ExtendFormProps) {
	const { jobId } = props;
	const form = useForm<z.infer<typeof formSchema>>({
		resolver: zodResolver(formSchema),
		defaultValues: {
			minutes: 0,
			hours: 0,
		},
	});
	const { toast } = useToast();
	const [open, setOpen] = useState(false);
	const { mutate } = useSWRConfig();

	async function onSubmit(values: z.infer<typeof formSchema>) {
		toast({
			description: "Druckauftrag wird verlängert...",
		});
		try {
			await extendPrintJob(jobId, values.minutes, values.hours);

			setOpen(false);
			form.reset();

			mutate(`/api/job/${jobId}/remaining-time`); // Refresh the countdown

			toast({
				description: "Druckauftrag wurde verlängert.",
			});
		} 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="flex-grow gap-2 items-center flex justify-start">
					<CircleFadingPlusIcon className="w-4 h-4" />
					<span>Druckauftrag verlängern</span>
				</Button>
			</DialogTrigger>
			<DialogContent>
				<DialogHeader>
					<DialogTitle>Druckauftrag verlängern</DialogTitle>
					<DialogDescription>
						Braucht dein Druck mehr Zeit als erwartet? Füge weitere Stunden oder Minuten zur Druckzeit hinzu.
					</DialogDescription>
				</DialogHeader>
				<Form {...form}>
					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
						<p className="text-sm px-4 py-2 text-yellow-700 bg-yellow-500/20 rounded-md">
							<span className="font-medium">Wichtig:</span> Bitte verlängere die Druckzeit nur, wenn es sich um
							denselben Druck handelt. Wenn es ein anderer Druck ist, brich bitte den aktuellen Druckauftrag ab und
							starte einen neuen.
						</p>
						<div className="flex flex-row gap-2">
							<FormField
								control={form.control}
								name="hours"
								render={({ field }) => (
									<FormItem className="w-1/2">
										<FormLabel>Stunden</FormLabel>
										<FormControl>
											<Input placeholder="0" {...field} />
										</FormControl>
										<FormMessage />
									</FormItem>
								)}
							/>
							<FormField
								control={form.control}
								name="minutes"
								render={({ field }) => (
									<FormItem className="w-1/2">
										<FormLabel>Minuten</FormLabel>
										<FormControl>
											<Input placeholder="0" {...field} />
										</FormControl>
										<FormMessage />
									</FormItem>
								)}
							/>
						</div>
						<div className="flex flex-row justify-between">
							<DialogClose asChild>
								<Button variant={"secondary"}>Abbrechen</Button>
							</DialogClose>
							<Button variant={"default"} type="submit">
								Verlängern
							</Button>
						</div>
					</form>
				</Form>
			</DialogContent>
		</Dialog>
	);
}
