/* 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 Layout from "@/components/High/Layout";
import { GroupWithUsers, User } from "@/interfaces/user";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import { getUserName, isAdmin } from "@/utils/users";
import { convertToUsers, getGroupsForUser } from "@/utils/groups.be";
import { countEntityUsers, getEntityUsers, getSpecificUsers, getUsers } from "@/utils/users.be";
import { checkAccess, findAllowedEntities, getTypesOfUser } from "@/utils/permissions";
import Link from "next/link";
import { uniq } from "lodash";
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 entitiesWithCount = await Promise.all(
		allowedEntities.map(async (e) => ({
			entity: e,
			count: await countEntityUsers(e.id, { type: { $in: ["student", "teacher", "corporate", "mastercorporate"] } }),
			users: await getEntityUsers(e.id, 5, { type: { $in: ["student", "teacher", "corporate", "mastercorporate"] } })
		})),
	);

	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 />
			<Layout user={user} className="!gap-4">
				<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>
			</Layout>
		</>
	);
}
