/* eslint-disable @next/next/no-img-element */
import Modal from "@/components/Modal";
import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
import useUsers, {
  userHashStudent,
  userHashTeacher,
  userHashCorporate,
} 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, useMemo, useState } from "react";
import {
  BsArrowLeft,
  BsClipboard2Data,
  BsClipboard2DataFill,
  BsClock,
  BsGlobeCentralSouthAsia,
  BsPaperclip,
  BsPerson,
  BsPersonAdd,
  BsPersonFill,
  BsPersonFillGear,
  BsPersonGear,
  BsPencilSquare,
  BsPersonBadge,
  BsPersonCheck,
  BsPeople,
  BsArrowRepeat,
  BsPlus,
  BsEnvelopePaper,
  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 { 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";
import useUserBalance from "@/hooks/useUserBalance";
import AssignmentsPage from "../views/AssignmentsPage";
import StudentPerformancePage from "./StudentPerformancePage";
import MasterStatistical from "../MasterCorporate/MasterStatistical";

interface Props {
  user: CorporateUser;
  linkedCorporate?: CorporateUser | MasterCorporateUser;
}

const studentHash = {
  type: "student",
  orderBy: "registrationDate",
  size: 25,
};

const teacherHash = {
  type: "teacher",
  orderBy: "registrationDate",
  size: 25,
};

export default function CorporateDashboard({ user, linkedCorporate }: Props) {
  const [selectedUser, setSelectedUser] = useState<User>();
  const [showModal, setShowModal] = useState(false);

  const { data: stats } = useFilterRecordsByUser<Stat[]>();
  const { groups } = useGroups({ admin: user.id });
  const {
    assignments,
    isLoading: isAssignmentsLoading,
    reload: reloadAssignments,
  } = useAssignments({ corporate: user.id });
  const { balance } = useUserBalance();

  const {
    users: students,
    total: totalStudents,
    reload: reloadStudents,
    isLoading: isStudentsLoading,
  } = useUsers(studentHash);
  const {
    users: teachers,
    total: totalTeachers,
    reload: reloadTeachers,
    isLoading: isTeachersLoading,
  } = useUsers(teacherHash);

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

  const assignmentsGroups = useMemo(
    () =>
      groups.filter(
        (x) => x.admin === user.id || x.participants.includes(user.id)
      ),
    [groups, user.id]
  );

  const assignmentsUsers = useMemo(
    () =>
      [...teachers, ...students].filter((x) =>
        !!selectedUser
          ? groups
              .filter((g) => g.admin === selectedUser.id)
              .flatMap((g) => g.participants)
              .includes(x.id) || false
          : groups.flatMap((g) => g.participants).includes(x.id)
      ),
    [groups, teachers, students, selectedUser]
  );

  useEffect(() => {
    setShowModal(!!selectedUser && router.asPath === "/#");
  }, [selectedUser, router.asPath]);

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

  // this workaround will allow us toreuse the master statistical due to master corporate restraints
  // while still being able to use the corporate user
  const groupedByNameCorporateIds = useMemo(
    () => ({
      [user.corporateInformation?.companyInformation?.name || user.name]: [
        user.id,
      ],
    }),
    [user]
  );
  const teachersAndStudents = useMemo(
    () => [...students, ...teachers],
    [students, teachers]
  );
  const MasterStatisticalPage = () => {
    return (
      <>
        <div className="flex flex-col gap-4">
          <div
            onClick={() => router.push("/")}
            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={teachersAndStudents}
          corporateUsers={groupedByNameCorporateIds}
          displaySelection={false}
        />
      </>
    );
  };

  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={() => router.push("/")}
            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 averageLevelCalculator = (studentStats: Stat[]) => {
    const formattedStats = studentStats
      .map((s) => ({
        focus: students.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);
  };

  if (router.asPath === "/#students")
    return (
      <UserList
        user={user}
        type="student"
        renderHeader={(total) => (
          <div className="flex flex-col gap-4">
            <div
              onClick={() => router.push("/")}
              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>
        )}
      />
    );

  if (router.asPath === "/#teachers")
    return (
      <UserList
        user={user}
        type="teacher"
        renderHeader={(total) => (
          <div className="flex flex-col gap-4">
            <div
              onClick={() => router.push("/")}
              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>
        )}
      />
    );

  if (router.asPath === "/#groups") return <GroupsList />;
  if (router.asPath === "/#studentsPerformance")
    return <StudentPerformancePage user={user} />;

  if (router.asPath === "/#assignments")
    return (
      <AssignmentsPage
        assignments={assignments}
        user={user}
        groups={assignmentsGroups}
        reloadAssignments={reloadAssignments}
        isLoading={isAssignmentsLoading}
        onBack={() => router.push("/")}
      />
    );

  if (router.asPath === "/#statistical") return <MasterStatisticalPage />;

  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 && selectedUser!.type === "student")
                    reloadStudents();
                  if (shouldReload && selectedUser!.type === "teacher")
                    reloadTeachers();
                }}
                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>

      <>
        {!!linkedCorporate && (
          <div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
            Linked to:{" "}
            <b>
              {linkedCorporate?.corporateInformation?.companyInformation.name ||
                linkedCorporate.name}
            </b>
          </div>
        )}
        <section className="grid grid-cols-5 -md:grid-cols-2 gap-4 text-center">
          <IconCard
            onClick={() => router.push("/#students")}
            isLoading={isStudentsLoading}
            Icon={BsPersonFill}
            label="Students"
            value={totalStudents}
            color="purple"
          />
          <IconCard
            onClick={() => router.push("/#teachers")}
            isLoading={isTeachersLoading}
            Icon={BsPencilSquare}
            label="Teachers"
            value={totalTeachers}
            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}
            isLoading={isStudentsLoading}
            label="Average Level"
            value={averageLevelCalculator(
              stats.filter((s) =>
                groups.flatMap((g) => g.participants).includes(s.user)
              )
            ).toFixed(1)}
            color="purple"
          />
          <IconCard
            onClick={() => router.push("/#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={BsPersonFillGear}
            isLoading={isStudentsLoading}
            label="Student Performance"
            value={totalStudents}
            color="purple"
            onClick={() => router.push("/#studentsPerformance")}
          />
          <IconCard
            Icon={BsDatabase}
            label="Master Statistical"
            color="purple"
            onClick={() => router.push("/#statistical")}
          />
          <button
            disabled={isAssignmentsLoading}
            onClick={() => router.push("/#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">
              {students
                .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">
              {teachers
                .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">
              {students
                .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">
              {students
                .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>
      </>
    </>
  );
}