/* eslint-disable @next/next/no-img-element */
import {useState} from "react";
import {Module} from "@/interfaces";
import clsx from "clsx";
import {Stat, User} from "@/interfaces/user";
import ProgressBar from "@/components/Low/ProgressBar";
import {BsArrowRepeat, BsBook, BsCheck, BsCheckCircle, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle} from "react-icons/bs";
import {totalExamsByModule} from "@/utils/stats";
import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
import Button from "@/components/Low/Button";
import {calculateAverageLevel} from "@/utils/score";
import {sortByModuleName} from "@/utils/moduleUtils";
import {capitalize} from "lodash";
import ProfileSummary from "@/components/ProfileSummary";
import {Variant} from "@/interfaces/exam";
import useSessions, {Session} from "@/hooks/useSessions";
import SessionCard from "@/components/Medium/SessionCard";
import useExamStore from "@/stores/examStore";
import moment from "moment";

interface Props {
	user: User;
	page: "exercises" | "exams";
	onStart: (modules: Module[], avoidRepeated: boolean, variant: Variant) => void;
	disableSelection?: boolean;
}

export default function Selection({user, page, onStart, disableSelection = false}: Props) {
	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
	const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
	const [variant, setVariant] = useState<Variant>("full");

	const {data: stats} = useFilterRecordsByUser<Stat[]>(user?.id);
	const {sessions, isLoading, reload} = useSessions(user.id);

	const state = useExamStore((state) => state);

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

	const loadSession = async (session: Session) => {
		state.setSelectedModules(session.selectedModules);
		state.setExam(session.exam);
		state.setExams(session.exams);
		state.setSessionId(session.sessionId);
		state.setAssignment(session.assignment);
		state.setExerciseIndex(session.exerciseIndex);
		state.setPartIndex(session.partIndex);
		state.setModuleIndex(session.moduleIndex);
		state.setTimeSpent(session.timeSpent);
		state.setUserSolutions(session.userSolutions);
		state.setShowSolutions(false);
		state.setQuestionIndex(session.questionIndex);
	};

	return (
		<>
			<div className="relative flex h-full w-full flex-col gap-8 md:gap-16">
				{user && (
					<ProfileSummary
						user={user}
						items={[
							{
								icon: <BsBook className="text-ielts-reading h-6 w-6 md:h-8 md:w-8" />,
								label: "Reading",
								value: totalExamsByModule(stats, "reading"),
								tooltip: "The amount of reading exams performed.",
							},
							{
								icon: <BsHeadphones className="text-ielts-listening h-6 w-6 md:h-8 md:w-8" />,
								label: "Listening",
								value: totalExamsByModule(stats, "listening"),
								tooltip: "The amount of listening exams performed.",
							},
							{
								icon: <BsPen className="text-ielts-writing h-6 w-6 md:h-8 md:w-8" />,
								label: "Writing",
								value: totalExamsByModule(stats, "writing"),
								tooltip: "The amount of writing exams performed.",
							},
							{
								icon: <BsMegaphone className="text-ielts-speaking h-6 w-6 md:h-8 md:w-8" />,
								label: "Speaking",
								value: totalExamsByModule(stats, "speaking"),
								tooltip: "The amount of speaking exams performed.",
							},
							{
								icon: <BsClipboard className="text-ielts-level h-6 w-6 md:h-8 md:w-8" />,
								label: "Level",
								value: totalExamsByModule(stats, "level"),
								tooltip: "The amount of level exams performed.",
							},
						]}
					/>
				)}

				<section className="flex flex-col gap-3">
					<span className="text-lg font-bold">About {capitalize(page)}</span>
					<span className="text-mti-gray-taupe">
						{page === "exercises" && (
							<>
								In the realm of language acquisition, practice makes perfect, and our exercises are the key to unlocking your full
								potential. Dive into a world of interactive and engaging exercises that cater to diverse learning styles. From grammar
								drills that build a strong foundation to vocabulary challenges that broaden your lexicon, our exercises are carefully
								designed to make learning English both enjoyable and effective. Whether you&apos;re looking to reinforce specific
								skills or embark on a holistic language journey, our exercises are your companions in the pursuit of excellence.
								Embrace the joy of learning as you navigate through a variety of activities that cater to every facet of language
								acquisition. Your linguistic adventure starts here!
							</>
						)}
						{page === "exams" && (
							<>
								Welcome to the heart of success on your English language journey! Our exams are crafted with precision to assess and
								enhance your language skills. Each test is a passport to your linguistic prowess, designed to challenge and elevate
								your abilities. Whether you&apos;re a beginner or a seasoned learner, our exams cater to all levels, providing a
								comprehensive evaluation of your reading, writing, speaking, and listening skills. Prepare to embark on a journey of
								self-discovery and language mastery as you navigate through our thoughtfully curated exams. Your success is not just a
								destination; it&apos;s a testament to your dedication and our commitment to empowering you with the English language.
							</>
						)}
					</span>
				</section>

				{sessions.length > 0 && (
					<section className="flex flex-col gap-3 md:gap-3">
						<div className="flex items-center gap-4">
							<div
								onClick={reload}
								className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out">
								<span className="text-mti-black text-lg font-bold">Unfinished Sessions</span>
								<BsArrowRepeat className={clsx("text-xl", isLoading && "animate-spin")} />
							</div>
						</div>
						<span className="text-mti-gray-taupe flex gap-8 overflow-x-auto pb-2">
							{sessions
								.sort((a, b) => moment(b.date).diff(moment(a.date)))
								.map((session) => (
									<SessionCard session={session} key={session.sessionId} reload={reload} loadSession={loadSession} />
								))}
						</span>
					</section>
				)}

				<section className="-lg:flex-col -lg:items-center -lg:gap-12 mt-4 flex w-full justify-between gap-8">
					<div
						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("reading") : undefined}
						className={clsx(
							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
							selectedModules.includes("reading") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
						)}>
						<div className="bg-ielts-reading absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
							<BsBook className="h-7 w-7 text-white" />
						</div>
						<span className="font-semibold">Reading:</span>
						<p className="text-left text-xs">
							Expand your vocabulary, improve your reading comprehension and improve your ability to interpret texts in English.
						</p>
						{!selectedModules.includes("reading") && !selectedModules.includes("level") && !disableSelection && (
							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
						)}
						{(selectedModules.includes("reading") || disableSelection) && (
							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
						)}
						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
					</div>
					<div
						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("listening") : undefined}
						className={clsx(
							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
							selectedModules.includes("listening") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
						)}>
						<div className="bg-ielts-listening absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
							<BsHeadphones className="h-7 w-7 text-white" />
						</div>
						<span className="font-semibold">Listening:</span>
						<p className="text-left text-xs">
							Improve your ability to follow conversations in English and your ability to understand different accents and intonations.
						</p>
						{!selectedModules.includes("listening") && !selectedModules.includes("level") && !disableSelection && (
							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
						)}
						{(selectedModules.includes("listening") || disableSelection) && (
							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
						)}
						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
					</div>
					<div
						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("writing") : undefined}
						className={clsx(
							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
							selectedModules.includes("writing") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
						)}>
						<div className="bg-ielts-writing absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
							<BsPen className="h-7 w-7 text-white" />
						</div>
						<span className="font-semibold">Writing:</span>
						<p className="text-left text-xs">
							Allow you to practice writing in a variety of formats, from simple paragraphs to complex essays.
						</p>
						{!selectedModules.includes("writing") && !selectedModules.includes("level") && !disableSelection && (
							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
						)}
						{(selectedModules.includes("writing") || disableSelection) && (
							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
						)}
						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
					</div>
					<div
						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("speaking") : undefined}
						className={clsx(
							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
							selectedModules.includes("speaking") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
						)}>
						<div className="bg-ielts-speaking absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
							<BsMegaphone className="h-7 w-7 text-white" />
						</div>
						<span className="font-semibold">Speaking:</span>
						<p className="text-left text-xs">
							You&apos;ll have access to interactive dialogs, pronunciation exercises and speech recordings.
						</p>
						{!selectedModules.includes("speaking") && !selectedModules.includes("level") && !disableSelection && (
							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
						)}
						{(selectedModules.includes("speaking") || disableSelection) && (
							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
						)}
						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
					</div>
					{!disableSelection && (
						<div
							onClick={selectedModules.length === 0 || selectedModules.includes("level") ? () => toggleModule("level") : undefined}
							className={clsx(
								"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
								selectedModules.includes("level") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
							)}>
							<div className="bg-ielts-level absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
								<BsClipboard className="h-7 w-7 text-white" />
							</div>
							<span className="font-semibold">Level:</span>
							<p className="text-left text-xs">You&apos;ll be able to test your english level with multiple choice questions.</p>
							{!selectedModules.includes("level") && selectedModules.length === 0 && !disableSelection && (
								<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
							)}
							{(selectedModules.includes("level") || disableSelection) && (
								<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
							)}
							{!selectedModules.includes("level") && selectedModules.length > 0 && (
								<BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
							)}
						</div>
					)}
				</section>
				<div className="-md:flex-col -md:gap-4 -md:justify-center flex w-full items-center md:justify-between">
					<div className="flex w-full flex-col items-center gap-3">
						<div
							className="text-mti-gray-dim -md:justify-center flex w-full cursor-pointer items-center gap-3 text-sm"
							onClick={() => setAvoidRepeatedExams((prev) => !prev)}>
							<input type="checkbox" className="hidden" />
							<div
								className={clsx(
									"border-mti-purple-light flex h-6 w-6 items-center justify-center rounded-md border bg-white",
									"transition duration-300 ease-in-out",
									avoidRepeatedExams && "!bg-mti-purple-light ",
								)}>
								<BsCheck color="white" className="h-full w-full" />
							</div>
							<span className="tooltip" data-tip="If possible, the platform will choose exams not yet done.">
								Avoid Repeated Questions
							</span>
						</div>
						<div
							className="text-mti-gray-dim -md:justify-center flex w-full cursor-pointer items-center  gap-3 text-sm"
							onClick={() => setVariant((prev) => (prev === "full" ? "partial" : "full"))}>
							<input type="checkbox" className="hidden" />
							<div
								className={clsx(
									"border-mti-purple-light flex h-6 w-6 items-center justify-center rounded-md border bg-white",
									"transition duration-300 ease-in-out",
									variant === "full" && "!bg-mti-purple-light ",
								)}>
								<BsCheck color="white" className="h-full w-full" />
							</div>
							<span>Full length exams</span>
						</div>
					</div>
					<div className="tooltip w-full" data-tip={`Your screen size is too small to do ${page}`}>
						<Button color="purple" className="w-full max-w-xs px-12 md:hidden" disabled>
							Start Exam
						</Button>
					</div>
					<Button
						onClick={() =>
							onStart(
								!disableSelection ? selectedModules.sort(sortByModuleName) : ["reading", "listening", "writing", "speaking"],
								avoidRepeatedExams,
								variant,
							)
						}
						color="purple"
						className="-md:hidden w-full max-w-xs px-12 md:self-end"
						disabled={selectedModules.length === 0 && !disableSelection}>
						Start Exam
					</Button>
				</div>
			</div>
		</>
	);
}