/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import SingleDatasetChart from "@/components/UserResultChart";
import Navbar from "@/components/Navbar";
import ProfileCard from "@/components/ProfileCard";
import {BsFileEarmarkText, BsPencil, BsStar, BsBook, BsHeadphones, BsPen, BsMegaphone} from "react-icons/bs";
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {User} from "@/interfaces/user";
import {useEffect, useState} from "react";
import useStats from "@/hooks/useStats";
import {averageScore, formatModuleTotalStats, totalExams} from "@/utils/stats";
import {Divider} from "primereact/divider";
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 clsx from "clsx";
import ProgressBar from "@/components/Low/ProgressBar";

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 Home() {
	const [showDiagnostics, setShowDiagnostics] = useState(false);
	const {user} = useUser({redirectTo: "/login"});
	const {stats} = useStats(user?.id);

	useEffect(() => {
		if (user) setShowDiagnostics(user.isFirstLogin);
	}, [user]);

	const calculateAverageLevel = () => {
		return Object.keys(user!.levels).reduce((accumulator, current) => user!.levels[current as Module] + accumulator, 0) / 4;
	};

	if (user && showDiagnostics) {
		return (
			<>
				<Head>
					<title>IELTS GPT | Muscat Training Institute</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>
				<main className="w-full h-full min-h-[100vh] flex flex-col items-center justify-center bg-neutral-100 text-black">
					<Diagnostic user={user} onFinish={() => setShowDiagnostics(false)} />
				</main>
			</>
		);
	}

	return (
		<>
			<Head>
				<title>IELTS GPT | Muscat Training Institute</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 && (
				<main className="w-full h-[100vh] flex flex-col bg-mti-gray-smoke text-black">
					<Navbar user={user} />
					<div className="h-full w-full flex py-4 pb-8 gap-2">
						<Sidebar path="/" />
						<div className="w-5/6 h-full mr-8 bg-white shadow-md rounded-2xl p-12 flex flex-col gap-12">
							<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">
											<h2 className="font-bold text-3xl">{user.name}</h2>
											<span className="font-normal text-2xl text-mti-gray-taupe">{capitalize(user.type)}</span>
										</div>
										<ProgressBar
											label={`Level ${calculateAverageLevel().toFixed(1)}`}
											percentage={Math.round((calculateAverageLevel() * 100) / 9)}
											color="blue"
											className="max-w-xs w-32 self-end h-10"
										/>
									</div>
									<ProgressBar label="" percentage={70} 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">{totalExams(stats)}</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-bold text-lg">Bio</span>
								<span className="text-mti-gray-taupe">
									Patricia Smith is a dedicated and enthusiastic student. Her passion for knowledge drives her to constantly seek
									new academic challenges. She is recognized for her exemplary work ethic, active participation in the classroom,
									and commitment to helping her peers. Her insatiable curiosity has led her to explore a wide range of areas of
									study, making her a versatile and adaptable learner. Patricia is a true academic leader, inspiring other students
									to pursue their own educational goals.
								</span>
							</section>
							<section className="flex flex-col gap-3">
								<span className="font-bold text-lg">Score History</span>
								<div className="grid grid-cols-2 gap-6">
									<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
										<div className="flex gap-3 items-center">
											<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-xl">
												<BsBook className="text-ielts-reading w-5 h-5" />
											</div>
											<div className="flex justify-between w-full">
												<span className="font-extrabold text-sm">Reading</span>
												<span className="text-sm font-normal text-mti-gray-dim">86%</span>
											</div>
										</div>
										<div className="pl-14">
											<ProgressBar color="blue" label="" percentage={86} className="w-full h-2" />
										</div>
									</div>
									<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
										<div className="flex gap-3 items-center">
											<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-xl">
												<BsPen className="text-ielts-writing w-5 h-5" />
											</div>
											<div className="flex justify-between w-full">
												<span className="font-extrabold text-sm">Writing</span>
												<span className="text-sm font-normal text-mti-gray-dim">91%</span>
											</div>
										</div>
										<div className="pl-14">
											<ProgressBar color="blue" label="" percentage={91} className="w-full h-2" />
										</div>
									</div>
									<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
										<div className="flex gap-3 items-center">
											<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-xl">
												<BsHeadphones className="text-ielts-listening w-5 h-5" />
											</div>
											<div className="flex justify-between w-full">
												<span className="font-extrabold text-sm">Listening</span>
												<span className="text-sm font-normal text-mti-gray-dim">56%</span>
											</div>
										</div>
										<div className="pl-14">
											<ProgressBar color="blue" label="" percentage={56} className="w-full h-2" />
										</div>
									</div>
									<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
										<div className="flex gap-3 items-center">
											<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-xl">
												<BsMegaphone className="text-ielts-speaking w-5 h-5" />
											</div>
											<div className="flex justify-between w-full">
												<span className="font-extrabold text-sm">Speaking</span>
												<span className="text-sm font-normal text-mti-gray-dim">26%</span>
											</div>
										</div>
										<div className="pl-14">
											<ProgressBar color="blue" label="" percentage={26} className="w-full h-2" />
										</div>
									</div>
								</div>
							</section>
						</div>
					</div>
				</main>
			)}
		</>
	);
}
