/* 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,
} 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";

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