/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import { withIronSessionSsr } from "iron-session/next";
import { sessionOptions } from "@/lib/session";
import { ToastContainer } from "react-toastify";
import { User } from "@/interfaces/user";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import { getUserName, isAdmin } from "@/utils/users";
import { countEntityUsers, getEntityUsers } from "@/utils/users.be";
import { findAllowedEntities } from "@/utils/permissions";
import Link from "next/link";
import { BsBank, BsPlus } from "react-icons/bs";
import CardList from "@/components/High/CardList";
import { getEntitiesWithRoles } from "@/utils/entities.be";
import { EntityWithRoles } from "@/interfaces/entity";
import Separator from "@/components/Low/Separator";
import { requestUser } from "@/utils/api";
import { mapBy, redirect, serialize } from "@/utils";

type EntitiesWithCount = {
  entity: EntityWithRoles;
  users: User[];
  count: number;
};

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

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

  const entityIDs = mapBy(user.entities, "id");
  const entities = await getEntitiesWithRoles(
    ["admin", "developer"].includes(user.type) ? undefined : entityIDs
  );
  const allowedEntities = findAllowedEntities(user, entities, "view_entities");

  const [counts, users] = await Promise.all([
    await Promise.all(
      allowedEntities.map(async (e) =>
        countEntityUsers(e.id, {
          type: { $in: ["student", "teacher", "corporate", "mastercorporate"] },
        })
      )
    ),
    await Promise.all(
      allowedEntities.map(async (e) =>
        getEntityUsers(
          e.id,
          5,
          {
            type: {
              $in: ["student", "teacher", "corporate", "mastercorporate"],
            },
          },
          { name: 1 }
        )
      )
    ),
  ]);

  const entitiesWithCount = allowedEntities.map<{
    entity: EntityWithRoles;
    users: User[];
    count: number;
  }>((e, i) => ({ entity: e, users: users[i], count: counts[i] }));

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

const SEARCH_FIELDS: string[][] = [["entity", "label"]];

interface Props {
  user: User;
  entities: EntitiesWithCount[];
}
export default function Home({ user, entities }: Props) {
  const renderCard = ({ entity, users, count }: EntitiesWithCount) => (
    <Link
      href={`/entities/${entity.id}`}
      key={entity.id}
      className="p-4 border-2 border-mti-purple-light/20 rounded-xl flex gap-2 justify-between hover:border-mti-purple group transition ease-in-out duration-300 text-left cursor-pointer"
    >
      <div className="flex flex-col gap-2 w-full">
        <span className="flex items-center gap-1">
          <span className="bg-mti-purple text-white font-semibold px-2">
            Entity
          </span>
          {entity.label}
        </span>
        <span className="flex items-center gap-1">
          <span className="bg-mti-purple text-white font-semibold px-2">
            Members
          </span>
          <span className="bg-mti-purple-light/50 px-2">
            {count}
            {isAdmin(user) && ` / ${entity.licenses || 0}`}
          </span>
        </span>
        <span>
          {users.map(getUserName).join(", ")}{" "}
          {count > 5 ? (
            <span className="opacity-50 bg-mti-purple-light/50 px-1 text-sm">
              and {count - 5} more
            </span>
          ) : (
            ""
          )}
        </span>
      </div>
      <div className="w-fit">
        <BsBank className="w-full h-20 -translate-y-[15%] group-hover:text-mti-purple transition ease-in-out duration-300" />
      </div>
    </Link>
  );

  const firstCard = () => (
    <Link
      href={`/entities/create`}
      className="p-4 border-2 hover:text-mti-purple rounded-xl flex flex-col items-center justify-center gap-0 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer"
    >
      <BsPlus size={40} />
      <span className="font-semibold">Create Entity</span>
    </Link>
  );

  return (
    <>
      <Head>
        <title>Entities | 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-4 w-full h-full">
          <div className="flex flex-col gap-4">
            <h2 className="font-bold text-2xl">Entities</h2>
            <Separator />
          </div>

          <CardList<EntitiesWithCount>
            list={entities}
            searchFields={SEARCH_FIELDS}
            renderCard={renderCard}
            firstCard={
              ["admin", "developer"].includes(user.type) ? firstCard : undefined
            }
          />
        </section>
      </>
    </>
  );
}
