import Layout from "@/components/High/Layout";
import useUser from "@/hooks/useUser";
import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
import { sessionOptions } from "@/lib/session";
import { redirect } from "@/utils";
import { requestUser } from "@/utils/api";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import { AnimatePresence, Reorder } from "framer-motion";
import { withIronSessionSsr } from "iron-session/next";
import Head from "next/head";
import Link from "next/link";
import { BsChevronLeft } from "react-icons/bs";
import { FaRegCheckCircle } from "react-icons/fa";
import { IoIosAddCircleOutline } from "react-icons/io";
import { ToastContainer } from "react-toastify";


import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally

import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
import Status from "@/components/ApprovalWorkflows/Status";
import WorkflowStep, { StepType } from "@/components/ApprovalWorkflows/WorkflowStep";
import Button from "@/components/Low/Button";
import { useState } from "react";

interface Step {
    stepType: StepType;
    firstStep?: boolean;
    finalStep?: boolean;
    key: number;
}

// Variants for animating steps when they are added/removed
const itemVariants = {
    initial: { opacity: 0, y: -20 },
    animate: { opacity: 1, y: 0 },
    exit: { opacity: 0, x: 20 },
};

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 };

    const approvalWorkflow = approvalWorkflowsData.find(workflow => workflow.id === id);       // await getApprovalWorkflow(id);
    if (!approvalWorkflow)
        return redirect("/approval-workflows")

    return {
        props: { user, approvalWorkflow },
    };
}, sessionOptions);

export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalWorkflow }) {
    const { user } = useUser({ redirectTo: "/login" });

    const [selectedButton, setSelectedButton] = useState<"forms" | "progress">("forms");

    const [steps, setSteps] = useState<Step[]>([
        { stepType: "form-intake", firstStep: true, key: 1 },
        { stepType: "approval-by", finalStep: true, key: 2 },
    ]);
    const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
    const firstStep = steps[0];
    const lastStep = steps[steps.length - 1];
    const middleSteps = steps.slice(1, steps.length - 1);

    const addStep = () => {
        setSteps((prev) => {
            const newStep: Step = {
                key: stepCounter,
                stepType: "approval-by",
            };
            setStepCounter((count) => count + 1);

            return [...prev.slice(0, -1), newStep, lastStep];
        });
    };

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        // Handle form submission logic
        console.log("Form submitted!", steps);
    };

    const handleDelete = (key: number) => {
        setSteps((prev) => prev.filter((step) => step.key !== key));
    };

    const handleReorder = (newOrder: Step[]) => {
        const firstIndex = newOrder.findIndex((s) => s.firstStep);
        if (firstIndex !== -1 && firstIndex !== 0) {
            const [first] = newOrder.splice(firstIndex, 1);
            newOrder.unshift(first);
        }

        const finalIndex = newOrder.findIndex((s) => s.finalStep);
        if (finalIndex !== -1 && finalIndex !== newOrder.length - 1) {
            const [final] = newOrder.splice(finalIndex, 1);
            newOrder.push(final);
        }

        setSteps(newOrder);
    };

    return (
        <>
            <Head>
                <title> {approvalWorkflow.name} | 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 flex-col gap-0">
                        <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">{approvalWorkflow.name}</h1>
                        </div>
                    </section>
                    <section className="flex flex-col gap-6">
                        <div className="flex flex-row gap-6">
                            <RequestedBy
                                name="Prof. Álvaro Dória"
                                profileImage="/blue-stock-photo.png"
                            />
                            <StartedOn
                                date="15/12/2024"
                            />
                            <Status
                                status="pending"
                            />
                        </div>
                        <div className="flex flex-row gap-6">
                            <Button
                                color="purple"
                                variant={selectedButton === "forms" ? "solid" : "outline"}
                                onClick={() => setSelectedButton("forms")}
                                className="transition-all duration-300 w-56 text-lg font-medium"
                            >
                                Forms
                            </Button>
                            <Button
                                color="purple"
                                variant={selectedButton === "progress" ? "solid" : "outline"}
                                onClick={() => setSelectedButton("progress")}
                                className="transition-all duration-300 w-56 text-lg font-medium"
                            >
                                Progress
                            </Button>
                        </div>

                        <form onSubmit={handleSubmit}>
                            <div className="flex flex-col gap-6">
                                <Button
                                    color="purple"
                                    variant="solid"
                                    onClick={addStep}
                                    className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
                                >
                                    <IoIosAddCircleOutline className="size-6" />
                                    Add Step
                                </Button>

                                <Reorder.Group
                                    axis="y"
                                    values={steps}
                                    onReorder={handleReorder}
                                    className="flex flex-col gap-4"
                                >

                                    <AnimatePresence>
                                        {steps.map((step, index) => (
                                            <Reorder.Item
                                                key={step.key}
                                                value={step}
                                                variants={itemVariants}
                                                initial="initial"
                                                animate="animate"
                                                exit="exit"
                                                transition={{ duration: 0.3 }}
                                                layout
                                                drag={!(step.firstStep || step.finalStep)}
                                            >
                                                <WorkflowStep
                                                    editView
                                                    stepNumber={index + 1}
                                                    stepType={step.stepType}
                                                    requestedBy="Prof. Foo"
                                                    finalStep={step.finalStep}
                                                    onDelete={() => handleDelete(step.key)}
                                                />
                                                {step.finalStep &&
                                                    <Button
                                                        type="submit"
                                                        color="purple"
                                                        variant="solid"
                                                        className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mt-7"
                                                    >
                                                        <FaRegCheckCircle className="size-5" />
                                                        Confirm Exam Workflow Pipeline
                                                    </Button>
                                                }
                                            </Reorder.Item>
                                        ))}

                                    </AnimatePresence>


                                </Reorder.Group>
                            </div>
                        </form>
                    </section>
                </Layout>
            )}
        </>
    );
}
