import { ReasonForm } from "(app)/admin/penalty/_components/form";
import { prisma } from "@repo/db";
import { Error } from "_components/Error";
import { Shield } from "lucide-react";

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
	const { id } = await params;

	const penalty = await prisma.penalty.findUnique({
		where: {
			id: Number(id),
		},
		include: {
			User: true,
			CreatedUser: true,
		},
	});

	const userReports = await prisma.report.findMany({
		where: {
			reportedUserId: penalty?.User.id,
		},
		include: {
			Reported: true,
		},
	});

	if (!penalty) return <Error statusCode={404} title="Penalty not found" />;

	return (
		<div className="grid grid-cols-6 gap-4">
			<div className="col-span-full">
				<p className="text-2xl font-semibold text-left flex items-center gap-2">
					<Shield className="w-5 h-5" />
					Strafe #{penalty.id}
				</p>
			</div>
			<div className="col-span-6 md:col-span-3">
				<div className="card bg-base-200 shadow-md p-4">
					<p className="text-lg font-semibold mb-2">Details</p>
					<hr className="mb-4" />
					<p>
						<span className="font-semibold">Benutzer:</span> {penalty.User.firstname}{" "}
						{penalty.User.lastname} ({penalty.User.publicId})
					</p>
					{penalty.CreatedUser && (
						<p>
							<span className="font-semibold">Erstellt von:</span> {penalty.CreatedUser.firstname}{" "}
							{penalty.CreatedUser.lastname} ({penalty.CreatedUser.publicId})
						</p>
					)}
					<p>
						<span className="font-semibold">Typ:</span> {penalty.type}
					</p>

					<p>
						<span className="font-semibold">Erstellt am:</span>{" "}
						{new Date(penalty.timestamp).toLocaleString("de-DE", {
							dateStyle: "medium",
							timeStyle: "short",
						})}
					</p>
					{penalty.until && (
						<p>
							<span className="font-semibold">Gültig bis:</span>{" "}
							{new Date(penalty.until).toLocaleString("de-DE", {
								dateStyle: "medium",
								timeStyle: "short",
							})}
						</p>
					)}
				</div>
			</div>
			<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
				<ReasonForm penalty={penalty} userReports={userReports} />
			</div>
		</div>
	);
}