/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import Navbar from "@/components/Navbar";
import {BsFileEarmarkText, BsPencil, BsStar, BsBook, BsHeadphones, BsPen, BsMegaphone} from "react-icons/bs";
import {ArcElement} from "chart.js";
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {useEffect, useState} from "react";
import useStats from "@/hooks/useStats";
import {averageScore, totalExams, totalExamsByModule, groupBySession} from "@/utils/stats";
import useUser from "@/hooks/useUser";
import Sidebar from "@/components/Sidebar";
import Diagnostic from "@/components/Diagnostic";
import {ToastContainer} from "react-toastify";
import {capitalize} from "lodash";
import {Module} from "@/interfaces";
import ProgressBar from "@/components/Low/ProgressBar";
import Layout from "@/components/High/Layout";
import {calculateAverageLevel} from "@/utils/score";
import {MODULE_ARRAY} from "@/utils/moduleUtils";
import {Chart} from "react-chartjs-2";

export const getServerSideProps = withIronSessionSsr(({req, res}) => {
	const user = req.session.user;

	if (!user) {
		res.setHeader("location", "/login");
		res.statusCode = 302;
		res.end();
		return {
			props: {
				user: null,
			},
		};
	}

	return {
		props: {user: req.session.user},
	};
}, sessionOptions);

export default function Stats() {
	const {user} = useUser({redirectTo: "/login"});
	const {stats} = useStats(user?.id);

	const totalExamsData = {
		labels: MODULE_ARRAY.map((x) => capitalize(x)),
		datasets: [
			{
				label: "Total exams",
				data: MODULE_ARRAY.map((x) => totalExamsByModule(stats, x)),
				backgroundColor: ["#1EB3FF", "#FF790A", "#3D9F11", "#EF5DA8"],
			},
		],
	};

	return (
		<>
			<Head>
				<title>Stats | IELTS GPT</title>
				<meta
					name="description"
					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
				/>
				<meta name="viewport" content="width=device-width, initial-scale=1" />
				<link rel="icon" href="/favicon.ico" />
			</Head>
			<ToastContainer />
			{user && (
				<Layout user={user}>
					<section className="w-full flex gap-8">
						<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl" />
						<div className="flex flex-col gap-4 py-4 w-full">
							<div className="flex justify-between w-full gap-8">
								<div className="flex flex-col gap-2 py-2">
									<h1 className="font-bold text-4xl">{user.name}</h1>
									<h6 className="font-normal text-base text-mti-gray-taupe">{capitalize(user.type)}</h6>
								</div>
								<ProgressBar
									label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
									percentage={100}
									color="blue"
									className="max-w-xs w-32 self-end h-10"
								/>
							</div>
							<ProgressBar
								label=""
								percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
								color="blue"
								className="w-full h-3 drop-shadow-lg"
							/>
							<div className="flex justify-between w-full mt-8">
								<div className="flex gap-4 items-center">
									<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
										<BsFileEarmarkText className="w-8 h-8 text-mti-blue-light" />
									</div>
									<div className="flex flex-col">
										<span className="font-bold text-xl">{Object.keys(groupBySession(stats)).length}</span>
										<span className="font-normal text-base text-mti-gray-dim">Exams</span>
									</div>
								</div>
								<div className="flex gap-4 items-center">
									<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
										<BsPencil className="w-8 h-8 text-mti-blue-light" />
									</div>
									<div className="flex flex-col">
										<span className="font-bold text-xl">{stats.length}</span>
										<span className="font-normal text-base text-mti-gray-dim">Exercises</span>
									</div>
								</div>
								<div className="flex gap-4 items-center">
									<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
										<BsStar className="w-8 h-8 text-mti-blue-light" />
									</div>
									<div className="flex flex-col">
										<span className="font-bold text-xl">{averageScore(stats)}%</span>
										<span className="font-normal text-base text-mti-gray-dim">Average Score</span>
									</div>
								</div>
							</div>
						</div>
					</section>
					<section className="flex flex-col gap-3">
						<span className="font-semi text-lg">Module Statistics</span>
						<div className="flex gap-4 justify-between">
							<div className="flex flex-col gap-12 border w-full max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
								<span className="text-sm font-bold">Exams per Module</span>
								<div className="flex flex-col gap-4">
									<div className="flex flex-col gap-2">
										<div className="flex justify-between items-end">
											<span className="text-xs">
												<span className="font-medium">{totalExamsByModule(stats, "reading")}</span> of{" "}
												<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
											</span>
											<span className="text-xs">Reading</span>
										</div>
										<ProgressBar
											color="reading"
											percentage={(totalExamsByModule(stats, "reading") * 100) / Object.keys(groupBySession(stats)).length}
											label=""
											className="h-1"
										/>
									</div>
									<div className="flex flex-col gap-2">
										<div className="flex justify-between items-end">
											<span className="text-xs">
												<span className="font-medium">{totalExamsByModule(stats, "listening")}</span> of{" "}
												<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
											</span>
											<span className="text-xs">Listening</span>
										</div>
										<ProgressBar
											color="listening"
											percentage={(totalExamsByModule(stats, "listening") * 100) / Object.keys(groupBySession(stats)).length}
											label=""
											className="h-1"
										/>
									</div>
									<div className="flex flex-col gap-2">
										<div className="flex justify-between items-end">
											<span className="text-xs">
												<span className="font-medium">{totalExamsByModule(stats, "writing")}</span> of{" "}
												<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
											</span>
											<span className="text-xs">Writing</span>
										</div>
										<ProgressBar
											color="writing"
											percentage={(totalExamsByModule(stats, "writing") * 100) / Object.keys(groupBySession(stats)).length}
											label=""
											className="h-1"
										/>
									</div>
									<div className="flex flex-col gap-2">
										<div className="flex justify-between items-end">
											<span className="text-xs">
												<span className="font-medium">{totalExamsByModule(stats, "speaking")}</span> of{" "}
												<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
											</span>
											<span className="text-xs">Speaking</span>
										</div>
										<ProgressBar
											color="speaking"
											percentage={(totalExamsByModule(stats, "speaking") * 100) / Object.keys(groupBySession(stats)).length}
											label=""
											className="h-1"
										/>
									</div>
								</div>
							</div>
						</div>
					</section>
				</Layout>
			)}
		</>
	);
}
