import React, { useEffect, useMemo } from "react";
import { Button, Col, Modal, Row } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { CardContainer, IconApp, ModalApp, SelectSearchApp } from "@components";
import {
    buildGroupedSubjectGradeCertificateFileName,
    getSubjectGradeCertificateTypeLabel,
} from "@helpers/certificateCurriculumSheet";
import { cycleHasCurriculum } from "@helpers/curriculumHelper";
import { orderCycles } from "@helpers/orderCycles";
import { useForm } from "@hooks/useForm";
import { startShow as startListCurricula } from "@redux/slices/teachers/v2/curriculaSlice";
import { startShow as startListCycles } from "@redux/slices/teachers/v2/cycleSlice";
import {
    clearReport,
    startExportCertificateCurriculumSheet,
    startPreviewGroupedSubjectGradeCertificatePdf,
    startShowCertificateCurriculumSheet,
    startShowSubjectGradeCertificates,
    startUploadGroupedSubjectGradeCertificate,
} from "@redux/slices/users/CertificateCurriculumSheet";
import Swal from "sweetalert2";
import CertificateStatusCell from "./CertificateStatusCell";
import SubjectGradeCertificatesModal from "./SubjectGradeCertificatesModal";
import {
    STATUS_FILTERS,
    TYPE_FILTERS,
} from "./certificateCurriculumSheet.constants";
import { ToolTipCoordinationsListApp } from "@components/ToolTipCoordinationsListApp";

const defaultValues = {
    curriculum_id: null,
    cycle_id: null,
    errors: {},
};

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

    const { list: curriculaList } = useSelector((state) => state.curricula);
    const { list: cycles } = useSelector((state) => state.cycle);
    const { report } = useSelector((state) => state.certificateCurriculumSheet);
    const { user } = useSelector((state) => state.auth);

    const [cyclesByCurriculum, setCyclesByCurriculum] = React.useState([]);
    const [openCertificatesModal, setOpenCertificatesModal] =
        React.useState(false);
    const [certificateFilters, setCertificateFilters] = React.useState(null);

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

    const { curriculum_id, cycle_id, errors } = values;

    const [prevCurriculumId, setPrevCurriculumId] = React.useState(null);

    useEffect(() => {
        if (curriculum_id !== prevCurriculumId) {
            setInputValue("cycle_id", null);
            setPrevCurriculumId(curriculum_id);
        }
    }, [curriculum_id, prevCurriculumId, setInputValue]);

    useEffect(() => {
        dispatch(
            startListCurricula({
                asList: true,
                checkCoordinations: true,
                only_with_normal_students: 1,
            }),
        );
        dispatch(startListCycles({ asList: true }));
    }, []);

    useEffect(() => {
        if (cycles && curriculum_id) {
            let activeCurriculum = curriculaList.find(
                (c) => c.id === curriculum_id,
            );
            if (activeCurriculum) {
                let cyclesPeriodicity = cycles.filter(
                    (cycle) =>
                        cycle.periodicity?.toUpperCase() ===
                        activeCurriculum.periodicity,
                );
                let cyclesCurriculum = cyclesPeriodicity.filter((cycle) =>
                    cycleHasCurriculum(cycle, curriculum_id),
                );
                let today = new Date();
                let cyclesActivesAndPass = cyclesCurriculum.filter((cycle) => {
                    let cycleDate = new Date(cycle.general_from);
                    return cycleDate <= today;
                });
                setCyclesByCurriculum(
                    orderCycles(cyclesActivesAndPass, true, false),
                );
            }
        } else {
            setCyclesByCurriculum([]);
            setInputValue("cycle_id", null);
        }
    }, [cycles, curriculum_id, curriculaList]);

    const canSearch = useMemo(
        () => curriculum_id && cycle_id,
        [curriculum_id, cycle_id],
    );

    useEffect(() => {
        if (!openCertificatesModal && curriculum_id && cycle_id) {
            dispatch(
                startShowCertificateCurriculumSheet({
                    curriculum_id,
                    cycle_id,
                }),
            );
        } else if (!curriculum_id || !cycle_id) {
            dispatch(clearReport());
        }
    }, [curriculum_id, cycle_id, openCertificatesModal]);

    const handleExport = () => {
        if (canSearch) {
            dispatch(
                startExportCertificateCurriculumSheet({
                    curriculum_id,
                    cycle_id,
                }),
            );
        }
    };

    const hideNa = true;
    const [previewAll, setPreviewAll] = React.useState(null);

    const { certificateRows } = useSelector(
        (state) => state.certificateCurriculumSheet,
    );

    React.useEffect(() => {
        if (!openCertificatesModal && curriculum_id && cycle_id) {
            dispatch(
                startShowSubjectGradeCertificates({
                    curriculum_id,
                    cycle_id,
                }),
            );
        }
    }, [curriculum_id, cycle_id, openCertificatesModal]);

    const hasCertificateRows = Array.isArray(certificateRows?.rows);
    const isLoadingCertificateRows = canSearch && !hasCertificateRows;
    const allRows = hasCertificateRows ? certificateRows.rows : [];

    const { filteredReportDegrees, maxSubjectsFiltered } = React.useMemo(() => {
        if (!report?.data?.degrees) {
            return { filteredReportDegrees: [], maxSubjectsFiltered: 1 };
        }

        const degrees = report.data.degrees.map((degree) => {
            if (!hideNa) return degree;

            // Filter out subjects where both ordinary and extraordinary are N/A
            const filteredSubjects = (degree.subjects || []).filter((sub) => {
                const ordinaryIsNa =
                    sub.ordinary === "N/A" ||
                    sub.ordinary_summary?.display === "N/A";
                const extraordinaryIsNa =
                    sub.extraordinary === "N/A" ||
                    sub.extraordinary_summary?.display === "N/A";
                return !(ordinaryIsNa && extraordinaryIsNa);
            });

            return {
                ...degree,
                subjects: filteredSubjects,
            };
        });

        const maxCount = Math.max(
            ...degrees.map((d) => d.subjects?.length || 0),
        );
        const maxSubjects = Math.max(1, maxCount + 1);

        return {
            filteredReportDegrees: degrees,
            maxSubjectsFiltered: maxSubjects,
        };
    }, [report, hideNa]);

    const filteredRows = React.useMemo(() => {
        return allRows.filter((row) => {
            return hideNa ? row.is_na !== true : true;
        });
    }, [allRows, hideNa]);

    const pendingRows = React.useMemo(() => {
        return filteredRows.filter(
            (row) => row.can_generate !== false && !row.uploaded,
        );
    }, [filteredRows]);

    const pendingRowsByType = useMemo(
        () => ({
            ORDINARY: pendingRows.filter(
                (row) => row.certificate_type === "ORDINARY",
            ),
            EXTRAORDINARY: pendingRows.filter(
                (row) => row.certificate_type === "EXTRAORDINARY",
            ),
        }),
        [pendingRows],
    );

    const previewableRows = useMemo(() => {
        return filteredRows.filter((row) => row.can_generate !== false);
    }, [filteredRows]);

    const previewableRowsByType = useMemo(
        () => ({
            ORDINARY: previewableRows.filter(
                (row) => row.certificate_type === "ORDINARY",
            ),
            EXTRAORDINARY: previewableRows.filter(
                (row) => row.certificate_type === "EXTRAORDINARY",
            ),
        }),
        [previewableRows],
    );

    const estimatedGenerationTime = useMemo(() => {
        if (pendingRows.length === 0) {
            return null;
        }

        const minMinutes = Math.max(
            1,
            Math.ceil((pendingRows.length * 3) / 60),
        );
        const maxMinutes = Math.max(
            minMinutes,
            Math.ceil((pendingRows.length * 8) / 60),
        );

        return minMinutes === maxMinutes ? `2 min aprox.` : `2 a 3 min aprox.`;
    }, [pendingRows.length]);

    const handlePreviewByType = (certificateType) => {
        const rowsToPreview = previewableRowsByType[certificateType] || [];

        if (rowsToPreview.length === 0) {
            Swal.fire("Sin actas", "No hay actas para previsualizar.", "info");
            return;
        }

        const storedFilePaths = [
            ...new Set(
                rowsToPreview
                    .map((row) => row.certificate?.file_path)
                    .filter(Boolean),
            ),
        ];
        const storedUri = rowsToPreview.find((row) => row.certificate?.uri)
            ?.certificate?.uri;

        if (storedFilePaths.length === 1 && storedUri) {
            if (previewAll?.isObjectUrl && previewAll?.url) {
                URL.revokeObjectURL(previewAll.url);
            }

            setPreviewAll({
                allRows: rowsToPreview,
                blob: null,
                certificateType,
                fileName:
                    buildGroupedSubjectGradeCertificateFileName({
                        certificateType,
                        curriculumLabel: selectedCurriculumLabel,
                        cycleLabel: selectedCycleLabel,
                    }) || "actas",
                isObjectUrl: false,
                url: storedUri,
                shouldUpload: false,
            });
            return;
        }

        dispatch(
            startPreviewGroupedSubjectGradeCertificatePdf(
                {
                    curriculum_id,
                    cycle_id,
                    certificate_type: certificateType,
                },
                (blob) => {
                    const fileName =
                        buildGroupedSubjectGradeCertificateFileName({
                            certificateType,
                            curriculumLabel: selectedCurriculumLabel,
                            cycleLabel: selectedCycleLabel,
                        }) || "actas";
                    const previewFile = new File([blob], `${fileName}.pdf`, {
                        type: blob.type || "application/pdf",
                    });

                    if (previewAll?.isObjectUrl && previewAll?.url) {
                        URL.revokeObjectURL(previewAll.url);
                    }
                    setPreviewAll({
                        allRows: rowsToPreview,
                        blob: previewFile,
                        certificateType,
                        fileName,
                        isObjectUrl: true,
                        url: URL.createObjectURL(previewFile),
                        shouldUpload: false,
                    });
                },
            ),
        );
    };

    const closePreviewAll = () => {
        if (previewAll?.isObjectUrl && previewAll?.url) {
            URL.revokeObjectURL(previewAll.url);
        }
        setPreviewAll(null);
    };

    const handleGenerateAndUpload = (certificateType) => {
        const rowsToGenerate = pendingRowsByType[certificateType] || [];

        if (rowsToGenerate.length === 0) {
            Swal.fire(
                "Sin actas pendientes",
                `No hay ${getSubjectGradeCertificateTypeLabel(certificateType, {
                    plural: true,
                })} pendientes por generar.`,
                "info",
            );
            return;
        }

        const certificateTypeLabel = getSubjectGradeCertificateTypeLabel(
            certificateType,
            {
                plural: true,
            },
        );

        Swal.fire({
            title: "Generando actas",
            html: `Preparando ${certificateTypeLabel}...`,
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            },
        });

        dispatch(
            startPreviewGroupedSubjectGradeCertificatePdf(
                {
                    curriculum_id,
                    cycle_id,
                    certificate_type: certificateType,
                    showLoading: false,
                },
                (blob) => {
                    const fileName =
                        buildGroupedSubjectGradeCertificateFileName({
                            certificateType,
                            curriculumLabel: selectedCurriculumLabel,
                            cycleLabel: selectedCycleLabel,
                        }) || "actas";
                    const previewFile = new File([blob], `${fileName}.pdf`, {
                        type: blob.type || "application/pdf",
                    });

                    Swal.update({
                        html: `Subiendo ${rowsToGenerate.length} ${certificateTypeLabel}...`,
                    });

                    dispatch(
                        startUploadGroupedSubjectGradeCertificate(
                            {
                                rows: rowsToGenerate,
                                pdfFile: previewFile,
                                fileName,
                            },
                            () => {
                                Swal.fire(
                                    "Guardado",
                                    `${rowsToGenerate.length} ${certificateTypeLabel} generadas correctamente.`,
                                    "success",
                                );
                                dispatch(
                                    startShowCertificateCurriculumSheet({
                                        curriculum_id,
                                        cycle_id,
                                    }),
                                );
                                dispatch(
                                    startShowSubjectGradeCertificates({
                                        curriculum_id,
                                        cycle_id,
                                    }),
                                );
                            },
                            (_, processedCount) => {
                                Swal.close();
                                Swal.fire(
                                    "Proceso detenido",
                                    `La generación se detuvo por un error después de ${processedCount} actas procesadas.`,
                                    "error",
                                );
                            },
                        ),
                    );
                },
            ),
        );
    };

    const handleUploadFromModal = () => {
        if (!previewAll?.allRows?.length) return;

        Swal.fire({
            title: "Generando actas",
            html:
                "Procesando acta <b>1</b> de <b>" +
                previewAll.allRows.length +
                "</b>...",
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            },
        });

        dispatch(
            startUploadGroupedSubjectGradeCertificate(
                {
                    rows: previewAll.allRows,
                    pdfFile: previewAll.blob,
                    fileName: previewAll.fileName,
                    onProgress: (current) => {
                        const bElement =
                            Swal.getHtmlContainer()?.querySelector("b");
                        if (bElement) {
                            bElement.textContent = current;
                        }
                    },
                },
                () => {
                    Swal.fire(
                        "Guardado",
                        `${previewAll.allRows.length} actas generadas correctamente.`,
                        "success",
                    );
                    closePreviewAll();
                    dispatch(
                        startShowSubjectGradeCertificates({
                            curriculum_id,
                            cycle_id,
                        }),
                    );
                },
                (_, processedCount) => {
                    Swal.close();
                    Swal.fire(
                        "Proceso detenido",
                        `La generación se detuvo por un error después de ${processedCount} actas procesadas.`,
                        "error",
                    );
                },
            ),
        );
    };

    const openCertificateDetails = (
        degreeValue,
        schoolSubjectId = null,
        initialType = TYPE_FILTERS.ALL,
        initialStatus = STATUS_FILTERS.ALL,
    ) => {
        setCertificateFilters({
            curriculum_id,
            cycle_id,
            degree: degreeValue,
            school_subject_id: schoolSubjectId,
            initial_type: initialType,
            initial_status: initialStatus,
        });
        setOpenCertificatesModal(true);
    };

    const isStatusCellActionable = (summary) =>
        summary?.status !== "N/A" && summary?.status !== "N/C";

    // const handleDegreeClick = (degreeValue) => {
    //     openCertificateDetails(degreeValue);
    // };

    const handleSubjectClick = (
        subjectId,
        degreeValue,
        initialType = TYPE_FILTERS.ALL,
        initialStatus = STATUS_FILTERS.ALL,
    ) => {
        openCertificateDetails(
            degreeValue,
            subjectId,
            initialType,
            initialStatus,
        );
    };

    const curriculumOptions = useMemo(
        () =>
            curriculaList
                ?.filter((curriculum) => {
                    const coordinationIds =
                        user?.coordination?.map(
                            (coordination) => coordination.id,
                        ) || [];

                    if (coordinationIds.length === 0) {
                        return true;
                    }

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

    const selectedCurriculumLabel = useMemo(() => {
        return (
            curriculumOptions?.find(
                (curriculum) => curriculum.value === curriculum_id,
            )?.label || report?.data?.curriculum?.full_name
        );
    }, [curriculumOptions, curriculum_id, report]);

    const selectedCycleLabel = useMemo(() => {
        return (
            cyclesByCurriculum?.find((cycle) => cycle.value === cycle_id)
                ?.label || report?.data?.cycle?.name
        );
    }, [cyclesByCurriculum, cycle_id, report]);

    const pendingOrdinaryCount = pendingRowsByType.ORDINARY.length;
    const pendingExtraordinaryCount = pendingRowsByType.EXTRAORDINARY.length;
    const previewableOrdinaryCount = previewableRowsByType.ORDINARY.length;
    const previewableExtraordinaryCount =
        previewableRowsByType.EXTRAORDINARY.length;

    return (
        <CardContainer title="Actas por materia">
            <Row>
                <Col xs={12} sm={12} md={12} lg={12} xl={8} xxl={8}>
                    <SelectSearchApp
                        title="Oferta educativa"
                        placeholder="Seleccione una oferta educativa"
                        name="curriculum_id"
                        required
                        value={curriculum_id}
                        onChange={handleInputChange}
                        options={curriculumOptions}
                        infoText={
                            <span>
                                Solo podrá ver las pertenecientes a su
                                coordinación y con alumnos activos{" "}
                                <ToolTipCoordinationsListApp
                                    coordinations={user?.coordination}
                                />
                            </span>
                        }
                        aboveFooter
                        errorText={
                            errors.curriculum_id && errors.curriculum_id[0]
                        }
                    />
                </Col>
                <Col xs={10} sm={6} md={4} lg={4} xl={3} xxl={3}>
                    <SelectSearchApp
                        title="Ciclo"
                        placeholder="Seleccione un ciclo"
                        name="cycle_id"
                        required
                        value={cycle_id}
                        onChange={handleInputChange}
                        options={cyclesByCurriculum}
                        aboveFooter
                        disabled={!curriculum_id}
                        errorText={errors.cycle_id && errors.cycle_id[0]}
                    />
                </Col>
            </Row>
            <Row className="text-center mt-4 mb-3">
                <Col md={12}>
                    <Button
                        type="button"
                        className="btn-app btn-app-green"
                        disabled={!canSearch}
                        onClick={handleExport}
                    >
                        <span className="d-inline-flex align-items-center gap-2">
                            <IconApp iconClassName="fa fa-file-excel" />
                            <span>Exportar a Excel</span>
                        </span>
                    </Button>
                </Col>
            </Row>

            {cycle_id && curriculum_id && (
                <Row className="text-center mt-2 mb-3">
                    <Col md={12}>
                        <div className="d-flex gap-2 justify-content-center flex-wrap">
                            {previewableOrdinaryCount > 0 &&
                                pendingOrdinaryCount === 0 && (
                                    <Button
                                        // variant="primary"
                                        className="btn-outline-app "
                                        onClick={() =>
                                            handlePreviewByType("ORDINARY")
                                        }
                                        disabled={isLoadingCertificateRows}
                                    >
                                        <span className="d-inline-flex align-items-center gap-2">
                                            <IconApp
                                                iconClassName={
                                                    isLoadingCertificateRows
                                                        ? "fa-solid fa-spinner fa-spin"
                                                        : "fa-solid fa-eye"
                                                }
                                            />
                                            <span>
                                                {isLoadingCertificateRows
                                                    ? "Cargando actas..."
                                                    : `Vista previa ordinarias (${previewableOrdinaryCount})`}
                                            </span>
                                        </span>
                                    </Button>
                                )}
                            {previewableExtraordinaryCount > 0 &&
                                pendingExtraordinaryCount === 0 && (
                                    <Button
                                        // variant="primary"
                                        className="btn-outline-app "
                                        onClick={() =>
                                            handlePreviewByType("EXTRAORDINARY")
                                        }
                                        disabled={isLoadingCertificateRows}
                                    >
                                        <span className="d-inline-flex align-items-center gap-2">
                                            <IconApp
                                                iconClassName={
                                                    isLoadingCertificateRows
                                                        ? "fa-solid fa-spinner fa-spin"
                                                        : "fa-solid fa-eye"
                                                }
                                            />
                                            <span>
                                                {isLoadingCertificateRows
                                                    ? "Cargando actas..."
                                                    : `Vista previa extraordinarias (${previewableExtraordinaryCount})`}
                                            </span>
                                        </span>
                                    </Button>
                                )}
                            {estimatedGenerationTime && (
                                <>
                                    {pendingOrdinaryCount > 0 && (
                                        <Button
                                            // variant="warning"
                                            className="btn-outline-app"
                                            onClick={() =>
                                                handleGenerateAndUpload(
                                                    "ORDINARY",
                                                )
                                            }
                                        >
                                            <span className="d-inline-flex align-items-center gap-2">
                                                <IconApp iconClassName="fa-solid fa-cloud-upload-alt" />
                                                <span>
                                                    Generar pendientes
                                                    ordinarias (
                                                    {pendingOrdinaryCount})
                                                </span>
                                            </span>
                                        </Button>
                                    )}
                                    {pendingExtraordinaryCount > 0 && (
                                        <Button
                                            className="btn-outline-app"
                                            onClick={() =>
                                                handleGenerateAndUpload(
                                                    "EXTRAORDINARY",
                                                )
                                            }
                                        >
                                            <span className="d-inline-flex align-items-center gap-2">
                                                <IconApp iconClassName="fa-solid fa-cloud-upload-alt" />
                                                <span>
                                                    Generar pendientes
                                                    extraordinarias (
                                                    {pendingExtraordinaryCount})
                                                </span>
                                            </span>
                                        </Button>
                                    )}
                                </>
                            )}
                            <Button
                                className="btn-app-refresh"
                                onClick={() => {
                                    dispatch(
                                        startShowCertificateCurriculumSheet({
                                            curriculum_id,
                                            cycle_id,
                                        }),
                                    );
                                    dispatch(
                                        startShowSubjectGradeCertificates({
                                            curriculum_id,
                                            cycle_id,
                                        }),
                                    );
                                    Swal.fire({
                                        title: "Actualizado",
                                        text: "Listado de actas actualizado correctamente.",
                                        icon: "success",
                                        timer: 1500,
                                        showConfirmButton: false,
                                    });
                                }}
                            >
                                <span className="d-inline-flex align-items-center gap-2">
                                    <IconApp iconClassName="fa-solid fa-arrows-rotate" />
                                    <span>Actualizar</span>
                                </span>
                            </Button>
                        </div>
                        <div className="text-muted text-size-12 mt-1">
                            {estimatedGenerationTime && (
                                <>
                                    La generación masiva puede tardar{" "}
                                    <strong>{estimatedGenerationTime}</strong>,
                                    dependiendo de la cantidad de alumnos y
                                    actas.
                                </>
                            )}
                        </div>
                    </Col>
                </Row>
            )}

            <ModalApp
                titleModal={`Vista previa de ${getSubjectGradeCertificateTypeLabel(
                    previewAll?.certificateType || "ALL",
                    {
                        plural: true,
                    },
                )}`}
                size="xl"
                openModal={!!previewAll}
                setModalAction={(isOpen) => {
                    if (!isOpen) {
                        closePreviewAll();
                    }
                }}
                onCloseModal={closePreviewAll}
                Action={() => null}
            >
                <Modal.Body>
                    {previewAll?.url && (
                        <iframe
                            src={`${previewAll.url}`}
                            title="Vista previa de todas las actas"
                            style={{
                                width: "100%",
                                height: "72vh",
                                border: "1px solid #dee2e6",
                                borderRadius: "4px",
                            }}
                        />
                    )}
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={closePreviewAll}>
                        Cerrar
                    </Button>
                    {previewAll?.shouldUpload && (
                        <Button
                            variant="success"
                            onClick={handleUploadFromModal}
                        >
                            <span className="d-inline-flex align-items-center gap-2">
                                <IconApp iconClassName="fa-solid fa-check" />
                                <span>
                                    Subir pendientes (
                                    {previewAll.allRows?.length || 0})
                                </span>
                            </span>
                        </Button>
                    )}
                </Modal.Footer>
            </ModalApp>

            {certificateFilters && (
                <SubjectGradeCertificatesModal
                    openModal={openCertificatesModal}
                    setOpenModal={setOpenCertificatesModal}
                    filters={certificateFilters}
                />
            )}

            {report && report.data && (
                <div className="mt-4">
                    <div className="text-center mb-4">
                        {/* <div
                            className="fw-bold text-uppercase d-flex justify-content-center align-items-center gap-2"
                            style={{
                                background:
                                    "linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%)",
                                color: "#ffffff",
                                padding: "14px 24px",
                                borderRadius: "10px",
                                boxShadow:
                                    "0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04)",
                                fontSize: "16px",
                                letterSpacing: "0.5px",
                            }}
                        >
                            <IconApp iconClassName="fa-solid fa-file-signature me-1" />
                            REGISTRO DE ENTREGA DE ACTAS DE EXÁMENES CICLO{" "}
                            {report.data.cycle?.name}
                        </div> */}
                    </div>

                    <div className="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4 mt-3">
                        <div
                            className="d-flex align-items-center gap-2"
                            style={{
                                backgroundColor: "#eff6ff",
                                border: "1px solid #bfdbfe",
                                padding: "10px 16px",
                                borderRadius: "8px",
                            }}
                        >
                            <IconApp
                                iconClassName="fa-solid fa-circle-info fa-lg"
                                color="#1d4ed8"
                                description="El número que aparece bajo cada materia representa el total de Actas Subidas y Firmadas (Grupos/Docentes) asociadas a esa materia. Un Acta se genera por cada combinación única de Grupo y Docente; no representa la cantidad de alumnos individuales inscritos."
                            />
                            <span
                                style={{
                                    fontSize: "13px",
                                    color: "#1e40af",
                                    fontWeight: "600",
                                }}
                            >
                                ¿Cómo se cuentan las actas? Pasa el cursor sobre
                                el ícono de información.
                            </span>
                        </div>

                        <div className="d-flex gap-3 align-items-center flex-wrap">
                            <div
                                className="d-flex align-items-center gap-2"
                                style={{
                                    background: "#ecfdf5",
                                    border: "1px solid #a7f3d0",
                                    padding: "8px 16px",
                                    borderRadius: "8px",
                                    boxShadow: "0 1px 2px rgba(0,0,0,0.05)",
                                }}
                            >
                                <div
                                    style={{
                                        width: "8px",
                                        height: "8px",
                                        borderRadius: "50%",
                                        background: "#10b981",
                                    }}
                                ></div>
                                <span
                                    style={{
                                        fontSize: "12px",
                                        color: "#065f46",
                                        fontWeight: "700",
                                    }}
                                >
                                    Ordinarias subidas:{" "}
                                    {report.data.ordinary_total}
                                </span>
                            </div>
                            <div
                                className="d-flex align-items-center gap-2"
                                style={{
                                    background: "#f0f9ff",
                                    border: "1px solid #bae6fd",
                                    padding: "8px 16px",
                                    borderRadius: "8px",
                                    boxShadow: "0 1px 2px rgba(0,0,0,0.05)",
                                }}
                            >
                                <div
                                    style={{
                                        width: "8px",
                                        height: "8px",
                                        borderRadius: "50%",
                                        background: "#0ea5e9",
                                    }}
                                ></div>
                                <span
                                    style={{
                                        fontSize: "12px",
                                        color: "#075985",
                                        fontWeight: "700",
                                    }}
                                >
                                    Extraordinarias subidas:{" "}
                                    {report.data.extraordinary_total}
                                </span>
                            </div>
                            <div
                                className="d-flex align-items-center gap-2"
                                style={{
                                    background: "#fef2f2",
                                    border: "1px solid #fecaca",
                                    padding: "8px 16px",
                                    borderRadius: "8px",
                                    boxShadow: "0 1px 2px rgba(0,0,0,0.05)",
                                }}
                            >
                                <div
                                    style={{
                                        width: "8px",
                                        height: "8px",
                                        borderRadius: "50%",
                                        background: "#ef4444",
                                    }}
                                ></div>
                                <span
                                    style={{
                                        fontSize: "12px",
                                        color: "#991b1b",
                                        fontWeight: "700",
                                    }}
                                >
                                    No Capturadas:{" "}
                                    {report.data.not_captured_total}
                                </span>
                            </div>
                        </div>
                    </div>

                    <div
                        className="mb-4"
                        style={{
                            background: "#f8fafc",
                            border: "1px solid #e2e8f0",
                            borderRadius: "12px",
                            padding: "16px 20px",
                        }}
                    >
                        <h6
                            style={{
                                fontWeight: "700",
                                color: "#0f172a",
                                marginBottom: "12px",
                                display: "flex",
                                alignItems: "center",
                                gap: "8px",
                            }}
                        >
                            <IconApp iconClassName="fa-solid fa-circle-question text-primary" />
                            Guía de Estados y Valores en el Reporte
                        </h6>
                        <Row className="g-3">
                            <Col xs={12} md={4}>
                                <div
                                    style={{
                                        background: "#ffffff",
                                        border: "1px solid #e2e8f0",
                                        borderRadius: "8px",
                                        padding: "12px 16px",
                                        height: "100%",
                                        boxShadow: "0 1px 2px rgba(0,0,0,0.02)",
                                    }}
                                >
                                    <div className="d-flex align-items-center gap-2 mb-2">
                                        <span
                                            style={{
                                                backgroundColor: "#ecfdf5",
                                                color: "#047857",
                                                fontWeight: "800",
                                                fontSize: "14px",
                                                padding: "2px 8px",
                                                borderRadius: "6px",
                                                border: "1px solid #a7f3d0",
                                            }}
                                        >
                                            # Número (ej. 4)
                                        </span>
                                        <strong
                                            style={{
                                                fontSize: "13px",
                                                color: "#334155",
                                            }}
                                        >
                                            Actas Subidas
                                        </strong>
                                    </div>
                                    <p
                                        style={{
                                            fontSize: "12px",
                                            color: "#64748b",
                                            margin: 0,
                                            lineHeight: "1.4",
                                        }}
                                    >
                                        Indica cuántas actas (por grupo/docente)
                                        ya Generadas para esa materia. Al hacer
                                        clic, se abre una pestaña con el listado
                                        de alumnos y sus calificaciones
                                        detalladas.
                                    </p>
                                </div>
                            </Col>
                            <Col xs={12} md={4}>
                                <div
                                    style={{
                                        background: "#ffffff",
                                        border: "1px solid #e2e8f0",
                                        borderRadius: "8px",
                                        padding: "12px 16px",
                                        height: "100%",
                                        boxShadow: "0 1px 2px rgba(0,0,0,0.02)",
                                    }}
                                >
                                    <div className="d-flex align-items-center gap-2 mb-2">
                                        <span
                                            style={{
                                                backgroundColor: "#fff5f5",
                                                color: "#e11d48",
                                                fontWeight: "800",
                                                fontSize: "14px",
                                                padding: "2px 8px",
                                                borderRadius: "6px",
                                                border: "1px solid #fecaca",
                                            }}
                                        >
                                            N/C
                                        </span>
                                        <strong
                                            style={{
                                                fontSize: "13px",
                                                color: "#334155",
                                            }}
                                        >
                                            No Capturado
                                        </strong>
                                    </div>
                                    <p
                                        style={{
                                            fontSize: "12px",
                                            color: "#64748b",
                                            margin: 0,
                                            lineHeight: "1.4",
                                        }}
                                    >
                                        Significa que hay alumnos inscritos en
                                        este ciclo, pero no se encontraron
                                        calificaciones capturadas para el
                                        periodo correspondiente.
                                    </p>
                                </div>
                            </Col>
                            <Col xs={12} md={4}>
                                <div
                                    style={{
                                        background: "#ffffff",
                                        border: "1px solid #e2e8f0",
                                        borderRadius: "8px",
                                        padding: "12px 16px",
                                        height: "100%",
                                        boxShadow: "0 1px 2px rgba(0,0,0,0.02)",
                                    }}
                                >
                                    <div className="d-flex align-items-center gap-2 mb-2">
                                        <span
                                            style={{
                                                backgroundColor: "#f8fafc",
                                                color: "#64748b",
                                                fontWeight: "800",
                                                fontSize: "14px",
                                                padding: "2px 8px",
                                                borderRadius: "6px",
                                                border: "1px solid #cbd5e1",
                                            }}
                                        >
                                            N/A
                                        </span>
                                        <strong
                                            style={{
                                                fontSize: "13px",
                                                color: "#334155",
                                            }}
                                        >
                                            No Aplica
                                        </strong>
                                    </div>
                                    <p
                                        style={{
                                            fontSize: "12px",
                                            color: "#64748b",
                                            margin: 0,
                                            lineHeight: "1.4",
                                        }}
                                    >
                                        Indica que no hay alumnos inscritos en
                                        la materia, o bien (en extraordinario)
                                        que ningún alumno reprobó ordinaria ni
                                        requiere examen, por lo que no se
                                        requiere generar acta.
                                    </p>
                                </div>
                            </Col>
                        </Row>
                    </div>

                    <div
                        style={{
                            overflowX: "auto",
                            borderRadius: "12px",
                            boxShadow:
                                "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05)",
                            border: "1px solid #e2e8f0",
                            background: "#ffffff",
                            padding: "0",
                        }}
                    >
                        <table
                            className="w-100 text-center"
                            style={{
                                minWidth: "1500px",
                                fontSize: "12px",
                                borderCollapse: "separate",
                                borderSpacing: "0",
                                fontFamily: "'Inter', sans-serif",
                            }}
                        >
                            <tbody>
                                {filteredReportDegrees?.map(
                                    (degree, degreeIndex) => (
                                        <React.Fragment key={degreeIndex}>
                                            {/* Spacer row to visually group degrees gracefully */}
                                            <tr
                                                style={{
                                                    height: "6px",
                                                    backgroundColor: "#f8fafc",
                                                }}
                                            >
                                                <td
                                                    colSpan={
                                                        maxSubjectsFiltered
                                                    }
                                                    style={{ border: "none" }}
                                                />
                                            </tr>
                                            {degree.subjects?.length === 0 ? (
                                                <tr>
                                                    <td
                                                        style={{
                                                            backgroundColor:
                                                                "#eff6ff",
                                                            color: "#1e40af",
                                                            fontWeight: "700",
                                                            width: "120px",
                                                            cursor: "pointer",
                                                            padding: "6px 8px",
                                                            border: "1px solid #bfdbfe",
                                                            borderTopLeftRadius:
                                                                "6px",
                                                            borderBottomLeftRadius:
                                                                "6px",
                                                            transition:
                                                                "all 0.2s",
                                                        }}
                                                        title="Ver detalle de actas por grupo"
                                                    >
                                                        <div className="d-flex flex-column align-items-center justify-content-center gap-2 py-2">
                                                            <IconApp iconClassName="fa-solid fa-graduation-cap fa-lg" />
                                                            <span>
                                                                {
                                                                    degree.degree_label
                                                                }
                                                            </span>
                                                        </div>
                                                    </td>
                                                    <td
                                                        colSpan={
                                                            maxSubjectsFiltered -
                                                            1
                                                        }
                                                        style={{
                                                            padding: "16px",
                                                            color: "#64748b",
                                                            fontWeight: "500",
                                                            fontStyle: "italic",
                                                            textAlign: "center",
                                                            verticalAlign:
                                                                "middle",
                                                            backgroundColor:
                                                                "#f8fafc",
                                                            border: "1px solid #cbd5e1",
                                                            borderTopRightRadius:
                                                                "6px",
                                                            borderBottomRightRadius:
                                                                "6px",
                                                        }}
                                                    >
                                                        No hay calificaciones
                                                        asignadas en este ciclo
                                                        para este grado.
                                                    </td>
                                                </tr>
                                            ) : (
                                                <>
                                                    <tr>
                                                        <td
                                                            style={{
                                                                backgroundColor:
                                                                    "#eff6ff",
                                                                color: "#1e40af",
                                                                fontWeight:
                                                                    "700",
                                                                width: "120px",
                                                                padding:
                                                                    "6px 8px",
                                                                border: "1px solid #bfdbfe",
                                                                borderTopLeftRadius:
                                                                    "6px",
                                                                borderBottomLeftRadius:
                                                                    "6px",
                                                                transition:
                                                                    "all 0.2s",
                                                            }}
                                                            rowSpan={1}
                                                            title="Ver detalle de actas por grupo"
                                                            // onClick={() =>
                                                            //     handleDegreeClick(
                                                            //         degree.degree,
                                                            //     )
                                                            // }
                                                            // onMouseEnter={(
                                                            //     e,
                                                            // ) => {
                                                            //     e.currentTarget.style.backgroundColor =
                                                            //         "#dbeafe";
                                                            //     e.currentTarget.style.color =
                                                            //         "#1d4ed8";
                                                            // }}
                                                            // onMouseLeave={(
                                                            //     e,
                                                            // ) => {
                                                            //     e.currentTarget.style.backgroundColor =
                                                            //         "#eff6ff";
                                                            //     e.currentTarget.style.color =
                                                            //         "#1e40af";
                                                            // }}
                                                        >
                                                            <div className="d-flex flex-column align-items-center justify-content-center gap-2 py-2">
                                                                <IconApp iconClassName="fa-solid fa-graduation-cap fa-lg" />
                                                                <span>
                                                                    {
                                                                        degree.degree_label
                                                                    }
                                                                </span>
                                                            </div>
                                                        </td>
                                                        {degree.subjects
                                                            ?.slice(
                                                                0,
                                                                Math.max(
                                                                    0,
                                                                    maxSubjectsFiltered -
                                                                        1,
                                                                ),
                                                            )
                                                            .map(
                                                                (
                                                                    subjectData,
                                                                    subjIndex,
                                                                ) => (
                                                                    <td
                                                                        key={
                                                                            subjIndex
                                                                        }
                                                                        style={{
                                                                            backgroundColor:
                                                                                "#f8fafc",
                                                                            color: "#1e293b",
                                                                            fontWeight:
                                                                                "700",
                                                                            minWidth:
                                                                                "130px",
                                                                            maxWidth:
                                                                                "180px",
                                                                            // cursor: "pointer",
                                                                            padding:
                                                                                "6px 6px",
                                                                            border: "1px solid #cbd5e1",
                                                                            transition:
                                                                                "all 0.15s",
                                                                            verticalAlign:
                                                                                "middle",
                                                                        }}
                                                                        title={`${subjectData.subject?.full_name} (Ver detalle por grupo)`}
                                                                        // onClick={() =>
                                                                        //     handleSubjectClick(
                                                                        //         subjectData
                                                                        //             .subject
                                                                        //             ?.id,
                                                                        //         degree.degree,
                                                                        //     )
                                                                        // }
                                                                        // onMouseEnter={(
                                                                        //     e,
                                                                        // ) => {
                                                                        //     e.currentTarget.style.backgroundColor =
                                                                        //         "#eff6ff";
                                                                        //     e.currentTarget.style.borderColor =
                                                                        //         "#3b82f6";
                                                                        // }}
                                                                        // onMouseLeave={(
                                                                        //     e,
                                                                        // ) => {
                                                                        //     e.currentTarget.style.backgroundColor =
                                                                        //         "#f8fafc";
                                                                        //     e.currentTarget.style.borderColor =
                                                                        //         "#cbd5e1";
                                                                        // }}
                                                                    >
                                                                        <div className="d-flex flex-column align-items-center justify-content-center gap-1">
                                                                            {subjectData
                                                                                .subject
                                                                                ?.cve_subject ? (
                                                                                <span
                                                                                    style={{
                                                                                        fontSize:
                                                                                            "10px",
                                                                                        color: "#475569",
                                                                                        fontWeight:
                                                                                            "700",
                                                                                        backgroundColor:
                                                                                            "#e2e8f0",
                                                                                        padding:
                                                                                            "2px 6px",
                                                                                        borderRadius:
                                                                                            "4px",
                                                                                        letterSpacing:
                                                                                            "0.5px",
                                                                                    }}
                                                                                >
                                                                                    {
                                                                                        subjectData
                                                                                            .subject
                                                                                            .cve_subject
                                                                                    }{" "}
                                                                                    -
                                                                                </span>
                                                                            ) : (
                                                                                <IconApp iconClassName="fa-solid fa-book-open text-muted fa-sm" />
                                                                            )}
                                                                            <div
                                                                                style={{
                                                                                    width: "100%",
                                                                                    whiteSpace:
                                                                                        "nowrap",
                                                                                    overflow:
                                                                                        "hidden",
                                                                                    textOverflow:
                                                                                        "ellipsis",
                                                                                    fontSize:
                                                                                        "11px",
                                                                                    fontWeight:
                                                                                        "700",
                                                                                    color: "#0f172a",
                                                                                    lineHeight:
                                                                                        "1.2",
                                                                                }}
                                                                            >
                                                                                {
                                                                                    subjectData
                                                                                        .subject
                                                                                        ?.name
                                                                                }
                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                ),
                                                            )}
                                                        {degree.subjects
                                                            ?.length <
                                                            maxSubjectsFiltered -
                                                                1 &&
                                                            Array.from({
                                                                length: Math.max(
                                                                    0,
                                                                    maxSubjectsFiltered -
                                                                        1 -
                                                                        degree
                                                                            .subjects
                                                                            ?.length,
                                                                ),
                                                            }).map(
                                                                (
                                                                    _,
                                                                    emptyIndex,
                                                                ) => (
                                                                    <td
                                                                        key={`empty-${emptyIndex}`}
                                                                        style={{
                                                                            backgroundColor:
                                                                                "#f8fafc",
                                                                            border: "1px solid #cbd5e1",
                                                                        }}
                                                                    />
                                                                ),
                                                            )}
                                                    </tr>
                                                    <tr>
                                                        <td
                                                            style={{
                                                                fontWeight:
                                                                    "700",
                                                                backgroundColor:
                                                                    "#f8fafc",
                                                                color: "#64748b",
                                                                padding:
                                                                    "6px 6px",
                                                                border: "1px solid #cbd5e1",
                                                                fontSize:
                                                                    "10px",
                                                                letterSpacing:
                                                                    "0.5px",
                                                            }}
                                                        >
                                                            ORDINARIA
                                                        </td>
                                                        {degree.subjects
                                                            ?.slice(
                                                                0,
                                                                Math.max(
                                                                    0,
                                                                    maxSubjectsFiltered -
                                                                        1,
                                                                ),
                                                            )
                                                            .map(
                                                                (
                                                                    subjectData,
                                                                    subjIndex,
                                                                ) => {
                                                                    const isOrdinaryActionable =
                                                                        isStatusCellActionable(
                                                                            subjectData.ordinary_summary,
                                                                        );

                                                                    return (
                                                                        <td
                                                                            key={
                                                                                subjIndex
                                                                            }
                                                                            style={{
                                                                                cursor: isOrdinaryActionable
                                                                                    ? "pointer"
                                                                                    : "default",
                                                                                padding: 0,
                                                                                border: "1px solid #cbd5e1",
                                                                                transition:
                                                                                    "all 0.15s",
                                                                            }}
                                                                            title={
                                                                                isOrdinaryActionable
                                                                                    ? "Ver detalle de actas por grupo"
                                                                                    : "No hay actas generables para este estado"
                                                                            }
                                                                            onClick={() => {
                                                                                if (
                                                                                    !isOrdinaryActionable
                                                                                ) {
                                                                                    return;
                                                                                }

                                                                                handleSubjectClick(
                                                                                    subjectData
                                                                                        .subject
                                                                                        ?.id,
                                                                                    degree.degree,
                                                                                );
                                                                            }}
                                                                            onMouseEnter={(
                                                                                e,
                                                                            ) => {
                                                                                if (
                                                                                    !isOrdinaryActionable
                                                                                ) {
                                                                                    return;
                                                                                }

                                                                                e.currentTarget.style.filter =
                                                                                    "brightness(0.95)";
                                                                                e.currentTarget.style.transform =
                                                                                    "scale(1.02)";
                                                                            }}
                                                                            onMouseLeave={(
                                                                                e,
                                                                            ) => {
                                                                                if (
                                                                                    !isOrdinaryActionable
                                                                                ) {
                                                                                    return;
                                                                                }

                                                                                e.currentTarget.style.filter =
                                                                                    "none";
                                                                                e.currentTarget.style.transform =
                                                                                    "none";
                                                                            }}
                                                                        >
                                                                            <CertificateStatusCell
                                                                                summary={
                                                                                    subjectData.ordinary_summary
                                                                                }
                                                                                fallbackValue={
                                                                                    subjectData.ordinary
                                                                                }
                                                                                type="ordinary"
                                                                                onMissingClick={() =>
                                                                                    handleSubjectClick(
                                                                                        subjectData
                                                                                            .subject
                                                                                            ?.id,
                                                                                        degree.degree,
                                                                                        TYPE_FILTERS.ORDINARY,
                                                                                        STATUS_FILTERS.PENDING,
                                                                                    )
                                                                                }
                                                                                onGeneratedClick={() =>
                                                                                    handleSubjectClick(
                                                                                        subjectData
                                                                                            .subject
                                                                                            ?.id,
                                                                                        degree.degree,
                                                                                        TYPE_FILTERS.ORDINARY,
                                                                                        STATUS_FILTERS.GENERATED,
                                                                                    )
                                                                                }
                                                                            />
                                                                        </td>
                                                                    );
                                                                },
                                                            )}
                                                        {degree.subjects
                                                            ?.length <
                                                            maxSubjectsFiltered -
                                                                1 &&
                                                            Array.from({
                                                                length: Math.max(
                                                                    0,
                                                                    maxSubjectsFiltered -
                                                                        1 -
                                                                        degree
                                                                            .subjects
                                                                            ?.length,
                                                                ),
                                                            }).map(
                                                                (
                                                                    _,
                                                                    emptyIndex,
                                                                ) => (
                                                                    <td
                                                                        key={`empty-ord-${emptyIndex}`}
                                                                        style={{
                                                                            backgroundColor:
                                                                                "#f8fafc",
                                                                            border: "1px solid #cbd5e1",
                                                                        }}
                                                                    />
                                                                ),
                                                            )}
                                                    </tr>
                                                    <tr>
                                                        <td
                                                            style={{
                                                                fontWeight:
                                                                    "700",
                                                                backgroundColor:
                                                                    "#f8fafc",
                                                                color: "#64748b",
                                                                padding:
                                                                    "6px 6px",
                                                                border: "1px solid #cbd5e1",
                                                                fontSize:
                                                                    "10px",
                                                                letterSpacing:
                                                                    "0.5px",
                                                            }}
                                                        >
                                                            EXTRAORDINARIA
                                                        </td>
                                                        {degree.subjects
                                                            ?.slice(
                                                                0,
                                                                Math.max(
                                                                    0,
                                                                    maxSubjectsFiltered -
                                                                        1,
                                                                ),
                                                            )
                                                            .map(
                                                                (
                                                                    subjectData,
                                                                    subjIndex,
                                                                ) => {
                                                                    const isExtraordinaryActionable =
                                                                        isStatusCellActionable(
                                                                            subjectData.extraordinary_summary,
                                                                        );

                                                                    return (
                                                                        <td
                                                                            key={
                                                                                subjIndex
                                                                            }
                                                                            style={{
                                                                                cursor: isExtraordinaryActionable
                                                                                    ? "pointer"
                                                                                    : "default",
                                                                                padding: 0,
                                                                                border: "1px solid #cbd5e1",
                                                                                transition:
                                                                                    "all 0.15s",
                                                                            }}
                                                                            title={
                                                                                isExtraordinaryActionable
                                                                                    ? "Ver detalle de actas por grupo"
                                                                                    : "No hay actas generables para este estado"
                                                                            }
                                                                            onClick={() => {
                                                                                if (
                                                                                    !isExtraordinaryActionable
                                                                                ) {
                                                                                    return;
                                                                                }

                                                                                handleSubjectClick(
                                                                                    subjectData
                                                                                        .subject
                                                                                        ?.id,
                                                                                    degree.degree,
                                                                                );
                                                                            }}
                                                                            onMouseEnter={(
                                                                                e,
                                                                            ) => {
                                                                                if (
                                                                                    !isExtraordinaryActionable
                                                                                ) {
                                                                                    return;
                                                                                }

                                                                                e.currentTarget.style.filter =
                                                                                    "brightness(0.95)";
                                                                                e.currentTarget.style.transform =
                                                                                    "scale(1.02)";
                                                                            }}
                                                                            onMouseLeave={(
                                                                                e,
                                                                            ) => {
                                                                                if (
                                                                                    !isExtraordinaryActionable
                                                                                ) {
                                                                                    return;
                                                                                }

                                                                                e.currentTarget.style.filter =
                                                                                    "none";
                                                                                e.currentTarget.style.transform =
                                                                                    "none";
                                                                            }}
                                                                        >
                                                                            <CertificateStatusCell
                                                                                summary={
                                                                                    subjectData.extraordinary_summary
                                                                                }
                                                                                fallbackValue={
                                                                                    subjectData.extraordinary
                                                                                }
                                                                                type="extraordinary"
                                                                                onMissingClick={() =>
                                                                                    handleSubjectClick(
                                                                                        subjectData
                                                                                            .subject
                                                                                            ?.id,
                                                                                        degree.degree,
                                                                                        TYPE_FILTERS.EXTRAORDINARY,
                                                                                        STATUS_FILTERS.PENDING,
                                                                                    )
                                                                                }
                                                                                onGeneratedClick={() =>
                                                                                    handleSubjectClick(
                                                                                        subjectData
                                                                                            .subject
                                                                                            ?.id,
                                                                                        degree.degree,
                                                                                        TYPE_FILTERS.EXTRAORDINARY,
                                                                                        STATUS_FILTERS.GENERATED,
                                                                                    )
                                                                                }
                                                                            />
                                                                        </td>
                                                                    );
                                                                },
                                                            )}
                                                        {degree.subjects
                                                            ?.length <
                                                            maxSubjectsFiltered -
                                                                1 &&
                                                            Array.from({
                                                                length: Math.max(
                                                                    0,
                                                                    maxSubjectsFiltered -
                                                                        1 -
                                                                        degree
                                                                            .subjects
                                                                            ?.length,
                                                                ),
                                                            }).map(
                                                                (
                                                                    _,
                                                                    emptyIndex,
                                                                ) => (
                                                                    <td
                                                                        key={`empty-ext-${emptyIndex}`}
                                                                        style={{
                                                                            backgroundColor:
                                                                                "#f8fafc",
                                                                            border: "1px solid #cbd5e1",
                                                                        }}
                                                                    />
                                                                ),
                                                            )}
                                                    </tr>
                                                </>
                                            )}
                                        </React.Fragment>
                                    ),
                                )}
                            </tbody>
                        </table>
                    </div>
                </div>
            )}
        </CardContainer>
    );
}