import Button from "@/components/Low/Button";
import {PERMISSIONS} from "@/constants/userPermissions";
import useGroups from "@/hooks/useGroups";
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 moment from "moment";
import {Fragment, useState} from "react";
import {BsCheck, BsCheckCircle, BsFillExclamationOctagonFill, BsPerson, BsTrash} from "react-icons/bs";
import {toast} from "react-toastify";
import {countries, TCountries} from "countries-list";
import countryCodes from "country-codes-list";

const columnHelper = createColumnHelper<User>();

export default function UserList({user}: {user: User}) {
	const [showDemographicInformation, setShowDemographicInformation] = useState(false);

	const {users, reload} = useUsers();
	const {groups} = useGroups(user ? user.id : undefined);

	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 actionColumn = ({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 demographicColumns = [
		columnHelper.accessor("name", {
			header: "Name",
			cell: (info) => info.getValue(),
			enableSorting: true,
		}),
		columnHelper.accessor("demographicInformation.country", {
			header: "Country",
			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})`
					: "Not available",
		}),
		columnHelper.accessor("demographicInformation.phone", {
			header: "Phone",
			cell: (info) => info.getValue() || "Not available",
			enableSorting: true,
		}),
		columnHelper.accessor("demographicInformation.employment", {
			header: "Employment",
			cell: (info) => capitalize(info.getValue()) || "Not available",
			enableSorting: true,
		}),
		columnHelper.accessor("demographicInformation.gender", {
			header: "Gender",
			cell: (info) => capitalize(info.getValue()) || "Not available",
			enableSorting: true,
		}),
		{
			header: (
				<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
					Switch
				</span>
			),
			id: "actions",
			cell: actionColumn,
		},
	];

	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("subscriptionExpirationDate", {
			header: "Expiry Date",
			cell: (info) => (!info.getValue() ? "No expiry date" : moment(info.getValue()).format("DD/MM/YYYY")),
		}),
		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: (
				<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
					Switch
				</span>
			),
			id: "actions",
			cell: actionColumn,
		},
	];

	const table = useReactTable({
		data:
			user && (user.type === "admin" || user.type === "student")
				? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id))
				: users,
		columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any,
		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>
	);
}