import Button from "@/components/Low/Button";
import {PERMISSIONS} from "@/constants/userPermissions";
import useUsers from "@/hooks/useUsers";
import {Type, User} 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} from "lodash";
import {Fragment} from "react";
import {BsCheck, BsCheckCircle, BsFillExclamationOctagonFill, BsPerson, BsStop, BsTrash} from "react-icons/bs";
import {toast} from "react-toastify";

const columnHelper = createColumnHelper<User>();

export default function UserList({user}: {user: User}) {
	const {users, reload} = useUsers();

	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"});
			});
	};

	const updateAccountType = (user: User, type: Type) => {
		if (!confirm(`Are you sure you want to update ${user.name}'s account from ${capitalize(user.type)} to ${capitalize(type)}?`)) return;

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

	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.isDisabled ? "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, isDisabled: !user.isDisabled})
			.then(() => {
				toast.success(`User ${user.isDisabled ? "enabled" : "disabled"} successfully!`);
				reload();
			})
			.catch(() => {
				toast.error("Something went wrong!", {toastId: "update-error"});
			});
	};

	const defaultColumns = [
		columnHelper.accessor("name", {
			header: "Name",
			cell: (info) => info.getValue(),
			enableSorting: true,
		}),
		columnHelper.accessor("email", {
			header: "E-mail",
			cell: (info) => info.getValue(),
		}),
		columnHelper.accessor("type", {
			header: "Type",
			cell: (info) => capitalize(info.getValue()),
		}),
		columnHelper.accessor("isVerified", {
			header: "Verification",
			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: "",
			id: "actions",
			cell: ({row}: {row: {original: User}}) => {
				return (
					<div className="flex gap-4">
						{PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
							<Popover className="relative">
								<Popover.Button>
									<div data-tip="Change Type" className="cursor-pointer tooltip">
										<BsPerson className="hover:text-mti-purple-light transition ease-in-out duration-300" />
									</div>
								</Popover.Button>
								<Transition
									as={Fragment}
									enter="transition ease-out duration-200"
									enterFrom="opacity-0 translate-y-1"
									enterTo="opacity-100 translate-y-0"
									leave="transition ease-in duration-150"
									leaveFrom="opacity-100 translate-y-0"
									leaveTo="opacity-0 translate-y-1">
									<Popover.Panel className="absolute z-10 w-screen right-1/2 translate-x-1/3 max-w-sm">
										<div className="bg-white p-4 rounded-lg grid grid-cols-2 gap-2 w-full drop-shadow-xl">
											<Button
												onClick={() => updateAccountType(row.original, "student")}
												className="text-sm !py-2 !px-4"
												disabled={
													row.original.type === "student" || !PERMISSIONS.generateCode["student"].includes(user.type)
												}>
												Student
											</Button>
											<Button
												onClick={() => updateAccountType(row.original, "teacher")}
												className="text-sm !py-2 !px-4"
												disabled={
													row.original.type === "teacher" || !PERMISSIONS.generateCode["teacher"].includes(user.type)
												}>
												Teacher
											</Button>
											<Button
												onClick={() => updateAccountType(row.original, "admin")}
												className="text-sm !py-2 !px-4"
												disabled={row.original.type === "admin" || !PERMISSIONS.generateCode["admin"].includes(user.type)}>
												Admin
											</Button>
											<Button
												onClick={() => updateAccountType(row.original, "owner")}
												className="text-sm !py-2 !px-4"
												disabled={row.original.type === "owner" || !PERMISSIONS.generateCode["owner"].includes(user.type)}>
												Owner
											</Button>
										</div>
									</Popover.Panel>
								</Transition>
							</Popover>
						)}
						{!row.original.isVerified && PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
							<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>
						)}
						{PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
							<div
								data-tip={row.original.isDisabled ? "Enable User" : "Disable User"}
								className="cursor-pointer tooltip"
								onClick={() => toggleDisableAccount(row.original)}>
								{row.original.isDisabled ? (
									<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>
						)}
						{PERMISSIONS.deleteUser[row.original.type].includes(user.type) && (
							<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 table = useReactTable({
		data: users,
		columns: defaultColumns,
		getCoreRowModel: getCoreRowModel(),
	});

	return (
		<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>
	);
}