import Button from "@/components/Low/Button";
import ModuleTitle from "@/components/Medium/ModuleTitle";
import { moduleResultText } from "@/constants/ielts";
import { Module } from "@/interfaces";
import { User } from "@/interfaces/user";
import useExamStore from "@/stores/examStore";
import { calculateBandScore } from "@/utils/score";
import clsx from "clsx";
import Link from "next/link";
import { useRouter } from "next/router";
import { Fragment, useEffect, useState } from "react";
import {
  BsArrowCounterclockwise,
  BsBook,
  BsClipboard,
  BsEyeFill,
  BsHeadphones,
  BsMegaphone,
  BsPen,
  BsShareFill,
} from "react-icons/bs";
import { LevelScore } from "@/constants/ielts";
import { getLevelScore } from "@/utils/score";

interface Score {
  module: Module;
  correct: number;
  total: number;
  missing: number;
}

interface Props {
  user: User;
  modules: Module[];
  scores: Score[];
  isLoading: boolean;
  onViewResults: () => void;
}

export default function Finish({
  user,
  scores,
  modules,
  isLoading,
  onViewResults,
}: Props) {
  const [selectedModule, setSelectedModule] = useState(modules[0]);
  const [selectedScore, setSelectedScore] = useState<Score>(
    scores.find((x) => x.module === modules[0])!,
  );

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

  useEffect(
    () => setSelectedScore(scores.find((x) => x.module === selectedModule)!),
    [scores, selectedModule],
  );
  useEffect(() => console.log(scores), [scores]);

  const moduleColors: { [key in Module]: { progress: string; inner: string } } =
    {
      reading: {
        progress: "text-ielts-reading",
        inner: "bg-ielts-reading-light",
      },
      listening: {
        progress: "text-ielts-listening",
        inner: "bg-ielts-listening-light",
      },
      writing: {
        progress: "text-ielts-writing",
        inner: "bg-ielts-writing-light",
      },
      speaking: {
        progress: "text-ielts-speaking",
        inner: "bg-ielts-speaking-light",
      },
      level: {
        progress: "text-ielts-level",
        inner: "bg-ielts-level-light",
      },
    };

  const getTotalExercises = () => {
    const exam = exams.find((x) => x.module === selectedModule)!;
    if (exam.module === "reading" || exam.module === "listening") {
      return exam.parts.flatMap((x) => x.exercises).length;
    }

    return exam.exercises.length;
  };

  const bandScore: number = calculateBandScore(
    selectedScore.correct,
    selectedScore.total,
    selectedModule,
    user.focus,
  );

  const showLevel = (level: number) => {
    if (selectedModule === "level") {
      const [levelStr, grade] = getLevelScore(level);
      return (
        <div className="flex flex-col items-center justify-center gap-1">
          <span className="text-xl font-bold">{levelStr}</span>
          <span className="text-xl">{grade}</span>
        </div>
      );
    }

    return <span className="text-3xl font-bold">{level}</span>;
  };

  return (
    <>
      <div className="flex h-fit min-h-full w-full flex-col items-center justify-between gap-8">
        <ModuleTitle
          module={selectedModule}
          totalExercises={getTotalExercises()}
          exerciseIndex={getTotalExercises()}
          minTimer={exams.find((x) => x.module === selectedModule)!.minTimer}
          disableTimer
        />
        <div className="flex gap-4 self-start">
          {modules.includes("reading") && (
            <div
              onClick={() => setSelectedModule("reading")}
              className={clsx(
                "hover:bg-ielts-reading flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
                selectedModule === "reading"
                  ? "bg-ielts-reading text-white"
                  : "bg-mti-gray-smoke text-ielts-reading",
              )}
            >
              <BsBook className="h-6 w-6" />
              <span className="font-semibold">Reading</span>
            </div>
          )}
          {modules.includes("listening") && (
            <div
              onClick={() => setSelectedModule("listening")}
              className={clsx(
                "hover:bg-ielts-listening flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
                selectedModule === "listening"
                  ? "bg-ielts-listening text-white"
                  : "bg-mti-gray-smoke text-ielts-listening",
              )}
            >
              <BsHeadphones className="h-6 w-6" />
              <span className="font-semibold">Listening</span>
            </div>
          )}
          {modules.includes("writing") && (
            <div
              onClick={() => setSelectedModule("writing")}
              className={clsx(
                "hover:bg-ielts-writing flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
                selectedModule === "writing"
                  ? "bg-ielts-writing text-white"
                  : "bg-mti-gray-smoke text-ielts-writing",
              )}
            >
              <BsPen className="h-6 w-6" />
              <span className="font-semibold">Writing</span>
            </div>
          )}
          {modules.includes("speaking") && (
            <div
              onClick={() => setSelectedModule("speaking")}
              className={clsx(
                "hover:bg-ielts-speaking flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
                selectedModule === "speaking"
                  ? "bg-ielts-speaking text-white"
                  : "bg-mti-gray-smoke text-ielts-speaking",
              )}
            >
              <BsMegaphone className="h-6 w-6" />
              <span className="font-semibold">Speaking</span>
            </div>
          )}
          {modules.includes("level") && (
            <div
              onClick={() => setSelectedModule("level")}
              className={clsx(
                "hover:bg-ielts-level flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
                selectedModule === "level"
                  ? "bg-ielts-level text-white"
                  : "bg-mti-gray-smoke text-ielts-level",
              )}
            >
              <BsClipboard className="h-6 w-6" />
              <span className="font-semibold">Level</span>
            </div>
          )}
        </div>
        {isLoading && (
          <div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
            <span
              className={clsx(
                "loading loading-infinity w-32",
                moduleColors[selectedModule].progress,
              )}
            />
            <span
              className={clsx(
                "text-center text-2xl font-bold",
                moduleColors[selectedModule].progress,
              )}
            >
              Evaluating your answers, please be patient...
              <br />
              You can also check it later on your records page!
            </span>
          </div>
        )}
        {!isLoading && (
          <div className="mb-20 mt-32 flex w-full items-center justify-between gap-9">
            <span className="max-w-3xl">
              {moduleResultText(selectedModule, bandScore)}
            </span>
            <div className="flex gap-9 px-16">
              <div
                className={clsx(
                  "radial-progress overflow-hidden",
                  moduleColors[selectedModule].progress,
                )}
                style={
                  {
                    "--value":
                      (selectedScore.correct / selectedScore.total) * 100,
                    "--thickness": "12px",
                    "--size": "13rem",
                  } as any
                }
              >
                <div
                  className={clsx(
                    "flex h-48 w-48 flex-col items-center justify-center rounded-full",
                    moduleColors[selectedModule].inner,
                  )}
                >
                  <span className="text-xl">Level</span>
                  {showLevel(bandScore)}
                </div>
              </div>
              <div className="flex flex-col gap-5">
                <div className="flex gap-2">
                  <div className="bg-mti-red-light mt-1 h-3 w-3 rounded-full" />
                  <div className="flex flex-col">
                    <span className="text-mti-red-light">
                      {(
                        ((selectedScore.total - selectedScore.missing) /
                          selectedScore.total) *
                        100
                      ).toFixed(0)}
                      %
                    </span>
                    <span className="text-lg">Completion</span>
                  </div>
                </div>
                <div className="flex gap-2">
                  <div className="bg-mti-purple-light mt-1 h-3 w-3 rounded-full" />
                  <div className="flex flex-col">
                    <span className="text-mti-purple-light">
                      {selectedScore.correct.toString().padStart(2, "0")}
                    </span>
                    <span className="text-lg">Correct</span>
                  </div>
                </div>
                <div className="flex gap-2">
                  <div className="bg-mti-rose-light mt-1 h-3 w-3 rounded-full" />
                  <div className="flex flex-col">
                    <span className="text-mti-rose-light">
                      {(selectedScore.total - selectedScore.correct)
                        .toString()
                        .padStart(2, "0")}
                    </span>
                    <span className="text-lg">Wrong</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>

      {!isLoading && (
        <div className="absolute bottom-8 left-0 flex w-full justify-between gap-8 self-end px-8">
          <div className="flex gap-8">
            <div className="flex w-fit cursor-pointer flex-col items-center gap-1">
              <button
                onClick={() => window.location.reload()}
                className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out"
              >
                <BsArrowCounterclockwise className="h-7 w-7 text-white" />
              </button>
              <span>Play Again</span>
            </div>
            <div className="flex w-fit cursor-pointer flex-col items-center gap-1">
              <button
                onClick={onViewResults}
                className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out"
              >
                <BsEyeFill className="h-7 w-7 text-white" />
              </button>
              <span>Review Answers</span>
            </div>
          </div>

          <Link href="/" className="w-full max-w-[200px] self-end">
            <Button color="purple" className="w-full max-w-[200px] self-end">
              Dashboard
            </Button>
          </Link>
        </div>
      )}
    </>
  );
}