import Select from "@/components/Low/Select";
import {
  Difficulty,
  LevelExam,
  MultipleChoiceExercise,
  MultipleChoiceQuestion,
  LevelPart,
} from "@/interfaces/exam";
import useExamStore from "@/stores/examStore";
import { getExamById } from "@/utils/exams";
import { playSound } from "@/utils/sound";
import { Tab } from "@headlessui/react";
import axios from "axios";
import clsx from "clsx";
import { capitalize, sample } from "lodash";
import { useRouter } from "next/router";
import { useState } from "react";
import { BsArrowRepeat, BsCheck, BsPencilSquare, BsX } from "react-icons/bs";
import { toast } from "react-toastify";
import { v4 } from "uuid";

const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];

const QuestionDisplay = ({
  question,
  onUpdate,
}: {
  question: MultipleChoiceQuestion;
  onUpdate: (question: MultipleChoiceQuestion) => void;
}) => {
  const [isEditing, setIsEditing] = useState(false);
  const [options, setOptions] = useState(question.options);
  const [answer, setAnswer] = useState(question.solution);

  return (
    <div key={question.id} className="flex flex-col gap-1">
      <span className="font-semibold">
        {question.id}. {question.prompt}{" "}
      </span>
      <div className="flex flex-col gap-1">
        {question.options.map((option, index) => (
          <span
            key={option.id}
            className={clsx(answer === option.id && "font-bold")}
          >
            <span
              className={clsx(
                "font-semibold",
                answer === option.id
                  ? "text-mti-green-light"
                  : "text-ielts-level"
              )}
			  onClick={() => setAnswer(option.id)}
            >
              ({option.id})
            </span>{" "}
            {isEditing ? (
              <input
                defaultValue={option.text}
                className="w-60"
                onChange={(e) =>
                  setOptions((prev) =>
                    prev.map((x, idx) =>
                      idx === index ? { ...x, text: e.target.value } : x
                    )
                  )
                }
              />
            ) : (
              <span>{option.text}</span>
            )}
          </span>
        ))}
      </div>
      <div className="flex gap-2 mt-2 w-full">
        {!isEditing && (
          <button
            onClick={() => setIsEditing(true)}
            className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300"
          >
            <BsPencilSquare />
          </button>
        )}
        {isEditing && (
          <>
            <button
              onClick={() => {
                onUpdate({ ...question, options, solution: answer });
                setIsEditing(false);
              }}
              className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300"
            >
              <BsCheck />
            </button>
            <button
              onClick={() => setIsEditing(false)}
              className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300"
            >
              <BsX />
            </button>
          </>
        )}
      </div>
    </div>
  );
};

const TaskTab = ({
  exam,
  difficulty,
  setExam,
}: {
  exam?: LevelPart;
  difficulty: Difficulty;
  setExam: (exam: LevelPart) => void;
}) => {
  const [isLoading, setIsLoading] = useState(false);

  const generate = () => {
    const url = new URLSearchParams();
    url.append("difficulty", difficulty);

    setIsLoading(true);
    axios
      .get(`/api/exam/level/generate/level?${url.toString()}`)
      .then((result) => {
        playSound(typeof result.data === "string" ? "error" : "check");
        if (typeof result.data === "string")
          return toast.error(
            "Something went wrong, please try to generate again."
          );
        setExam(result.data);
      })
      .catch((error) => {
        console.log(error);
        toast.error("Something went wrong!");
      })
      .finally(() => setIsLoading(false));
  };

  const onUpdate = (question: MultipleChoiceQuestion) => {
    if (!exam) return;

    const updatedExam = {
      ...exam,
	  exercises: exam.exercises.map((x) => ({
		...x,
		questions: (x as MultipleChoiceExercise).questions.map((q) =>
            q.id === question.id ? question : q
          ),
	  }),
      ),
    };
    console.log(updatedExam);
    setExam(updatedExam as any);
  };

  return (
    <Tab.Panel className="w-full bg-ielts-level/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
      <div className="flex gap-4 items-end">
        <button
          onClick={generate}
          disabled={isLoading}
          className={clsx(
            "bg-ielts-level/70 border border-ielts-level text-white w-full px-6 py-6 rounded-xl h-[70px]",
            "hover:bg-ielts-level disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
            "transition ease-in-out duration-300"
          )}
        >
          {isLoading ? (
            <div className="flex items-center justify-center">
              <BsArrowRepeat className="text-white animate-spin" size={25} />
            </div>
          ) : (
            "Generate"
          )}
        </button>
      </div>
      {isLoading && (
        <div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
          <span
            className={clsx("loading loading-infinity w-32 text-ielts-level")}
          />
          <span className={clsx("font-bold text-2xl text-ielts-level")}>
            Generating...
          </span>
        </div>
      )}
      {exam && (
        <div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide h-full">
          {exam.exercises
            .filter((x) => x.type === "multipleChoice")
            .map((ex) => {
              const exercise = ex as MultipleChoiceExercise;

              return (
                <div key={ex.id} className="w-full h-full flex flex-col gap-2">
                  <div className="flex gap-2">
                    <span className="text-xl font-semibold">
                      Multiple Choice
                    </span>
                    <span className="rounded-xl bg-white border border-ielts-level p-1 px-4 w-fit">
                      {exercise.questions.length} questions
                    </span>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {exercise.questions.map((question) => (
                      <QuestionDisplay
                        question={question}
                        onUpdate={onUpdate}
                        key={question.id}
                      />
                    ))}
                  </div>
                </div>
              );
            })}
        </div>
      )}
    </Tab.Panel>
  );
};

const LevelGeneration = () => {
  const [generatedExam, setGeneratedExam] = useState<LevelPart>();
  const [isLoading, setIsLoading] = useState(false);
  const [resultingExam, setResultingExam] = useState<LevelExam>();
  const [difficulty, setDifficulty] = useState<Difficulty>(
    sample(DIFFICULTIES)!
  );

  const router = useRouter();

  const setExams = useExamStore((state) => state.setExams);
  const setSelectedModules = useExamStore((state) => state.setSelectedModules);

  const loadExam = async (examId: string) => {
    const exam = await getExamById("level", examId.trim());
    if (!exam) {
      toast.error(
        "Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
        {
          toastId: "invalid-exam-id",
        }
      );

      return;
    }

    setExams([exam]);
    setSelectedModules(["level"]);

    router.push("/exercises");
  };

  const submitExam = () => {
    if (!generatedExam) {
      toast.error("Please generate all tasks before submitting");
      return;
    }

    setIsLoading(true);

    const exam: LevelExam = {
      isDiagnostic: false,
      minTimer: 25,
      module: "level",
      id: v4(),
	  parts: [generatedExam],
    };

    axios
      .post(`/api/exam/level`, exam)
      .then((result) => {
        playSound("sent");
        console.log(`Generated Exam ID: ${result.data.id}`);
        toast.success(
          "This new exam has been generated successfully! Check the ID in our browser's console."
        );
        setResultingExam(result.data);

        setGeneratedExam(undefined);
      })
      .catch((error) => {
        console.log(error);
        toast.error(
          "Something went wrong while generating, please try again later."
        );
      })
      .finally(() => setIsLoading(false));
  };

  return (
    <>
      <div className="flex gap-4 w-1/2">
        <div className="flex flex-col gap-3 w-full">
          <label className="font-normal text-base text-mti-gray-dim">
            Difficulty
          </label>
          <Select
            options={DIFFICULTIES.map((x) => ({
              value: x,
              label: capitalize(x),
            }))}
            onChange={(value) =>
              value ? setDifficulty(value.value as Difficulty) : null
            }
            value={{ value: difficulty, label: capitalize(difficulty) }}
          />
        </div>
      </div>
      <Tab.Group>
        <Tab.List className="flex space-x-1 rounded-xl bg-ielts-level/20 p-1">
          <Tab
            className={({ selected }) =>
              clsx(
                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-level/70",
                "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-level focus:outline-none focus:ring-2",
                "transition duration-300 ease-in-out",
                selected
                  ? "bg-white shadow"
                  : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-level"
              )
            }
          >
            Exam
          </Tab>
        </Tab.List>
        <Tab.Panels>
          <TaskTab
            difficulty={difficulty}
            exam={generatedExam}
            setExam={setGeneratedExam}
          />
        </Tab.Panels>
      </Tab.Group>
      <div className="w-full flex justify-end gap-4">
        {resultingExam && (
          <button
            disabled={isLoading}
            onClick={() => loadExam(resultingExam.id)}
            className={clsx(
              "bg-white border border-ielts-level text-ielts-level w-full max-w-[200px] rounded-xl h-[70px] self-end",
              "hover:bg-ielts-level hover:text-white disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
              "transition ease-in-out duration-300"
            )}
          >
            Perform Exam
          </button>
        )}
        <button
          disabled={!generatedExam || isLoading}
          data-tip="Please generate all three passages"
          onClick={submitExam}
          className={clsx(
            "bg-ielts-level/70 border border-ielts-level text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
            "hover:bg-ielts-level disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
            "transition ease-in-out duration-300",
            !generatedExam && "tooltip"
          )}
        >
          {isLoading ? (
            <div className="flex items-center justify-center">
              <BsArrowRepeat className="text-white animate-spin" size={25} />
            </div>
          ) : (
            "Submit"
          )}
        </button>
      </div>
    </>
  );
};

export default LevelGeneration;