/* eslint-disable @next/next/no-img-element */
import {useState} from "react";
import {Module} from "@/interfaces";
import clsx from "clsx";
import {User} from "@/interfaces/user";
import ProgressBar from "@/components/Low/ProgressBar";
import {BsBook, BsCheckCircle, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
import {totalExamsByModule} from "@/utils/stats";
import useStats from "@/hooks/useStats";
import Button from "@/components/Low/Button";
import {calculateAverageLevel} from "@/utils/score";
import {sortByModuleName} from "@/utils/moduleUtils";

interface Props {
	user: User;
	onStart: (modules: Module[]) => void;
	disableSelection?: boolean;
}

export default function Selection({user, onStart, disableSelection = false}: Props) {
	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
	const {stats} = useStats(user?.id);

	const toggleModule = (module: Module) => {
		const modules = selectedModules.filter((x) => x !== module);
		setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
	};

	return (
		<>
			<div className="w-full h-full relative flex flex-col gap-16">
				<section className="w-full flex gap-8">
					<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl object-cover" />
					<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="purple"
								className="max-w-xs w-32 self-end h-10"
							/>
						</div>
						<ProgressBar
							label=""
							percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
							color="red"
							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">
									<BsBook className="text-ielts-reading w-8 h-8" />
								</div>
								<div className="flex flex-col">
									<span className="font-bold text-xl">{totalExamsByModule(stats, "reading")}</span>
									<span className="font-normal text-base text-mti-gray-dim">Reading</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">
									<BsHeadphones className="text-ielts-listening w-8 h-8" />
								</div>
								<div className="flex flex-col">
									<span className="font-bold text-xl">{totalExamsByModule(stats, "listening")}</span>
									<span className="font-normal text-base text-mti-gray-dim">Listening</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">
									<BsPen className="text-ielts-writing w-8 h-8" />
								</div>
								<div className="flex flex-col">
									<span className="font-bold text-xl">{totalExamsByModule(stats, "writing")}</span>
									<span className="font-normal text-base text-mti-gray-dim">Writing</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">
									<BsMegaphone className="text-ielts-speaking w-8 h-8" />
								</div>
								<div className="flex flex-col">
									<span className="font-bold text-xl">{totalExamsByModule(stats, "speaking")}</span>
									<span className="font-normal text-base text-mti-gray-dim">Speaking</span>
								</div>
							</div>
						</div>
					</div>
				</section>
				<section className="flex flex-col gap-3">
					<span className="font-bold text-lg">About Exams</span>
					<span className="text-mti-gray-taupe">
						This comprehensive test will assess your proficiency in reading, listening, writing, and speaking English. Be prepared to dive
						into a variety of interesting and challenging topics while showcasing your ability to communicate effectively in English.
						Master the vocabulary, grammar, and interpretation skills required to succeed in this high-level exam. Are you ready to
						demonstrate your mastery of the English language to the world?
					</span>
				</section>
				<section className="w-full flex justify-between gap-8 mt-8">
					<div
						onClick={!disableSelection ? () => toggleModule("reading") : undefined}
						className={clsx(
							"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12 cursor-pointer",
							selectedModules.includes("reading") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
						)}>
						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-0 -translate-y-1/2">
							<BsBook className="text-white w-7 h-7" />
						</div>
						<span className="font-semibold">Reading:</span>
						<p className="text-center text-xs">
							Expand your vocabulary, improve your reading comprehension and improve your ability to interpret texts in English.
						</p>
						{!selectedModules.includes("reading") && !disableSelection && (
							<div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />
						)}
						{(selectedModules.includes("reading") || disableSelection) && (
							<BsCheckCircle className="mt-4 text-mti-purple-light w-8 h-8" />
						)}
					</div>
					<div
						onClick={!disableSelection ? () => toggleModule("listening") : undefined}
						className={clsx(
							"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12 cursor-pointer",
							selectedModules.includes("listening") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
						)}>
						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-0 -translate-y-1/2">
							<BsHeadphones className="text-white w-7 h-7" />
						</div>
						<span className="font-semibold">Listening:</span>
						<p className="text-center text-xs">
							Improve your ability to follow conversations in English and your ability to understand different accents and intonations.
						</p>
						{!selectedModules.includes("listening") && !disableSelection && (
							<div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />
						)}
						{(selectedModules.includes("listening") || disableSelection) && (
							<BsCheckCircle className="mt-4 text-mti-purple-light w-8 h-8" />
						)}
					</div>
					<div
						onClick={!disableSelection ? () => toggleModule("writing") : undefined}
						className={clsx(
							"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12 cursor-pointer",
							selectedModules.includes("writing") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
						)}>
						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-0 -translate-y-1/2">
							<BsPen className="text-white w-7 h-7" />
						</div>
						<span className="font-semibold">Writing:</span>
						<p className="text-center text-xs">
							Allow you to practice writing in a variety of formats, from simple paragraphs to complex essays.
						</p>
						{!selectedModules.includes("writing") && !disableSelection && (
							<div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />
						)}
						{(selectedModules.includes("writing") || disableSelection) && (
							<BsCheckCircle className="mt-4 text-mti-purple-light w-8 h-8" />
						)}
					</div>
					<div
						onClick={!disableSelection ? () => toggleModule("speaking") : undefined}
						className={clsx(
							"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12 cursor-pointer",
							selectedModules.includes("speaking") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
						)}>
						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-0 -translate-y-1/2">
							<BsMegaphone className="text-white w-7 h-7" />
						</div>
						<span className="font-semibold">Speaking:</span>
						<p className="text-center text-xs">
							You&apos;ll have access to interactive dialogs, pronunciation exercises and speech recordings.
						</p>
						{!selectedModules.includes("speaking") && !disableSelection && (
							<div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />
						)}
						{(selectedModules.includes("speaking") || disableSelection) && (
							<BsCheckCircle className="mt-4 text-mti-purple-light w-8 h-8" />
						)}
					</div>
				</section>
				<Button
					onClick={() =>
						onStart(!disableSelection ? selectedModules.sort(sortByModuleName) : ["reading", "listening", "writing", "speaking"])
					}
					color="purple"
					className="px-12 w-full max-w-xs self-end"
					disabled={selectedModules.length === 0 && !disableSelection}>
					Start Exam
				</Button>
			</div>
		</>
	);
}