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

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 [showEndExam, setShowEndExam] = useState(false);
	const [windowWidth, setWindowWidth] = useState(0);

	const {stats, isLoading} = useStats();
	const {user} = useUser({redirectTo: "/login"});

	useEffect(() => setShowEndExam(window.innerWidth <= 960), []);
	useEffect(() => setWindowWidth(window.innerWidth), []);

	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>
			{user && (
				<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-black">
					<Navbar profilePicture={user.profilePicture} showExamEnd={showEndExam} />
					<div className="w-full h-full p-4 relative flex flex-col gap-8">
						<section className="h-full w-full flex lg:gap-8 flex-col lg:flex-row justify-center md:justify-start md:items-start">
							<section className="w-full h-full flex items-center">
								<ProfileCard user={user} className="text-black self-start" />
							</section>
							{windowWidth <= 960 && <Divider />}
							<div className="flex flex-col w-full gap-4">
								<span className="font-bold text-2xl">Statistics</span>
								{!isLoading && stats && (
									<div className="text-neutral-600 flex flex-wrap gap-2 md:gap-4 w-full justify-between md:justify-start">
										<div className="bg-white p-4 rounded-xl drop-shadow-xl flex flex-col gap-2 md:gap-4 w-full">
											<span className="font-bold text-xl">Exams: {totalExams(stats)}</span>
											<span className="font-bold text-xl">Exercises: {stats.length}</span>
											<span className="font-bold text-xl">Average Score: {averageScore(stats)}%</span>
										</div>
									</div>
								)}
							</div>
						</section>
						{!isLoading && stats && (
							<section className="w-full lg:w-1/3 h-full flex items-center justify-center">
								<SingleDatasetChart type="polarArea" data={formatModuleTotalStats(stats)} title="Exams per Module" />
							</section>
						)}
					</div>
				</main>
			)}
		</>
	);
}
