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, EditableWorkflowStep } from "@/interfaces/approval.workflow";
import { Entity } from "@/interfaces/entity";
import { CorporateUser, 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 { uuidv4 } from "@firebase/util";
import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
import { withIronSessionSsr } from "iron-session/next";
import Head from "next/head";
import Link from "next/link";
import { useEffect, useState } from "react";
import { BsChevronLeft } from "react-icons/bs";
import { GrClearOption } from "react-icons/gr";
import { ToastContainer } from "react-toastify";
import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally

export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
    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 { id } = params as { id: string };

    // replace later with await getApprovalWorkflow(id).
    const approvalWorkflowsDataAsWorkflows = approvalWorkflowsData as ApprovalWorkflow[];
    const workflow: ApprovalWorkflow | undefined = approvalWorkflowsDataAsWorkflows.find(workflow => workflow.id === id);

    if (!workflow)
        return redirect("/approval-workflows")

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

    return {
        props: serialize({
            user,
            workflow,
            userEntitiesWithLabel,
            userEntitiesTeachers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "teacher" }) as TeacherUser[],
            userEntitiesCorporates: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "corporate" }) as CorporateUser[],
        }),
    };
}, sessionOptions);

interface Props {
    user: User,
    workflow: ApprovalWorkflow,
    userEntitiesWithLabel: Entity[],
    userEntitiesTeachers: TeacherUser[],
    userEntitiesCorporates: CorporateUser[],
}

export default function Home({ user, workflow, userEntitiesWithLabel, userEntitiesTeachers, userEntitiesCorporates }: Props) {
    const [cloneWorkflow, setCloneWorkflow] = useState<EditableApprovalWorkflow | null>(null);
    const [entityId, setEntityId] = useState<string | null | undefined>(workflow.entityId);
    const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
    const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);

    useEffect(() => {
        if (entityId) {
            setEntityTeachers(
                userEntitiesTeachers.filter(teacher =>
                    teacher.entities.some(entity => entity.id === entityId)
                )
            );
            setEntityCorporates(
                userEntitiesCorporates.filter(corporate =>
                    corporate.entities.some(entity => entity.id === entityId)
                )
            );
        } else {
            setEntityTeachers([]);
            setEntityCorporates([]);
        }
    }, [entityId, userEntitiesTeachers, userEntitiesCorporates]);

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

    useEffect(() => {
        const editableSteps: EditableWorkflowStep[] = workflow.steps.map(step => ({
            key: step.stepNumber + 999, // just making sure they are unique because new steps that users add will have key=3 key=4 etc
            stepType: step.stepType,
            stepNumber: step.stepNumber,
            assignees: step.assignees.map(id => id),
            firstStep: step.firstStep || false,
            finalStep: step.finalStep || false,
            onDelete: undefined,
        }));

        const editableWorkflow: EditableApprovalWorkflow = {
            id: uuidv4(),
            name: workflow.name,
            entityId: workflow.entityId,
            requester: user.id,
            startDate: Date.now(),
            modules: workflow.modules,
            status: "pending",
            steps: editableSteps,
        };

        setCloneWorkflow(editableWorkflow);
    }, []);

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
    
        if (!cloneWorkflow) return;
    
        const filteredWorkflow = {
            ...cloneWorkflow,
            steps: cloneWorkflow.steps.map(step => ({
                ...step,
                assignees: step.assignees.filter(assignee => assignee !== null && assignee !== undefined)
            }))
        };
    
        console.log("Form submitted! Filtered Workflow:", filteredWorkflow);
    };

    const onWorkflowChange = (wf: EditableApprovalWorkflow) => {
        setCloneWorkflow(wf);
    }

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

    const handleResetWorkflow = () => {
        if (!confirm("This action will reset all the fields in this workflow. Are you sure you want to proceed?")) return;
        const newId = uuidv4();
        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] },
            ],
        };
        setCloneWorkflow(newWorkflow);
    }

    return (
        <>
            <Head>
                <title> Clone Workflow | 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="gap-6">
                    <section 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">Clone Workflow</h1>
                    </section>

                    <form onSubmit={handleSubmit}>
                        {cloneWorkflow && (
                            <>
                                <div className="mb-8 flex flex-row gap-6 items-end">
                                    <Input
                                        label="Name:"
                                        type="text"
                                        name={cloneWorkflow.name}
                                        placeholder="Enter workflow name"
                                        value={cloneWorkflow.name}
                                        onChange={(updatedName) => {
                                            const updatedWorkflow = {
                                                ...cloneWorkflow,
                                                name: updatedName,
                                            };
                                            onWorkflowChange(updatedWorkflow);
                                        }}
                                    />
                                    <Select
                                        label="Entity:"
                                        options={ENTITY_OPTIONS}
                                        value={
                                            cloneWorkflow.entityId === ""
                                                ? null
                                                : ENTITY_OPTIONS.find(option => option.value === cloneWorkflow.entityId)
                                        }
                                        onChange={(selectedEntity) => {
                                            if (cloneWorkflow.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(cloneWorkflow, selectedEntity.value);
                                            }
                                        }}
                                        isClearable
                                        placeholder="Enter workflow entity"
                                    />
                                    <Button
                                        color="red"
                                        variant="solid"
                                        onClick={handleResetWorkflow}
                                        type="button"
                                        className="min-w-fit h-[72px] text-lg font-medium flex items-center gap-2 text-left"
                                    >
                                        Clear Workflow
                                        <GrClearOption className="size-6" />
                                    </Button>
                                </div>

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