"use client";
import { Eye, LockKeyhole, RedoDot, Timer } from "lucide-react";
import Link from "next/link";
import { PaginatedTable } from "_components/PaginatedTable";
import { Penalty, PenaltyType, Report, User } from "@repo/db";
import { ColumnDef } from "@tanstack/react-table";
import { formatDistance } from "date-fns";
import { de } from "date-fns/locale";

export default function ReportPage() {
	return (
		<PaginatedTable
			prismaModel="penalty"
			include={{
				CreatedUser: true,
				Report: true,
			}}
			columns={
				[
					{
						accessorKey: "type",
						header: "Typ",

						cell: ({ row }) => {
							switch (row.getValue("type") as PenaltyType) {
								case "KICK":
									return (
										<div className="text-warning flex gap-3">
											<RedoDot />
											Kick
										</div>
									);
								case "TIME_BAN": {
									const length = formatDistance(
										new Date(row.original.timestamp),
										new Date(row.original.until || Date.now()),
										{ locale: de },
									);
									return (
										<div className="text-warning flex gap-3">
											<Timer />
											Zeit Sperre ({length})
										</div>
									);
								}
								case "BAN":
									return (
										<div className="text-error flex gap-3">
											<LockKeyhole /> Bann
										</div>
									);
							}
						},
					},
					{
						accessorKey: "CreatedUser",
						header: "Bestraft durch",
						cell: ({ row }) => {
							const user = row.getValue("CreatedUser") as User;
							return `${user.firstname} ${user.lastname} (${user.publicId})`;
						},
					},
					{
						accessorKey: "timestamp",
						header: "Time",
						cell: ({ row }) => new Date(row.getValue("timestamp")).toLocaleString(),
					},
					{
						accessorKey: "actions",
						header: "Actions",
						cell: ({ row }) => {
							const report = row.original.Report;
							if (!report[0]) return null;
							return (
								<Link href={`/admin/report/${report[0].id}`}>
									<button className="btn btn-sm btn-outline btn-info flex items-center gap-2">
										<Eye className="w-4 h-4" />
										Report Anzeigen
									</button>
								</Link>
							);
						},
					},
				] as ColumnDef<Penalty & { Report: Report[] }>[]
			}
		/>
	);
}