import Button from "@/components/Low/Button";
import Checkbox from "@/components/Low/Checkbox";
import Input from "@/components/Low/Input";
import ProgressBar from "@/components/Low/ProgressBar";
import Select from "@/components/Low/Select";
import Separator from "@/components/Low/Separator";
import useExams from "@/hooks/useExams";
import { useListSearch } from "@/hooks/useListSearch";
import usePagination from "@/hooks/usePagination";
import { Module } from "@/interfaces";
import { EntityWithRoles, WithEntity } from "@/interfaces/entity";
import { InstructorGender, Variant } from "@/interfaces/exam";
import { Assignment } from "@/interfaces/results";
import { Group, User } from "@/interfaces/user";
import { sessionOptions } from "@/lib/session";
import { mapBy, redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api";
import { getEntitiesWithRoles } from "@/utils/entities.be";
import { getGroups, getGroupsByEntities } from "@/utils/groups.be";
import { checkAccess, findAllowedEntities } from "@/utils/permissions";
import { calculateAverageLevel } from "@/utils/score";
import { isAdmin } from "@/utils/users";
import { getEntitiesUsers, getUsers } from "@/utils/users.be";
import axios from "axios";
import clsx from "clsx";
import { withIronSessionSsr } from "iron-session/next";
import { capitalize } from "lodash";
import moment from "moment";
import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { generate } from "random-words";
import { useEffect, useMemo, useState } from "react";
import ReactDatePicker from "react-datepicker";
import {
  BsBook,
  BsCheckCircle,
  BsChevronLeft,
  BsClipboard,
  BsHeadphones,
  BsMegaphone,
  BsPen,
  BsXCircle,
} from "react-icons/bs";
import { toast } from "react-toastify";

export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
  const user = await requestUser(req, res);
  if (!user) return redirect("/login");

  const entityIDS = mapBy(user.entities, "id") || [];
  const entities = await (checkAccess(user, ["developer", "admin"])
    ? getEntitiesWithRoles()
    : getEntitiesWithRoles(entityIDS));

  const allowedEntities = findAllowedEntities(
    user,
    entities,
    "create_assignment"
  );
  if (allowedEntities.length === 0) return redirect("/assignments");

  const [users, groups] = await Promise.all([
    isAdmin(user)
      ? getUsers(
          {},
          0,
          {},
          {
            _id: 0,
            id: 1,
            type: 1,
            name: 1,
            email: 1,
            levels: 1,
          }
        )
      : getEntitiesUsers(mapBy(allowedEntities, "id"), {}, 0, {
          _id: 0,
          id: 1,
          type: 1,
          name: 1,
          email: 1,
          levels: 1,
        }),
    isAdmin(user)
      ? getGroups()
      : getGroupsByEntities(mapBy(allowedEntities, "id")),
  ]);

  return { props: serialize({ user, users, entities, groups }) };
}, sessionOptions);

interface Props {
  assignment: Assignment;
  groups: WithEntity<Group>[];
  user: User;
  users: User[];
  entities: EntityWithRoles[];
}

const SIZE = 9;

export default function AssignmentsPage({
  user,
  users,
  groups,
  entities,
}: Props) {
  const [selectedModules, setSelectedModules] = useState<Module[]>([]);
  const [assignees, setAssignees] = useState<string[]>([]);
  const [teachers, setTeachers] = useState<string[]>([
    ...(user.type === "teacher" ? [user.id] : []),
  ]);
  const [entity, setEntity] = useState<string | undefined>(entities[0]?.id);
  const [name, setName] = useState(
    generate({
      minLength: 6,
      maxLength: 8,
      min: 2,
      max: 3,
      join: " ",
      formatter: capitalize,
    })
  );
  const [isLoading, setIsLoading] = useState(false);
  const [startDate, setStartDate] = useState<Date | null>(
    moment().add(1, "hour").toDate()
  );

  const [endDate, setEndDate] = useState<Date | null>(
    moment().hours(23).minutes(59).add(8, "day").toDate()
  );
  const [variant, setVariant] = useState<Variant>("full");
  const [instructorGender, setInstructorGender] =
    useState<InstructorGender>("varied");

  const [generateMultiple, setGenerateMultiple] = useState<boolean>(false);
  const [released, setReleased] = useState<boolean>(false);

  const [autoStart, setAutostart] = useState<boolean>(false);

  const [useRandomExams, setUseRandomExams] = useState(true);
  const [examIDs, setExamIDs] = useState<{ id: string; module: Module }[]>([]);

  const { exams } = useExams();
  const router = useRouter();

  const classrooms = useMemo(
    () => groups.filter((e) => e.entity?.id === entity),
    [entity, groups]
  );
  const allowedUsers = useMemo(
    () => users.filter((u) => mapBy(u.entities, "id").includes(entity || "")),
    [users, entity]
  );

  const userStudents = useMemo(
    () => allowedUsers.filter((x) => x.type === "student"),
    [allowedUsers]
  );
  const userTeachers = useMemo(
    () => allowedUsers.filter((x) => x.type === "teacher"),
    [allowedUsers]
  );

  const { rows: filteredStudentsRows, renderSearch: renderStudentSearch } =
    useListSearch([["name"], ["email"]], userStudents);
  const { rows: filteredTeachersRows, renderSearch: renderTeacherSearch } =
    useListSearch([["name"], ["email"]], userTeachers);

  const { items: studentRows, renderMinimal: renderStudentPagination } =
    usePagination(filteredStudentsRows, SIZE);
  const { items: teacherRows, renderMinimal: renderTeacherPagination } =
    usePagination(filteredTeachersRows, SIZE);

  useEffect(() => {
    setExamIDs((prev) =>
      prev.filter((x) => selectedModules.includes(x.module))
    );
  }, [selectedModules]);

  useEffect(() => {
    setAssignees([]);
    setTeachers([]);
  }, [entity]);

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

  const toggleAssignee = (user: User) => {
    setAssignees((prev) =>
      prev.includes(user.id)
        ? prev.filter((a) => a !== user.id)
        : [...prev, user.id]
    );
  };

  const toggleTeacher = (user: User) => {
    setTeachers((prev) =>
      prev.includes(user.id)
        ? prev.filter((a) => a !== user.id)
        : [...prev, user.id]
    );
  };

  const createAssignment = () => {
    setIsLoading(true);

    axios
      .post(`/api/assignments`, {
        assignees,
        name,
        startDate,
        examIDs: !useRandomExams ? examIDs : undefined,
        endDate,
        selectedModules,
        generateMultiple,
        entity,
        teachers,
        variant,
        instructorGender,
        released,
        autoStart,
      })
      .then((result) => {
        toast.success(
          `The assignment "${name}" has been created successfully!`
        );
        router.push(`/assignments/${result.data.id}`);
      })
      .catch((e) => {
        console.log(e);
        toast.error("Something went wrong, please try again later!");
      })
      .finally(() => setIsLoading(false));
  };

  return (
    <>
      <Head>
        <title>Create Assignment | EnCoach</title>
        <meta
          name="description"
          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
        />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <>
        <div className="flex flex-col gap-4">
          <div className="flex items-center gap-2">
            <Link
              href="/assignments"
              className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl"
            >
              <BsChevronLeft />
            </Link>
            <h2 className="font-bold text-2xl">Create Assignment</h2>
          </div>
          <Separator />
        </div>
        <div className="w-full flex flex-col gap-4">
          <section className="w-full grid -md:grid-cols-1 md:grid-cols-3 place-items-center -md:flex-col -md:items-center -md:gap-12 justify-between gap-8 mt-8 px-8">
            <div
              onClick={
                !selectedModules.includes("level")
                  ? () => toggleModule("reading")
                  : undefined
              }
              className={clsx(
                "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
                selectedModules.includes("reading")
                  ? "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-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
                <BsBook className="text-white w-7 h-7" />
              </div>
              <span className="ml-8 font-semibold">Reading</span>
              {!selectedModules.includes("reading") &&
                !selectedModules.includes("level") && (
                  <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
                )}
              {selectedModules.includes("level") && (
                <BsXCircle className="text-mti-red-light w-8 h-8" />
              )}
              {selectedModules.includes("reading") && (
                <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
              )}
            </div>
            <div
              onClick={
                !selectedModules.includes("level")
                  ? () => toggleModule("listening")
                  : undefined
              }
              className={clsx(
                "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
                selectedModules.includes("listening")
                  ? "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-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
                <BsHeadphones className="text-white w-7 h-7" />
              </div>
              <span className="ml-8 font-semibold">Listening</span>
              {!selectedModules.includes("listening") &&
                !selectedModules.includes("level") && (
                  <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
                )}
              {selectedModules.includes("level") && (
                <BsXCircle className="text-mti-red-light w-8 h-8" />
              )}
              {selectedModules.includes("listening") && (
                <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
              )}
            </div>
            <div
              onClick={
                (!selectedModules.includes("level") &&
                  selectedModules.length === 0) ||
                selectedModules.includes("level")
                  ? () => toggleModule("level")
                  : undefined
              }
              className={clsx(
                "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
                selectedModules.includes("level")
                  ? "border-mti-purple-light"
                  : "border-mti-gray-platinum"
              )}
            >
              <div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-level top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
                <BsClipboard className="text-white w-7 h-7" />
              </div>
              <span className="ml-8 font-semibold">Level</span>
              {!selectedModules.includes("level") &&
                selectedModules.length === 0 && (
                  <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
                )}
              {!selectedModules.includes("level") &&
                selectedModules.length > 0 && (
                  <BsXCircle className="text-mti-red-light w-8 h-8" />
                )}
              {selectedModules.includes("level") && (
                <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
              )}
            </div>
            <div
              onClick={
                !selectedModules.includes("level")
                  ? () => toggleModule("writing")
                  : undefined
              }
              className={clsx(
                "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
                selectedModules.includes("writing")
                  ? "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-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
                <BsPen className="text-white w-7 h-7" />
              </div>
              <span className="ml-8 font-semibold">Writing</span>
              {!selectedModules.includes("writing") &&
                !selectedModules.includes("level") && (
                  <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
                )}
              {selectedModules.includes("level") && (
                <BsXCircle className="text-mti-red-light w-8 h-8" />
              )}
              {selectedModules.includes("writing") && (
                <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
              )}
            </div>
            <div
              onClick={
                !selectedModules.includes("level")
                  ? () => toggleModule("speaking")
                  : undefined
              }
              className={clsx(
                "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
                selectedModules.includes("speaking")
                  ? "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-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
                <BsMegaphone className="text-white w-7 h-7" />
              </div>
              <span className="ml-8 font-semibold">Speaking</span>
              {!selectedModules.includes("speaking") &&
                !selectedModules.includes("level") && (
                  <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
                )}
              {selectedModules.includes("level") && (
                <BsXCircle className="text-mti-red-light w-8 h-8" />
              )}
              {selectedModules.includes("speaking") && (
                <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
              )}
            </div>
          </section>

          <div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
            <Input
              type="text"
              name="name"
              onChange={(e) => setName(e)}
              defaultValue={name}
              label="Assignment Name"
              required
            />
            <Select
              label="Entity"
              options={entities.map((e) => ({ value: e.id, label: e.label }))}
              onChange={(v) => setEntity(v ? v.value! : undefined)}
              defaultValue={{
                value: entities[0]?.id,
                label: entities[0]?.label,
              }}
            />
          </div>

          <div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
            <div className="flex flex-col gap-2">
              <label className="font-normal text-base text-mti-gray-dim">
                Limit Start Date *
              </label>
              <ReactDatePicker
                className={clsx(
                  "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
                  "hover:border-mti-purple tooltip z-10",
                  "transition duration-300 ease-in-out"
                )}
                popperClassName="!z-20"
                filterTime={(date) => moment(date).isSameOrAfter(new Date())}
                dateFormat="dd/MM/yyyy HH:mm"
                selected={startDate}
                showTimeSelect
                onChange={(date) => setStartDate(date)}
              />
            </div>
            <div className="flex flex-col gap-2">
              <label className="font-normal text-base text-mti-gray-dim">
                End Date *
              </label>
              <ReactDatePicker
                className={clsx(
                  "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
                  "hover:border-mti-purple tooltip z-10",
                  "transition duration-300 ease-in-out"
                )}
                popperClassName="!z-20"
                filterTime={(date) => moment(date).isAfter(startDate)}
                dateFormat="dd/MM/yyyy HH:mm"
                selected={endDate}
                showTimeSelect
                onChange={(date) => setEndDate(date)}
              />
            </div>
          </div>

          {selectedModules.includes("speaking") && (
            <div className="flex flex-col gap-3 w-full">
              <label className="font-normal text-base text-mti-gray-dim">
                Speaking Instructor&apos;s Gender
              </label>
              <Select
                value={{
                  value: instructorGender,
                  label: capitalize(instructorGender),
                }}
                onChange={(value) =>
                  value
                    ? setInstructorGender(value.value as InstructorGender)
                    : null
                }
                disabled={!selectedModules.includes("speaking")}
                options={[
                  { value: "male", label: "Male" },
                  { value: "female", label: "Female" },
                  { value: "varied", label: "Varied" },
                ]}
              />
            </div>
          )}

          {selectedModules.length > 0 && (
            <div className="flex flex-col gap-3 w-full">
              <Checkbox isChecked={useRandomExams} onChange={setUseRandomExams}>
                Random Exams
              </Checkbox>
              {!useRandomExams && (
                <div className="grid md:grid-cols-2 w-full gap-4">
                  {selectedModules.map((module) => (
                    <div key={module} className="flex flex-col gap-3 w-full">
                      <label className="font-normal text-base text-mti-gray-dim">
                        {capitalize(module)} Exam
                      </label>
                      <Select
                        value={{
                          value:
                            examIDs.find((e) => e.module === module)?.id ||
                            null,
                          label:
                            examIDs.find((e) => e.module === module)?.id || "",
                        }}
                        onChange={(value) =>
                          value
                            ? setExamIDs((prev) => [
                                ...prev.filter((x) => x.module !== module),
                                { id: value.value!, module },
                              ])
                            : setExamIDs((prev) =>
                                prev.filter((x) => x.module !== module)
                              )
                        }
                        options={exams
                          .filter((x) => !x.isDiagnostic && x.module === module)
                          .map((x) => ({ value: x.id, label: x.id }))}
                      />
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          <section className="w-full flex flex-col gap-4">
            <span className="font-semibold">
              Assignees ({assignees.length} selected)
            </span>
            <div className="grid grid-cols-5 gap-4">
              {classrooms.map((g) => (
                <button
                  key={g.id}
                  onClick={() => {
                    const groupStudentIds = users.reduce<string[]>((acc, u) => {
                      if (g.participants.includes(u.id)) {
                        acc.push(u.id);
                      }
                      return acc;
                    }, []);
                    if (groupStudentIds.every((u) => assignees.includes(u))) {
                      setAssignees((prev) =>
                        prev.filter((a) => !groupStudentIds.includes(a))
                      );
                    } else {
                      setAssignees((prev) => [
                        ...prev.filter((a) => !groupStudentIds.includes(a)),
                        ...groupStudentIds,
                      ]);
                    }
                  }}
                  className={clsx(
                    "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
                    "transition duration-300 ease-in-out",
                    users
                      .filter((u) => g.participants.includes(u.id))
                      .every((u) => assignees.includes(u.id)) &&
                      "!bg-mti-purple-light !text-white"
                  )}
                >
                  {g.name}
                </button>
              ))}
            </div>

            <div className="w-full flex items-center gap-4">
              {renderStudentSearch()}
              {renderStudentPagination()}
            </div>

            <div className="flex flex-wrap -md:justify-center gap-4">
              {studentRows.map((user) => (
                <div
                  onClick={() => toggleAssignee(user)}
                  className={clsx(
                    "p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
                    "transition ease-in-out duration-300",
                    assignees.includes(user.id)
                      ? "border-mti-purple"
                      : "border-mti-gray-platinum"
                  )}
                  key={user.id}
                >
                  <span className="flex flex-col gap-0 justify-center">
                    <span className="font-semibold">{user.name}</span>
                    <span className="text-sm opacity-80">{user.email}</span>
                  </span>
                  <ProgressBar
                    color="purple"
                    textClassName="!text-mti-black/80"
                    label={`Level ${calculateAverageLevel(user.levels)}`}
                    percentage={(calculateAverageLevel(user.levels) / 9) * 100}
                    className="h-6"
                  />
                  <span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
                    Groups:{" "}
                    {groups
                      .filter((g) => g.participants.includes(user.id))
                      .map((g) => g.name)
                      .join(", ")}
                  </span>
                </div>
              ))}
            </div>
          </section>

          {user.type !== "teacher" && (
            <section className="w-full flex flex-col gap-3">
              <span className="font-semibold">
                Teachers ({teachers.length} selected)
              </span>
              <div className="grid grid-cols-5 gap-4">
                {classrooms.map((g) => (
                  <button
                    key={g.id}
                    onClick={() => {
                      const groupStudentIds = users.reduce<string[]>(
                        (acc, u) => {
                          if (g.participants.includes(u.id)) {
                            acc.push(u.id);
                          }
                          return acc;
                        },
                        []
                      );
                      if (groupStudentIds.every((u) => teachers.includes(u))) {
                        setTeachers((prev) =>
                          prev.filter((a) => !groupStudentIds.includes(a))
                        );
                      } else {
                        setTeachers((prev) => [
                          ...prev.filter((a) => !groupStudentIds.includes(a)),
                          ...groupStudentIds,
                        ]);
                      }
                    }}
                    className={clsx(
                      "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
                      "transition duration-300 ease-in-out",
                      users
                        .filter((u) => g.participants.includes(u.id))
                        .every((u) => teachers.includes(u.id)) &&
                        "!bg-mti-purple-light !text-white"
                    )}
                  >
                    {g.name}
                  </button>
                ))}
              </div>

              <div className="w-full flex items-center gap-4">
                {renderTeacherSearch()}
                {renderTeacherPagination()}
              </div>

              <div className="flex flex-wrap -md:justify-center gap-4">
                {teacherRows.map((user) => (
                  <div
                    onClick={() => toggleTeacher(user)}
                    className={clsx(
                      "p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
                      "transition ease-in-out duration-300",
                      teachers.includes(user.id)
                        ? "border-mti-purple"
                        : "border-mti-gray-platinum"
                    )}
                    key={user.id}
                  >
                    <span className="flex flex-col gap-0 justify-center">
                      <span className="font-semibold">{user.name}</span>
                      <span className="text-sm opacity-80">{user.email}</span>
                    </span>
                    <span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
                      Groups:{" "}
                      {groups
                        .filter((g) => g.participants.includes(user.id))
                        .map((g) => g.name)
                        .join(", ")}
                    </span>
                  </div>
                ))}
              </div>
            </section>
          )}

          <div className="flex gap-4 w-full items-end">
            <Checkbox
              isChecked={variant === "full"}
              onChange={() =>
                setVariant((prev) => (prev === "full" ? "partial" : "full"))
              }
            >
              Full length exams
            </Checkbox>
            <Checkbox
              isChecked={generateMultiple}
              onChange={() => setGenerateMultiple((d) => !d)}
            >
              Generate different exams
            </Checkbox>
            <Checkbox
              isChecked={released}
              onChange={() => setReleased((d) => !d)}
            >
              Auto release results
            </Checkbox>
            <Checkbox
              isChecked={autoStart}
              onChange={() => setAutostart((d) => !d)}
            >
              Auto start exam
            </Checkbox>
          </div>
          <div className="flex gap-4 w-full justify-end">
            <Button
              className="w-full max-w-[200px]"
              variant="outline"
              onClick={() => router.push("/assignments")}
              disabled={isLoading}
              isLoading={isLoading}
            >
              Cancel
            </Button>

            <Button
              disabled={
                selectedModules.length === 0 ||
                !name ||
                !startDate ||
                !endDate ||
                !entity ||
                assignees.length === 0 ||
                (!useRandomExams && examIDs.length < selectedModules.length)
              }
              className="w-full max-w-[200px]"
              onClick={createAssignment}
              isLoading={isLoading}
            >
              Create
            </Button>
          </div>
        </div>
      </>
    </>
  );
}