"use client";
import { LockKeyhole, RedoDot, Shield, Timer, TriangleAlert } from "lucide-react";
import Link from "next/link";
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";
import { cn } from "@repo/shared-components";
import { HobbyKnifeIcon } from "@radix-ui/react-icons";

export const penaltyColumns: ColumnDef<Penalty & { Report: Report; CreatedUser: User | null }>[] = [
	{
		accessorKey: "type",
		header: "Typ",

		cell: ({ row }) => {
			switch (row.getValue("type") as PenaltyType) {
				case "KICK":
					return (
						<div
							className={cn("text-warning flex gap-3", row.original.suspended && "text-gray-400")}
						>
							<RedoDot />
							Kick {row.original.suspended && "(ausgesetzt)"}
						</div>
					);
				case "TIME_BAN": {
					const length = formatDistance(
						new Date(row.original.timestamp),
						new Date(row.original.until || Date.now()),
						{ locale: de },
					);
					const isExpired = new Date(row.original.until || Date.now()) < new Date();
					return (
						<div
							className={cn(
								"text-warning flex gap-3",
								(row.original.suspended || isExpired) && "text-gray-400",
							)}
						>
							<Timer />
							Zeit Sperre ({length}) {row.original.suspended && "(ausgesetzt)"}{" "}
							{isExpired && !row.original.suspended && "(abgelaufen)"}
						</div>
					);
				}

				case "PERMISSIONS_REVOCED":
					return (
						<div className={cn("text-error flex gap-3", row.original.suspended && "text-gray-400")}>
							<LockKeyhole /> Rechte entzogen {row.original.suspended && "(ausgesetzt)"}
						</div>
					);
				case "BAN":
					return (
						<div className={cn("text-error flex gap-3", row.original.suspended && "text-gray-400")}>
							<HobbyKnifeIcon /> Bann {row.original.suspended && "(ausgesetzt)"}
						</div>
					);
			}
		},
	},
	{
		accessorKey: "CreatedUser",
		header: "Bestraft durch",
		cell: ({ row }) => {
			const user = row.original.CreatedUser;
			if (!user) return "Unbekannt";
			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;
			return (
				<div className="flex gap-2">
					<Link href={`/admin/penalty/${row.original.id}`}>
						<button className="btn btn-sm btn-outline btn-info flex items-center gap-2">
							<Shield className="h-4 w-4" />
							Anzeigen
						</button>
					</Link>
					{report && (
						<Link href={`/admin/report/${report.id}`}>
							<button className="btn btn-sm btn-outliney flex items-center gap-2">
								<TriangleAlert className="h-4 w-4" />
								Report Anzeigen
							</button>
						</Link>
					)}
				</div>
			);
		},
	},
];