"use client";
import { Check, Eye, X } from "lucide-react";
import Link from "next/link";
import { PaginatedTable } from "_components/PaginatedTable";
import { Report, User } from "@repo/db";
import { ColumnDef } from "@tanstack/react-table";

export default function ReportPage() {
	return (
		<PaginatedTable
			initialOrderBy={[{ id: "timestamp", desc: true }]}
			prismaModel="report"
			include={{
				Sender: true,
				Reported: true,
			}}
			columns={
				[
					{
						accessorKey: "reviewed",
						header: "Erledigt",

						cell: ({ row }) => {
							return (
								<div className="text-center">
									{row.getValue("reviewed") ? (
										<Check className="text-green-500 w-5 h-5" />
									) : (
										<X className="text-red-500 w-5 h-5" />
									)}
								</div>
							);
						},
					},
					{
						accessorKey: "Sender",
						header: "Sender",
						cell: ({ row }) => {
							const user = row.getValue("Sender") as User;
							return `${user.firstname} ${user.lastname} (${user.publicId})`;
						},
					},
					{
						accessorKey: "Reported",
						header: "Reported",
						cell: ({ row }) => {
							const user = row.getValue("Reported") 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 }) => (
							<Link href={`/admin/report/${row.original.id}`}>
								<button className="btn btn-sm btn-outline btn-info flex items-center gap-2">
									<Eye className="w-4 h-4" /> Anzeigen
								</button>
							</Link>
						),
					},
				] as ColumnDef<Report>[]
			}
		/>
	);
}