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

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 { groups } = useGroups(
    user && (user?.type === "corporate" || user?.type === "teacher")
      ? user.id
      : undefined
  );

  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 (user && users) {
        const filterUsers =
          user.type === "corporate" || user.type === "teacher"
            ? users.filter((u) =>
                groups.flatMap((g) => g.participants).includes(u.id)
              )
            : users;

        const filteredUsers = filters.reduce(
          (d, f) => d.filter(f),
          filterUsers
        );
        const sortedUsers = await asyncSorter<User>(
          filteredUsers,
          sortFunction
        );
        console.log(sortedUsers);

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

  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 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.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 } }) => {
    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, "corporate")}
                    className="text-sm !py-2 !px-4"
                    disabled={
                      row.original.type === "corporate" ||
                      !PERMISSIONS.generateCode["corporate"].includes(user.type)
                    }
                  >
                    Corporate
                  </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>
                </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.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>
        )}
        {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: (
        <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(
            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("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
            })`
          : "Not available",
    }),
    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() || "Not available",
      enableSorting: true,
    }),
    columnHelper.accessor(
      (x) =>
        x.type === "corporate"
          ? x.demographicInformation?.position
          : x.demographicInformation?.employment,
      {
        id: "employment",
        header: (
          <button
            className="flex gap-2 items-center"
            onClick={() =>
              setSorter((prev) => selectSorter(prev, "employment"))
            }
          >
            <span>Employment/Position</span>
            <SorterArrow name="employment" />
          </button>
        ) as any,
        cell: (info) =>
          (info.row.original.type === "corporate"
            ? info.getValue()
            : capitalize(info.getValue())) || "Not available",
        enableSorting: true,
      }
    ),
    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()) || "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: (
        <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(
            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
          }
        >
          {row.original.type === "corporate"
            ? row.original.corporateInformation?.companyInformation?.name ||
              getValue()
            : 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("corporateInformation.companyInformation.name", {
      header: (
        <button
          className="flex gap-2 items-center"
          onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}
        >
          <span>Company Name</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>Expiry Date</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>Verification</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 === "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 === "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.demographicInformation?.position
          : a.demographicInformation?.employment;
      const bSortingItem =
        b.type === "corporate"
          ? 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
          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>
    </>
  );
}