/* eslint-disable @next/next/no-img-element */
import Modal from "@/components/Modal";
import useStats from "@/hooks/useStats";
import useUsers from "@/hooks/useUsers";
import { CorporateUser, Group, Stat, User } from "@/interfaces/user";
import UserList from "@/pages/(admin)/Lists/UserList";
import { dateSorter } from "@/utils";
import moment from "moment";
import { useEffect, useState } from "react";
import {
  BsArrowLeft,
  BsClipboard2Data,
  BsClipboard2DataFill,
  BsClock,
  BsGlobeCentralSouthAsia,
  BsPaperclip,
  BsPerson,
  BsPersonAdd,
  BsPersonFill,
  BsPersonFillGear,
  BsPersonGear,
  BsPencilSquare,
  BsPersonBadge,
  BsPersonCheck,
  BsPeople,
  BsArrowRepeat,
  BsPlus,
  BsEnvelopePaper,
} 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 { getUserCorporate } from "@/utils/groups";
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 { createColumnHelper } from "@tanstack/react-table";
import Checkbox from "@/components/Low/Checkbox";
import List from "@/components/List";
import { getUserCompanyName } from "@/resources/user";
import {
	futureAssignmentFilter,
	pastAssignmentFilter,
	archivedAssignmentFilter,
	activeAssignmentFilter
} from '@/utils/assignments';

interface Props {
  user: CorporateUser;
}

type StudentPerformanceItem = User & { corporateName: string; group: string };
const StudentPerformanceList = ({
  items,
  stats,
  users,
}: {
  items: StudentPerformanceItem[];
  stats: Stat[];
  users: User[];
}) => {
  const [isShowingAmount, setIsShowingAmount] = useState(false);

  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(),
    }),
    columnHelper.accessor("corporateName", {
      header: "Corporate",
      cell: (info) => info.getValue() || "N/A",
    }),
    columnHelper.accessor("levels.reading", {
      header: "Reading",
      cell: (info) =>
        !isShowingAmount
          ? info.getValue() || 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
          ? info.getValue() || 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
          ? info.getValue() || 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
          ? info.getValue() || 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
          ? info.getValue() || 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`,
    }),
  ];

  return (
    <div className="flex flex-col gap-4 w-full h-full">
      <Checkbox isChecked={isShowingAmount} onChange={setIsShowingAmount}>
        Show Utilization
      </Checkbox>
      <List<StudentPerformanceItem>
        data={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 CorporateDashboard({ user }: Props) {
  const [page, setPage] = useState("");
  const [selectedUser, setSelectedUser] = useState<User>();
  const [showModal, setShowModal] = useState(false);
  const [corporateUserToShow, setCorporateUserToShow] =
    useState<CorporateUser>();
  const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
  const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
  const [userBalance, setUserBalance] = useState(0);

  const { stats } = useStats();
  const { users, reload, isLoading } = useUsers();
  const { codes } = useCodes(user.id);
  const { groups } = useGroups({ admin: user.id });
  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(() => {
    const relatedGroups = groups.filter(
      (x) =>
        x.name === "Students" || x.name === "Teachers" || x.name === "Corporate"
    );
    const usersInGroups = relatedGroups.map((x) => x.participants).flat();
    const filteredCodes = codes.filter(
      (x) => !x.userId || !usersInGroups.includes(x.userId)
    );

    setUserBalance(usersInGroups.length + filteredCodes.length);
  }, [codes, groups]);

  useEffect(() => {
    // in this case it fetches the master corporate account
    getUserCorporate(user.id).then(setCorporateUserToShow);
  }, [user]);

  const studentFilter = (user: User) =>
    user.type === "student" &&
    groups.flatMap((g) => g.participants).includes(user.id);
  const teacherFilter = (user: User) =>
    user.type === "teacher" &&
    groups.flatMap((g) => g.participants).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
        ? groups
            .filter((g) => g.admin === selectedUser.id)
            .flatMap((g) => g.participants)
            .includes(x.id) || false
        : groups.flatMap((g) => g.participants).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
        ? groups
            .filter((g) => g.admin === selectedUser.id)
            .flatMap((g) => g.participants)
            .includes(x.id) || false
        : groups.flatMap((g) => g.participants).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 GroupsList = () => {
    const filter = (x: Group) =>
      x.admin === user.id || x.participants.includes(user.id);

    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.filter(filter).length})
          </h2>
        </div>

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

  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>
        <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 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))?.name || "N/A",
        corporateName: getUserCompanyName(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={reload}
            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", isLoading && "animate-spin")}
            />
          </div>
        </div>
        <StudentPerformanceList items={students} stats={stats} users={users} />
      </>
    );
  };

  const averageLevelCalculator = (studentStats: Stat[]) => {
    const formattedStats = studentStats
      .map((s) => ({
        focus: users.find((u) => u.id === s.user)?.focus,
        score: s.score,
        module: s.module,
      }))
      .filter((f) => !!f.focus);
    const bandScores = formattedStats.map((s) => ({
      module: s.module,
      level: calculateBandScore(
        s.score.correct,
        s.score.total,
        s.module,
        s.focus!
      ),
    }));

    const levels: { [key in Module]: number } = {
      reading: 0,
      listening: 0,
      writing: 0,
      speaking: 0,
      level: 0,
    };
    bandScores.forEach((b) => (levels[b.module] += b.level));

    return calculateAverageLevel(levels);
  };

  const DefaultDashboard = () => (
    <>
      {corporateUserToShow && (
        <div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
          Linked to:{" "}
          <b>
            {corporateUserToShow?.corporateInformation?.companyInformation
              .name || corporateUserToShow.name}
          </b>
        </div>
      )}
      <section className="grid grid-cols-5 -md:grid-cols-2 gap-4 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(
            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={`${userBalance}/${
            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={BsPersonFillGear}
          label="Student Performance"
          value={users.filter(studentFilter).length}
          color="purple"
          onClick={() => setPage("studentsPerformance")}
        />
        <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
                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 === "assignments" && <AssignmentsPage />}
      {page === "studentsPerformance" && <StudentPerformancePage />}
      {page === "" && <DefaultDashboard />}
    </>
  );
}