import { CardContainer } from "@components/CardContainer";
import { CoordinationSelectApp } from "@components/CoordinationSelectApp";
import { CrudApp } from "@components/Crud/CrudApp";
import { IconApp } from "@components/IconApp";
import { InputApp } from "@components/InputApp";
import LinkToStudenFormApp from "@components/LinkToStudenFormApp";
import { OptionsMoodleBlocksStatus } from "@components/Options/OptionsMoodleBlocks";
import { filterStatusStudent } from "@components/Options/students/OptionsStatus";
import { SelectSearchApp } from "@components/SelectSearchApp";
import { StudentStatusIcon } from "@components/StudentStatusIcon";
import { formatDateString } from "@helpers/FormatString";
import { useForm } from "@hooks/useForm";
import {
    clearPagination,
    setOpenModal,
    startShowMoodleBlocks,
} from "@redux/slices/students/moodle";
import UpdateStatusMoodleForm from "@views/students/StudentDetail/Tabs/StudentRecord/UpdateStatusMoodleForm";
import React, { useEffect, useState } from "react";
import { Badge, Button, Col, Row } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { startShow as startListCurricula } from "@redux/slices/teachers/v2/curriculaSlice";

const defaultValues = {
    page: 1,
    query: "",
    number_rows: 25,
    coordination_ids: [],
    curriculum_ids: [],
    student_status: "",
    status: "",
    from: "",
    to: "",
    errors: {},
};

const BadgeByStatus = ({ status }) => {
    const config = {
        SUSPENDIDO: {
            color: "#dc3545",
            border: "1px solid #dc3545",
            bg: "danger-subtle",
            icon: "fas fa-circle-minus",
            text: "SUSPENDIDO",
        },
        ACTIVO: {
            color: "#198754",
            border: "1px solid #198754",
            bg: "success-subtle",
            icon: "fas fa-circle-check",
            text: "ACTIVO",
        },
    };

    const { color, border, bg, icon, text } = config[status] || config.ACTIVO;

    return (
        <Badge
            className="d-flex justify-content-center align-items-center px-2 py-1 w-100"
            style={{ color, border }}
            bg={bg}
        >
            <IconApp
                iconClassName={`${icon} me-1`}
                fontSize={"12px"}
                color={color}
            />
            <span className="text-size-10">{text}</span>
        </Badge>
    );
};

export default function MoodleBlocksScreen() {
    const dispatch = useDispatch();

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

    const [studentStatusMoodle, setStudentStatusMoodle] = useState(null);
    const [academicRecordId, setAcademicRecordId] = useState(null);

    const { values, setInputValue, handleInputChange, reset } =
        useForm(defaultValues);
    const {
        page,
        query,
        number_rows,
        refresh,
        coordination_ids,
        curriculum_ids,
        student_status,
        status,
        from,
        to,
        errors,
    } = values;

    useEffect(() => {
        dispatch(
            startListCurricula({ asList: true, checkCoordinations: true }),
        );
        // handleSearch();

        //* Limpiar al desmontar
        return () => {
            dispatch(clearPagination());
        };
    }, []);

    //* Para que funcione la paginación, buscador y refresh sin tener que hacer clic en Realizar búsqueda
    useEffect(() => {
        handleSearch();
    }, [page, query, number_rows, refresh]);

    const handleSearch = () => {
        dispatch(startShowMoodleBlocks(values));
    };

    const handleClear = () => {
        reset();
        dispatch(clearPagination());
    };

    const getCurriculaList = () => {
        const coordinations = coordination_ids.map((c) => c.value);
        if (coordinations.length > 0) {
            // filtrar la lista de curriculas por coordinaciones
            return curriculaList
                .filter((curriculum) =>
                    coordinations.includes(curriculum.coordination_id),
                )
                .map((d) => ({
                    value: d.id,
                    label: d.full_name,
                }));
        } else {
            // devolver la lista completa
            return curriculaList.map((d) => ({
                value: d.id,
                label: d.full_name,
            }));
        }
    };

    const handleOpenUpdateStatusMoodleForm = (checked, moodleable_id) => {
        dispatch(setOpenModal(true));
        setStudentStatusMoodle(!checked);
        setAcademicRecordId(moodleable_id);
    };

    return (
        <CardContainer title="Bloqueos Moodle">
            <Row>
                <Col md={6}>
                    <CoordinationSelectApp
                        coordination_name="coordination_ids"
                        coordination_id={coordination_ids}
                        handleInputChange={handleInputChange}
                        errors={errors}
                        multiple
                    />
                </Col>

                <Col md={6}>
                    <SelectSearchApp
                        title="Oferta educativa"
                        placeholder="Filtrar por oferta educativa"
                        multiple={true}
                        name="curriculum_ids"
                        value={curriculum_ids}
                        onChange={handleInputChange}
                        options={getCurriculaList()}
                        errorText={
                            errors.curriculum_ids && errors.curriculum_ids[0]
                        }
                    />
                </Col>

                <Col md={6}>
                    <SelectSearchApp
                        title="Estatus del alumno"
                        placeholder="Filtrar por estatus del alumno"
                        multiple={true}
                        name="student_status"
                        value={student_status}
                        onChange={handleInputChange}
                        options={filterStatusStudent}
                        errorText={
                            errors.student_status && errors.student_status[0]
                        }
                    />
                </Col>

                <Col md={6}>
                    <SelectSearchApp
                        title="Estatus aplicado"
                        placeholder="Filtrar por estatus aplicado"
                        name="status"
                        value={status}
                        onChange={handleInputChange}
                        options={OptionsMoodleBlocksStatus}
                        aboveFooter
                        errorText={errors.status && errors.status[0]}
                    />
                </Col>

                <Col
                    xs={6}
                    sm={6}
                    md={6}
                    lg={6}
                    xl={2}
                    xxl={2}
                    className="mt-2"
                >
                    <InputApp
                        type="date"
                        name="from"
                        title="Registro desde"
                        value={from}
                        onChange={handleInputChange}
                        errorText={errors.from && errors.from[0]}
                    />
                </Col>

                <Col
                    xs={6}
                    sm={6}
                    md={6}
                    lg={6}
                    xl={2}
                    xxl={2}
                    className="mt-2"
                >
                    <InputApp
                        type="date"
                        name="to"
                        title="Registro hasta"
                        value={to}
                        onChange={handleInputChange}
                        errorText={errors.to && errors.to[0]}
                    />
                </Col>
            </Row>

            <Row className="text-center mt-4 mb-3">
                <Col md={12}>
                    <Button className="me-4" onClick={handleSearch}>
                        Realizar búsqueda
                        <IconApp iconClassName="fas fa-search ml-2" />
                    </Button>

                    <Button variant="secondary" onClick={handleClear}>
                        Limpiar
                    </Button>
                </Col>
            </Row>

            <hr />

            <CrudApp
                crudName="moodle-blocks"
                values={values}
                setInputValue={setInputValue}
                handleInputChange={handleInputChange}
                pagination={pagination}
                tableHeaders={[
                    "Matrícula",
                    "Nombre",
                    "Estatus académico",
                    "Grado escolar",
                    "Oferta educativa",
                    "Estatus aplicado",
                    "Motivo",
                    "Usuario responsable",
                    "Fecha de registro",
                ]}
                hasActions={false}
            >
                {pagination.data.map((data, index) => (
                    <tr key={index}>
                        <td
                            data-th="Matrícula"
                            className="align-middle text-center"
                        >
                            {data?.moodleable?.student_number && (
                                <LinkToStudenFormApp
                                    student_number={
                                        data.moodleable.student_number
                                    }
                                    // showTooltipInfo
                                    // status={data?.status}
                                    // degree={data?.degree_word}
                                    // academic_group={
                                    //     data?.main_group?.name
                                    // }
                                    // coordination={
                                    //     data?.curriculum_coordination
                                    // }
                                />
                            )}

                            {data?.moodleable?.no_employe && (
                                <strong> {data.moodleable.no_employe}</strong>
                            )}
                        </td>

                        <td
                            data-th="Nombre"
                            data-center
                            className="align-middle"
                        >
                            {data?.moodleable?.full_name || "--"}
                        </td>

                        <td
                            data-th="Estatus académico"
                            data-center
                            className="align-middle"
                        >
                            {data?.moodleable_type ===
                            "App\\Models\\Teacher" ? (
                                <span>Docente</span>
                            ) : data?.moodleable?.status ? (
                                <div>
                                    <StudentStatusIcon
                                        status={data.moodleable.status}
                                    />
                                    <span className="ms-2">
                                        {data.moodleable.status}
                                    </span>
                                </div>
                            ) : (
                                <span>--</span>
                            )}
                        </td>

                        <td
                            data-th="Grado escolar"
                            data-center
                            className="align-middle text-center"
                        >
                            {data?.moodleable?.degree_word || "--"}
                        </td>

                        <td
                            data-th="Oferta educativa"
                            data-center
                            className="align-middle"
                        >
                            {data?.moodleable?.curriculum?.rvoe_name || "--"}
                        </td>

                        <td
                            data-th="Estatus aplicado"
                            data-center
                            className="align-middle text-center text-size-11 fw-bold"
                        >
                            <BadgeByStatus status={data?.status} />
                        </td>

                        <td
                            data-th="Motivo"
                            data-center
                            className="align-middle"
                            style={{ maxWidth: "700px" }}
                        >
                            {data?.motive || "--"}
                        </td>

                        <td
                            data-th="Usuario responsable"
                            data-center
                            className="align-middle"
                        >
                            {data?.user?.username || "--"}
                        </td>

                        <td
                            data-th="Fecha de registro"
                            data-center
                            className="align-middle text-size-11 fw-bold-"
                        >
                            {formatDateString(data?.created_at, false, true) ||
                                "--"}
                        </td>

                        {/* <td
                            data-th="Acciones"
                            data-center
                            className="align-middle text-center no-wrap"
                        >
                            <IconApp
                                iconClassName="fa fa-edit text-info"
                                fontSize={"18px"}
                                description="Ver solicitud"
                                isClickable
                                onClick={() =>
                                    handleOpenUpdateStatusMoodleForm(
                                        data?.status === "ACTIVO"
                                            ? false
                                            : true,
                                        data?.moodleable_id
                                    )
                                }
                            />
                        </td> */}
                    </tr>
                ))}
            </CrudApp>

            {openModal && (
                <UpdateStatusMoodleForm
                    academic_record_id={academicRecordId}
                    suspend={studentStatusMoodle}
                    callback={handleSearch}
                />
            )}
        </CardContainer>
    );
}