import { CardContainer, IconApp, SelectSearchApp } from "@components";
import { CheckBoxApp } from "@components/CheckBoxApp";
import { CoordinationSelectApp } from "@components/CoordinationSelectApp";
import { DATA as optionsDegrees } from "@components/Options/students/OptionsDegrees";
import { SelectSearchMainCyclesApp } from "@components/SelectSearchMainCyclesApp";
import LinkToStudenFormApp from "@components/LinkToStudenFormApp";
import { StudentStatusIcon } from "@components/StudentStatusIcon";
import { orderMainCycles } from "@helpers/orderMainCycles";
import { useForm } from "@hooks/useForm";
import {
    clearReport,
    startShowSubjectStatusReport,
} from "@redux/slices/users/SubjectStatusReport";
import { startShow as startListCurricula } from "@redux/slices/teachers/v2/curriculaSlice";
import { startShow as startListCycles } from "@redux/slices/teachers/v2/cycleSlice";
import { Empty } from "antd";
import React, { useEffect, useMemo } from "react";
import { Button, Col, Row, Table } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";

const defaultValues = {
    cycle: null,
    coordination_id: "",
    curriculum_ids: [],
    degree: [],
    show_grades: false,
    show_subject_names: false,
    errors: {},
};

const SUBJECT_STATUS_MAP = {
    APROBADO: {
        key: "A",
        label: "Aprobado",
        bgClass: "bg-success",
        iconClass: "text-success",
    },
    "NO APROBADO": {
        key: "R",
        label: "Reprobado",
        bgClass: "bg-danger",
        iconClass: "text-danger",
    },
    "EN CURSO": {
        key: "C",
        label: "Cursando",
        bgClass: "bg-info",
        iconClass: "text-info",
    },
    "NO CURSADO": {
        key: "P",
        label: "Pendiente",
        bgClass: "bg-warning",
        iconClass: "text-warning",
    },
};

const getSubjectStatusUi = (status) => {
    if (status && SUBJECT_STATUS_MAP[status]) {
        return SUBJECT_STATUS_MAP[status];
    }

    return SUBJECT_STATUS_MAP["NO CURSADO"];
};

const GRADE_VISIBLE_STATUSES = ["APROBADO", "NO APROBADO", "REPROBADO"];
const SUMMARY_COLUMNS = [
    {
        key: "in_course_count",
        label: "Cursando",
        textClass: "text-info",
    },
    {
        key: "approved_count",
        label: "Aprobadas",
        textClass: "text-success",
    },
    {
        key: "failed_count",
        label: "Reprobadas",
        textClass: "text-danger",
    },
    {
        key: "pending_count",
        label: "Pendientes",
        textClass: "text-warning",
    },
    {
        key: "general_average",
        label: "Promedio",
        textClass: "",
    },
];

const TABLE_VIEWPORT_STYLE = {
    height: "80vh",
    overflow: "auto",
    border: "1px solid #dee2e6",
    borderRadius: "0.25rem",
};

const TABLE_BORDER_STYLE = {
    "--bs-table-border-color": "#6c757d",
    "--bs-border-color-translucent": "#6c757d",
    borderCollapse: "separate",
    borderSpacing: 0,
};

const TABLE_CELL_BORDER_STYLE = {
    borderColor: "#6c757d",
    borderStyle: "solid",
    borderWidth: "1px",
    backgroundClip: "padding-box",
};

const STICKY_COLUMNS = {
    student_number: { left: 0, width: 80 },
    full_name: { left: 80, width: 290 },
    degree: { left: 370, width: 115 },
    student_status: { left: 485, width: 150 },
};

const HEADER_ROW_TOP = 0;
const HEADER_ROW_HEIGHT = 48;
const HEADER_SUBROW_TOP = HEADER_ROW_HEIGHT;
const HEADER_BACKGROUND = "#edf5ff";

const canShowGradeByStatus = (status) => {
    return GRADE_VISIBLE_STATUSES.includes(String(status || "").toUpperCase());
};

const formatSubjectGrade = (subjectData) => {
    const gradeDisplay = String(subjectData?.grade_display || "")
        .trim()
        .toUpperCase();

    if (gradeDisplay === "AC" || gradeDisplay === "NAC") {
        return gradeDisplay;
    }

    const isAccreditable = Boolean(subjectData?.is_accreditable);
    if (isAccreditable) {
        const numericGrade = Number(subjectData?.grade);
        const isAccredited =
            Boolean(subjectData?.is_accredited) || numericGrade >= 10;

        if (isAccredited && numericGrade > 0) {
            return "AC";
        }

        if (numericGrade > 0 && numericGrade <= 5) {
            return "NAC";
        }
    }

    const grade = subjectData?.grade;
    if (grade === null || grade === undefined || grade === "") {
        return "-";
    }

    const parsed = Number(grade);
    if (Number.isNaN(parsed)) {
        return String(grade);
    }

    return parsed.toString();
};

const getRowSummary = (row) => {
    const subjectStatuses = Object.values(row?.subjects || {}).map((subject) =>
        String(subject?.status || "NO CURSADO").toUpperCase(),
    );

    const approvedCount = subjectStatuses.filter(
        (status) => status === "APROBADO",
    ).length;
    const failedCount = subjectStatuses.filter(
        (status) => status === "NO APROBADO" || status === "REPROBADO",
    ).length;
    const pendingCount = subjectStatuses.filter(
        (status) => status === "NO CURSADO",
    ).length;
    const inCourseCount = subjectStatuses.filter(
        (status) => status === "EN CURSO",
    ).length;
    const averageValue =
        row?.average === null ||
        row?.average === undefined ||
        row?.average === ""
            ? "-"
            : row.average;

    return {
        in_course_count: inCourseCount,
        approved_count: approvedCount,
        failed_count: failedCount,
        pending_count: pendingCount,
        general_average: averageValue,
    };
};

const formatSummaryCellValue = (value) => {
    if (value === null || value === undefined || value === "") {
        return "-";
    }

    const numericValue = Number(value);
    if (!Number.isNaN(numericValue) && numericValue === 0) {
        return "-";
    }

    return value;
};

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

    const { list: cyclesList } = useSelector((state) => state.cycle);
    const { list: curriculaList } = useSelector((state) => state.curricula);
    const { report } = useSelector((state) => state.subjectStatusReport);

    const { values, handleInputChange, reset } = useForm(defaultValues);
    const {
        cycle,
        coordination_id,
        curriculum_ids,
        degree,
        show_grades,
        show_subject_names,
        errors,
    } = values;

    const showGrades = Boolean(show_grades);
    const showSubjectNames = Boolean(show_subject_names);

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

        return () => {
            dispatch(clearReport());
        };
    }, [dispatch]);

    const curriculaOptions = useMemo(() => {
        const filteredCurricula = coordination_id
            ? curriculaList.filter(
                  (curriculum) =>
                      Number(curriculum.coordination_id) ===
                      Number(coordination_id),
              )
            : curriculaList;

        return filteredCurricula.map((curriculum) => ({
            value: curriculum.id,
            label: curriculum.full_name,
        }));
    }, [coordination_id, curriculaList]);

    const canSearch = useMemo(() => {
        return !!cycle && !!coordination_id;
    }, [cycle, coordination_id]);

    const search = (isExport = false) => {
        dispatch(startShowSubjectStatusReport({ ...values, isExport }));
    };

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

    const renderCurriculumTable = (curriculumReport, index) => {
        const curriculum = curriculumReport?.curriculum ?? {};
        const headers = curriculumReport?.headers ?? {};
        const degreeHeaders = Array.isArray(headers?.degrees)
            ? headers.degrees
            : [];
        const subjectHeaders = Array.isArray(headers?.subjects)
            ? headers.subjects
            : [];
        const rows = Array.isArray(curriculumReport?.rows)
            ? curriculumReport.rows
            : [];
        const degreeStartIndexes = degreeHeaders.reduce(
            (acc, _degreeHeader, degreeIndex) => {
                const previousStart =
                    degreeIndex === 0 ? 0 : acc[degreeIndex - 1];
                const nextStart =
                    degreeIndex === 0
                        ? 0
                        : previousStart +
                          (Number(degreeHeaders?.[degreeIndex - 1]?.colspan) ||
                              1);
                acc.push(nextStart);
                return acc;
            },
            [],
        );
        const thickBorderStyle = {
            borderLeftWidth: "3px",
            borderLeftColor: "#2f3c4f",
        };
        const subjectHeaderHeight = showSubjectNames ? "10rem" : "6rem";

        return (
            <div
                key={`curriculum-report-${curriculum?.id ?? index}`}
                className="mb-3"
            >
                <div className="bg-warning-subtle text-primary px-2 pt-1 rounded border-warning">
                    {" "}
                    <h5 className="m-0 fw-bold">
                        {curriculum?.rvoe_name ?? "Carrera"}
                    </h5>
                    <p className="m-0 text-muted text-size-12">
                        Plan: {curriculum?.plan ?? "-"} | Nivel:{" "}
                        {curriculum?.level ?? "-"}
                    </p>
                </div>

                <div
                    className="table-responsive-horizontal"
                    style={TABLE_VIEWPORT_STYLE}
                >
                    <Table
                        striped
                        bordered
                        hover
                        size="xs"
                        className="mb-0"
                        style={TABLE_BORDER_STYLE}
                    >
                        <thead className="thead-light">
                            <tr className="bg-light-blue-2 text-size-12">
                                <th
                                    rowSpan={2}
                                    className="text-center align-middle text-nowrap"
                                    style={{
                                        ...TABLE_CELL_BORDER_STYLE,
                                        position: "sticky",
                                        top: HEADER_ROW_TOP,
                                        left: STICKY_COLUMNS.student_number
                                            .left,
                                        minWidth:
                                            STICKY_COLUMNS.student_number.width,
                                        width: STICKY_COLUMNS.student_number
                                            .width,
                                        maxWidth:
                                            STICKY_COLUMNS.student_number.width,
                                        height: HEADER_ROW_HEIGHT,
                                        zIndex: 50,
                                        backgroundColor: HEADER_BACKGROUND,
                                    }}
                                >
                                    Matrícula
                                </th>
                                <th
                                    rowSpan={2}
                                    className="text-center align-middle text-nowrap"
                                    style={{
                                        ...TABLE_CELL_BORDER_STYLE,
                                        position: "sticky",
                                        top: HEADER_ROW_TOP,
                                        left: STICKY_COLUMNS.full_name.left,
                                        minWidth:
                                            STICKY_COLUMNS.full_name.width,
                                        width: STICKY_COLUMNS.full_name.width,
                                        maxWidth:
                                            STICKY_COLUMNS.full_name.width,
                                        height: HEADER_ROW_HEIGHT,
                                        zIndex: 50,
                                        backgroundColor: HEADER_BACKGROUND,
                                    }}
                                >
                                    Alumno
                                </th>
                                <th
                                    rowSpan={2}
                                    className="text-center align-middle text-nowrap"
                                    style={{
                                        ...TABLE_CELL_BORDER_STYLE,
                                        position: "sticky",
                                        top: HEADER_ROW_TOP,
                                        left: STICKY_COLUMNS.degree.left,
                                        minWidth: STICKY_COLUMNS.degree.width,
                                        width: STICKY_COLUMNS.degree.width,
                                        maxWidth: STICKY_COLUMNS.degree.width,
                                        height: HEADER_ROW_HEIGHT,
                                        zIndex: 50,
                                        backgroundColor: HEADER_BACKGROUND,
                                    }}
                                >
                                    Grado
                                </th>
                                <th
                                    rowSpan={2}
                                    className="text-center align-middle text-nowrap"
                                    style={{
                                        ...TABLE_CELL_BORDER_STYLE,
                                        position: "sticky",
                                        top: HEADER_ROW_TOP,
                                        left: STICKY_COLUMNS.student_status
                                            .left,
                                        minWidth:
                                            STICKY_COLUMNS.student_status.width,
                                        width: STICKY_COLUMNS.student_status
                                            .width,
                                        maxWidth:
                                            STICKY_COLUMNS.student_status.width,
                                        height: HEADER_ROW_HEIGHT,
                                        zIndex: 50,
                                        backgroundColor: HEADER_BACKGROUND,
                                    }}
                                >
                                    Estatus
                                </th>
                                <th
                                    colSpan={SUMMARY_COLUMNS.length}
                                    className="text-center align-middle text-nowrap"
                                    style={{
                                        ...TABLE_CELL_BORDER_STYLE,
                                        ...thickBorderStyle,
                                        position: "sticky",
                                        top: HEADER_ROW_TOP,
                                        height: HEADER_ROW_HEIGHT,
                                        zIndex: 40,
                                        backgroundColor: HEADER_BACKGROUND,
                                    }}
                                >
                                    Resumen
                                </th>
                                {degreeHeaders.map((degreeHeader) => (
                                    <th
                                        key={`degree-${degreeHeader.degree}`}
                                        colSpan={degreeHeader.colspan || 1}
                                        className="text-center align-middle text-nowrap"
                                        style={{
                                            ...TABLE_CELL_BORDER_STYLE,
                                            ...thickBorderStyle,
                                            position: "sticky",
                                            top: HEADER_ROW_TOP,
                                            height: HEADER_ROW_HEIGHT,
                                            zIndex: 40,
                                            backgroundColor: HEADER_BACKGROUND,
                                        }}
                                    >
                                        {degreeHeader.label}
                                    </th>
                                ))}
                            </tr>
                            <tr className="bg-light-blue-2 text-size-11">
                                {SUMMARY_COLUMNS.map(
                                    (summaryColumn, summaryIndex) => (
                                        <th
                                            key={`summary-header-${summaryColumn.key}`}
                                            className="text-center align-bottom text-nowrap p-1"
                                            style={{
                                                ...TABLE_CELL_BORDER_STYLE,
                                                height: subjectHeaderHeight,
                                                position: "sticky",
                                                top: HEADER_SUBROW_TOP,
                                                zIndex: 35,
                                                backgroundColor:
                                                    HEADER_BACKGROUND,
                                                ...(summaryIndex === 0
                                                    ? thickBorderStyle
                                                    : {}),
                                            }}
                                        >
                                            <span
                                                style={{
                                                    writingMode: "vertical-rl",
                                                    transform: "rotate(180deg)",
                                                    display: "inline-block",
                                                }}
                                            >
                                                {summaryColumn.label}
                                            </span>
                                        </th>
                                    ),
                                )}
                                {subjectHeaders.map(
                                    (subjectHeader, subjectIndex) => (
                                        <th
                                            key={`subject-${subjectHeader.id}`}
                                            className="text-center align-bottom text-nowrap p-1"
                                            style={{
                                                ...TABLE_CELL_BORDER_STYLE,
                                                height: subjectHeaderHeight,
                                                position: "sticky",
                                                top: HEADER_SUBROW_TOP,
                                                zIndex: 35,
                                                backgroundColor:
                                                    HEADER_BACKGROUND,
                                                ...(degreeStartIndexes.includes(
                                                    subjectIndex,
                                                )
                                                    ? thickBorderStyle
                                                    : {}),
                                            }}
                                        >
                                            <span
                                                style={{
                                                    writingMode: "vertical-rl",
                                                    transform: "rotate(180deg)",
                                                    display: "inline-block",
                                                }}
                                            >
                                                {showSubjectNames
                                                    ? subjectHeader.cve_subject
                                                        ? `${subjectHeader.cve_subject} - ${subjectHeader.name}`
                                                        : subjectHeader.name
                                                    : subjectHeader.cve_subject ||
                                                      subjectHeader.name}
                                            </span>
                                        </th>
                                    ),
                                )}
                            </tr>
                        </thead>

                        <tbody className="text-size-11">
                            {rows.map((row, rowIndex) => {
                                const rowSummary = getRowSummary(row);
                                const stickyRowBackground =
                                    rowIndex % 2 === 0 ? "#ffffff" : "#f8f9fa";

                                return (
                                    <tr key={`row-student-${row.id}`}>
                                        <td
                                            className="align-middle text-nowrap"
                                            style={{
                                                ...TABLE_CELL_BORDER_STYLE,
                                                position: "sticky",
                                                left: STICKY_COLUMNS
                                                    .student_number.left,
                                                minWidth:
                                                    STICKY_COLUMNS
                                                        .student_number.width,
                                                width: STICKY_COLUMNS
                                                    .student_number.width,
                                                maxWidth:
                                                    STICKY_COLUMNS
                                                        .student_number.width,
                                                zIndex: 20,
                                                backgroundColor:
                                                    stickyRowBackground,
                                            }}
                                        >
                                            {row.student_number ? (
                                                <LinkToStudenFormApp
                                                    student_number={
                                                        row.student_number
                                                    }
                                                />
                                            ) : (
                                                "-"
                                            )}
                                        </td>
                                        <td
                                            className="align-middle text-nowrap"
                                            style={{
                                                ...TABLE_CELL_BORDER_STYLE,
                                                position: "sticky",
                                                left: STICKY_COLUMNS.full_name
                                                    .left,
                                                minWidth:
                                                    STICKY_COLUMNS.full_name
                                                        .width,
                                                width: STICKY_COLUMNS.full_name
                                                    .width,
                                                maxWidth:
                                                    STICKY_COLUMNS.full_name
                                                        .width,
                                                zIndex: 20,
                                                backgroundColor:
                                                    stickyRowBackground,
                                            }}
                                        >
                                            {row.full_name ?? "-"}
                                        </td>
                                        <td
                                            className="align-middle text-nowrap text-center"
                                            style={{
                                                ...TABLE_CELL_BORDER_STYLE,
                                                position: "sticky",
                                                left: STICKY_COLUMNS.degree
                                                    .left,
                                                minWidth:
                                                    STICKY_COLUMNS.degree.width,
                                                width: STICKY_COLUMNS.degree
                                                    .width,
                                                maxWidth:
                                                    STICKY_COLUMNS.degree.width,
                                                zIndex: 20,
                                                backgroundColor:
                                                    stickyRowBackground,
                                            }}
                                        >
                                            {row.degree_word ?? "-"}
                                        </td>
                                        <td
                                            className="align-middle text-nowrap"
                                            style={{
                                                ...TABLE_CELL_BORDER_STYLE,
                                                position: "sticky",
                                                left: STICKY_COLUMNS
                                                    .student_status.left,
                                                minWidth:
                                                    STICKY_COLUMNS
                                                        .student_status.width,
                                                width: STICKY_COLUMNS
                                                    .student_status.width,
                                                maxWidth:
                                                    STICKY_COLUMNS
                                                        .student_status.width,
                                                zIndex: 20,
                                                backgroundColor:
                                                    stickyRowBackground,
                                            }}
                                        >
                                            {row.status ? (
                                                <div>
                                                    <StudentStatusIcon
                                                        status={row.status}
                                                    />
                                                    <span className="ms-2">
                                                        {row.status}
                                                    </span>
                                                </div>
                                            ) : (
                                                "-"
                                            )}
                                        </td>

                                        {SUMMARY_COLUMNS.map(
                                            (summaryColumn, summaryIndex) => (
                                                <td
                                                    key={`row-${row.id}-summary-${summaryColumn.key}`}
                                                    className={`align-middle text-center text-nowrap fw-bold ${summaryColumn.textClass}`}
                                                    style={{
                                                        ...TABLE_CELL_BORDER_STYLE,
                                                        ...(summaryIndex === 0
                                                            ? thickBorderStyle
                                                            : {}),
                                                    }}
                                                >
                                                    {formatSummaryCellValue(
                                                        rowSummary[
                                                            summaryColumn.key
                                                        ],
                                                    )}
                                                </td>
                                            ),
                                        )}
                                        {subjectHeaders.map(
                                            (subjectHeader, subjectIndex) => {
                                                const currentStatus =
                                                    row?.subjects?.[
                                                        subjectHeader.id
                                                    ]?.status ?? "NO CURSADO";
                                                const statusUi =
                                                    getSubjectStatusUi(
                                                        currentStatus,
                                                    );
                                                const gradeLabel =
                                                    showGrades &&
                                                    canShowGradeByStatus(
                                                        currentStatus,
                                                    )
                                                        ? formatSubjectGrade(
                                                              row?.subjects?.[
                                                                  subjectHeader
                                                                      .id
                                                              ],
                                                          )
                                                        : "-";

                                                return (
                                                    <td
                                                        key={`row-${row.id}-subject-${subjectHeader.id}`}
                                                        className={`align-middle text-center text-nowrap ${statusUi.bgClass}`}
                                                        title={statusUi.label}
                                                        style={{
                                                            ...TABLE_CELL_BORDER_STYLE,
                                                            ...(degreeStartIndexes.includes(
                                                                subjectIndex,
                                                            )
                                                                ? thickBorderStyle
                                                                : {}),
                                                        }}
                                                    >
                                                        <span className="fw-bold text-white">
                                                            {showGrades
                                                                ? gradeLabel
                                                                : statusUi.key}
                                                        </span>
                                                    </td>
                                                );
                                            },
                                        )}
                                    </tr>
                                );
                            })}
                        </tbody>
                    </Table>
                </div>
            </div>
        );
    };

    return (
        <CardContainer title="Reporte de estatus de materias">
            <Row>
                <Col xs={12} sm={12} 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)}
                        aboveFooter
                        errorText={errors.cycle && errors.cycle[0]}
                    />
                </Col>

                <Col xs={12} sm={12} md={6} lg={6} xl={4} xxl={3}>
                    <CoordinationSelectApp
                        coordination_name="coordination_id"
                        coordination_id={coordination_id}
                        handleInputChange={handleInputChange}
                        errors={errors}
                        required
                        aboveFooter
                    />
                </Col>

                <Col xs={12} sm={12} md={6} lg={6} xl={4} xxl={4}>
                    <SelectSearchApp
                        title="Carrera"
                        placeholder="Seleccione una o más carreras"
                        name="curriculum_ids"
                        value={curriculum_ids}
                        multiple
                        onChange={handleInputChange}
                        options={curriculaOptions}
                        aboveFooter
                        errorText={
                            errors.curriculum_ids && errors.curriculum_ids[0]
                        }
                    />
                </Col>

                <Col xs={12} sm={12} md={6} lg={6} xl={4} xxl={2}>
                    <SelectSearchApp
                        title="Grado"
                        placeholder="Seleccione uno o más grados"
                        name="degree"
                        value={degree}
                        multiple
                        onChange={handleInputChange}
                        options={optionsDegrees}
                        aboveFooter
                        errorText={errors.degree && errors.degree[0]}
                    />
                </Col>
            </Row>

            <Row className="text-center mt-4 mb-3">
                <Col md={12}>
                    <Button onClick={() => search()} disabled={!canSearch}>
                        Realizar búsqueda
                        <IconApp iconClassName="fas fa-search mx-2" />
                    </Button>
                    <Button
                        variant="secondary btn-app-green"
                        className="ms-3 py-2"
                        onClick={() => search(true)}
                        disabled={!canSearch}
                    >
                        Exportar
                        <IconApp iconClassName="fa fa-file-excel ms-2" />
                    </Button>
                    <Button
                        variant="secondary"
                        className="ms-3"
                        onClick={clearData}
                    >
                        Limpiar
                        <IconApp iconClassName="fa fa-broom ms-2" />
                    </Button>
                </Col>
            </Row>

            <Row>
                <Col md={12}>
                    {report === null ? (
                        <Empty description="Selecciona filtros y busca" />
                    ) : Array.isArray(report) && report.length === 0 ? (
                        <Empty description="No se encontraron resultados" />
                    ) : (
                        <>
                            <div className="mb-3 d-flex flex-wrap align-items-center justify-content-between gap-3 text-size-12">
                                <div className="d-flex flex-wrap gap-3">
                                    <CheckBoxApp
                                        name="show_grades"
                                        label="Mostrar calificaciones"
                                        labelClassName="fw-bold text-size-14"
                                        checked={showGrades}
                                        onChange={handleInputChange}
                                    />
                                    <CheckBoxApp
                                        name="show_subject_names"
                                        label="Mostrar nombre de materia"
                                        labelClassName="fw-bold text-size-14"
                                        checked={showSubjectNames}
                                        onChange={handleInputChange}
                                    />
                                </div>

                                <div className="d-flex flex-wrap gap-3">
                                    {Object.values(SUBJECT_STATUS_MAP).map(
                                        (status) => (
                                            <div
                                                key={status.key}
                                                className="d-flex align-items-center"
                                            >
                                                <IconApp
                                                    iconClassName={`fa-solid fa-circle ${status.iconClass}`}
                                                />
                                                <span className="ms-2">
                                                    <strong>
                                                        {status.key}
                                                    </strong>{" "}
                                                    - {status.label}
                                                </span>
                                            </div>
                                        ),
                                    )}
                                </div>
                            </div>
                            {report.map(renderCurriculumTable)}
                        </>
                    )}
                </Col>
            </Row>
        </CardContainer>
    );
}