import Tip from "@/components/ApprovalWorkflows/Tip";
import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
import Layout from "@/components/High/Layout";
import Button from "@/components/Low/Button";
import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select";
import { ApprovalWorkflow, EditableApprovalWorkflow } from "@/interfaces/approval.workflow";
import { Entity } from "@/interfaces/entity";
import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User } from "@/interfaces/user";
import { sessionOptions } from "@/lib/session";
import { redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api";
import { getEntities } from "@/utils/entities.be";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import { getEntitiesUsers } from "@/utils/users.be";
import axios from "axios";
import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
import { withIronSessionSsr } from "iron-session/next";
import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { BsChevronLeft, BsTrash } from "react-icons/bs";
import { MdFormatListBulletedAdd } from "react-icons/md";
import { toast, ToastContainer } from "react-toastify";
import { v4 as uuidv4 } from 'uuid';

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

    if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
        return redirect("/")

    const userEntitiesWithLabel = await getEntities(user.entities.map(entity => entity.id));

    return {
        props: serialize({
            user,
            userEntitiesWithLabel,
            userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: {$in: ["teacher", "corporate", "mastercorporate", "developer"]} }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
        }),
    };
}, sessionOptions);

interface Props {
    user: User,
    userEntitiesWithLabel: Entity[],
    userEntitiesApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
}

export default function Home({ user, userEntitiesWithLabel, userEntitiesApprovers }: Props) {
    const [workflows, setWorkflows] = useState<EditableApprovalWorkflow[]>([]);
    const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | undefined>(undefined);
    const [entityId, setEntityId] = useState<string | null | undefined>(null);
    const [entityApprovers, setEntityApprovers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
    const [isAdding, setIsAdding] = useState<boolean>(false); // used to temporary timeout new workflow button. With animations, clicking too fast might cause state inconsistencies between renders.
    const [isLoading, setIsLoading] = useState<boolean>(false);
    const [isRedirecting, setIsRedirecting] = useState<boolean>(false);

    const router = useRouter();

    useEffect(() => {
        if (entityId) {
            setEntityApprovers(
                userEntitiesApprovers.filter(approver =>
                    approver.entities.some(entity => entity.id === entityId)
                )
            );
        } else {
            setEntityApprovers([]);
        }
    }, [entityId, userEntitiesApprovers]);

    const currentWorkflow = workflows.find(wf => wf.id === selectedWorkflowId);

    const ENTITY_OPTIONS = userEntitiesWithLabel.map(entity => ({
        label: entity.label,
        value: entity.id,
        filter: (x: EditableApprovalWorkflow) => x.entityId === entity.id,
    }));

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        setIsLoading(true);

        if (workflows.length === 0) {
            setIsLoading(false);
        }

        const filteredWorkflows: ApprovalWorkflow[] = workflows.map(workflow => ({
            ...workflow,
            steps: workflow.steps.map(step => ({
                ...step,
                currentStep: step.stepNumber === 1 ? true : false,
                completed: false,
                assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
            }))
        }));

        axios
            .post(`/api/approval-workflows/create`, filteredWorkflows)
            .then(() => {
                toast.success("Approval Workflows created successfully.");
                setIsRedirecting(true);
                setTimeout(() => {
                    router.push("/approval-workflows");
                }, 2000);
            })
            .catch((reason) => {
                if (reason.response.status === 401) {
                    toast.error("Not logged in!");
                    return router.push("/login");
                }
                if (reason.response.status === 403) {
                    toast.error("You do not have permission to create Approval Workflows!");
                    return router.push("/approval-workflows");
                }
                toast.error("Something went wrong, please try again later.");
                setIsLoading(false);
                return;
            })

        console.log("Form submitted! Filtered Values:", filteredWorkflows);
    };

    const handleAddNewWorkflow = () => {
        if (isAdding) return;
        setIsAdding(true);

        const newId = uuidv4(); // this id is only used in UI. it is ommited on submission to DB and lets mongo handle unique id.
        const newWorkflow: EditableApprovalWorkflow = {
            id: newId,
            name: "",
            entityId: "",
            modules: [],
            requester: user.id,
            startDate: Date.now(),
            status: "pending",
            steps: [
                { key: 9998, stepType: "form-intake", stepNumber: 1, firstStep: true, finalStep: false, assignees: [null] },
                { key: 9999, stepType: "approval-by", stepNumber: 2, firstStep: false, finalStep: true, assignees: [null] },
            ],
        };
        setWorkflows((prev) => [...prev, newWorkflow]);
        handleSelectWorkflow(newId);

        setTimeout(() => setIsAdding(false), 300);
    };

    const onWorkflowChange = (updatedWorkflow: EditableApprovalWorkflow) => {
        setWorkflows(prev =>
            prev.map(wf => (wf.id === updatedWorkflow.id ? updatedWorkflow : wf))
        );
    }

    const handleSelectWorkflow = (id: string | undefined) => {
        setSelectedWorkflowId(id);
        const selectedWorkflow = workflows.find(wf => wf.id === id);
        if (selectedWorkflow) {
            setEntityId(selectedWorkflow.entityId || null);
        } else {
            setEntityId(null);
        }
    };

    const handleDeleteWorkflow = (id: string) => {
        if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;

        const updatedWorkflows = workflows.filter(wf => wf.id !== id);

        setWorkflows(updatedWorkflows);

        if (selectedWorkflowId === id) {
            handleSelectWorkflow(updatedWorkflows.find(wf => wf.id)?.id);
        }
    };

    const handleEntityChange = (wf: EditableApprovalWorkflow, entityId: string) => {
        const updatedWorkflow = {
            ...wf,
            entityId: entityId,
            steps: wf.steps.map(step => ({
                ...step,
                assignees: step.assignees.map(() => null)
            }))
        }
        onWorkflowChange(updatedWorkflow);
    }

    return (
        <>
            <Head>
                <title> Configure Workflows | 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 />
            {user && (
                <Layout user={user} className="flex flex-col gap-6">
                    <section className="flex flex-col">
                        <div className="flex items-center gap-2">
                            <Link
                                href="/approval-workflows"
                                className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
                                <BsChevronLeft />
                            </Link>
                            <h1 className="text-2xl font-semibold">{"Configure Approval Workflows"}</h1>
                        </div>
                    </section>

                    <section className="flex flex-row gap-6">

                        <Button
                            color="purple"
                            variant="solid"
                            onClick={handleAddNewWorkflow}
                            className="min-w-fit max-h-fit text-lg font-medium flex items-center gap-2 text-left"
                        >
                            <MdFormatListBulletedAdd className="size-6" />
                            Add New Workflow
                        </Button>

                        {workflows.length !== 0 && <div className="bg-gray-300 w-[1px]"></div>}

                        <div className="flex flex-wrap gap-2">
                            {workflows.map((workflow) => (
                                <Button
                                    key={workflow.id}
                                    color="purple"
                                    variant={
                                        selectedWorkflowId === workflow.id
                                            ? "solid"
                                            : "outline"
                                    }
                                    onClick={() => handleSelectWorkflow(workflow.id)}
                                    className="min-w-fit text-lg font-medium flex items-center gap-2 text-left"
                                >
                                    {workflow.name.trim() === "" ? "Workflow" : workflow.name}
                                </Button>

                            ))}
                        </div>
                    </section>

                    <form onSubmit={handleSubmit}>
                        {currentWorkflow && (
                            <>
                                <div className="mb-8 flex flex-row gap-6 items-end">
                                    <Input
                                        label="Name:"
                                        type="text"
                                        name={currentWorkflow.name}
                                        placeholder="Enter workflow name"
                                        value={currentWorkflow.name}
                                        onChange={(updatedName) => {
                                            const updatedWorkflow = {
                                                ...currentWorkflow,
                                                name: updatedName,
                                            };
                                            onWorkflowChange(updatedWorkflow);
                                        }}
                                    />
                                    <Select
                                        label="Entity:"
                                        options={ENTITY_OPTIONS}
                                        value={
                                            currentWorkflow.entityId === ""
                                                ? null
                                                : ENTITY_OPTIONS.find(option => option.value === currentWorkflow.entityId)
                                        }
                                        onChange={(selectedEntity) => {
                                            if (currentWorkflow.entityId) {
                                                if (!confirm("Clearing or changing entity will clear all the assignees for all steps in this workflow. Are you sure you want to proceed?")) return;
                                            }
                                            if (selectedEntity?.value) {
                                                setEntityId(selectedEntity.value);
                                                handleEntityChange(currentWorkflow, selectedEntity.value);
                                            }
                                        }}
                                        isClearable
                                        placeholder="Enter workflow entity"
                                    />
                                    <Button
                                        color="red"
                                        variant="solid"
                                        onClick={() => handleDeleteWorkflow(currentWorkflow.id)}
                                        type="button"
                                        className="min-w-fit h-[72px] text-lg font-medium flex items-center gap-2 text-left"
                                    >
                                        Delete Workflow
                                        <BsTrash className="size-6" />
                                    </Button>
                                </div>

                                <AnimatePresence mode="wait">
                                    <LayoutGroup key={currentWorkflow.id}>
                                        <motion.div
                                            key="form"
                                            initial={{ opacity: 0, y: -30 }}
                                            animate={{ opacity: 1, y: 0 }}
                                            exit={{ opacity: 0, x: 60 }}
                                            transition={{ duration: 0.20 }}
                                        >
                                            {(!currentWorkflow.name || !currentWorkflow.entityId) && (
                                                <Tip text="Please fill in workflow name and associated entity to start configuring workflow." />
                                            )}
                                            <WorkflowForm
                                                workflow={currentWorkflow}
                                                onWorkflowChange={onWorkflowChange}
                                                entityApprovers={entityApprovers}
                                                isLoading={isLoading}
                                                isRedirecting={isRedirecting}
                                            />
                                        </motion.div>
                                    </LayoutGroup>
                                </AnimatePresence>
                            </>
                        )}
                    </form>
                </Layout>
            )}
        </>
    );
}
