"use client";
import { User2 } from "lucide-react";
import { PaginatedTable } from "../../../_components/PaginatedTable";
import Link from "next/link";
import { ColumnDef } from "@tanstack/react-table";
import { DiscordAccount, User } from "@repo/db";
import { useSession } from "next-auth/react";

const AdminUserPage = () => {
	const { data: session } = useSession();
	return (
		<>
			<PaginatedTable
				stickyHeaders
				prismaModel="user"
				searchFields={["publicId", "firstname", "lastname", "email", "discordAccounts.username"]}
				include={{
					discordAccounts: true,
				}}
				initialOrderBy={[
					{
						id: "publicId",
						desc: false,
					},
				]}
				columns={
					[
						{
							header: "ID",
							accessorKey: "publicId",
						},
						{
							header: "Vorname",
							accessorKey: "firstname",
						},
						{
							header: "Nachname",
							accessorKey: "lastname",
						},
						{
							header: "Berechtigungen",
							cell(props) {
								if (props.row.original.permissions.length === 0) {
									return <span className="text-gray-700">Keine</span>;
								} else if (props.row.original.permissions.includes("ADMIN_USER_ADVANCED")) {
									return <span className="text-primary">Admin</span>;
								}
								return (
									<span className="text-secondary">
										{props.row.original.permissions
											.filter((p) => p === "PILOT" || p === "DISPO")
											.join(", ")}
									</span>
								);
							},
						},
						{
							header: "Discord",
							cell(props) {
								const discord = props.row.original.discordAccounts;
								if (discord.length === 0) {
									return <span className="text-gray-700">Nicht verbunden</span>;
								}
								return <span>{discord.map((d) => d.username).join(", ")}</span>;
							},
						},
						...(session?.user.permissions.includes("ADMIN_USER_ADVANCED")
							? [
									{
										header: "Email",
										accessorKey: "email",
									},
								]
							: []),
						{
							header: "Aktionen",
							cell: ({ row }) => (
								<div className="flex items-center gap-1">
									<Link href={`/admin/user/${row.original.id}`}>
										<button className="btn btn-sm">Anzeigen</button>
									</Link>
								</div>
							),
						},
					] as ColumnDef<User & { discordAccounts: DiscordAccount[] }>[]
				} // Define the columns for the user table
				leftOfSearch={
					<p className="flex items-center gap-2 text-left text-2xl font-semibold">
						<User2 className="h-5 w-5" /> Benutzer
					</p>
				}
			/>
		</>
	);
};

AdminUserPage.displayName = "AdminUserPage";

export default AdminUserPage;