import { CancelForm } from "@/app/job/[jobId]/cancel-form";
import { EditComments } from "@/app/job/[jobId]/edit-comments";
import { ExtendForm } from "@/app/job/[jobId]/extend-form";
import { FinishForm } from "@/app/job/[jobId]/finish-form";
import { Countdown } from "@/components/printer-card/countdown";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { validateRequest } from "@/server/auth";
import { UserRole } from "@/server/auth/permissions";
import { db } from "@/server/db";
import { printJobs } from "@/server/db/schema";
import { eq } from "drizzle-orm";
import { ArchiveIcon } from "lucide-react";

import type { Metadata } from "next";

export const metadata: Metadata = {
	title: "Druckauftrag",
};

interface JobDetailsPageProps {
	params: {
		jobId: string;
	};
}
export default async function JobDetailsPage(props: JobDetailsPageProps) {
	const { jobId } = props.params;
	const { user } = await validateRequest();

	const jobDetails = await db.query.printJobs.findFirst({
		where: eq(printJobs.id, jobId),
		with: {
			user: true,
			printer: true,
		},
	});

	if (!jobDetails) {
		return <div>Job not found</div>;
	}

	const jobIsOnGoing = new Date(jobDetails.startAt).getTime() + jobDetails.durationInMinutes * 60 * 1000 > Date.now();
	const jobIsAborted = jobDetails.aborted;
	const userOwnsJob = jobDetails.userId === user?.id;
	const userIsAdmin = user?.role === UserRole.ADMIN;
	const userMayEditJob = userOwnsJob || userIsAdmin;

	return (
		<div className="flex flex-col gap-4">
			<h1 className="text-3xl font-semibold">
				Druckauftrag vom{" "}
				{new Date(jobDetails.startAt).toLocaleString("de-DE", {
					dateStyle: "medium",
					timeStyle: "medium",
				})}
			</h1>
			{!jobIsOnGoing || jobIsAborted ? (
				<Alert className="bg-yellow-200 border-yellow-500 text-yellow-700 shadow-sm">
					<ArchiveIcon className="h-4 w-4" />
					<AlertTitle>Hinweis</AlertTitle>
					<AlertDescription>
						Dieser Druckauftrag wurde bereits abgeschlossen und kann nicht mehr bearbeitet werden.
					</AlertDescription>
				</Alert>
			) : null}
			<div className="flex flex-col lg:flex-row gap-4">
				<Card className="w-full">
					<CardContent className="p-4 flex flex-col gap-4">
						<div className="flex flex-row justify-between">
							<div>
								<h2 className="font-semibold">Ansprechpartner</h2>
								<p className="text-sm">{jobDetails.user.displayName}</p>
								<p className="text-sm">{jobDetails.user.email}</p>
							</div>
							<div className="text-right">
								{jobIsAborted && (
									<>
										<h2 className="font-semibold text-red-500">Abbruchsgrund</h2>
										<p className="text-sm text-red-500">{jobDetails.abortReason}</p>
									</>
								)}
								{jobIsOnGoing && (
									<>
										<h2 className="font-semibold">Verbleibende Zeit</h2>
										<p className="text-sm">
											<Countdown jobId={jobDetails.id} />
										</p>
									</>
								)}
							</div>
						</div>
						<EditComments
							defaultValue={jobDetails.comments}
							jobId={jobDetails.id}
							disabled={!userMayEditJob || jobIsAborted || !jobIsOnGoing}
						/>
					</CardContent>
				</Card>
				{userMayEditJob && jobIsOnGoing && (
					<Card className="w-full lg:w-96 ml-auto">
						<CardHeader>
							<CardTitle>Aktionen</CardTitle>
						</CardHeader>
						<CardContent>
							<div className="flex w-full flex-col -ml-4 -mt-2">
								<FinishForm jobId={jobDetails.id} />
								<ExtendForm jobId={jobDetails.id} />
								<CancelForm jobId={jobDetails.id} />
							</div>
						</CardContent>
					</Card>
				)}
			</div>
		</div>
	);
}

/**
 * 	durationInMinutes: integer("durationInMinutes").notNull(),
		comments: text("comments"),
		aborted: integer("aborted", { mode: "boolean" }).notNull().default(false),
		abortReason: text("abortReason"),
 */
