import React, { ReactNode, useEffect, useState } from "react";
import ConfirmationModal from "../../UI/Modal/ActionsModal/ConfirmationModal";
import isEqual from "lodash/isEqual";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import CustomFormSection from "../../UI/Forms/CustomFormSection/CustomFormSection";
import CustomLabel from "../../UI/Forms/CustomLabel/CustomLabel";
import CustomDatePicker from "../../UI/Forms/CustomDateTimePicker/CustomDatePicker";
import dayjs, { Dayjs } from "dayjs";
import Add from "../../../assets/images/plus_small.svg";
import Remove from "../../../assets/images/minus_small.svg";
import CustomTextField from "../../UI/Forms/CustomTextField/CustomTextField";
import useLoading from "../../../hooks/useLoading";
import {WithRule, WithRuleBoolean} from "../../HOC/WithRule";
import {WorkPackage} from "./RescomProjectsList/ProjectsList";
import CustomTextArea from "../../UI/Forms/CustomTextArea/CustomTextArea";



type EditWorkPackagesModalProps = {
    children?: ReactNode;
    close: () => void;
    editWorkPackages: (workPackages: WorkPackage[]) => void;
    oldWorkPackages: WorkPackage[];

    projectCode:string | number
    mode?: 'edit' | 'view'
};

const EditWorkPackagesModal = ({
                                   editWorkPackages,
                                   projectCode='',
                                   mode='edit',
                                   close,
                                   oldWorkPackages,
                               }: EditWorkPackagesModalProps) => {
    const [loading, setIsLoading] = useLoading(false);
    const [workPackages, setWorkPackages] = useState<WorkPackage[]>(
        oldWorkPackages.length > 0 ? oldWorkPackages : []
    );

    useEffect(() => {
        setWorkPackages(oldWorkPackages.length > 0 ? oldWorkPackages : []);
    }, [oldWorkPackages]);

    const lastWorkPackageIndex = workPackages.length - 1;

    const addWorkPackage = () => {
        setIsLoading(true);
        setWorkPackages((prev) => [
            ...prev,
            { title: "", description: "", fromDate: dayjs(), toDate: dayjs() }
        ]);
        setIsLoading(false);
    };

    const removeWorkPackage = (indexToRemove: number) => {
        setIsLoading(true);
        setWorkPackages((prev) => prev.filter((_, i) => i !== indexToRemove));
        setIsLoading(false);
    };

    const updateWorkPackage = (index: number, field: keyof WorkPackage, value: any) => {
        setWorkPackages((prev) =>
            prev.map((s, i) => (i === index ? { ...s, [field]: value } : s))
        );
    };

    // ---------------------------
    // Submit button logic
    // ---------------------------

    /**
     * Disable submit if:
     * 1️⃣ Nothing changed compared to oldSnapshots
     * 2️⃣ OR there are partially filled snapshots (title/date missing) AND at least one snapshot exists
     *
     * Notes:
     * - Removing the last snapshot will leave an empty row.
     * - Since oldSnapshots had content, `isEqual` is false → submit enabled.
     * - Adding a new snapshot disables submit until fields are filled.
     */
    const isDisabled =
        isEqual(oldWorkPackages, workPackages) ||
        (workPackages.some((s) => s.title.trim() === "") &&
            // only disable if the row is a newly added incomplete snapshot or partially filled
            workPackages.length > 0 && !(workPackages.length === 1 && oldWorkPackages.length === 1 && oldWorkPackages[0] !== undefined)
        );

    const canEditWorkPackages = WithRuleBoolean( "work_packages") && mode=='edit';
    const canEditWorkPackagesReverse = !canEditWorkPackages
    return (
        <ConfirmationModal
            onClose={close}
            title={(canEditWorkPackages ?'Ορισμός' : 'Προβολή') + ' Πακέτων Εργασίας'}
            text={`
${canEditWorkPackagesReverse
                ? `Παρακάτω βλέπετε τα Πακέτα Εργασίας του έργου ${projectCode}`
                : `Παρακάτω διαμορφώνετε και βλέπετε τα Πακέτα Εργασίας για το έργο ${projectCode}.`}
`}
            modalAction={() => {
                // Keep WorkPackage shape intact for editWorkPackages
                const payload = workPackages.map(wp => ({
                    ...(wp.id ? { id: wp.id } : {}), // preserve id if exists
                    title: wp.title,
                    description: wp.description,
                    fromDate: wp.fromDate,
                    toDate: wp.toDate,
                }));

                editWorkPackages(payload);
            }}
            className={"edit-workpackages"}
            FormButtonCancelText={"ΑΚΥΡΩΣΗ"}
            FormButtonSubmitText={"ΑΠΟΘΗΚΕΥΣΗ"}
            isDisabled={isDisabled || canEditWorkPackagesReverse}
            jokerProp={canEditWorkPackagesReverse}
        >
            <h5 className={'text-danger d-flex justify-content-center'}>Προσοχή: εάν αφαιρέσετε Πακέτο Εργασίας που συνδέεται με κάποια σύμβαση, θα χαθεί η συνδεδεμένη πληροφορία</h5>
            <div className={"form mb-6"}>
                <CustomFormSection
                    styles={{
                        overflowY: "auto",
                        overflowX: "hidden",
                        height: "100%",
                        maxHeight: "277px",
                    }}
                    theme={"default"}
                >
                    {workPackages.length === 0 ? (
                        // ✅ Show only ADD button
                        <WithRule target="work_packages">
                            <div className="d-flex justify-content-center">
                                <button
                                    disabled={loading}
                                    type="button"
                                    className="randevouz-buttons"
                                    onClick={addWorkPackage}
                                >
                                    <img
                                        style={{ filter: "var(--svg-default)" }}
                                        src={Add}
                                        alt="add"
                                    />
                                </button>
                            </div>
                        </WithRule>
                    ) : (
                        // ✅ Existing rendering for snapshot rows
                        workPackages.map((workPackage, index) => (
                            <div
                                className={`row gy-5 gx-5 ${
                                    index < workPackages.length - 1 ? "mb-4" : ""
                                }`}
                                key={index}
                            >
                                <div className="col-5">
                                    <CustomLabel req={true}>ΤΙΤΛΟΣ</CustomLabel>
                                    <CustomTextField
                                        readOnly={canEditWorkPackagesReverse}
                                        id={`work_package_title_${index}`}
                                        value={workPackage.title}
                                        onChange={(value: string) => {
                                            updateWorkPackage(
                                                index,
                                                "title",
                                                value
                                            );
                                        }}
                                    />
                                </div>

                                <LocalizationProvider dateAdapter={AdapterDayjs}>
                                    <div className="col-3">
                                        <CustomLabel>
                                            ΑΠΟ
                                        </CustomLabel>
                                        <CustomDatePicker
                                            value={workPackage.fromDate}
                                            onChange={(value: string) =>
                                                updateWorkPackage(index, "fromDate", value)
                                            }
                                        />

                                    </div>
                                    <div className="col-3">
                                        <CustomLabel>
                                            ΕΩΣ
                                        </CustomLabel>
                                        <CustomDatePicker
                                            value={workPackage.toDate}
                                            onChange={(value: string) =>
                                                updateWorkPackage(index, "toDate", value)
                                            }
                                        />

                                    </div>
                                </LocalizationProvider>
                                <div className="col-11">
                                    <CustomLabel>ΠΕΡΙΓΡΑΦΗ</CustomLabel>
                                    <CustomTextArea
                                        readOnly={canEditWorkPackagesReverse}
                                        id={`work_package_desc_${index}`}
                                        value={workPackage.description}
                                        onChange={(value: string) => {
                                            updateWorkPackage(
                                                index,
                                                "description",
                                                value
                                            );
                                        }}
                                    />
                                </div>
                                <WithRule target="work_packages">
                                    <div className="col-1 d-flex align-items-end gap-5">
                                        {/* REMOVE button */}
                                        <button
                                            disabled={loading}
                                            type="button"
                                            className="randevouz-buttons col-lg-1"
                                            onClick={() => removeWorkPackage(index)}
                                        >
                                            <img
                                                style={{ filter: "var(--svg-default)" }}
                                                src={Remove}
                                                alt="remove"
                                            />
                                        </button>

                                        {/* ADD button only on last row */}
                                        {index === lastWorkPackageIndex && (
                                            <button
                                                disabled={loading}
                                                type="button"
                                                className="randevouz-buttons col-lg-1"
                                                onClick={addWorkPackage}
                                            >
                                                <img
                                                    style={{ filter: "var(--svg-default)" }}
                                                    src={Add}
                                                    alt="add"
                                                />
                                            </button>
                                        )}
                                    </div>
                                </WithRule>
                            </div>
                        ))
                    )}
                </CustomFormSection>
            </div>
        </ConfirmationModal>
    );
};

export default EditWorkPackagesModal;