/* 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 {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {useEffect, useState} from "react";
import useStats from "@/hooks/useStats";
import {averageScore, totalExams} 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 axios from "axios";

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

	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">
					<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 && (
				<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">{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">
											Level {user.levels.reading} / Level {user.desiredLevels.reading}
										</span>
									</div>
								</div>
								<div className="pl-14">
									<ProgressBar
										color="blue"
										label=""
										percentage={Math.round((user.levels.reading * 100) / user.desiredLevels.reading)}
										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">
											Level {user.levels.writing} / Level {user.desiredLevels.writing}
										</span>
									</div>
								</div>
								<div className="pl-14">
									<ProgressBar
										color="blue"
										label=""
										percentage={Math.round((user.levels.writing * 100) / user.desiredLevels.writing)}
										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">
											Level {user.levels.listening} / Level {user.desiredLevels.listening}
										</span>
									</div>
								</div>
								<div className="pl-14">
									<ProgressBar
										color="blue"
										label=""
										percentage={Math.round((user.levels.listening * 100) / user.desiredLevels.listening)}
										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">
											Level {user.levels.speaking} / Level {user.desiredLevels.speaking}
										</span>
									</div>
								</div>
								<div className="pl-14">
									<ProgressBar
										color="blue"
										label=""
										percentage={Math.round((user.levels.speaking * 100) / user.desiredLevels.speaking)}
										className="w-full h-2"
									/>
								</div>
							</div>
						</div>
					</section>
				</Layout>
			)}
		</>
	);
}
