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, motion } 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 {
    stepNumber: number;
    stepType: StepType;
    finalStep?: boolean;
    key: number;
}

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[]>([
        { stepNumber: 1, stepType: "form-intake", key: 1 },
        { stepNumber: 2, stepType: "approval-by", finalStep: true, key: 2 },
    ]);
    const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations

    const addStep = () => {
        setSteps((prev) => {
            const nonFinalSteps = prev.slice(0, -1);
            const finalStep = prev[prev.length - 1];
            const newStep: Step = { stepNumber: finalStep.stepNumber, stepType: "approval-by", key: stepCounter };

            const updatedFinalStep = { ...finalStep, stepNumber: finalStep.stepNumber + 1 };

            setStepCounter((prev) => prev + 1); //update counter

            return [...nonFinalSteps, newStep, updatedFinalStep];
        });
    };

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

    const handleDelete = (index: number) => {
        setSteps((prev) => {
            const updatedSteps = prev.filter((_, i) => i !== index);

            const recalculatedSteps = updatedSteps.map((step, idx) => ({
                ...step,
                stepNumber: idx + 1,
            }));

            return recalculatedSteps;
        });
    };

    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>
                                <AnimatePresence>
                                    {steps.map((step, index) => (
                                        <motion.div
                                            key={step.key} // Use step.stepNumber as the unique key
                                            initial={{ opacity: 0, y: -20 }} // Animation on enter
                                            animate={{ opacity: 1, y: 0 }}   // Animation on update
                                            exit={{ opacity: 0, x: 20 }}     // Animation on exit
                                            transition={{ duration: 0.3 }}   // Animation duration
                                        >
                                            <WorkflowStep
                                                editView
                                                stepNumber={step.stepNumber}
                                                finalStep={step.finalStep}
                                                stepType={step.stepType}
                                                requestedBy="Prof. foo"
                                                onDelete={() => handleDelete(index)} // Pass index for deletion
                                            />
                                        </motion.div>
                                    ))}
                                </AnimatePresence>

                                <Button
                                    type="submit"
                                    color="purple"
                                    variant="solid"
                                    className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
                                >
                                    <FaRegCheckCircle className="size-5" />
                                    Confirm Exam Workflow Pipeline
                                </Button>
                            </div>
                        </form>
                    </section>
                </Layout>
            )}
        </>
    );
}
