import { CardContainer } from "@components/CardContainer";
import { CheckBoxApp } from "@components/CheckBoxApp";
import { TableVirtual } from "@components/Crud/TableVirtual";
import { IconApp } from "@components/IconApp";
import LinkToStudenFormApp from "@components/LinkToStudenFormApp";
import {
    DATA_LOWS,
    DATA_NORMAL,
    DATA_POSTEROR,
} from "@components/Options/students/OptionsStatus";
import { SelectSearchApp } from "@components/SelectSearchApp";
import { SelectSearchMainCyclesApp } from "@components/SelectSearchMainCyclesApp";
import { StudentStatusIcon } from "@components/StudentStatusIcon";
import { ToolTipCoordinationsListApp } from "@components/ToolTipCoordinationsListApp";
import { formatMoney } from "@helpers/FormatString";
import { orderMainCycles } from "@helpers/orderMainCycles";
import { useForm } from "@hooks/useForm";
import { startShow as startListCurricula } from "@redux/slices/teachers/v2/curriculaSlice";
import {
    clearReportData,
    startShowSubjectsAndPaymentsByStudent,
} from "@redux/slices/operators/SubjectsAndPaymentsByStudents";
import { Empty } from "antd";
import React, { useEffect, useMemo } from "react";
import { Button, Col, Form, Row } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { startShow as startListCycles } from "@redux/slices/teachers/v2/cycleSlice";

const defaultValues = {
    cycle: null,
    is_inscription_cycle: false,
    status: [],
    curriculum_id: [],
    cycle_payment_code: null,
    is_debtor_documents: "",
    show_in_grades: "",
    show_in_status_account: "",
    account_status_zero: "",
    enrollments_zero: "",
    errors: {},
};

const selectOptions = [
    {
        label: "Sí",
        value: 1,
    },
    {
        label: "No",
        value: 0,
    },
    {
        label: "Mostrar todo",
        value: "",
    },
];

export default function SubjectsAndPaymentsByStudentsScreen() {
    const dispatch = useDispatch();
    const { user } = useSelector((state) => state.auth);
    const { list: curriculaList } = useSelector((state) => state.curricula);
    const { list: cyclesList } = useSelector((state) => state.cycle);
    const { reportData } = useSelector(
        (state) => state.subjectsAndPaymentsByStudents,
    );

    const { values, handleInputChange, setInputValue, reset } =
        useForm(defaultValues);
    const {
        cycle,
        is_inscription_cycle,
        status,
        curriculum_id,
        cycle_payment_code,
        is_debtor_documents,
        show_in_grades,
        show_in_status_account,
        account_status_zero,
        enrollments_zero,
        errors,
    } = values;

    useEffect(() => {
        dispatch(startListCycles({ asList: true, emptyOption: true }));
        dispatch(
            startListCurricula({ asList: true, checkCoordinations: true }),
        );

        return () => {
            clearData();
        };
    }, []);

    const canStartSearch = useMemo(() => {
        return !!cycle;
    }, [values]);

    const periodsList = useMemo(() => {
        if (cycle) {
            const { year, sub_cycle } = cycle;

            const cyclePeriods = cyclesList
                .filter((c) => c.year == year && c.sub_cycle == sub_cycle)
                .flatMap((c) => c.cycle_payments.map((cp) => cp.code));

            // únicos y ordenados de A → Z
            return [...new Set(cyclePeriods)].sort();
        } else {
            if (cycle) setInputValue("cycle", null);
            return [];
        }
    }, [cycle, cyclesList]);

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

        if (canStartSearch) {
            dispatch(
                startShowSubjectsAndPaymentsByStudent({
                    ...values,
                    is_inscription_cycle: Number(is_inscription_cycle),
                }),
            );
        }
    };

    const handleExportExcel = () => {
        if (canStartSearch) {
            dispatch(
                startShowSubjectsAndPaymentsByStudent({
                    ...values,
                    exportFlag: 1,
                    is_inscription_cycle: Number(is_inscription_cycle),
                }),
            );
        }
    };

    const clearData = () => {
        reset();
        dispatch(clearReportData());
    };

    return (
        <CardContainer title="Materias y pagos de alumnos por ciclo">
            <Form onSubmit={handleSearch}>
                <Row>
                    <Col xs={12} sm={6} md={6} lg={6} xl={4} xxl={3}>
                        <SelectSearchMainCyclesApp
                            title="Ciclo"
                            placeholder="Seleccione un ciclo"
                            name="cycle"
                            value={cycle}
                            required
                            onChange={handleInputChange}
                            options={orderMainCycles(cyclesList, false)}
                            errorText={errors.cycle && errors.cycle[0]}
                        />
                    </Col>

                    <Col
                        xs={12}
                        sm={6}
                        md={6}
                        lg={6}
                        xl={4}
                        xxl={3}
                        className="mt-5"
                    >
                        <CheckBoxApp
                            label="Ciclo de inscripción"
                            name="is_inscription_cycle"
                            onChange={handleInputChange}
                            className={"custom-checkbox-app"}
                            style={{
                                fontSize: "14px",
                            }}
                            checked={is_inscription_cycle}
                            errorText={
                                errors.is_inscription_cycle &&
                                errors.is_inscription_cycle[0]
                            }
                        />
                    </Col>

                    <Col xs={12} sm={6} md={6} lg={6} xl={4} xxl={3}>
                        <SelectSearchApp
                            title="Periodo"
                            placeholder="Seleccione un periodo"
                            name="cycle_payment_code"
                            value={cycle_payment_code}
                            onChange={handleInputChange}
                            options={periodsList.map((p) => ({
                                value: p,
                                label: p,
                            }))}
                            errorText={
                                errors.cycle_payment_code &&
                                errors.cycle_payment_code[0]
                            }
                            disabled={!cycle}
                        />
                    </Col>
                </Row>

                <Row>
                    <Col xs={12} sm={6} md={6} lg={6} xl={4} xxl={3}>
                        <SelectSearchApp
                            title="Estatus del alumno"
                            placeholder="Filtrar por estatus del alumno"
                            multiple={true}
                            name="status"
                            value={status}
                            onChange={handleInputChange}
                            options={[
                                ...DATA_NORMAL,
                                ...DATA_POSTEROR,
                                ...DATA_LOWS,
                            ]}
                            errorText={errors.status && errors.status[0]}
                        />
                    </Col>
                    <Col xs={12} sm={6} md={6} lg={6} xl={4} xxl={3}>
                        <SelectSearchApp
                            title="Deudores de documentos"
                            placeholder="Filtrar alumnos deudores de documentos"
                            name="is_debtor_documents"
                            value={is_debtor_documents}
                            onChange={handleInputChange}
                            options={selectOptions}
                            errorText={
                                errors.is_debtor_documents &&
                                errors.is_debtor_documents[0]
                            }
                        />
                    </Col>
                    <Col xs={12} sm={12} md={12} lg={12} xl={8} xxl={6}>
                        <SelectSearchApp
                            title="Oferta educativa"
                            placeholder="Filtrar por oferta educativa"
                            multiple={true}
                            name="curriculum_id"
                            value={curriculum_id}
                            onChange={handleInputChange}
                            options={curriculaList.map((d) => ({
                                value: d.id,
                                label: d.full_name,
                            }))}
                            infoText={
                                <span>
                                    Solo podrá ver las pertenecientes a su
                                    coordinación{" "}
                                    <ToolTipCoordinationsListApp
                                        coordinations={user.coordination}
                                    />
                                </span>
                            }
                            errorText={
                                errors.curriculum_id && errors.curriculum_id[0]
                            }
                        />
                    </Col>
                </Row>

                <Row className="mt-2">
                    <Col xs={12} sm={6} md={6} lg={6} xl={4} xxl={3}>
                        <SelectSearchApp
                            title="Ciclo con carga de materias y calificaciones"
                            placeholder="Filtrar ciclos con materias y calificaciones habilitadas"
                            name="show_in_grades"
                            value={show_in_grades}
                            onChange={handleInputChange}
                            options={selectOptions}
                            errorText={
                                errors.show_in_grades &&
                                errors.show_in_grades[0]
                            }
                        />
                    </Col>

                    <Col xs={12} sm={6} md={6} lg={6} xl={4} xxl={3}>
                        <SelectSearchApp
                            title="Solo alumnos sin materias cargadas"
                            placeholder="Filtrar solo alumnos sin materias"
                            name="enrollments_zero"
                            value={enrollments_zero}
                            onChange={handleInputChange}
                            options={selectOptions}
                            errorText={
                                errors.enrollments_zero &&
                                errors.enrollments_zero[0]
                            }
                        />
                    </Col>

                    <Col xs={12} sm={6} md={6} lg={6} xl={4} xxl={3}>
                        <SelectSearchApp
                            title="Ciclo con carga de estado de cuenta"
                            placeholder="Filtrar ciclos con carga de estado de cuenta habilitada"
                            name="show_in_status_account"
                            value={show_in_status_account}
                            onChange={handleInputChange}
                            options={selectOptions}
                            errorText={
                                errors.show_in_status_account &&
                                errors.show_in_status_account[0]
                            }
                        />
                    </Col>

                    <Col xs={12} sm={6} md={6} lg={6} xl={4} xxl={3}>
                        <SelectSearchApp
                            title="Solo alumnos sin pagos realizados"
                            placeholder="Filtrar solo alumnos sin pagos realizados"
                            name="account_status_zero"
                            value={account_status_zero}
                            onChange={handleInputChange}
                            options={selectOptions}
                            errorText={
                                errors.account_status_zero &&
                                errors.account_status_zero[0]
                            }
                        />
                    </Col>
                </Row>

                <Row className="text-center mt-4 mb-3">
                    <Col md={12}>
                        <Button type="submit" disabled={!canStartSearch}>
                            Realizar búsqueda
                            <IconApp iconClassName="fas fa-search ml-2" />
                        </Button>

                        <Button
                            variant="secondary"
                            className="ms-3"
                            disabled={false}
                            onClick={clearData}
                        >
                            Limpiar
                        </Button>
                    </Col>
                </Row>

                {!canStartSearch && !reportData?.report?.total ? (
                    <Row className="mt-5">
                        <Empty
                            image={Empty.PRESENTED_IMAGE_SIMPLE}
                            className="text-size-14"
                            description="Seleccione un ciclo para habilitar la búsqueda y exportación."
                        />
                    </Row>
                ) : (
                    <>
                        {reportData?.report?.report?.length > 0 && (
                            <>
                                <hr />
                                <div className="text-center">
                                    <h5>
                                        <strong>Cantidad de alumnos:</strong>{" "}
                                        {reportData.report?.total}
                                    </h5>
                                </div>
                                <Row>
                                    <div>
                                        <Button
                                            type="button"
                                            className="btn-app btn-app-green"
                                            disabled={!canStartSearch}
                                            onClick={handleExportExcel}
                                        >
                                            <IconApp iconClassName="fa fa-file-excel me-1" />{" "}
                                            Exportar
                                        </Button>
                                    </div>
                                </Row>

                                <Row className="my-3">
                                    <div>
                                        <span>
                                            <IconApp
                                                iconClassName="fas fa-circle-info me-1 text-info"
                                                fontSize="14px"
                                            />

                                            <span className="text-size-11 text-black">
                                                Nota: Puede deslizar la tabla a
                                                la derecha para visualizar más
                                                columnas.
                                            </span>
                                        </span>
                                    </div>

                                    <TableVirtual
                                        tableId="subjects-and-payments-by-students-report"
                                        renderHeaders={[
                                            "Matrícula",
                                            "Nombre",
                                            "Correo electrónico",
                                            "Estatus",
                                            "Grado",
                                            "Nivel académico",
                                            "Oferta Educativa",
                                            "Deudor de documentos",
                                            "Concepto a pagar",
                                            "¿Pagado?",
                                            "Periodo",
                                            "Ciclo con carga de materias y calificaciones",
                                            "Total materias cargadas",
                                            "Ciclo con carga de estado de cuenta",
                                            "Total pagado en estado de cuenta",
                                        ].map((h, i) => (
                                            <th
                                                key={i}
                                                className={
                                                    {
                                                        0: "tv-sticky-left text-center",
                                                        1: "tv-sticky-left text-center",
                                                    }[i] ?? "text-center"
                                                }
                                                style={
                                                    {
                                                        0: {
                                                            width: "80px",
                                                        },
                                                        1: { left: "80px" },
                                                    }[i] ?? {}
                                                }
                                            >
                                                {h}
                                            </th>
                                        ))}
                                        hasActions={false}
                                        data={reportData.report.report}
                                        maxHeight={600}
                                        striped
                                        hover
                                        stickyLeftCount={2}
                                        searchKeys={["student_number", "name"]}
                                        renderRow={(data) => (
                                            <>
                                                <td
                                                    className="text-center align-middle tv-sticky-left"
                                                    style={{ width: "80px" }}
                                                >
                                                    {data?.student_number ? (
                                                        <LinkToStudenFormApp
                                                            student_number={
                                                                data.student_number
                                                            }
                                                        />
                                                    ) : (
                                                        "-"
                                                    )}
                                                </td>

                                                <td
                                                    className="align-middle text-nowrap tv-sticky-left"
                                                    style={{ left: "80px" }}
                                                >
                                                    {data?.name || "--"}
                                                </td>

                                                <td className="align-middle text-nowrap">
                                                    {data?.email || "--"}
                                                </td>

                                                <td className="text-center align-middle text-nowrap">
                                                    {data?.status ? (
                                                        <>
                                                            <StudentStatusIcon
                                                                status={
                                                                    data.status
                                                                }
                                                            />
                                                            <span className="ms-2">
                                                                {data.status}
                                                            </span>
                                                        </>
                                                    ) : (
                                                        "--"
                                                    )}
                                                </td>

                                                <td className="align-middle text-nowrap">
                                                    {data?.degree || "--"}
                                                </td>
                                                <td className="align-middle text-nowrap">
                                                    {data?.curriculum_level ||
                                                        "--"}
                                                </td>
                                                <td className="align-middle text-nowrap">
                                                    {data?.curriculum || "--"}
                                                </td>
                                                <td className="align-middle text-center">
                                                    {data?.is_debtor_documents
                                                        ? "Sí"
                                                        : "No"}
                                                </td>
                                                <td className="align-middle text-center text-nowrap">
                                                    {data?.must_pay_concept ||
                                                        "--"}
                                                </td>
                                                <td className="align-middle text-center text-nowrap">
                                                    {data?.required_concept_paid ||
                                                        "--"}
                                                </td>
                                                <td className="align-middle text-center">
                                                    {data?.cycle_payment_code}
                                                </td>
                                                <td className="align-middle text-center">
                                                    <IconApp
                                                        iconClassName={
                                                            !!data?.show_in_grades
                                                                ? "fas fa-circle-check text-success mx-2"
                                                                : "fas fa-circle-xmark text-danger mx-2"
                                                        }
                                                    />
                                                </td>
                                                <td
                                                    className={`align-middle text-center fw-bold text-size-12 ${
                                                        data?.enrollments > 0
                                                            ? "text-green"
                                                            : "text-gray"
                                                    }`}
                                                >
                                                    {data?.enrollments}
                                                </td>
                                                <td className="align-middle text-center">
                                                    <IconApp
                                                        iconClassName={
                                                            !!data?.show_in_status_account
                                                                ? "fas fa-circle-check text-success mx-2"
                                                                : "fas fa-circle-xmark text-danger mx-2"
                                                        }
                                                    />
                                                </td>
                                                <td
                                                    className={`align-middle text-center fw-bold text-size-11 ${
                                                        data?.account_status > 0
                                                            ? "text-green"
                                                            : "text-gray"
                                                    }`}
                                                >
                                                    {formatMoney(
                                                        data?.account_status,
                                                    )}
                                                </td>
                                            </>
                                        )}
                                    />
                                </Row>
                            </>
                        )}
                    </>
                )}
            </Form>
        </CardContainer>
    );
}