import { CheckBoxApp } from "@components/CheckBoxApp";
import { IconApp } from "@components/IconApp";
import { InputApp } from "@components/InputApp";
import ModalApp from "@components/ModalApp";
import { OptionsGraduationsOptionsTypes } from "@components/Options/OptionsGraduationsRequest";
import { DATA as optionsDegrees } from "@components/Options/students/OptionsDegrees";
import { SelectSearchApp } from "@components/SelectSearchApp";
import AddStudentContent from "@components/Students/AddStudentContent";
import { TooltipAntdApp } from "@components/TooltipAntdApp";
import { useForm } from "@hooks/useForm";
import { startShow as startListCurricula } from "@redux/slices/teachers/v2/curriculaSlice";
import {
    startCreateGraduationOptionRequestDate,
    startEditGraduationOptionRequestDate,
} from "@redux/slices/operators/GraduationOptionsRequestsDates";
import React, { useEffect, useMemo, useRef } from "react";
import { Alert, Button, Col, Form, Modal, Row } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";

const defaultValues = {
    graduation_option_type: "",
    curriculum_ids: [],
    degrees: [],
    academic_record_ids: [],
    selected_students_preview: [],
    apply_only_selected_students: false,
    start_date: "",
    end_date: "",
    sync_requests: false,
    errors: {},
};

export default function GraduationRequestsDatesForm({
    active = null,
    callback = () => {},
    closeButton = () => {},
    handleCloseButton = () => {},
}) {
    const dispatch = useDispatch();
    const selectionCriteriaRef = useRef(null);

    const { list: curriculaList } = useSelector((state) => state.curricula);

    const {
        values,
        handleInputChange,
        setFormValues,
        setInputValue,
        setErrors,
    } = useForm(defaultValues);

    const {
        graduation_option_type,
        curriculum_ids,
        degrees,
        academic_record_ids,
        selected_students_preview,
        apply_only_selected_students,
        start_date,
        end_date,
        sync_requests,
        errors,
    } = values;

    const studentsPickerDegreeOptions = useMemo(() => {
        if (graduation_option_type !== "Formularios de tesis para 7 8 y 9") {
            return [];
        }

        if (degrees?.length > 0) {
            return degrees;
        }

        return optionsDegrees.filter((degree) =>
            ["06", "07", "08", "09"].includes(degree.value),
        );
    }, [degrees, graduation_option_type]);

    const curriculaListFiltered = useMemo(() => {
        if (
            !curriculaList ||
            curriculaList.length === 0 ||
            !graduation_option_type
        ) {
            return [];
        }

        if (active) {
            return curriculaList;
        }

        return curriculaList?.filter(
            (c) => c?.graduation_option_type === graduation_option_type,
        );
    }, [graduation_option_type, curriculaList, active]);

    useEffect(() => {
        dispatch(
            startListCurricula({
                asList: true,
                graduation_option_type,
            }),
        );
    }, []);

    //* Cargar datos al editar
    useEffect(() => {
        if (active) {
            //? Separar los ids de las carreras en un array de objetos {label, value} para el SelectSearchApp
            let curriculum_ids_splitted = active?.curriculum_ids
                ? active.curriculum_ids.split(",").map((id) => Number(id))
                : [];

            if (curriculum_ids_splitted.length > 0) {
                curriculum_ids_splitted = curriculaList
                    .filter((c) => curriculum_ids_splitted.includes(c.id))
                    .map((c) => ({
                        label: c.full_name,
                        value: c.id,
                    }));
            }

            //? Separar los grados en un array de objetos {label, value} para el SelectSearchApp
            let degrees_splitted = active?.degrees
                ? active.degrees.split(",")
                : [];

            if (degrees_splitted.length > 0) {
                degrees_splitted = optionsDegrees
                    .filter((d) => degrees_splitted.includes(d.value))
                    .map((d) => ({
                        label: d.label,
                        value: d.value,
                    }));
            }

            setFormValues({
                ...active,
                curriculum_ids: curriculum_ids_splitted,
                degrees: degrees_splitted,
                academic_record_ids: active?.academic_record_ids
                    ? active.academic_record_ids
                          .split(",")
                          .map((id) => Number(id))
                          .filter(Boolean)
                    : [],
                selected_students_preview:
                    active?.selected_students_preview || [],
                apply_only_selected_students: Boolean(
                    active?.academic_record_ids,
                ),
            });

            selectionCriteriaRef.current = JSON.stringify({
                graduation_option_type: active?.graduation_option_type || "",
                curriculum_ids: curriculum_ids_splitted.map(
                    (curriculum) => curriculum.value,
                ),
                degrees: degrees_splitted.map(
                    (degreeOption) => degreeOption.value,
                ),
            });
        }
    }, [active]);

    const handleChangeOnlySelectedStudents = ({ target }) => {
        handleInputChange({ target });

        setInputValue("degrees", []);
        setInputValue("curriculum_ids", []);

        if (!target.value) {
            clearSelectedStudents();
        }
    };

    const clearSelectedStudents = () => {
        setInputValue("academic_record_ids", []);
        setInputValue("selected_students_preview", []);
        setErrors({});
    };

    const handleRemoveSelectedStudent = (studentId) => {
        setInputValue(
            "academic_record_ids",
            academic_record_ids.filter(
                (academicRecordId) => academicRecordId !== studentId,
            ),
        );
        setInputValue(
            "selected_students_preview",
            selected_students_preview.filter(
                (student) => student.id !== studentId,
            ),
        );
    };

    const handleCloseForm = () => {
        selectionCriteriaRef.current = null;
        setFormValues(defaultValues, true);
    };

    useEffect(() => {
        if (active) {
            return;
        }

        if (!apply_only_selected_students) {
            selectionCriteriaRef.current = null;
            return;
        }

        const currentCriteria = JSON.stringify({
            graduation_option_type,
            curriculum_ids: curriculum_ids?.map(
                (curriculum) => curriculum.value,
            ),
            degrees: degrees?.map((degreeOption) => degreeOption.value),
        });

        if (selectionCriteriaRef.current === null) {
            selectionCriteriaRef.current = currentCriteria;
            return;
        }

        if (selectionCriteriaRef.current !== currentCriteria) {
            clearSelectedStudents();
        }

        selectionCriteriaRef.current = currentCriteria;
    }, [
        apply_only_selected_students,
        graduation_option_type,
        curriculum_ids,
        degrees,
    ]);

    const handleSave = (e) => {
        e.preventDefault();

        if (apply_only_selected_students && academic_record_ids?.length === 0) {
            setErrors({
                academic_record_ids: [
                    "Debe seleccionar al menos un alumno para esta asignación.",
                ],
            });

            return;
        }

        //* Enviar solo ids de las carreras separados por comas
        let curriculum_ids_joined = null;
        if (
            !apply_only_selected_students &&
            curriculum_ids &&
            curriculum_ids?.length > 0
        ) {
            curriculum_ids_joined = curriculum_ids
                .map((c) => c.value)
                ?.join(",");
        }

        //* Enviar grados escolares separados por comas
        let degrees_joined = null;
        if (!apply_only_selected_students && degrees && degrees?.length > 0) {
            degrees_joined = degrees.map((d) => d.value)?.join(",");
        }

        const valuesToSend = {
            ...values,
            sync_requests: Number(sync_requests),
            curriculum_ids: curriculum_ids_joined,
            degrees: degrees_joined,
            academic_record_ids:
                academic_record_ids?.length > 0
                    ? academic_record_ids.join(",")
                    : null,
        };

        if (!active) {
            dispatch(
                startCreateGraduationOptionRequestDate(
                    valuesToSend,
                    setErrors,
                    async () => {
                        await callback();
                        handleCloseButton(handleCloseForm);
                    },
                ),
            );
        } else {
            dispatch(
                startEditGraduationOptionRequestDate(
                    active?.id,
                    valuesToSend,
                    setErrors,
                    async () => {
                        await callback();
                        handleCloseButton(handleCloseForm);
                    },
                ),
            );
        }
    };

    return (
        <Form onSubmit={handleSave}>
            <Modal.Body>
                <Row>
                    <Col md={12}>
                        <SelectSearchApp
                            title="Tipo de formulario para aperturar"
                            placeholder="Seleccione una opción"
                            type="text"
                            name="graduation_option_type"
                            value={graduation_option_type}
                            onChange={active ? () => {} : handleInputChange}
                            options={OptionsGraduationsOptionsTypes}
                            required
                            disabled={!!active}
                            errorText={
                                errors.graduation_option_type &&
                                errors.graduation_option_type[0]
                            }
                        />
                    </Col>
                </Row>

                {!active ? (
                    <Row className="my-3">
                        <Col md={"auto"}>
                            <CheckBoxApp
                                name="apply_only_selected_students"
                                label="Aplicar solo a alumnos específicos"
                                onChange={handleChangeOnlySelectedStudents}
                                className={"custom-checkbox-app margin-top-2"}
                                style={{ fontSize: "14px" }}
                                checked={apply_only_selected_students}
                            />
                        </Col>
                    </Row>
                ) : null}

                {apply_only_selected_students ? (
                    <Row className="mb-3">
                        <Col md={12}>
                            <Alert
                                variant={
                                    academic_record_ids?.length > 0
                                        ? "info"
                                        : "warning"
                                }
                                className="mb-2"
                            >
                                <div className="d-flex flex-column gap-2">
                                    <span className="text-size-12">
                                        {academic_record_ids?.length > 0
                                            ? `Hay ${academic_record_ids.length} alumno(s) seleccionados para esta asignación visual.`
                                            : "Todavía no has seleccionado alumnos."}
                                    </span>

                                    {errors.academic_record_ids ? (
                                        <span className="text-danger text-size-12">
                                            {errors.academic_record_ids[0]}
                                        </span>
                                    ) : null}

                                    {!active ? (
                                        <div>
                                            <ModalApp
                                                titleModal="Seleccionar alumnos"
                                                size="xxxl"
                                                backdrop="static"
                                                keyboard={false}
                                                Action={() => (
                                                    <Button
                                                        variant="secondary"
                                                        size="sm"
                                                    >
                                                        <IconApp iconClassName="fa fa-users me-2" />
                                                        {academic_record_ids?.length >
                                                        0
                                                            ? "Editar selección"
                                                            : "Seleccionar alumnos"}
                                                    </Button>
                                                )}
                                            >
                                                <AddStudentContent
                                                    multipleCheck
                                                    getAsObject
                                                    withGroupsFilter={false}
                                                    lite
                                                    numberRowsMode="dropdown"
                                                    initialValues={{
                                                        curricula:
                                                            curriculum_ids,
                                                        degree: studentsPickerDegreeOptions,
                                                        graduation_option_type,
                                                        graduation_option_degrees:
                                                            studentsPickerDegreeOptions,
                                                    }}
                                                    initialChecked={
                                                        selected_students_preview
                                                    }
                                                    callback={(selectedIds) => {
                                                        setInputValue(
                                                            "academic_record_ids",
                                                            selectedIds.map(
                                                                (student) =>
                                                                    student.id,
                                                            ),
                                                        );
                                                        setInputValue(
                                                            "selected_students_preview",
                                                            selectedIds,
                                                        );
                                                        setErrors({});
                                                    }}
                                                />
                                            </ModalApp>
                                        </div>
                                    ) : null}

                                    {selected_students_preview?.length > 0 ? (
                                        <div className="d-flex flex-wrap gap-2">
                                            {selected_students_preview.map(
                                                (student) => (
                                                    <div
                                                        key={student.id}
                                                        className="badge bg-white text-dark border d-flex align-items-center gap-2"
                                                        style={{
                                                            fontSize: "12px",
                                                            fontWeight: 500,
                                                        }}
                                                    >
                                                        <span>
                                                            {student.student_number ||
                                                                "-"}{" "}
                                                            -{" "}
                                                            {student.full_name ||
                                                                student.student
                                                                    ?.full_name ||
                                                                "-"}
                                                        </span>

                                                        {!active ? (
                                                            <button
                                                                type="button"
                                                                className="btn btn-link p-0 text-danger text-decoration-none"
                                                                onClick={() =>
                                                                    handleRemoveSelectedStudent(
                                                                        student.id,
                                                                    )
                                                                }
                                                            >
                                                                <IconApp iconClassName="fa fa-times" />
                                                            </button>
                                                        ) : null}
                                                    </div>
                                                ),
                                            )}
                                        </div>
                                    ) : null}
                                </div>
                            </Alert>
                        </Col>
                    </Row>
                ) : null}

                {graduation_option_type && !apply_only_selected_students && (
                    <>
                        {(!active ? true : curriculum_ids?.length > 0) ? (
                            <Row className="mt-2">
                                <Col md={12}>
                                    <SelectSearchApp
                                        title="Ofertas educativas (opcional)"
                                        placeholder="Filtrar por ofertas educativas (OPCIONAL)"
                                        infoText={
                                            active ? (
                                                ""
                                            ) : (
                                                <Row>
                                                    <Col md={12}>
                                                        <Alert
                                                            variant="warning"
                                                            className="text-size-12 py-2"
                                                        >
                                                            <div className="text-justify">
                                                                <IconApp
                                                                    iconClassName="fa fa-circle-info text-orange me-1"
                                                                    fontSize="14px"
                                                                />
                                                                <span className="text-black text-size-11">
                                                                    Si
                                                                    selecciona
                                                                    ofertas
                                                                    educativas,
                                                                    los
                                                                    formularios
                                                                    serán
                                                                    creados solo
                                                                    para
                                                                    estudiantes
                                                                    pertenecientes
                                                                    a estas.
                                                                </span>
                                                            </div>
                                                        </Alert>
                                                    </Col>
                                                </Row>
                                                // <div className="text-justify">
                                                //     <IconApp
                                                //         iconClassName="fa fa-circle-info text-orange me-1"
                                                //         fontSize="14px"
                                                //     />
                                                //     <span className="text-black text-size-11">
                                                //         Si selecciona ofertas educativas,
                                                //         los formularios serán creados solo
                                                //         para estudiantes pertenecientes a
                                                //         estas.
                                                //     </span>
                                                // </div>
                                            )
                                        }
                                        name="curriculum_ids"
                                        value={curriculum_ids}
                                        multiple
                                        onChange={
                                            active
                                                ? () => {}
                                                : handleInputChange
                                        }
                                        options={curriculaListFiltered?.map(
                                            (c) => ({
                                                label: c?.full_name,
                                                value: c?.id,
                                            }),
                                        )}
                                        disabled={!!active}
                                        errorText={
                                            errors.curriculum_ids &&
                                            errors.curriculum_ids[0]
                                        }
                                    />
                                </Col>
                            </Row>
                        ) : null}

                        {graduation_option_type ===
                            "Formularios de tesis para 7 8 y 9" && (
                            <Row
                                style={{ marginTop: !active ? "-8px" : "5px" }}
                            >
                                <Col md={12}>
                                    <SelectSearchApp
                                        title="Grados escolares (opcional)"
                                        placeholder="Filtrar por grados escolares (OPCIONAL)"
                                        infoText={
                                            active ? (
                                                ""
                                            ) : (
                                                <Row>
                                                    <Col md={12}>
                                                        <Alert
                                                            variant="warning"
                                                            className="text-size-12 py-2"
                                                        >
                                                            <div className="text-justify">
                                                                <IconApp
                                                                    iconClassName="fa fa-circle-info text-orange me-1"
                                                                    fontSize="14px"
                                                                />
                                                                <span className="text-black text-size-11">
                                                                    Si
                                                                    selecciona
                                                                    grados
                                                                    escolares,
                                                                    los
                                                                    formularios
                                                                    serán
                                                                    creados solo
                                                                    para
                                                                    estudiantes
                                                                    pertenecientes
                                                                    a estos. Si
                                                                    se deja
                                                                    vacío, se
                                                                    crearán para
                                                                    alumnos con
                                                                    grado 06, 07
                                                                    y 08.
                                                                </span>
                                                            </div>
                                                        </Alert>
                                                    </Col>
                                                </Row>
                                            )
                                        }
                                        name="degrees"
                                        value={degrees}
                                        multiple
                                        onChange={
                                            active
                                                ? () => {}
                                                : handleInputChange
                                        }
                                        options={optionsDegrees?.filter((d) =>
                                            ["06", "07", "08", "09"].includes(
                                                d?.value,
                                            ),
                                        )}
                                        disabled={!!active}
                                        errorText={
                                            errors.degrees && errors.degrees[0]
                                        }
                                    />
                                </Col>
                            </Row>
                        )}
                    </>
                )}

                <Row className="mt-3">
                    <Col xs={6} sm={6} md={6}>
                        <InputApp
                            title={"Inicio"}
                            type="date"
                            name="start_date"
                            value={start_date}
                            required
                            // min={currentDate}
                            onChange={handleInputChange}
                            errorText={
                                errors.start_date && errors.start_date[0]
                            }
                        />
                    </Col>

                    <Col xs={6} sm={6} md={6}>
                        <InputApp
                            title={"Término"}
                            type="date"
                            name="end_date"
                            value={end_date}
                            required
                            // min={currentDate}
                            onChange={handleInputChange}
                            errorText={errors.end_date && errors.end_date[0]}
                        />
                    </Col>
                </Row>

                {!active ? (
                    <Row className="my-3">
                        <Col md={"auto"}>
                            <CheckBoxApp
                                name="sync_requests"
                                label={
                                    <div>
                                        <span>
                                            Crear los formularios para los
                                            estudiantes
                                        </span>

                                        <TooltipAntdApp
                                            maxWidth="33%"
                                            headerContent={
                                                <span>
                                                    Crear los formularios para
                                                    los estudiantes
                                                </span>
                                            }
                                            bodyContent={
                                                <div className="text-size-14 text-justify">
                                                    <p>
                                                        Al guardar la fecha de
                                                        apertura, el sistema
                                                        puede crear
                                                        automáticamente los
                                                        formularios iniciales
                                                        para los alumnos que
                                                        deben responderlo.
                                                    </p>

                                                    <p>
                                                        <strong className="text-black">
                                                            SI ESTA OPCIÓN NO
                                                            ESTÁ MARCADA:
                                                        </strong>
                                                        <br />
                                                        Solo se guardará la
                                                        fecha de apertura. Los
                                                        formularios para los
                                                        alumnos no se crearán en
                                                        este momento y deberán
                                                        generarse posteriormente
                                                        usando la opción de{" "}
                                                        <strong>
                                                            sincronizar (
                                                            <IconApp
                                                                iconClassName="fa fa-sync text-info mx-1"
                                                                fontSize="18px"
                                                            />
                                                            )
                                                        </strong>
                                                        .
                                                    </p>

                                                    <p>
                                                        <strong className="text-black">
                                                            SI ESTA OPCIÓN SÍ
                                                            ESTÁ MARCADA:
                                                        </strong>
                                                        <br />
                                                        El sistema creará de
                                                        inmediato los
                                                        formularios iniciales
                                                        para todos los alumnos
                                                        que actualmente cumplen
                                                        con los criterios para
                                                        responderlos.
                                                    </p>
                                                </div>
                                            }
                                            bodyCenter={false}
                                        >
                                            <div className="fa-solid fa-circle-question fa-xl text-info ms-2"></div>
                                        </TooltipAntdApp>
                                    </div>
                                }
                                onChange={handleInputChange}
                                className={"custom-checkbox-app margin-top-2"}
                                style={{ fontSize: "14px" }}
                                checked={sync_requests}
                                errorText={
                                    errors.sync_requests &&
                                    errors.sync_requests[0]
                                }
                            />
                        </Col>
                    </Row>
                ) : null}
            </Modal.Body>

            <Modal.Footer>
                <div className="d-flex justify-content-between w-100">
                    {closeButton && closeButton(handleCloseForm)}

                    <Button type="submit">
                        <span>{active ? "Editar" : "Guardar"}</span>
                        <IconApp iconClassName="fa fa-save ms-2" />
                    </Button>
                </div>
            </Modal.Footer>
        </Form>
    );
}