import { InteractiveSpeakingExercise } from "@/interfaces/exam";
import { CommonProps } from ".";
import { useEffect, useState } from "react";
import { BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPlayCircle, BsTrashFill } from "react-icons/bs";
import dynamic from "next/dynamic";
import Button from "../Low/Button";
import useExamStore from "@/stores/examStore";
import { downloadBlob } from "@/utils/evaluation";
import axios from "axios";

const Waveform = dynamic(() => import("../Waveform"), { ssr: false });
const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), {
	ssr: false,
});

export default function InteractiveSpeaking({
	id,
	title,
	first_title,
	second_title,
	examID,
	type,
	prompts,
	userSolutions,
	onNext,
	onBack,
	isPractice = false,
	preview = false
}: InteractiveSpeakingExercise & CommonProps) {
	const [recordingDuration, setRecordingDuration] = useState(0);
	const [isRecording, setIsRecording] = useState(false);
	const [mediaBlob, setMediaBlob] = useState<string>();
	const [answers, setAnswers] = useState<{ prompt: string; blob: string; questionIndex: number }[]>([]);
	const [isLoading, setIsLoading] = useState(false);

	const { questionIndex, setQuestionIndex } = useExamStore((state) => state);
	const { userSolutions: storeUserSolutions, setUserSolutions } = useExamStore((state) => state);

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

	const back = async () => {
		setIsLoading(true);

		const answer = await saveAnswer(questionIndex);
		if (questionIndex - 1 >= 0) {
			setQuestionIndex(questionIndex - 1);
			setIsLoading(false);

			return;
		}
		setIsLoading(false);

		onBack({
			exercise: id,
			solutions: [...answers.filter((x) => x.questionIndex !== questionIndex), answer],
			score: { correct: 100, total: 100, missing: 0 },
			type,
			isPractice
		});
	};

	const next = async () => {
		setIsLoading(true);

		const answer = await saveAnswer(questionIndex);
		if (questionIndex + 1 < prompts.length) {
			setQuestionIndex(questionIndex + 1);
			setIsLoading(false);

			return;
		}

		setIsLoading(false);
		setQuestionIndex(0);

		onNext({
			exercise: id,
			solutions: [...answers.filter((x) => x.questionIndex !== questionIndex), answer],
			score: { correct: 100, total: 100, missing: 0 },
			type,
			isPractice
		});
	};

	useEffect(() => {
		if (userSolutions.length > 0 && answers.length === 0) {
			const solutions = userSolutions as unknown as typeof answers;
			setAnswers(solutions);

			if (!mediaBlob) setMediaBlob(solutions.find((x) => x.questionIndex === questionIndex)?.blob);
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [userSolutions, mediaBlob, answers]);

	useEffect(() => {
		if (hasExamEnded) {
			const answer = {
				questionIndex,
				prompt: prompts[questionIndex].text,
				blob: mediaBlob!,
			};

			onNext({
				exercise: id,
				solutions: [...answers.filter((x) => x.questionIndex !== questionIndex), answer],
				score: { correct: 100, total: 100, missing: 0 },
				type,
			});
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [hasExamEnded]);

	useEffect(() => {
		let recordingInterval: NodeJS.Timer | undefined = undefined;
		if (isRecording) {
			recordingInterval = setInterval(() => setRecordingDuration((prev) => prev + 1), 1000);
		} else if (recordingInterval) {
			clearInterval(recordingInterval);
		}

		return () => {
			if (recordingInterval) clearInterval(recordingInterval);
		};
	}, [isRecording]);

	useEffect(() => {
		if (questionIndex <= answers.length - 1) {
			const blob = answers.find((x) => x.questionIndex === questionIndex)?.blob;
			setMediaBlob(blob);
		}
	}, [answers, questionIndex]);

	const saveAnswer = async (index: number) => {
		const answer = {
			questionIndex,
			prompt: prompts[questionIndex].text,
			blob: mediaBlob!,
		};

		setAnswers((prev) => [...prev.filter((x) => x.questionIndex !== index), answer]);
		setMediaBlob(undefined);

		setUserSolutions([
			...storeUserSolutions.filter((x) => x.exercise !== id),
			{
				exercise: id,
				solutions: [...answers.filter((x) => x.questionIndex !== questionIndex), answer],
				score: { correct: 100, total: 100, missing: 0 },
				module: "speaking",
				exam: examID,
				type,
				isPractice
			},
		]);

		return answer;
	};

	return (
		<div className="flex flex-col gap-4 mt-4 w-full">
			<div className="flex justify-between w-full gap-8">
				<Button color="purple" variant="outline" isLoading={isLoading} onClick={back} className="max-w-[200px] self-end w-full">
					Back
				</Button>
				<Button color="purple" disabled={!mediaBlob} isLoading={isLoading} onClick={next} className="max-w-[200px] self-end w-full">
					{questionIndex + 1 < prompts.length ? "Next Prompt" : "Submit"}
				</Button>
			</div>

			<div className="flex flex-col h-full w-full gap-9">
				<div className="flex flex-col w-full gap-8 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16">
					<div className="flex flex-col gap-3">
						<span className="font-semibold">{!!first_title && !!second_title ? `${first_title} & ${second_title}` : title}</span>
					</div>
					{prompts && prompts.length > 0 && (
						<div className="flex flex-col gap-4 w-full items-center">
							<video key={questionIndex} autoPlay controls className="max-w-3xl rounded-xl">
								<source src={prompts[questionIndex].video_url} />
							</video>
						</div>
					)}
				</div>

				<ReactMediaRecorder
					audio
					key={questionIndex}
					onStop={(blob) => setMediaBlob(blob)}
					render={({ status, startRecording, stopRecording, pauseRecording, resumeRecording, clearBlobUrl, mediaBlobUrl }) => (
						<div className="w-full p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex-col gap-8 items-center">
							<p className="text-base font-normal">Record your answer:</p>
							<div className="flex gap-8 items-center justify-center py-8">
								{status === "idle" && (
									<>
										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
										{status === "idle" && (
											<BsMicFill
												onClick={() => {
													setRecordingDuration(0);
													startRecording();
													setIsRecording(true);
												}}
												className="h-5 w-5 text-mti-gray-cool cursor-pointer"
											/>
										)}
									</>
								)}
								{status === "recording" && (
									<>
										<div className="flex gap-4 items-center">
											<span className="text-xs w-9">
												{Math.floor(recordingDuration / 60)
													.toString(10)
													.padStart(2, "0")}
												:
												{Math.floor(recordingDuration % 60)
													.toString(10)
													.padStart(2, "0")}
											</span>
										</div>
										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
										<div className="flex gap-4 items-center">
											<BsPauseCircle
												onClick={() => {
													setIsRecording(false);
													pauseRecording();
												}}
												className="text-red-500 w-8 h-8 cursor-pointer"
											/>
											<BsCheckCircleFill
												onClick={() => {
													setIsRecording(false);
													stopRecording();
												}}
												className="text-mti-purple-light w-8 h-8 cursor-pointer"
											/>
										</div>
									</>
								)}
								{status === "paused" && (
									<>
										<div className="flex gap-4 items-center">
											<span className="text-xs w-9">
												{Math.floor(recordingDuration / 60)
													.toString(10)
													.padStart(2, "0")}
												:
												{Math.floor(recordingDuration % 60)
													.toString(10)
													.padStart(2, "0")}
											</span>
										</div>
										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
										<div className="flex gap-4 items-center">
											<BsPlayCircle
												onClick={() => {
													setIsRecording(true);
													resumeRecording();
												}}
												className="text-mti-purple-light w-8 h-8 cursor-pointer"
											/>
											<BsCheckCircleFill
												onClick={() => {
													setIsRecording(false);
													stopRecording();
												}}
												className="text-mti-purple-light w-8 h-8 cursor-pointer"
											/>
										</div>
									</>
								)}
								{status === "stopped" && mediaBlobUrl && (
									<>
										<Waveform audio={mediaBlobUrl} waveColor="#FCDDEC" progressColor="#EF5DA8" />
										<div className="flex gap-4 items-center">
											<BsTrashFill
												className="text-mti-gray-cool cursor-pointer w-5 h-5"
												onClick={() => {
													setRecordingDuration(0);
													clearBlobUrl();
													setMediaBlob(undefined);
												}}
											/>

											<BsMicFill
												onClick={() => {
													clearBlobUrl();
													setRecordingDuration(0);
													startRecording();
													setIsRecording(true);
													setMediaBlob(undefined);
												}}
												className="h-5 w-5 text-mti-gray-cool cursor-pointer"
											/>
										</div>
									</>
								)}
							</div>
						</div>
					)}
				/>

				<div className="self-end flex justify-between w-full  gap-8">
					<Button color="purple" variant="outline" isLoading={isLoading} onClick={back} className="max-w-[200px] self-end w-full">
						Back
					</Button>
					{preview ? (
						<Button color="purple" isLoading={isLoading} onClick={next} className="max-w-[200px] self-end w-full">
							{questionIndex + 1 < prompts.length ? "Next Prompt" : "Submit"}
						</Button>
					) : (
						<Button color="purple" disabled={!mediaBlob} isLoading={isLoading} onClick={next} className="max-w-[200px] self-end w-full">
							{questionIndex + 1 < prompts.length ? "Next Prompt" : "Submit"}
						</Button>
					)}
				</div>
			</div>
		</div>
	);
}