/* eslint-disable @next/next/no-img-element */
import Modal from "@/components/Modal";
import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
import useUsers from "@/hooks/useUsers";
import {
  CorporateUser,
  Group,
  MasterCorporateUser,
  Stat,
  User,
} from "@/interfaces/user";
import UserList from "@/pages/(admin)/Lists/UserList";
import { dateSorter } from "@/utils";
import moment from "moment";
import { useEffect, useState, useMemo } from "react";
import {
  BsArrowLeft,
  BsClipboard2Data,
  BsClock,
  BsPaperclip,
  BsPersonFill,
  BsPencilSquare,
  BsPersonCheck,
  BsPeople,
  BsBank,
  BsEnvelopePaper,
  BsArrowRepeat,
  BsPlus,
  BsPersonFillGear,
  BsFilter,
  BsDatabase,
} from "react-icons/bs";
import UserCard from "@/components/UserCard";
import useGroups from "@/hooks/useGroups";

import {
  averageLevelCalculator,
  calculateAverageLevel,
  calculateBandScore,
} from "@/utils/score";
import { MODULE_ARRAY } from "@/utils/moduleUtils";
import { Module } from "@/interfaces";
import { groupByExam } from "@/utils/stats";
import IconCard from "./IconCard";
import GroupList from "@/pages/(admin)/Lists/GroupList";
import useFilterStore from "@/stores/listFilterStore";
import { useRouter } from "next/router";
import useCodes from "@/hooks/useCodes";
import useAssignments from "@/hooks/useAssignments";
import { Assignment } from "@/interfaces/results";
import AssignmentView from "./AssignmentView";
import AssignmentCreator from "./AssignmentCreator";
import clsx from "clsx";
import AssignmentCard from "./AssignmentCard";
import { createColumn, createColumnHelper } from "@tanstack/react-table";
import List from "@/components/List";
import { getUserCorporate } from "@/utils/groups";
import { getCorporateUser, getUserCompanyName } from "@/resources/user";
import Checkbox from "@/components/Low/Checkbox";
import { groupBy, uniq, uniqBy } from "lodash";
import Select from "@/components/Low/Select";
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import MasterStatistical from "./MasterStatistical";
import {
  futureAssignmentFilter,
  pastAssignmentFilter,
  archivedAssignmentFilter,
  activeAssignmentFilter,
} from "@/utils/assignments";
import useUserBalance from "@/hooks/useUserBalance";

interface Props {
  user: MasterCorporateUser;
}

type StudentPerformanceItem = User & {
  corporate?: CorporateUser;
  group?: Group;
};
const StudentPerformanceList = ({
  items,
  stats,
  users,
  groups,
}: {
  items: StudentPerformanceItem[];
  stats: Stat[];
  users: User[];
  groups: Group[];
}) => {
  const [isShowingAmount, setIsShowingAmount] = useState(false);
  const [availableCorporates] = useState(
    uniqBy(
      items.map((x) => x.corporate),
      "id"
    )
  );
  const [availableGroups] = useState(
    uniqBy(
      items.map((x) => x.group),
      "id"
    )
  );

  const [selectedCorporate, setSelectedCorporate] = useState<
    CorporateUser | null | undefined
  >(null);
  const [selectedGroup, setSelectedGroup] = useState<Group | null | undefined>(
    null
  );

  const columnHelper = createColumnHelper<StudentPerformanceItem>();

  const columns = [
    columnHelper.accessor("name", {
      header: "Student Name",
      cell: (info) => info.getValue(),
    }),
    columnHelper.accessor("email", {
      header: "E-mail",
      cell: (info) => info.getValue(),
    }),
    columnHelper.accessor("demographicInformation.passport_id", {
      header: "ID",
      cell: (info) => info.getValue() || "N/A",
    }),
    columnHelper.accessor("group", {
      header: "Group",
      cell: (info) => info.getValue()?.name || "N/A",
    }),
    columnHelper.accessor("corporate", {
      header: "Corporate",
      cell: (info) =>
        !!info.getValue()
          ? getUserCompanyName(info.getValue() as User, users, groups)
          : "N/A",
    }),
    columnHelper.accessor("levels.reading", {
      header: "Reading",
      cell: (info) =>
        !isShowingAmount
          ? calculateBandScore(
              stats
                .filter(
                  (x) =>
                    x.module === "reading" && x.user === info.row.original.id
                )
                .reduce((acc, curr) => acc + curr.score.correct, 0),
              stats
                .filter(
                  (x) =>
                    x.module === "reading" && x.user === info.row.original.id
                )
                .reduce((acc, curr) => acc + curr.score.total, 0),
              "level",
              info.row.original.focus || "academic"
            ) || 0
          : `${
              Object.keys(
                groupByExam(
                  stats.filter(
                    (x) =>
                      x.module === "reading" && x.user === info.row.original.id
                  )
                )
              ).length
            } exams`,
    }),
    columnHelper.accessor("levels.listening", {
      header: "Listening",
      cell: (info) =>
        !isShowingAmount
          ? calculateBandScore(
              stats
                .filter(
                  (x) =>
                    x.module === "listening" && x.user === info.row.original.id
                )
                .reduce((acc, curr) => acc + curr.score.correct, 0),
              stats
                .filter(
                  (x) =>
                    x.module === "listening" && x.user === info.row.original.id
                )
                .reduce((acc, curr) => acc + curr.score.total, 0),
              "level",
              info.row.original.focus || "academic"
            ) || 0
          : `${
              Object.keys(
                groupByExam(
                  stats.filter(
                    (x) =>
                      x.module === "listening" &&
                      x.user === info.row.original.id
                  )
                )
              ).length
            } exams`,
    }),
    columnHelper.accessor("levels.writing", {
      header: "Writing",
      cell: (info) =>
        !isShowingAmount
          ? calculateBandScore(
              stats
                .filter(
                  (x) =>
                    x.module === "writing" && x.user === info.row.original.id
                )
                .reduce((acc, curr) => acc + curr.score.correct, 0),
              stats
                .filter(
                  (x) =>
                    x.module === "writing" && x.user === info.row.original.id
                )
                .reduce((acc, curr) => acc + curr.score.total, 0),
              "level",
              info.row.original.focus || "academic"
            ) || 0
          : `${
              Object.keys(
                groupByExam(
                  stats.filter(
                    (x) =>
                      x.module === "writing" && x.user === info.row.original.id
                  )
                )
              ).length
            } exams`,
    }),
    columnHelper.accessor("levels.speaking", {
      header: "Speaking",
      cell: (info) =>
        !isShowingAmount
          ? calculateBandScore(
              stats
                .filter(
                  (x) =>
                    x.module === "speaking" && x.user === info.row.original.id
                )
                .reduce((acc, curr) => acc + curr.score.correct, 0),
              stats
                .filter(
                  (x) =>
                    x.module === "speaking" && x.user === info.row.original.id
                )
                .reduce((acc, curr) => acc + curr.score.total, 0),
              "level",
              info.row.original.focus || "academic"
            ) || 0
          : `${
              Object.keys(
                groupByExam(
                  stats.filter(
                    (x) =>
                      x.module === "speaking" && x.user === info.row.original.id
                  )
                )
              ).length
            } exams`,
    }),
    columnHelper.accessor("levels.level", {
      header: "Level",
      cell: (info) =>
        !isShowingAmount
          ? calculateBandScore(
              stats
                .filter(
                  (x) => x.module === "level" && x.user === info.row.original.id
                )
                .reduce((acc, curr) => acc + curr.score.correct, 0),
              stats
                .filter(
                  (x) => x.module === "level" && x.user === info.row.original.id
                )
                .reduce((acc, curr) => acc + curr.score.total, 0),
              "level",
              info.row.original.focus || "academic"
            ) || 0
          : `${
              Object.keys(
                groupByExam(
                  stats.filter(
                    (x) =>
                      x.module === "level" && x.user === info.row.original.id
                  )
                )
              ).length
            } exams`,
    }),
    columnHelper.accessor("levels", {
      id: "overall_level",
      header: "Overall",
      cell: (info) =>
        !isShowingAmount
          ? averageLevelCalculator(
              users,
              stats.filter((x) => x.user === info.row.original.id)
            ).toFixed(1)
          : `${
              Object.keys(
                groupByExam(
                  stats.filter((x) => x.user === info.row.original.id)
                )
              ).length
            } exams`,
    }),
  ];

  const filterUsers = (data: StudentPerformanceItem[]) => {
    console.log(data, selectedCorporate);
    const filterByCorporate = (item: StudentPerformanceItem) =>
      item.corporate?.id === selectedCorporate?.id;
    const filterByGroup = (item: StudentPerformanceItem) =>
      item.group?.id === selectedGroup?.id;

    const filters: ((item: StudentPerformanceItem) => boolean)[] = [];
    if (selectedCorporate !== null) filters.push(filterByCorporate);
    if (selectedGroup !== null) filters.push(filterByGroup);

    return filters.reduce((d, f) => d.filter(f), data);
  };

  return (
    <div className="flex flex-col gap-4 w-full h-full">
      <div className="w-full flex gap-4 justify-between items-center">
        <Checkbox isChecked={isShowingAmount} onChange={setIsShowingAmount}>
          Show Utilization
        </Checkbox>
        <Popover>
          <PopoverTrigger>
            <div className="flex items-center justify-center p-2 hover:bg-neutral-300/50 rounded-full transition ease-in-out duration-300">
              <BsFilter size={20} />
            </div>
          </PopoverTrigger>
          <PopoverContent className="w-96">
            <div className="flex flex-col gap-4">
              <span className="font-bold text-lg">Filters</span>
              <Select
                options={availableCorporates.map((x) => ({
                  value: x?.id || "N/A",
                  label:
                    x?.corporateInformation?.companyInformation?.name ||
                    x?.name ||
                    "N/A",
                }))}
                isClearable
                value={
                  selectedCorporate === null
                    ? null
                    : {
                        value: selectedCorporate?.id || "N/A",
                        label:
                          selectedCorporate?.corporateInformation
                            ?.companyInformation?.name ||
                          selectedCorporate?.name ||
                          "N/A",
                      }
                }
                placeholder="Select a Corporate..."
                onChange={(value) =>
                  !value
                    ? setSelectedCorporate(null)
                    : setSelectedCorporate(
                        value.value === "N/A"
                          ? undefined
                          : availableCorporates.find(
                              (x) => x?.id === value.value
                            )
                      )
                }
              />
              <Select
                options={availableGroups.map((x) => ({
                  value: x?.id || "N/A",
                  label: x?.name || "N/A",
                }))}
                isClearable
                value={
                  selectedGroup === null
                    ? null
                    : {
                        value: selectedGroup?.id || "N/A",
                        label: selectedGroup?.name || "N/A",
                      }
                }
                placeholder="Select a Group..."
                onChange={(value) =>
                  !value
                    ? setSelectedGroup(null)
                    : setSelectedGroup(
                        value.value === "N/A"
                          ? undefined
                          : availableGroups.find((x) => x?.id === value.value)
                      )
                }
              />
            </div>
          </PopoverContent>
        </Popover>
      </div>
      <List<StudentPerformanceItem>
        data={filterUsers(
          items.sort(
            (a, b) =>
              averageLevelCalculator(
                users,
                stats.filter((x) => x.user === b.id)
              ) -
              averageLevelCalculator(
                users,
                stats.filter((x) => x.user === a.id)
              )
          )
        )}
        columns={columns}
      />
    </div>
  );
};

export default function MasterCorporateDashboard({ user }: Props) {
  const [page, setPage] = useState("");
  const [selectedUser, setSelectedUser] = useState<User>();
  const [showModal, setShowModal] = useState(false);
  const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
  const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
  const [corporateAssignments, setCorporateAssignments] = useState<
    (Assignment & { corporate?: CorporateUser })[]
  >([]);

  const { data: stats } = useFilterRecordsByUser<Stat[]>();
  const { users, reload } = useUsers();
  const { codes } = useCodes(user.id);
  const { groups } = useGroups({ admin: user.id, userType: user.type });
  const { balance } = useUserBalance();

  const masterCorporateUserGroups = useMemo(() => [
    ...new Set(
      groups.filter((u) => u.admin === user.id).flatMap((g) => g.participants)
    ),
  ], [groups, user.id]);

  const corporateUserGroups = [
    ...new Set(groups.flatMap((g) => g.participants)),
  ];

  const {
    assignments,
    isLoading: isAssignmentsLoading,
    reload: reloadAssignments,
  } = useAssignments({ corporate: user.id });

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

  useEffect(() => {
    setShowModal(!!selectedUser && page === "");
  }, [selectedUser, page]);

  useEffect(() => {
    setCorporateAssignments(
      assignments.filter(activeAssignmentFilter).map((a) => ({
        ...a,
        corporate: !!users.find((x) => x.id === a.assigner)
          ? getCorporateUser(
              users.find((x) => x.id === a.assigner)!,
              users,
              groups
            )
          : undefined,
      }))
    );
  }, [assignments, groups, users]);

  const studentFilter = (user: User) =>
    user.type === "student" && corporateUserGroups.includes(user.id);
  const teacherFilter = (user: User) =>
    user.type === "teacher" && corporateUserGroups.includes(user.id);
  const getStatsByStudent = (user: User) =>
    stats.filter((s) => s.user === user.id);

  const UserDisplay = (displayUser: User) => (
    <div
      onClick={() => setSelectedUser(displayUser)}
      className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300"
    >
      <img
        src={displayUser.profilePicture}
        alt={displayUser.name}
        className="rounded-full w-10 h-10"
      />
      <div className="flex flex-col gap-1 items-start">
        <span>{displayUser.name}</span>
        <span className="text-sm opacity-75">{displayUser.email}</span>
      </div>
    </div>
  );

  const StudentsList = () => {
    const filter = (x: User) =>
      x.type === "student" &&
      (!!selectedUser
        ? corporateUserGroups.includes(x.id) || false
        : corporateUserGroups.includes(x.id));

    return (
      <UserList
        user={user}
        filters={[filter]}
        renderHeader={(total) => (
          <div className="flex flex-col gap-4">
            <div
              onClick={() => setPage("")}
              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
            >
              <BsArrowLeft className="text-xl" />
              <span>Back</span>
            </div>
            <h2 className="text-2xl font-semibold">Students ({total})</h2>
          </div>
        )}
      />
    );
  };

  const TeachersList = () => {
    const filter = (x: User) =>
      x.type === "teacher" &&
      (!!selectedUser
        ? corporateUserGroups.includes(x.id) || false
        : corporateUserGroups.includes(x.id));

    return (
      <UserList
        user={user}
        filters={[filter]}
        renderHeader={(total) => (
          <div className="flex flex-col gap-4">
            <div
              onClick={() => setPage("")}
              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
            >
              <BsArrowLeft className="text-xl" />
              <span>Back</span>
            </div>
            <h2 className="text-2xl font-semibold">Teachers ({total})</h2>
          </div>
        )}
      />
    );
  };

  const corporateUserFilter = (x: User) =>
    x.type === "corporate" &&
    (!!selectedUser
      ? masterCorporateUserGroups.includes(x.id) || false
      : masterCorporateUserGroups.includes(x.id));

  const CorporateList = () => {
    return (
      <UserList
        user={user}
        filters={[corporateUserFilter]}
        renderHeader={(total) => (
          <div className="flex flex-col gap-4">
            <div
              onClick={() => setPage("")}
              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
            >
              <BsArrowLeft className="text-xl" />
              <span>Back</span>
            </div>
            <h2 className="text-2xl font-semibold">Corporates ({total})</h2>
          </div>
        )}
      />
    );
  };

  const GroupsList = () => {
    return (
      <>
        <div className="flex flex-col gap-4">
          <div
            onClick={() => setPage("")}
            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
          >
            <BsArrowLeft className="text-xl" />
            <span>Back</span>
          </div>
          <h2 className="text-2xl font-semibold">Groups ({groups.length})</h2>
        </div>

        <GroupList user={user} />
      </>
    );
  };

  const StudentPerformancePage = () => {
    const students = users
      .filter(
        (x) =>
          x.type === "student" &&
          groups.flatMap((g) => g.participants).includes(x.id)
      )
      .map((u) => ({
        ...u,
        group: groups.find((x) => x.participants.includes(u.id)),
        corporate: getCorporateUser(u, users, groups),
      }));

    return (
      <>
        <div className="w-full flex justify-between items-center">
          <div
            onClick={() => setPage("")}
            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
          >
            <BsArrowLeft className="text-xl" />
            <span>Back</span>
          </div>
          <div
            onClick={reloadAssignments}
            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
          >
            <span>Reload</span>
            <BsArrowRepeat
              className={clsx(
                "text-xl",
                isAssignmentsLoading && "animate-spin"
              )}
            />
          </div>
        </div>
        <StudentPerformanceList
          items={students}
          stats={stats}
          users={users}
          groups={groups}
        />
      </>
    );
  };

  const AssignmentsPage = () => {
    return (
      <>
        <AssignmentView
          isOpen={!!selectedAssignment && !isCreatingAssignment}
          onClose={() => {
            setSelectedAssignment(undefined);
            setIsCreatingAssignment(false);
            reloadAssignments();
          }}
          assignment={selectedAssignment}
        />
        <AssignmentCreator
          assignment={selectedAssignment}
          groups={groups.filter(
            (x) => x.admin === user.id || x.participants.includes(user.id)
          )}
          users={users.filter(
            (x) =>
              x.type === "student" &&
              (!!selectedUser
                ? groups
                    .filter((g) => g.admin === selectedUser.id)
                    .flatMap((g) => g.participants)
                    .includes(x.id) || false
                : groups.flatMap((g) => g.participants).includes(x.id))
          )}
          assigner={user.id}
          isCreating={isCreatingAssignment}
          cancelCreation={() => {
            setIsCreatingAssignment(false);
            setSelectedAssignment(undefined);
            reloadAssignments();
          }}
        />
        <div className="w-full flex justify-between items-center">
          <div
            onClick={() => setPage("")}
            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
          >
            <BsArrowLeft className="text-xl" />
            <span>Back</span>
          </div>
          <div
            onClick={reloadAssignments}
            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
          >
            <span>Reload</span>
            <BsArrowRepeat
              className={clsx(
                "text-xl",
                isAssignmentsLoading && "animate-spin"
              )}
            />
          </div>
        </div>
        <div className="flex flex-col gap-2">
          <span className="text-lg font-bold">Active Assignments Status</span>
          <div className="flex items-center gap-4">
            <span>
              <b>Total:</b>{" "}
              {assignments
                .filter(activeAssignmentFilter)
                .reduce((acc, curr) => acc + curr.results.length, 0)}
              /
              {assignments
                .filter(activeAssignmentFilter)
                .reduce((acc, curr) => curr.exams.length + acc, 0)}
            </span>
            {Object.keys(
              groupBy(corporateAssignments, (x) => x.corporate?.id)
            ).map((x) => (
              <div key={x}>
                <span className="font-semibold">
                  {getUserCompanyName(
                    users.find((u) => u.id === x)!,
                    users,
                    groups
                  )}
                  :{" "}
                </span>
                <span>
                  {groupBy(corporateAssignments, (x) => x.corporate?.id)[
                    x
                  ].reduce((acc, curr) => curr.results.length + acc, 0)}
                  /
                  {groupBy(corporateAssignments, (x) => x.corporate?.id)[
                    x
                  ].reduce((acc, curr) => curr.exams.length + acc, 0)}
                </span>
              </div>
            ))}
          </div>
        </div>
        <section className="flex flex-col gap-4">
          <h2 className="text-2xl font-semibold">
            Active Assignments (
            {assignments.filter(activeAssignmentFilter).length})
          </h2>
          <div className="flex flex-wrap gap-2">
            {assignments.filter(activeAssignmentFilter).map((a) => (
              <AssignmentCard
                {...a}
                users={users}
                onClick={() => setSelectedAssignment(a)}
                key={a.id}
              />
            ))}
          </div>
        </section>
        <section className="flex flex-col gap-4">
          <h2 className="text-2xl font-semibold">
            Planned Assignments (
            {assignments.filter(futureAssignmentFilter).length})
          </h2>
          <div className="flex flex-wrap gap-2">
            <div
              onClick={() => setIsCreatingAssignment(true)}
              className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300"
            >
              <BsPlus className="text-6xl" />
              <span className="text-lg">New Assignment</span>
            </div>
            {assignments.filter(futureAssignmentFilter).map((a) => (
              <AssignmentCard
                {...a}
                users={users}
                onClick={() => {
                  setSelectedAssignment(a);
                  setIsCreatingAssignment(true);
                }}
                key={a.id}
              />
            ))}
          </div>
        </section>
        <section className="flex flex-col gap-4">
          <h2 className="text-2xl font-semibold">
            Past Assignments ({assignments.filter(pastAssignmentFilter).length})
          </h2>
          <div className="flex flex-wrap gap-2">
            {assignments.filter(pastAssignmentFilter).map((a) => (
              <AssignmentCard
                {...a}
                users={users}
                onClick={() => setSelectedAssignment(a)}
                key={a.id}
                allowDownload
                reload={reloadAssignments}
                allowArchive
                allowExcelDownload
              />
            ))}
          </div>
        </section>
        <section className="flex flex-col gap-4">
          <h2 className="text-2xl font-semibold">
            Archived Assignments (
            {assignments.filter(archivedAssignmentFilter).length})
          </h2>
          <div className="flex flex-wrap gap-2">
            {assignments.filter(archivedAssignmentFilter).map((a) => (
              <AssignmentCard
                {...a}
                users={users}
                onClick={() => setSelectedAssignment(a)}
                key={a.id}
                allowDownload
                reload={reloadAssignments}
                allowUnarchive
                allowExcelDownload
              />
            ))}
          </div>
        </section>
      </>
    );
  };

  const masterCorporateUsers = useMemo(
    () =>
      masterCorporateUserGroups.reduce((accm: CorporateUser[], id) => {
        const user = users.find((u) => u.id === id) as CorporateUser;
        if (user) return [...accm, user];
        return accm;
      }, []),
    [masterCorporateUserGroups, users]
  );

  const MasterStatisticalPage = () => {
    return (
      <>
        <div className="flex flex-col gap-4">
          <div
            onClick={() => setPage("")}
            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
          >
            <BsArrowLeft className="text-xl" />
            <span>Back</span>
          </div>
          <h2 className="text-2xl font-semibold">Master Statistical</h2>
        </div>
        <MasterStatistical
          users={users}
          corporateUsers={masterCorporateUsers}
        />
      </>
    );
  };

  const DefaultDashboard = () => (
    <>
      <section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:justify-between text-center">
        <IconCard
          onClick={() => setPage("students")}
          Icon={BsPersonFill}
          label="Students"
          value={users.filter(studentFilter).length}
          color="purple"
        />
        <IconCard
          onClick={() => setPage("teachers")}
          Icon={BsPencilSquare}
          label="Teachers"
          value={users.filter(teacherFilter).length}
          color="purple"
        />
        <IconCard
          Icon={BsClipboard2Data}
          label="Exams Performed"
          value={
            stats.filter((s) =>
              groups.flatMap((g) => g.participants).includes(s.user)
            ).length
          }
          color="purple"
        />
        <IconCard
          Icon={BsPaperclip}
          label="Average Level"
          value={averageLevelCalculator(
            users,
            stats.filter((s) =>
              groups.flatMap((g) => g.participants).includes(s.user)
            )
          ).toFixed(1)}
          color="purple"
        />
        <IconCard
          onClick={() => setPage("groups")}
          Icon={BsPeople}
          label="Groups"
          value={groups.length}
          color="purple"
        />
        <IconCard
          Icon={BsPersonCheck}
          label="User Balance"
          value={`${balance}/${
            user.corporateInformation?.companyInformation?.userAmount || 0
          }`}
          color="purple"
        />
        <IconCard
          Icon={BsClock}
          label="Expiration Date"
          value={
            user.subscriptionExpirationDate
              ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy")
              : "Unlimited"
          }
          color="rose"
        />
        <IconCard
          Icon={BsBank}
          label="Corporate"
          value={masterCorporateUserGroups.length}
          color="purple"
          onClick={() => setPage("corporate")}
        />
        <IconCard
          Icon={BsPersonFillGear}
          label="Student Performance"
          value={users.filter(studentFilter).length}
          color="purple"
          onClick={() => setPage("studentsPerformance")}
        />
        <IconCard
          Icon={BsDatabase}
          label="Master Statistical"
          // value={masterCorporateUserGroups.length}
          color="purple"
          onClick={() => setPage("statistical")}
        />
        <button
          disabled={isAssignmentsLoading}
          onClick={() => setPage("assignments")}
          className="bg-white col-span-2 rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300"
        >
          <BsEnvelopePaper className="text-6xl text-mti-purple-light" />
          <span className="flex flex-col gap-1 items-center text-xl">
            <span className="text-lg">Assignments</span>
            <span className="font-semibold text-mti-purple-light">
              {isAssignmentsLoading
                ? "Loading..."
                : assignments.filter((a) => !a.archived).length}
            </span>
          </span>
        </button>
      </section>

      <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
        <div className="bg-white shadow flex flex-col rounded-xl w-full">
          <span className="p-4">Latest students</span>
          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
            {users
              .filter(studentFilter)
              .sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
              .map((x) => (
                <UserDisplay key={x.id} {...x} />
              ))}
          </div>
        </div>
        <div className="bg-white shadow flex flex-col rounded-xl w-full">
          <span className="p-4">Latest teachers</span>
          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
            {users
              .filter(teacherFilter)
              .sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
              .map((x) => (
                <UserDisplay key={x.id} {...x} />
              ))}
          </div>
        </div>
        <div className="bg-white shadow flex flex-col rounded-xl w-full">
          <span className="p-4">Highest level students</span>
          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
            {users
              .filter(studentFilter)
              .sort(
                (a, b) =>
                  calculateAverageLevel(b.levels) -
                  calculateAverageLevel(a.levels)
              )
              .map((x) => (
                <UserDisplay key={x.id} {...x} />
              ))}
          </div>
        </div>
        <div className="bg-white shadow flex flex-col rounded-xl w-full">
          <span className="p-4">Highest exam count students</span>
          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
            {users
              .filter(studentFilter)
              .sort(
                (a, b) =>
                  Object.keys(groupByExam(getStatsByStudent(b))).length -
                  Object.keys(groupByExam(getStatsByStudent(a))).length
              )
              .map((x) => (
                <UserDisplay key={x.id} {...x} />
              ))}
          </div>
        </div>
      </section>
    </>
  );

  return (
    <>
      <Modal isOpen={showModal} onClose={() => setSelectedUser(undefined)}>
        <>
          {selectedUser && (
            <div className="w-full flex flex-col gap-8">
              <UserCard
                maxUserAmount={
                  user.type === "mastercorporate"
                    ? (user.corporateInformation?.companyInformation
                        ?.userAmount || 0) - balance
                    : undefined
                }
                loggedInUser={user}
                onClose={(shouldReload) => {
                  setSelectedUser(undefined);
                  if (shouldReload) reload();
                }}
                onViewStudents={
                  selectedUser.type === "corporate" ||
                  selectedUser.type === "teacher"
                    ? () => {
                        appendUserFilters({
                          id: "view-students",
                          filter: (x: User) => x.type === "student",
                        });
                        appendUserFilters({
                          id: "belongs-to-admin",
                          filter: (x: User) =>
                            groups
                              .filter(
                                (g) =>
                                  g.admin === selectedUser.id ||
                                  g.participants.includes(selectedUser.id)
                              )
                              .flatMap((g) => g.participants)
                              .includes(x.id),
                        });

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

                        router.push("/list/users");
                      }
                    : undefined
                }
                user={selectedUser}
              />
            </div>
          )}
        </>
      </Modal>
      {page === "students" && <StudentsList />}
      {page === "teachers" && <TeachersList />}
      {page === "groups" && <GroupsList />}
      {page === "corporate" && <CorporateList />}
      {page === "assignments" && <AssignmentsPage />}
      {page === "studentsPerformance" && <StudentPerformancePage />}
      {page === "statistical" && <MasterStatisticalPage />}
      {page === "" && <DefaultDashboard />}
    </>
  );
}