/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import useUser from "@/hooks/useUser";
import {toast, ToastContainer} from "react-toastify";
import Layout from "@/components/High/Layout";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
import usePayments from "@/hooks/usePayments";
import {Payment} from "@/interfaces/paypal";
import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
import {CURRENCIES} from "@/resources/paypal";
import {BsTrash} from "react-icons/bs";
import axios from "axios";
import {useEffect, useState, useMemo} from "react";
import {AgentUser, CorporateUser, User} from "@/interfaces/user";
import UserCard from "@/components/UserCard";
import Modal from "@/components/Modal";
import clsx from "clsx";
import useUsers from "@/hooks/useUsers";
import Checkbox from "@/components/Low/Checkbox";
import Button from "@/components/Low/Button";
import Select from "react-select";
import Input from "@/components/Low/Input";
import ReactDatePicker from "react-datepicker";
import moment from "moment";
import PaymentAssetManager from "@/components/PaymentAssetManager";
import {toFixedNumber} from "@/utils/number";
import {CSVLink} from "react-csv";

export const getServerSideProps = withIronSessionSsr(({req, res}) => {
	const user = req.session.user;

	if (!user || !user.isVerified) {
		res.setHeader("location", "/login");
		res.statusCode = 302;
		res.end();
		return {
			props: {
				user: null,
			},
		};
	}

	if (shouldRedirectHome(user) || !["admin", "developer"].includes(user.type)) {
		res.setHeader("location", "/");
		res.statusCode = 302;
		res.end();
		return {
			props: {
				user: null,
			},
		};
	}

	return {
		props: {user: req.session.user},
	};
}, sessionOptions);

const columnHelper = createColumnHelper<Payment>();

const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () => void; reload: () => void; showComission: boolean}) => {
	const [corporate, setCorporate] = useState<CorporateUser>();
	const [price, setPrice] = useState<number>(0);
	const [currency, setCurrency] = useState<string>("EUR");
	const [commission, setCommission] = useState<number>(0);
	const [referralAgent, setReferralAgent] = useState<AgentUser>();
	const [date, setDate] = useState<Date>(new Date());

	const {users} = useUsers();

	useEffect(() => {
		if (!corporate) return setReferralAgent(undefined);
		if (!corporate.corporateInformation?.referralAgent) return setReferralAgent(undefined);

		const referralAgent = users.find((u) => u.id === corporate.corporateInformation.referralAgent);
		setReferralAgent(referralAgent as AgentUser | undefined);
	}, [corporate, users]);

	useEffect(() => {
		const payment = corporate?.corporateInformation?.payment;

		setPrice(payment?.value || 0);
		setCurrency(payment?.currency || "EUR");
	}, [corporate]);

	const submit = () => {
		axios
			.post(`/api/payments`, {
				corporate: corporate?.id,
				agent: referralAgent?.id,
				agentCommission: commission,
				agentValue: toFixedNumber((commission / 100) * price, 2),
				currency,
				value: price,
				isPaid: false,
				date: date.toISOString(),
			})
			.then(() => {
				toast.success("New payment has been created successfully!");
				reload();
				onClose();
			})
			.catch(() => {
				toast.error("Something went wrong, please try again later!");
			});
	};

	return (
		<div className="flex flex-col gap-8">
			<h1 className="text-2xl font-semibold">New Payment</h1>
			<div className="flex flex-col gap-4">
				<div className="flex flex-col gap-3">
					<label className="font-normal text-base text-mti-gray-dim">Corporate account *</label>
					<Select
						className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
						options={(users.filter((u) => u.type === "corporate") as CorporateUser[]).map((user) => ({
							value: user.id,
							meta: user,
							label: `${user.corporateInformation.companyInformation.name || user.name} - ${user.email}`,
						}))}
						defaultValue={{value: "undefined", label: "Select an account"}}
						onChange={(value) => setCorporate((value as any)?.meta ?? undefined)}
						styles={{
							control: (styles) => ({
								...styles,
								paddingLeft: "4px",
								border: "none",
								outline: "none",
								":focus": {
									outline: "none",
								},
							}),
							option: (styles, state) => ({
								...styles,
								backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
								color: state.isFocused ? "black" : styles.color,
							}),
						}}
					/>
				</div>

				<div className="flex flex-col gap-3 w-full">
					<label className="font-normal text-base text-mti-gray-dim">Price *</label>
					<div className="w-full grid grid-cols-5 gap-2">
						<Input
							name="paymentValue"
							onChange={(e) => setPrice(e ? parseInt(e) : 0)}
							type="number"
							value={price}
							className="col-span-3"
						/>
						<Select
							className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
							options={CURRENCIES.map(({label, currency}) => ({value: currency, label}))}
							defaultValue={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
							onChange={(value) => setCurrency(value?.value || "EUR")}
							value={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
							styles={{
								control: (styles) => ({
									...styles,
									paddingLeft: "4px",
									border: "none",
									outline: "none",
									":focus": {
										outline: "none",
									},
								}),
								option: (styles, state) => ({
									...styles,
									backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
									color: state.isFocused ? "black" : styles.color,
								}),
							}}
						/>
					</div>
				</div>
				{showComission && (
					<div className="flex gap-4 w-full">
						<div className="flex flex-col w-full gap-3">
							<label className="font-normal text-base text-mti-gray-dim">Commission *</label>
							<Input name="commission" onChange={(e) => setCommission(e ? parseInt(e) : 0)} type="number" defaultValue={0} />
						</div>
						<div className="flex flex-col w-full gap-3">
							<label className="font-normal text-base text-mti-gray-dim">Commission Value*</label>
							<Input
								name="commissionValue"
								value={`${(commission / 100) * price} ${CURRENCIES.find((c) => c.currency === currency)?.label}`}
								onChange={() => null}
								type="text"
								defaultValue={0}
								disabled
							/>
						</div>
					</div>
				)}

				<div className="flex gap-4">
					<div className="flex flex-col w-full gap-3">
						<label className="font-normal text-base text-mti-gray-dim">Date *</label>
						<ReactDatePicker
							className={clsx(
								"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
								"hover:border-mti-purple tooltip",
								"transition duration-300 ease-in-out",
							)}
							dateFormat="dd/MM/yyyy"
							selected={moment(date).toDate()}
							onChange={(date) => setDate(date ?? new Date())}
						/>
					</div>

					<div className="flex flex-col w-full gap-3">
						<label className="font-normal text-base text-mti-gray-dim">Country Manager *</label>
						<Input
							name="referralAgent"
							value={referralAgent ? `${referralAgent.name} - ${referralAgent.email}` : "No country manager"}
							onChange={() => null}
							type="text"
							defaultValue={"No country manager"}
							disabled
						/>
					</div>
				</div>
				<div className="flex w-full justify-end items-center gap-8 mt-4">
					<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={onClose}>
						Cancel
					</Button>
					<Button className="w-full max-w-[200px]" onClick={submit} disabled={!corporate || !price}>
						Submit
					</Button>
				</div>
			</div>
		</div>
	);
};

const IS_PAID_OPTIONS = [
{
	value: null,
	label: 'All',
}, {
	value: false,
	label: 'Unpaid',
}, {
	value: true,
	label: 'Paid',
},
];
export default function PaymentRecord() {
	const [selectedCorporateUser, setSelectedCorporateUser] = useState<User>();
	const [selectedAgentUser, setSelectedAgentUser] = useState<User>();
	const [isCreatingPayment, setIsCreatingPayment] = useState(false);
	const [filters, setFilters] = useState<{filter: (p: Payment) => boolean; id: string}[]>([]);
	const [displayPayments, setDisplayPayments] = useState<Payment[]>([]);

	const [corporate, setCorporate] = useState<User>();
	const [agent, setAgent] = useState<User>();

	const {user} = useUser({redirectTo: "/login"});
	const {users, reload: reloadUsers} = useUsers();
	const {payments: originalPayments, reload: reloadPayment} = usePayments();
	const [startDate, setStartDate] = useState<Date | null>(moment("01/01/2023").toDate());
	const [endDate, setEndDate] = useState<Date | null>(moment().endOf('day').toDate());
	const [paid, setPaid] = useState<Boolean | null>(IS_PAID_OPTIONS[0].value);
	const reload = () => {
		reloadUsers();
		reloadPayment();
	};

	const payments = useMemo(() => {
		return originalPayments.filter((p: Payment) => {
			const date = moment(p.date);
			return date.isAfter(startDate) && date.isBefore(endDate);
		});
	}, [originalPayments, startDate, endDate]);

	useEffect(() => {
		setDisplayPayments(
			filters
				.map((f) => f.filter)
				.reduce((d, f) => d.filter(f), payments)
				.sort((a, b) => moment(b.date).diff(moment(a.date))),
		);
	}, [payments, filters]);

	useEffect(() => {
		if (user && user.type === "agent") {
			setAgent(user);
		}
	}, [user]);

	useEffect(() => {
		setFilters((prev) => [
			...prev.filter((x) => x.id !== "agent-filter"),
			...(!agent ? [] : [{id: "agent-filter", filter: (p: Payment) => p.agent === agent.id}]),
		]);
	}, [agent]);

	useEffect(() => console.log(filters), [filters]);

	useEffect(() => {
		setFilters((prev) => [
			...prev.filter((x) => x.id !== "corporate-filter"),
			...(!corporate ? [] : [{id: "corporate-filter", filter: (p: Payment) => p.corporate === corporate.id}]),
		]);
	}, [corporate]);

	useEffect(() => {
		setFilters((prev) => [
			...prev.filter((x) => x.id !== "paid"),
			...(typeof paid !== 'boolean' ? [] : [{id: "paid", filter: (p: Payment) => p.isPaid === paid}]),
		])
	}, [paid]);

	const updatePayment = (payment: Payment, key: string, value: any) => {
		axios
			.patch(`api/payments/${payment.id}`, {...payment, [key]: value})
			.then(() => toast.success("Updated the payment"))
			.finally(reload);
	};

	const deletePayment = (id: string) => {
		if (!confirm(`Are you sure you want to delete this payment?`)) return;

		axios
			.delete(`/api/payments/${id}`)
			.then(() => toast.success(`Deleted the "${id}" payment`))
			.catch((reason) => {
				if (reason.response.status === 404) {
					toast.error("Exam not found!");
					return;
				}

				if (reason.response.status === 403) {
					toast.error("You do not have permission to delete this exam!");
					return;
				}

				toast.error("Something went wrong, please try again later.");
			})
			.finally(reload);
	};

	const getFileAssetsColumns = () => {
		if (user) {
			const containerClassName = "flex gap-2 text-mti-purple-light hover:text-mti-purple-dark ease-in-out duration-300 cursor-pointer";
			switch (user.type) {
				case "corporate":
					return [
						columnHelper.accessor("corporateTransfer", {
							header: "Corporate transfer",
							id: "corporateTransfer",
							cell: (info) => (
								<div className={containerClassName}>
									<PaymentAssetManager
										permissions={info.row.original.isPaid ? "read" : "write"}
										asset={info.row.original.corporateTransfer}
										paymentId={info.row.original.id}
										type="corporate"
									/>
								</div>
							),
						}),
					];
				case "agent":
					return [
						columnHelper.accessor("commissionTransfer", {
							header: "Commission transfer",
							id: "commissionTransfer",
							cell: (info) => (
								<div className={containerClassName}>
									<PaymentAssetManager
										permissions="read"
										asset={info.row.original.commissionTransfer}
										paymentId={info.row.original.id}
										type="commission"
									/>
								</div>
							),
						}),
					];
				case "admin":
					return [
						columnHelper.accessor("corporateTransfer", {
							header: "Corporate transfer",
							id: "corporateTransfer",
							cell: (info) => (
								<div className={containerClassName}>
									<PaymentAssetManager
										permissions="read"
										asset={info.row.original.corporateTransfer}
										paymentId={info.row.original.id}
										type="corporate"
									/>
								</div>
							),
						}),
						columnHelper.accessor("commissionTransfer", {
							header: "Commission transfer",
							id: "commissionTransfer",
							cell: (info) => (
								<div className={containerClassName}>
									<PaymentAssetManager
										permissions={info.row.original.isPaid ? "read" : "write"}
										asset={info.row.original.commissionTransfer}
										paymentId={info.row.original.id}
										type="commission"
									/>
								</div>
							),
						}),
					];
				case "developer":
					return [
						columnHelper.accessor("corporateTransfer", {
							header: "Corporate transfer",
							id: "corporateTransfer",
							cell: (info) => (
								<div className={containerClassName}>
									<PaymentAssetManager
										permissions="write"
										asset={info.row.original.corporateTransfer}
										paymentId={info.row.original.id}
										type="corporate"
									/>
								</div>
							),
						}),
						columnHelper.accessor("commissionTransfer", {
							header: "Commission transfer",
							id: "commissionTransfer",
							cell: (info) => (
								<div className={containerClassName}>
									<PaymentAssetManager
										permissions="write"
										asset={info.row.original.commissionTransfer}
										paymentId={info.row.original.id}
										type="commission"
									/>
								</div>
							),
						}),
					];
				default:
					return [];
			}
		}

		return [];
	};
	const defaultColumns = [
		columnHelper.accessor("id", {
			header: "ID",
			id: "id",
			cell: (info) => info.getValue(),
		}),
		columnHelper.accessor("corporate", {
			header: "Corporate",
			id: "corporate",
			cell: (info) => {
				const user = users.find((x) => x.id === info.row.original.corporate) as CorporateUser;
				return (
					<div
						className={clsx(
							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
						)}
						onClick={() => setSelectedCorporateUser(user)}>
						{user?.corporateInformation.companyInformation.name || user?.name}
					</div>
				);
			},
		}),
		columnHelper.accessor("date", {
			header: "Date",
			id: "date",
			cell: (info) => <span>{moment(info.getValue()).format("DD/MM/YYYY")}</span>,
		}),
		columnHelper.accessor("value", {
			header: "Amount",
			id: "amount",
			cell: (info) => (
				<span>
					{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
				</span>
			),
		}),
		columnHelper.accessor("agent", {
			header: "Country Manager",
			id: "agent",
			cell: (info) => (
				<div
					className={clsx("underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer")}
					onClick={() => setSelectedAgentUser(users.find((x) => x.id === info.row.original.agent))}>
					{(users.find((x) => x.id === info.row.original.agent) as AgentUser)?.name}
				</div>
			),
		}),
		columnHelper.accessor("agentCommission", {
			header: "Commission",
			id: "agentCommission",
			cell: (info) => <>{info.getValue()}%</>,
		}),
		columnHelper.accessor("agentValue", {
			header: "Commission Value",
			id: "agentValue",
			cell: (info) => (
				<span>
					{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
				</span>
			),
		}),
		columnHelper.accessor("isPaid", {
			header: "Paid",
			id: "isPaid",
			cell: (info) => (
				<Checkbox
					isChecked={info.getValue()}
					onChange={(e) => (user?.type !== "agent" ? updatePayment(info.row.original, "isPaid", e) : null)}>
					<span></span>
				</Checkbox>
			),
		}),
		...getFileAssetsColumns(),
		{
			header: "",
			id: "actions",
			cell: ({row}: {row: {original: Payment}}) => {
				return (
					<div className="flex gap-4">
						{user?.type !== "agent" && (
							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deletePayment(row.original.id)}>
								<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
							</div>
						)}
					</div>
				);
			},
		},
	];

	const table = useReactTable({
		data: displayPayments,
		columns: defaultColumns,
		getCoreRowModel: getCoreRowModel(),
	});

	const getUserModal = () => {
		if(user) {
			if(selectedCorporateUser) {
				return (
					<Modal isOpen={!!selectedCorporateUser} onClose={() => setSelectedCorporateUser(undefined)}>
						<>
							{selectedCorporateUser && (
								<div className="w-full flex flex-col gap-8">
									<UserCard
										loggedInUser={user}
										onClose={(shouldReload) => {
											setSelectedCorporateUser(undefined);
											if (shouldReload) reload();
										}}
										user={selectedCorporateUser}
										disabled
									/>
								</div>
							)}
						</>
					</Modal>
				);
			}

			if(selectedAgentUser) {
				return (
					<Modal isOpen={!!selectedAgentUser} onClose={() => setSelectedAgentUser(undefined)}>
						<>
							{selectedAgentUser && (
								<div className="w-full flex flex-col gap-8">
									<UserCard
										loggedInUser={user}
										onClose={(shouldReload) => {
											setSelectedAgentUser(undefined);
											if (shouldReload) reload();
										}}
										user={selectedAgentUser}
									/>
								</div>
							)}
						</>
					</Modal>
				);
			}
		}

		return null;
	}

	return (
		<>
			<Head>
				<title>Payment Record | EnCoach</title>
				<meta
					name="description"
					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
				/>
				<meta name="viewport" content="width=device-width, initial-scale=1" />
				<link rel="icon" href="/favicon.ico" />
			</Head>
			<ToastContainer />
			{user && (
				<Layout user={user} className="gap-6">
					{getUserModal()}
					<Modal isOpen={isCreatingPayment} onClose={() => setIsCreatingPayment(false)}>
						<PaymentCreator
							onClose={() => setIsCreatingPayment(false)}
							reload={reload}
							showComission={user.type === "developer" || user.type === "admin"}
						/>
					</Modal>

					<div className="w-full flex flex-end justify-between p-2">
						<h1 className="text-2xl font-semibold">Payment Record</h1>
						{(user.type === "developer" || user.type === "admin") && (
							<div className="flex justify-end gap-2">
								<Button className="max-w-[200px]" variant="outline">
									<CSVLink
										data={displayPayments}
										headers={defaultColumns
											.filter((e) => e.header)
											.map((e) => ({
												label: e.header?.toString() || "",
												key: e.id || "",
											}))}
										filename="payment-records.csv">
										Download CSV
									</CSVLink>
								</Button>
								<Button className="max-w-[200px]" variant="outline" onClick={() => setIsCreatingPayment(true)}>
									New Payment
								</Button>
							</div>
						)}
					</div>
					<div className="flex gap-8 w-full">
						<div className="flex flex-col gap-3 w-full">
							<label className="font-normal text-base text-mti-gray-dim">Corporate account *</label>
							<Select
								isClearable
								className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
								options={(users.filter((u) => u.type === "corporate") as CorporateUser[]).map((user) => ({
									value: user.id,
									meta: user,
									label: `${user.corporateInformation.companyInformation.name || user.name} - ${user.email}`,
								}))}
								onChange={(value) => setCorporate((value as any)?.meta ?? undefined)}
								styles={{
									control: (styles) => ({
										...styles,
										paddingLeft: "4px",
										border: "none",
										outline: "none",
										":focus": {
											outline: "none",
										},
									}),
									option: (styles, state) => ({
										...styles,
										backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
										color: state.isFocused ? "black" : styles.color,
									}),
								}}
							/>
						</div>
						<div className="flex flex-col gap-3 w-full">
							<label className="font-normal text-base text-mti-gray-dim">Country manager *</label>
							<Select
								isClearable
								isDisabled={user.type === "agent"}
								className={clsx(
									"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none",
									user.type === "agent" ? "bg-mti-gray-platinum/40" : "bg-white",
								)}
								options={(users.filter((u) => u.type === "agent") as AgentUser[]).map((user) => ({
									value: user.id,
									meta: user,
									label: `${user.name} - ${user.email}`,
								}))}
								value={agent ? {value: agent?.id, label: `${agent.name} - ${agent.email}`} : undefined}
								onChange={(value) => setAgent(value !== null ? (value as any).meta : undefined)}
								styles={{
									control: (styles) => ({
										...styles,
										paddingLeft: "4px",
										border: "none",
										outline: "none",
										":focus": {
											outline: "none",
										},
									}),
									option: (styles, state) => ({
										...styles,
										backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
										color: state.isFocused ? "black" : styles.color,
									}),
								}}
							/>
						</div>
						<div className="flex flex-col gap-3 w-full">
							<label className="font-normal text-base text-mti-gray-dim">Paid</label>
							<Select
								isClearable
								className={clsx(
									"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none",
									user.type === "agent" ? "bg-mti-gray-platinum/40" : "bg-white",
								)}
								options={IS_PAID_OPTIONS}
								value={IS_PAID_OPTIONS.find((e) => e.value === paid)}
								onChange={(value) => {
									if(value) {
										setPaid(value.value);
									}
								}}
								styles={{
									control: (styles) => ({
										...styles,
										paddingLeft: "4px",
										border: "none",
										outline: "none",
										":focus": {
											outline: "none",
										},
									}),
									option: (styles, state) => ({
										...styles,
										backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
										color: state.isFocused ? "black" : styles.color,
									}),
								}}
							/>
						</div>
						<div className="flex flex-col gap-3 w-full">
							<label className="font-normal text-base text-mti-gray-dim">Date</label>
							<ReactDatePicker
								dateFormat="dd/MM/yyyy"
								className="border border-mti-gray-dim/40 px-4 py-1.5 rounded-lg text-center w-[256px]"
								selected={startDate}
								startDate={startDate}
								endDate={endDate}
								selectsRange
								showMonthDropdown
								filterDate={(date: Date) => moment(date).isSameOrBefore(moment(new Date()))}
								onChange={([initialDate, finalDate]: [Date, Date]) => {
									setStartDate(initialDate ?? moment("01/01/2023").toDate());
									if(finalDate) {
										// basicly selecting a final day works as if I'm selecting the first
										// minute of that day. this way it covers the whole day
										setEndDate(moment(finalDate).endOf('day').toDate());
										return;
									}
									setEndDate(null);
								}}
							/>
					</div>
					</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="p-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" key={cell.id}>
											{flexRender(cell.column.columnDef.cell, cell.getContext())}
										</td>
									))}
								</tr>
							))}
						</tbody>
					</table>
				</Layout>
			)}
		</>
	);
}