import Button from "@/components/Low/Button";
import {PERMISSIONS} from "@/constants/userPermissions";
import useGroups from "@/hooks/useGroups";
import useUsers from "@/hooks/useUsers";
import {Type, User, userTypes, CorporateUser, Group} from "@/interfaces/user";
import {Popover, Transition} from "@headlessui/react";
import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
import axios from "axios";
import clsx from "clsx";
import {capitalize, reverse} from "lodash";
import moment from "moment";
import {Fragment, useEffect, useState} from "react";
import {BsArrowDown, BsArrowDownUp, BsArrowUp, BsCheck, BsCheckCircle, BsEye, BsFillExclamationOctagonFill, BsPerson, BsTrash} from "react-icons/bs";
import {toast} from "react-toastify";
import {countries, TCountries} from "countries-list";
import countryCodes from "country-codes-list";
import Modal from "@/components/Modal";
import UserCard from "@/components/UserCard";
import {getUserCompanyName, isAgentUser, USER_TYPE_LABELS} from "@/resources/user";
import useFilterStore from "@/stores/listFilterStore";
import {useRouter} from "next/router";
import {isCorporateUser} from "@/resources/user";
import {useListSearch} from "@/hooks/useListSearch";
import {getUserCorporate} from "@/utils/groups";
import {asyncSorter} from "@/utils";
import {exportListToExcel, UserListRow} from "@/utils/users";
import {checkAccess} from "@/utils/permissions";
import {PermissionType} from "@/interfaces/permissions";
import usePermissions from "@/hooks/usePermissions";
import useUserBalance from "@/hooks/useUserBalance";
const columnHelper = createColumnHelper<User>();
const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]];

const CompanyNameCell = ({users, user, groups}: {user: User; users: User[]; groups: Group[]}) => {
	const [companyName, setCompanyName] = useState("");
	const [isLoading, setIsLoading] = useState(false);

	useEffect(() => {
		const name = getUserCompanyName(user, users, groups);
		setCompanyName(name);
	}, [user, users, groups]);

	return isLoading ? <span className="animate-pulse">Loading...</span> : <>{companyName}</>;
};

export default function UserList({
	user,
	filters = [],
	renderHeader,
}: {
	user: User;
	filters?: ((user: User) => boolean)[];
	renderHeader?: (total: number) => JSX.Element;
}) {
	const [showDemographicInformation, setShowDemographicInformation] = useState(false);
	const [sorter, setSorter] = useState<string>();
	const [displayUsers, setDisplayUsers] = useState<User[]>([]);
	const [selectedUser, setSelectedUser] = useState<User>();

	const {users, reload} = useUsers();
	const {permissions} = usePermissions(user?.id || "");
	const {balance} = useUserBalance();
	const {groups} = useGroups({
		admin: user && ["corporate", "teacher", "mastercorporate"].includes(user?.type) ? user.id : undefined,
		userType: user?.type,
	});

	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
	const router = useRouter();

	const expirationDateColor = (date: Date) => {
		const momentDate = moment(date);
		const today = moment(new Date());

		if (today.isAfter(momentDate)) return "!text-mti-red-light  font-bold line-through";
		if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light";
		if (today.add(2, "weeks").isAfter(momentDate)) return "!text-mti-rose-light";
		if (today.add(1, "months").isAfter(momentDate)) return "!text-mti-orange-light";
	};

	useEffect(() => {
		(async () => {
			if (users) {
				const filteredUsers = filters.reduce((d, f) => d.filter(f), users);
				const sortedUsers = await asyncSorter<User>(filteredUsers, sortFunction);

				setDisplayUsers([...sortedUsers]);
			}
		})();
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [users, sorter]);

	const deleteAccount = (user: User) => {
		if (!confirm(`Are you sure you want to delete ${user.name}'s account?`)) return;

		axios
			.delete<{ok: boolean}>(`/api/user?id=${user.id}`)
			.then(() => {
				toast.success("User deleted successfully!");
				reload();
			})
			.catch(() => {
				toast.error("Something went wrong!", {toastId: "delete-error"});
			})
			.finally(reload);
	};

	const verifyAccount = (user: User) => {
		axios
			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
				...user,
				isVerified: true,
			})
			.then(() => {
				toast.success("User verified successfully!");
				reload();
			})
			.catch(() => {
				toast.error("Something went wrong!", {toastId: "update-error"});
			});
	};

	const toggleDisableAccount = (user: User) => {
		if (
			!confirm(
				`Are you sure you want to ${user.status === "disabled" ? "enable" : "disable"} ${
					user.name
				}'s account? This change is usually related to their payment state.`,
			)
		)
			return;

		axios
			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
				...user,
				status: user.status === "disabled" ? "active" : "disabled",
			})
			.then(() => {
				toast.success(`User ${user.status === "disabled" ? "enabled" : "disabled"} successfully!`);
				reload();
			})
			.catch(() => {
				toast.error("Something went wrong!", {toastId: "update-error"});
			});
	};

	const SorterArrow = ({name}: {name: string}) => {
		if (sorter === name) return <BsArrowUp />;
		if (sorter === reverseString(name)) return <BsArrowDown />;

		return <BsArrowDownUp />;
	};

	const actionColumn = ({row}: {row: {original: User}}) => {
		const updateUserPermission = PERMISSIONS.updateUser[row.original.type] as {
			list: Type[];
			perm: PermissionType;
		};
		const deleteUserPermission = PERMISSIONS.deleteUser[row.original.type] as {
			list: Type[];
			perm: PermissionType;
		};
		return (
			<div className="flex gap-4">
				{!row.original.isVerified && checkAccess(user, updateUserPermission.list, permissions, updateUserPermission.perm) && (
					<div data-tip="Verify User" className="cursor-pointer tooltip" onClick={() => verifyAccount(row.original)}>
						<BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" />
					</div>
				)}
				{checkAccess(user, updateUserPermission.list, permissions, updateUserPermission.perm) && (
					<div
						data-tip={row.original.status === "disabled" ? "Enable User" : "Disable User"}
						className="cursor-pointer tooltip"
						onClick={() => toggleDisableAccount(row.original)}>
						{row.original.status === "disabled" ? (
							<BsCheckCircle className="hover:text-mti-purple-light transition ease-in-out duration-300" />
						) : (
							<BsFillExclamationOctagonFill className="hover:text-mti-purple-light transition ease-in-out duration-300" />
						)}
					</div>
				)}
				{checkAccess(user, deleteUserPermission.list, permissions, deleteUserPermission.perm) && (
					<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteAccount(row.original)}>
						<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
					</div>
				)}
			</div>
		);
	};

	const demographicColumns = [
		columnHelper.accessor("name", {
			header: (
				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "name"))}>
					<span>Name</span>
					<SorterArrow name="name" />
				</button>
			) as any,
			cell: ({row, getValue}) => (
				<div
					className={clsx(
						checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) &&
							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
					)}
					onClick={() =>
						checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) ? setSelectedUser(row.original) : null
					}>
					{getValue()}
				</div>
			),
		}),
		columnHelper.accessor("demographicInformation.country", {
			header: (
				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "country"))}>
					<span>Country</span>
					<SorterArrow name="country" />
				</button>
			) as any,
			cell: (info) =>
				info.getValue()
					? `${countryCodes.findOne("countryCode" as any, info.getValue())?.flag} ${
							countries[info.getValue() as unknown as keyof TCountries]?.name
					  } (+${countryCodes.findOne("countryCode" as any, info.getValue())?.countryCallingCode})`
					: "N/A",
		}),
		columnHelper.accessor("demographicInformation.phone", {
			header: (
				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "phone"))}>
					<span>Phone</span>
					<SorterArrow name="phone" />
				</button>
			) as any,
			cell: (info) => info.getValue() || "N/A",
			enableSorting: true,
		}),
		columnHelper.accessor(
			(x) =>
				x.type === "corporate" || x.type === "mastercorporate" ? x.demographicInformation?.position : x.demographicInformation?.employment,
			{
				id: "employment",
				header: (
					<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "employment"))}>
						<span>Employment</span>
						<SorterArrow name="employment" />
					</button>
				) as any,
				cell: (info) => (info.row.original.type === "corporate" ? info.getValue() : capitalize(info.getValue())) || "N/A",
				enableSorting: true,
			},
		),
		columnHelper.accessor("lastLogin", {
			header: (
				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "lastLogin"))}>
					<span>Last Login</span>
					<SorterArrow name="lastLogin" />
				</button>
			) as any,
			cell: (info) => (!!info.getValue() ? moment(info.getValue()).format("YYYY-MM-DD HH:mm") : "N/A"),
		}),
		columnHelper.accessor("demographicInformation.gender", {
			header: (
				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "gender"))}>
					<span>Gender</span>
					<SorterArrow name="gender" />
				</button>
			) as any,
			cell: (info) => capitalize(info.getValue()) || "N/A",
			enableSorting: true,
		}),
		{
			header: (
				<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
					Switch
				</span>
			),
			id: "actions",
			cell: actionColumn,
		},
	];

	const defaultColumns = [
		columnHelper.accessor("name", {
			header: (
				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "name"))}>
					<span>Name</span>
					<SorterArrow name="name" />
				</button>
			) as any,
			cell: ({row, getValue}) => (
				<div
					className={clsx(
						checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) &&
							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
					)}
					onClick={() =>
						checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) ? setSelectedUser(row.original) : null
					}>
					{getValue()}
				</div>
			),
		}),
		columnHelper.accessor("email", {
			header: (
				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "email"))}>
					<span>E-mail</span>
					<SorterArrow name="email" />
				</button>
			) as any,
			cell: ({row, getValue}) => (
				<div
					className={clsx(
						PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
					)}
					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
					{getValue()}
				</div>
			),
		}),
		columnHelper.accessor("type", {
			header: (
				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "type"))}>
					<span>Type</span>
					<SorterArrow name="type" />
				</button>
			) as any,
			cell: (info) => USER_TYPE_LABELS[info.getValue()],
		}),
		columnHelper.accessor("studentID", {
			header: (
				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "studentID"))}>
					<span>Student ID</span>
					<SorterArrow name="studentID" />
				</button>
			) as any,
			cell: (info) => info.getValue() || "N/A",
		}),
		columnHelper.accessor("corporateInformation.companyInformation.name", {
			header: (
				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}>
					<span>Company</span>
					<SorterArrow name="companyName" />
				</button>
			) as any,
			cell: (info) => <CompanyNameCell user={info.row.original} users={users} groups={groups} />,
		}),
		columnHelper.accessor("subscriptionExpirationDate", {
			header: (
				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "expiryDate"))}>
					<span>Expiration</span>
					<SorterArrow name="expiryDate" />
				</button>
			) as any,
			cell: (info) => (
				<span className={clsx(info.getValue() ? expirationDateColor(moment(info.getValue()).toDate()) : "")}>
					{!info.getValue() ? "No expiry date" : moment(info.getValue()).format("DD/MM/YYYY")}
				</span>
			),
		}),
		columnHelper.accessor("isVerified", {
			header: (
				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "verification"))}>
					<span>Verified</span>
					<SorterArrow name="verification" />
				</button>
			) as any,
			cell: (info) => (
				<div className="flex gap-3 items-center text-mti-gray-dim text-sm self-center">
					<div
						className={clsx(
							"w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
							"transition duration-300 ease-in-out",
							info.getValue() && "!bg-mti-purple-light ",
						)}>
						<BsCheck color="white" className="w-full h-full" />
					</div>
				</div>
			),
		}),
		{
			header: (
				<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
					Switch
				</span>
			),
			id: "actions",
			cell: actionColumn,
		},
	];

	const reverseString = (str: string) => reverse(str.split("")).join("");

	const selectSorter = (previous: string | undefined, name: string) => {
		if (!previous) return name;
		if (previous === name) return reverseString(name);

		return undefined;
	};

	const sortFunction = async (a: User, b: User) => {
		if (sorter === "name" || sorter === reverseString("name"))
			return sorter === "name" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);

		if (sorter === "email" || sorter === reverseString("email"))
			return sorter === "email" ? a.email.localeCompare(b.email) : b.email.localeCompare(a.email);

		if (sorter === "type" || sorter === reverseString("type"))
			return sorter === "type"
				? userTypes.findIndex((t) => a.type === t) - userTypes.findIndex((t) => b.type === t)
				: userTypes.findIndex((t) => b.type === t) - userTypes.findIndex((t) => a.type === t);

		if (sorter === "studentID" || sorter === reverseString("studentID"))
			return sorter === "studentID"
				? (a.type === "student" ? a.studentID || "N/A" : "N/A").localeCompare(b.type === "student" ? b.studentID || "N/A" : "N/A")
				: (b.type === "student" ? b.studentID || "N/A" : "N/A").localeCompare(a.type === "student" ? a.studentID || "N/A" : "N/A");

		if (sorter === "verification" || sorter === reverseString("verification"))
			return sorter === "verification"
				? a.isVerified.toString().localeCompare(b.isVerified.toString())
				: b.isVerified.toString().localeCompare(a.isVerified.toString());

		if (sorter === "expiryDate" || sorter === reverseString("expiryDate")) {
			if (!a.subscriptionExpirationDate && b.subscriptionExpirationDate) return sorter === "expiryDate" ? -1 : 1;
			if (a.subscriptionExpirationDate && !b.subscriptionExpirationDate) return sorter === "expiryDate" ? 1 : -1;
			if (!a.subscriptionExpirationDate && !b.subscriptionExpirationDate) return 0;
			if (moment(a.subscriptionExpirationDate).isAfter(b.subscriptionExpirationDate)) return sorter === "expiryDate" ? -1 : 1;
			if (moment(b.subscriptionExpirationDate).isAfter(a.subscriptionExpirationDate)) return sorter === "expiryDate" ? 1 : -1;
			return 0;
		}

		if (sorter === "lastLogin" || sorter === reverseString("lastLogin")) {
			if (!a.lastLogin && b.lastLogin) return sorter === "lastLogin" ? -1 : 1;
			if (a.lastLogin && !b.lastLogin) return sorter === "lastLogin" ? 1 : -1;
			if (!a.lastLogin && !b.lastLogin) return 0;
			if (moment(a.lastLogin).isAfter(b.lastLogin)) return sorter === "lastLogin" ? -1 : 1;
			if (moment(b.lastLogin).isAfter(a.lastLogin)) return sorter === "lastLogin" ? 1 : -1;
			return 0;
		}

		if (sorter === "country" || sorter === reverseString("country")) {
			if (!a.demographicInformation?.country && b.demographicInformation?.country) return sorter === "country" ? -1 : 1;
			if (a.demographicInformation?.country && !b.demographicInformation?.country) return sorter === "country" ? 1 : -1;
			if (!a.demographicInformation?.country && !b.demographicInformation?.country) return 0;

			return sorter === "country"
				? a.demographicInformation!.country.localeCompare(b.demographicInformation!.country)
				: b.demographicInformation!.country.localeCompare(a.demographicInformation!.country);
		}

		if (sorter === "phone" || sorter === reverseString("phone")) {
			if (!a.demographicInformation?.phone && b.demographicInformation?.phone) return sorter === "phone" ? -1 : 1;
			if (a.demographicInformation?.phone && !b.demographicInformation?.phone) return sorter === "phone" ? 1 : -1;
			if (!a.demographicInformation?.phone && !b.demographicInformation?.phone) return 0;

			return sorter === "phone"
				? a.demographicInformation!.phone.localeCompare(b.demographicInformation!.phone)
				: b.demographicInformation!.phone.localeCompare(a.demographicInformation!.phone);
		}

		if (sorter === "employment" || sorter === reverseString("employment")) {
			const aSortingItem =
				a.type === "corporate" || a.type === "mastercorporate" ? a.demographicInformation?.position : a.demographicInformation?.employment;
			const bSortingItem =
				b.type === "corporate" || b.type === "mastercorporate" ? b.demographicInformation?.position : b.demographicInformation?.employment;

			if (!aSortingItem && bSortingItem) return sorter === "employment" ? -1 : 1;
			if (aSortingItem && !bSortingItem) return sorter === "employment" ? 1 : -1;
			if (!aSortingItem && !bSortingItem) return 0;

			return sorter === "employment" ? aSortingItem!.localeCompare(bSortingItem!) : bSortingItem!.localeCompare(aSortingItem!);
		}

		if (sorter === "gender" || sorter === reverseString("gender")) {
			if (!a.demographicInformation?.gender && b.demographicInformation?.gender) return sorter === "employment" ? -1 : 1;
			if (a.demographicInformation?.gender && !b.demographicInformation?.gender) return sorter === "employment" ? 1 : -1;
			if (!a.demographicInformation?.gender && !b.demographicInformation?.gender) return 0;

			return sorter === "gender"
				? a.demographicInformation!.gender.localeCompare(b.demographicInformation!.gender)
				: b.demographicInformation!.gender.localeCompare(a.demographicInformation!.gender);
		}

		if (sorter === "companyName" || sorter === reverseString("companyName")) {
			const aCorporateName = getUserCompanyName(a, users, groups);
			const bCorporateName = getUserCompanyName(b, users, groups);
			if (!aCorporateName && bCorporateName) return sorter === "companyName" ? -1 : 1;
			if (aCorporateName && !bCorporateName) return sorter === "companyName" ? 1 : -1;
			if (!aCorporateName && !bCorporateName) return 0;

			return sorter === "companyName" ? aCorporateName.localeCompare(bCorporateName) : bCorporateName.localeCompare(aCorporateName);
		}

		return a.id.localeCompare(b.id);
	};

	const {rows: filteredRows, renderSearch} = useListSearch<User>(searchFields, displayUsers);

	const table = useReactTable({
		data: filteredRows,
		columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any,
		getCoreRowModel: getCoreRowModel(),
	});

	const downloadExcel = () => {
		const csv = exportListToExcel(filteredRows, users, groups);

		const element = document.createElement("a");
		const file = new Blob([csv], {type: "text/csv"});
		element.href = URL.createObjectURL(file);
		element.download = "users.csv";
		document.body.appendChild(element);
		element.click();
		document.body.removeChild(element);
	};

	const viewStudentFilter = (x: User) => x.type === "student";
	const viewTeacherFilter = (x: User) => x.type === "teacher";
	const belongsToAdminFilter = (x: User) => {
		if (!selectedUser) return false;
		return groups
			.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
			.flatMap((g) => g.participants)
			.includes(x.id);
	};

	const viewStudentFilterBelongsToAdmin = (x: User) => x.type === "student" && belongsToAdminFilter(x);
	const viewTeacherFilterBelongsToAdmin = (x: User) => x.type === "teacher" && belongsToAdminFilter(x);

	const renderUserCard = (selectedUser: User) => {
		const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin);
		const teachersFromAdmin = users.filter(viewTeacherFilterBelongsToAdmin);
		return (
			<div className="w-full flex flex-col gap-8">
				<UserCard
					maxUserAmount={
						user.type === "mastercorporate" ? (user.corporateInformation?.companyInformation?.userAmount || 0) - balance : undefined
					}
					loggedInUser={user}
					onViewStudents={
						(selectedUser.type === "corporate" || selectedUser.type === "teacher") && studentsFromAdmin.length > 0
							? () => {
									appendUserFilters({
										id: "view-students",
										filter: viewStudentFilter,
									});
									appendUserFilters({
										id: "belongs-to-admin",
										filter: belongsToAdminFilter,
									});

									router.push("/list/users");
							  }
							: undefined
					}
					onViewTeachers={
						(selectedUser.type === "corporate" || selectedUser.type === "student") && teachersFromAdmin.length > 0
							? () => {
									appendUserFilters({
										id: "view-teachers",
										filter: viewTeacherFilter,
									});
									appendUserFilters({
										id: "belongs-to-admin",
										filter: belongsToAdminFilter,
									});

									router.push("/list/users");
							  }
							: undefined
					}
					onViewCorporate={
						selectedUser.type === "teacher" || selectedUser.type === "student"
							? () => {
									appendUserFilters({
										id: "view-corporate",
										filter: (x: User) => x.type === "corporate",
									});
									appendUserFilters({
										id: "belongs-to-admin",
										filter: (x: User) =>
											groups
												.filter((g) => g.participants.includes(selectedUser.id))
												.flatMap((g) => [g.admin, ...g.participants])
												.includes(x.id),
									});

									router.push("/list/users");
							  }
							: undefined
					}
					onClose={(shouldReload) => {
						setSelectedUser(undefined);
						if (shouldReload) reload();
					}}
					user={selectedUser}
				/>
			</div>
		);
	};

	return (
		<>
			{renderHeader && renderHeader(displayUsers.length)}
			<div className="w-full">
				<Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
					{selectedUser && renderUserCard(selectedUser)}
				</Modal>
				<div className="w-full flex flex-col gap-2">
					<div className="w-full flex gap-2 items-end">
						{renderSearch()}
						<Button className="w-full max-w-[200px] mb-1" variant="outline" onClick={downloadExcel}>
							Download List
						</Button>
					</div>
					<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
						<thead>
							{table.getHeaderGroups().map((headerGroup) => (
								<tr key={headerGroup.id}>
									{headerGroup.headers.map((header) => (
										<th className="py-4 px-4 text-left" key={header.id}>
											{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
										</th>
									))}
								</tr>
							))}
						</thead>
						<tbody className="px-2">
							{table.getRowModel().rows.map((row) => (
								<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
									{row.getVisibleCells().map((cell) => (
										<td className="px-4 py-2 items-center w-fit" key={cell.id}>
											{flexRender(cell.column.columnDef.cell, cell.getContext())}
										</td>
									))}
								</tr>
							))}
						</tbody>
					</table>
				</div>
			</div>
		</>
	);
}