/* eslint-disable @next/next/no-img-element */
import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select";
import Tooltip from "@/components/Low/Tooltip";
import { useListSearch } from "@/hooks/useListSearch";
import usePagination from "@/hooks/usePagination";
import { EntityWithRoles } from "@/interfaces/entity";
import { User } from "@/interfaces/user";
import { sessionOptions } from "@/lib/session";
import { USER_TYPE_LABELS } from "@/resources/user";
import { filterBy, mapBy, redirect, serialize } from "@/utils";
import { getEntitiesWithRoles } from "@/utils/entities.be";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import { getUserName, isAdmin } from "@/utils/users";
import { getEntitiesUsers } from "@/utils/users.be";
import axios from "axios";
import clsx from "clsx";
import { withIronSessionSsr } from "iron-session/next";
import moment from "moment";
import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { Divider } from "primereact/divider";
import { useEffect, useMemo, useState } from "react";
import {
  BsCheck,
  BsChevronLeft,
  BsClockFill,
  BsEnvelopeFill,
  BsStopwatchFill,
} from "react-icons/bs";
import { toast, ToastContainer } from "react-toastify";
import { requestUser } from "@/utils/api";
import { findAllowedEntities } from "@/utils/permissions";
import { capitalize } from "lodash";

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

  if (shouldRedirectHome(user)) return redirect("/");

  const entities = await getEntitiesWithRoles(
    isAdmin(user) ? undefined : mapBy(user.entities, "id")
  );
  const users = await getEntitiesUsers(
    mapBy(entities, "id"),
    {
      id: { $ne: user.id },
    },
    0,
    {
      _id: 0,
      id: 1,
      name: 1,
      email: 1,
      profilePicture: 1,
      type: 1,
      corporateInformation: 1,
      lastLogin: 1,
      subscriptionExpirationDate: 1,
    }
  );
  const allowedEntities = findAllowedEntities(
    user,
    entities,
    "create_classroom"
  );

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

interface Props {
  user: User;
  users: User[];
  entities: EntityWithRoles[];
}

export default function Home({ user, users, entities }: Props) {
  const [isLoading, setIsLoading] = useState(false);
  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
  const [name, setName] = useState("");
  const [entity, setEntity] = useState<string | undefined>(entities[0]?.id);

  const entityUsers = useMemo(
    () =>
      !entity
        ? users
        : users.filter((u) => mapBy(u.entities, "id").includes(entity)),
    [entity, users]
  );

  const { rows, renderSearch } = useListSearch<User>(
    [
      ["name"],
      ["type"],
      ["corporateInformation", "companyInformation", "name"],
    ],
    entityUsers
  );

  const { items, renderMinimal } = usePagination<User>(rows, 16);

  const router = useRouter();

  useEffect(() => setSelectedUsers([]), [entity]);

  const createGroup = () => {
    if (!name.trim()) return;
    if (!entity) return;
    if (
      !confirm(
        `Are you sure you want to create this group with ${selectedUsers.length} participants?`
      )
    )
      return;

    setIsLoading(true);

    axios
      .post<{ id: string }>(`/api/groups`, {
        name,
        participants: selectedUsers,
        admin: user.id,
        entity,
      })
      .then((result) => {
        toast.success("Your group has been created successfully!");
        router.replace(`/classrooms/${result.data.id}`);
      })
      .catch((e) => {
        console.error(e);
        toast.error("Something went wrong!");
      })
      .finally(() => setIsLoading(false));
  };

  const toggleUser = (u: User) =>
    setSelectedUsers((prev) =>
      prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]
    );

  return (
    <>
      <Head>
        <title>Create Group | 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>
      <ToastContainer />
      <>
        <section className="flex flex-col gap-0">
          <div className="flex gap-3 justify-between">
            <div className="flex items-center gap-2">
              <Link
                href="/classrooms"
                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 Classroom</h2>
            </div>
            <div className="flex items-center gap-4">
              <button
                onClick={createGroup}
                disabled={!name.trim() || !entity || isLoading}
                className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
              >
                <BsCheck />
                <span className="text-xs">Create Classroom</span>
              </button>
            </div>
          </div>
          <Divider />
          <div className="grid grid-cols-2 gap-4 place-items-end">
            <div className="flex flex-col gap-4 w-full">
              <span className="font-semibold text-xl">Classroom Name:</span>
              <Input
                name="name"
                onChange={setName}
                type="text"
                placeholder="Classroom A"
              />
            </div>
            <div className="flex flex-col gap-4 w-full">
              <span className="font-semibold text-xl">Entity:</span>
              <Select
                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>
          <Divider />
          <div className="flex items-center justify-between mb-4">
            <span className="font-semibold text-xl">
              Participants ({selectedUsers.length} selected):
            </span>
          </div>
          <div className="w-full flex items-center gap-4">
            {renderSearch()}
            {renderMinimal()}
          </div>
          <div className="flex items-center gap-2 mt-4">
            {["student", "teacher", "corporate"].map((type) => (
              <button
                key={type}
                onClick={() => {
                  const typeUsers = mapBy(
                    filterBy(entityUsers, "type", type),
                    "id"
                  );
                  if (typeUsers.every((u) => selectedUsers.includes(u))) {
                    setSelectedUsers((prev) =>
                      prev.filter((a) => !typeUsers.includes(a))
                    );
                  } else {
                    setSelectedUsers((prev) => [
                      ...prev.filter((a) => !typeUsers.includes(a)),
                      ...typeUsers,
                    ]);
                  }
                }}
                disabled={filterBy(entityUsers, "type", type).length === 0}
                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",
                  "disabled:grayscale disabled:hover:bg-mti-purple-ultralight disabled:hover:text-mti-purple disabled:cursor-not-allowed",
                  filterBy(entityUsers, "type", type).length > 0 &&
                    filterBy(entityUsers, "type", type).every((u) =>
                      selectedUsers.includes(u.id)
                    ) &&
                    "!bg-mti-purple-light !text-white"
                )}
              >
                {capitalize(type)}
              </button>
            ))}
          </div>
        </section>

        <section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {items.map((u) => (
            <button
              onClick={() => toggleUser(u)}
              disabled={isLoading}
              key={u.id}
              className={clsx(
                "p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
                "hover:border-mti-purple transition ease-in-out duration-300",
                selectedUsers.includes(u.id) && "border-mti-purple"
              )}
            >
              <div className="flex items-center gap-2">
                <div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
                  <img src={u.profilePicture} alt={u.name} />
                </div>
                <div className="flex flex-col">
                  <span className="font-semibold">{getUserName(u)}</span>
                  <span className="opacity-80 text-sm">
                    {USER_TYPE_LABELS[u.type]}
                  </span>
                </div>
              </div>

              <div className="flex flex-col gap-1">
                <span className="flex items-center gap-2">
                  <Tooltip tooltip="E-mail address">
                    <BsEnvelopeFill />
                  </Tooltip>
                  {u.email}
                </span>
                <span className="flex items-center gap-2">
                  <Tooltip tooltip="Expiration Date">
                    <BsStopwatchFill />
                  </Tooltip>
                  {u.subscriptionExpirationDate
                    ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY")
                    : "Unlimited"}
                </span>
                <span className="flex items-center gap-2">
                  <Tooltip tooltip="Last Login">
                    <BsClockFill />
                  </Tooltip>
                  {u.lastLogin
                    ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm")
                    : "N/A"}
                </span>
              </div>
            </button>
          ))}
        </section>
      </>
    </>
  );
}