import { FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import GradingOutlinedIcon from '@mui/icons-material/GradingOutlined';
import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
import api from '../services/api';
import AppCard from '../components/ui/Card';
import AppButton from '../components/ui/Button';
import AppTextField from '../components/ui/TextField';
import TypographyAnimated from '@/components/ui/TypographyAnimated';
import { useLocale } from '@/context/LocaleContext';

import {
    Alert,
    Autocomplete,
    Box,
    Dialog,
    DialogActions,
    DialogContent,
    DialogTitle,
    Grid,
    IconButton,
    MenuItem,
    Pagination,
    Paper,
    Stack,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    Tooltip,
    Typography,
} from '@mui/material';
import Swal from 'sweetalert2';

function withHighZIndex() {
    const container = Swal.getContainer();
    if (container) {
        container.style.zIndex = '2000';
    }
}

type TypeGroup = {
    id: number;
    name: string;
    order?: number;
};

type IndicatorPhraseRow = {
    id: number;
    indicator_id: number;
    phrase: string | null;
};

export type IndicatorRow = {
    id: number;
    name: string;
    orden: number;
    group_id: number;
    group?: TypeGroup | null;
    phrases?: IndicatorPhraseRow[];
};

type IndicatorRubricRow = {
    id: number;
    indicator_id: number;
    value: number;
    description: string;
};

type PaginatorMeta = {
    current_page: number;
    last_page: number;
    per_page: number;
    total: number;
};

const LIST_PATH = import.meta.env.VITE_INDICATORS_ENDPOINT ?? '/api/indicators';
const GROUPS_PATH = import.meta.env.VITE_TYPE_GROUPS_ENDPOINT ?? '/api/type-groups';
const PHRASE_OPTIONS_PATH = import.meta.env.VITE_INDICATORS_PHRASE_OPTIONS_ENDPOINT ?? '/api/indicators/phrase-options';

export default function Indicators() {
    const { t } = useLocale();

    const [nameFilter, setNameFilter] = useState('');
    const [appliedName, setAppliedName] = useState('');
    const [groups, setGroups] = useState<TypeGroup[]>([]);
    const [phraseOptions, setPhraseOptions] = useState<string[]>([]);
    const [rows, setRows] = useState<IndicatorRow[]>([]);
    const [meta, setMeta] = useState<PaginatorMeta | null>(null);
    const [page, setPage] = useState(1);
    const [loading, setLoading] = useState(false);
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [success, setSuccess] = useState<string | null>(null);

    const [dialogOpen, setDialogOpen] = useState(false);
    const [editingId, setEditingId] = useState<number | null>(null);
    const [formName, setFormName] = useState('');
    const [formOrden, setFormOrden] = useState(0);
    const [formGroupId, setFormGroupId] = useState<string>('');
    const [phraseTags, setPhraseTags] = useState<string[]>([]);

    const [rubricDialogOpen, setRubricDialogOpen] = useState(false);
    const [rubricIndicator, setRubricIndicator] = useState<IndicatorRow | null>(null);
    const [rubricRows, setRubricRows] = useState<IndicatorRubricRow[]>([]);
    const [rubricLoading, setRubricLoading] = useState(false);
    const [rubricSaving, setRubricSaving] = useState(false);
    const [rubricError, setRubricError] = useState<string | null>(null);
    const [rubricSuccess, setRubricSuccess] = useState<string | null>(null);
    const [editingRubricId, setEditingRubricId] = useState<number | null>(null);
    const [editRubricValue, setEditRubricValue] = useState(0);
    const [editRubricDescription, setEditRubricDescription] = useState('');
    const [newRubricValue, setNewRubricValue] = useState<number | ''>('');
    const [newRubricDescription, setNewRubricDescription] = useState('');

    const fetchGroups = useCallback(async () => {
        try {
            const { data } = await api.get<TypeGroup[]>(GROUPS_PATH);
            setGroups(Array.isArray(data) ? data : []);
        } catch {
            setGroups([]);
        }
    }, []);

    const fetchPhraseOptions = useCallback(async () => {
        try {
            const { data } = await api.get<string[]>(PHRASE_OPTIONS_PATH);
            setPhraseOptions(Array.isArray(data) ? data : []);
        } catch {
            setPhraseOptions([]);
        }
    }, []);

    const fetchList = useCallback(
        async (p: number, name: string) => {
            setLoading(true);
            setError(null);
            try {
                const { data } = await api.get<{
                    data: IndicatorRow[];
                    current_page: number;
                    last_page: number;
                    per_page: number;
                    total: number;
                }>(LIST_PATH, {
                    params: {
                        page: p,
                        name: name || undefined,
                    },
                });

                setRows(Array.isArray(data.data) ? data.data : []);
                setMeta({
                    current_page: data.current_page ?? 1,
                    last_page: data.last_page ?? 1,
                    per_page: data.per_page ?? 15,
                    total: data.total ?? 0,
                });
            } catch {
                setRows([]);
                setMeta(null);
                setError(t('indicators', 'error_cargar'));
            } finally {
                setLoading(false);
            }
        },
        [t],
    );

    useEffect(() => {
        void fetchGroups();
        void fetchPhraseOptions();
    }, [fetchGroups, fetchPhraseOptions]);

    useEffect(() => {
        void fetchList(page, appliedName);
    }, [page, appliedName, fetchList]);

    const autocompleteOptions = useMemo(() => {
        const s = new Set([...phraseOptions, ...phraseTags]);
        return Array.from(s).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }));
    }, [phraseOptions, phraseTags]);

    const hasPages = meta != null && meta.last_page > 1;

    const headerCellSx = {
        fontSize: '0.78rem',
        fontWeight: 700,
        textTransform: 'uppercase' as const,
        letterSpacing: '0.08em',
        color: 'text.secondary',
        py: 1.6,
    };
    const bodyCellSx = {
        fontSize: '0.9rem',
        py: 1.5,
    };

    function onSearch(e: FormEvent) {
        e.preventDefault();
        setAppliedName(nameFilter.trim());
        setPage(1);
    }

    function onClear() {
        setNameFilter('');
        setAppliedName('');
        setPage(1);
        setSuccess(null);
        setError(null);
    }

    function openCreate() {
        setEditingId(null);
        setFormName('');
        setFormOrden(0);
        setFormGroupId('');
        setPhraseTags([]);
        setDialogOpen(true);
    }

    function openEdit(row: IndicatorRow) {
        setEditingId(row.id);
        setFormName(row.name);
        setFormOrden(row.orden);
        setFormGroupId(String(row.group_id));
        setPhraseTags(
            (row.phrases ?? [])
                .map((p) => (p.phrase ?? '').trim())
                .filter(Boolean),
        );
        setDialogOpen(true);
    }

    function closeDialog() {
        if (saving) return;
        setDialogOpen(false);
    }

    const rubricasPath = (indicatorId: number) => `${LIST_PATH}/${indicatorId}/rubricas`;

    const fetchRubricas = useCallback(
        async (indicatorId: number) => {
            setRubricLoading(true);
            setRubricError(null);
            try {
                const { data } = await api.get<IndicatorRubricRow[]>(rubricasPath(indicatorId));
                setRubricRows(Array.isArray(data) ? data : []);
            } catch {
                setRubricRows([]);
                setRubricError(t('indicators', 'error_cargar_rubricas'));
            } finally {
                setRubricLoading(false);
            }
        },
        [t],
    );

    function openRubricas(row: IndicatorRow) {
        setRubricIndicator(row);
        setRubricDialogOpen(true);
        setRubricSuccess(null);
        setRubricError(null);
        setEditingRubricId(null);
        setNewRubricValue('');
        setNewRubricDescription('');
        void fetchRubricas(row.id);
    }

    function closeRubricDialog() {
        if (rubricSaving) return;
        setRubricDialogOpen(false);
        setRubricIndicator(null);
        setEditingRubricId(null);
    }

    function startEditRubric(row: IndicatorRubricRow) {
        setEditingRubricId(row.id);
        setEditRubricValue(row.value);
        setEditRubricDescription(row.description);
        setRubricError(null);
    }

    function cancelEditRubric() {
        setEditingRubricId(null);
    }

    async function onSaveEditRubric(row: IndicatorRubricRow) {
        if (rubricIndicator == null) return;
        const description = editRubricDescription.trim();
        if (description === '') {
            void Swal.fire({
                icon: 'warning',
                title: t('indicators', 'rubrica_campos_obligatorios'),
                didOpen: withHighZIndex,
            });
            return;
        }

        setRubricSaving(true);
        setRubricError(null);
        try {
            await api.put(`${rubricasPath(rubricIndicator.id)}/${row.id}`, {
                value: editRubricValue,
                description,
            });
            setRubricSuccess(t('indicators', 'rubrica_actualizada_ok'));
            setEditingRubricId(null);
            void fetchRubricas(rubricIndicator.id);
        } catch {
            setRubricError(t('indicators', 'error_guardar_rubrica'));
        } finally {
            setRubricSaving(false);
        }
    }

    async function onAddRubric(e: FormEvent) {
        e.preventDefault();
        if (rubricIndicator == null) return;

        const description = newRubricDescription.trim();
        const value = newRubricValue === '' ? NaN : Number(newRubricValue);
        if (description === '' || Number.isNaN(value)) {
            void Swal.fire({
                icon: 'warning',
                title: t('indicators', 'rubrica_campos_obligatorios'),
                didOpen: withHighZIndex,
            });
            return;
        }

        setRubricSaving(true);
        setRubricError(null);
        try {
            await api.post(rubricasPath(rubricIndicator.id), {
                value,
                description,
            });
            setRubricSuccess(t('indicators', 'rubrica_creada_ok'));
            setNewRubricValue('');
            setNewRubricDescription('');
            void fetchRubricas(rubricIndicator.id);
        } catch {
            setRubricError(t('indicators', 'error_guardar_rubrica'));
        } finally {
            setRubricSaving(false);
        }
    }

    async function onDeleteRubric(row: IndicatorRubricRow) {
        if (rubricIndicator == null) return;

        const confirm = await Swal.fire({
            title: t('indicators', 'confirmar_eliminar_rubrica'),
            text: t('indicators', 'confirmar_eliminar_rubrica_texto'),
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: t('indicators', 'eliminar'),
            cancelButtonText: t('indicators', 'cancelar'),
            didOpen: withHighZIndex,
        });
        if (!confirm.isConfirmed) return;

        setRubricSaving(true);
        setRubricError(null);
        try {
            await api.delete(`${rubricasPath(rubricIndicator.id)}/${row.id}`);
            setRubricSuccess(t('indicators', 'rubrica_eliminada_ok'));
            if (editingRubricId === row.id) {
                setEditingRubricId(null);
            }
            void fetchRubricas(rubricIndicator.id);
        } catch {
            setRubricError(t('indicators', 'error_eliminar_rubrica'));
        } finally {
            setRubricSaving(false);
        }
    }

    async function onSubmitDialog(e: FormEvent) {
        e.preventDefault();
        if (!formGroupId) {
            void Swal.fire({
                icon: 'warning',
                title: t('indicators', 'seleccionar_grupo'),
                didOpen: withHighZIndex,
            });
            return;
        }

        const payload = {
            name: formName.trim(),
            orden: formOrden,
            group_id: Number(formGroupId),
            phrases: phraseTags.map((s) => s.trim()).filter(Boolean),
        };

        if (!payload.name || !payload.orden) {
            void Swal.fire({
                icon: 'warning',
                title: t('indicators', 'campos_obligatorios'),
                didOpen: withHighZIndex,
            });
            return;
        }

        setSaving(true);
        setError(null);
        try {
            if (editingId != null) {
                await api.put(`${LIST_PATH}/${editingId}`, payload);
                setSuccess(t('indicators', 'actualizado_ok'));
            } else {
                await api.post(LIST_PATH, payload);
                setSuccess(t('indicators', 'creado_ok'));
            }
            setDialogOpen(false);
            void fetchList(page, appliedName);
            void fetchPhraseOptions();
        } catch {
            setError(t('indicators', 'error_guardar'));
        } finally {
            setSaving(false);
        }
    }

    async function onDelete(row: IndicatorRow) {
        const confirm = await Swal.fire({
            title: t('indicators', 'confirmar_eliminar'),
            text: `${row.name}. ${t('indicators', 'confirmar_eliminar_texto')}`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: t('indicators', 'eliminar'),
            cancelButtonText: t('indicators', 'cancelar'),
            didOpen: withHighZIndex,
        });
        if (!confirm.isConfirmed) return;

        setError(null);
        try {
            await api.delete(`${LIST_PATH}/${row.id}`);
            setSuccess(t('indicators', 'eliminado_ok'));
            void fetchList(page, appliedName);
            void fetchPhraseOptions();
        } catch {
            setError(t('indicators', 'error_eliminar'));
        }
    }

    return (
        <div className="container-fluid">
            <AppCard>
                <Stack spacing={2.5}>
                    <TypographyAnimated
                        variant="subtitle2"
                        prefix={t('indicators', 'top_heading_prefix')}
                        rotatingWords={t('indicators', 'top_heading_rotating')
                            .split('|')
                            .map((s) => s.trim())
                            .filter(Boolean)}
                        sx={{
                            color: 'text.primary',
                            fontWeight: 600,
                            textTransform: 'uppercase',
                            letterSpacing: '0.18em',
                            fontSize: '1.3rem',
                        }}
                    />

                    <Box component="form" onSubmit={onSearch}>
                        <Grid container spacing={2} alignItems="flex-end" mt={1}>
                            <Grid size={{ xs: 12, md: 4 }}>
                                <AppTextField
                                    fullWidth
                                    label={t('indicators', 'filtrar_por_nombre')}
                                    name="name"
                                    value={nameFilter}
                                    onChange={(e) => setNameFilter(e.target.value)}
                                    size="small"
                                />
                            </Grid>
                            <Grid size={{ xs: 12, md: 8 }}>
                                <Stack direction="row" spacing={1.5}>
                                    <AppButton
                                        type="submit"
                                        variant="contained"
                                        disabled={loading}
                                    >
                                        {t('indicators', 'buscar')}
                                    </AppButton>
                                    <AppButton type="button" onClick={onClear} disabled={loading}>
                                        {t('indicators', 'limpiar')}
                                    </AppButton>
                                    <AppButton variant="contained" onClick={openCreate}>
                                        {t('indicators', 'nuevo_indicador')}
                                    </AppButton>
                                </Stack>
                            </Grid>
                        </Grid>
                    </Box>

                    {success ? (
                        <Alert severity="success" onClose={() => setSuccess(null)}>
                            {success}
                        </Alert>
                    ) : null}
                    {error ? (
                        <Alert severity="error" onClose={() => setError(null)}>
                            {error}
                        </Alert>
                    ) : null}

                    <TableContainer component={Paper} elevation={0} variant="outlined">
                        <Table size="medium">
                            <TableHead>
                                <TableRow sx={{ backgroundColor: 'action.hover' }}>
                                    <TableCell sx={headerCellSx}>{t('indicators', 'id')}</TableCell>
                                    <TableCell sx={headerCellSx}>{t('indicators', 'nombre')}</TableCell>
                                    <TableCell sx={headerCellSx}>{t('indicators', 'grupo')}</TableCell>
                                    <TableCell sx={headerCellSx}>{t('indicators', 'orden')}</TableCell>
                                    <TableCell sx={headerCellSx}>{t('indicators', 'num_frases')}</TableCell>
                                    <TableCell sx={headerCellSx} align="right">
                                        {t('indicators', 'acciones')}
                                    </TableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                {loading && rows.length === 0 ? (
                                    <TableRow>
                                        <TableCell colSpan={6} align="center" sx={{ py: 4 }}>
                                            {t('indicators', 'cargando')}
                                        </TableCell>
                                    </TableRow>
                                ) : rows.length === 0 ? (
                                    <TableRow>
                                        <TableCell colSpan={6} align="center" sx={{ py: 4 }}>
                                            <Typography color="text.secondary">
                                                {t('indicators', 'no_data_to_show')}
                                            </Typography>
                                        </TableCell>
                                    </TableRow>
                                ) : (
                                    rows.map((row) => (
                                        <TableRow key={row.id} hover>
                                            <TableCell sx={bodyCellSx}>{row.id}</TableCell>
                                            <TableCell sx={bodyCellSx}>{row.name}</TableCell>
                                            <TableCell sx={bodyCellSx}>
                                                {row.group?.name ?? '—'}
                                            </TableCell>
                                            <TableCell sx={bodyCellSx}>{row.orden}</TableCell>
                                            <TableCell sx={bodyCellSx}>
                                                {row.phrases?.length ?? 0}
                                            </TableCell>
                                            <TableCell sx={bodyCellSx} align="right">
                                                <Tooltip title={t('indicators', 'editar')}>
                                                    <IconButton
                                                        size="small"
                                                        color="primary"
                                                        onClick={() => openEdit(row)}
                                                    >
                                                        <EditOutlinedIcon fontSize="small" />
                                                    </IconButton>
                                                </Tooltip>
                                                <Tooltip title={t('indicators', 'editar_rubricas')}>
                                                    <IconButton
                                                        size="small"
                                                        color="secondary"
                                                        onClick={() => openRubricas(row)}
                                                    >
                                                        <GradingOutlinedIcon fontSize="small" />
                                                    </IconButton>
                                                </Tooltip>
                                                <Tooltip title={t('indicators', 'eliminar')}>
                                                    <IconButton
                                                        size="small"
                                                        color="error"
                                                        onClick={() => onDelete(row)}
                                                    >
                                                        <DeleteOutlineIcon fontSize="small" />
                                                    </IconButton>
                                                </Tooltip>
                                            </TableCell>
                                        </TableRow>
                                    ))
                                )}
                            </TableBody>
                        </Table>
                    </TableContainer>

                    {hasPages && meta ? (
                        <Box
                            sx={{
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'space-between',
                                gap: 1.5,
                                flexWrap: 'wrap',
                                px: { xs: 0.5, sm: 1 },
                            }}
                        >
                            <Typography variant="body2" color="text.secondary">
                                {t('indicators', 'pagina')} {meta.current_page} {t('indicators', 'de')}{' '}
                                {meta.last_page} ({meta.total} {t('indicators', 'registros')})
                            </Typography>
                            <Pagination
                                color="primary"
                                shape="rounded"
                                size="small"
                                siblingCount={0}
                                boundaryCount={1}
                                page={meta.current_page}
                                count={meta.last_page}
                                onChange={(_, value) => setPage(value)}
                                disabled={loading}
                            />
                        </Box>
                    ) : null}
                </Stack>
            </AppCard>

            <Dialog open={dialogOpen} onClose={closeDialog} fullWidth maxWidth="sm">
                <Box component="form" onSubmit={onSubmitDialog}>
                    <DialogTitle>
                        {editingId != null
                            ? t('indicators', 'editar_indicador')
                            : t('indicators', 'nuevo_indicador')}
                    </DialogTitle>
                    <DialogContent dividers>
                        <Grid container spacing={2} padding={2}>
                            <Grid size={{ xs: 12, md: 12 }} mb={3}>
                                <AppTextField
                                    required
                                    fullWidth
                                    label={t('indicators', 'nombre')}
                                    value={formName}
                                    onChange={(e) => setFormName(e.target.value)}
                                    size="small"
                                />
                                </Grid>
                                <Grid size={{ xs: 12, md: 12 }} mb={3}>
                                <AppTextField
                                type="number"
                                required
                                fullWidth
                                label={t('indicators', 'orden')}
                                value={formOrden}
                                onChange={(e) => setFormOrden(Number(e.target.value))}
                                size="small"
                                />
                            </Grid>
                            <Grid size={{ xs: 12, md: 12 }} mb={3}>
                                <AppTextField
                                    required
                                    fullWidth
                                    select
                                    label={t('indicators', 'seleccionar_grupo')}
                                    value={formGroupId}
                                    onChange={(e) => setFormGroupId(e.target.value)}
                                    size="small"
                                >
                                <MenuItem value="" disabled>
                                    —
                                </MenuItem>
                                {groups.map((g) => (
                                    <MenuItem key={g.id} value={g.id}>
                                        {g.name}
                                    </MenuItem>
                                ))}
                                </AppTextField>
                            </Grid>
                            <Grid size={{ xs: 12, md: 12 }} mb={2}>
                                <Autocomplete
                                    multiple
                                    freeSolo
                                    options={autocompleteOptions}
                                    value={phraseTags}
                                    onChange={(_, newValue) => setPhraseTags(newValue)}
                                    disabled={saving}
                                    renderInput={(params) => (
                                        <AppTextField
                                            {...params}
                                            multiline
                                            minRows={3}
                                            label={t('indicators', 'frases_relacionadas')}
                                            size="small"
                                        />
                                    )}
                                />
                            </Grid>
                        </Grid>
                    </DialogContent>
                    <DialogActions>
                        <AppButton type="button" variant="outlined" onClick={closeDialog} disabled={saving}>
                            {t('indicators', 'cancelar')}
                        </AppButton>
                        <AppButton type="submit" variant="contained" disabled={saving}>
                            {t('indicators', 'guardar')}
                        </AppButton>
                    </DialogActions>
                </Box>
            </Dialog>

            <Dialog
                open={rubricDialogOpen}
                onClose={closeRubricDialog}
                fullWidth
                maxWidth={false}
                slotProps={{
                    paper: {
                        sx: {
                            width: '80%',
                            maxWidth: '80%',
                        },
                    },
                }}
            >
                <DialogTitle>
                    {t('indicators', 'rubricas_de')}: {rubricIndicator?.name ?? '—'}
                </DialogTitle>
                <DialogContent dividers>
                    <Stack spacing={2} sx={{ py: 1 }}>
                        {rubricSuccess ? (
                            <Alert severity="success" onClose={() => setRubricSuccess(null)}>
                                {rubricSuccess}
                            </Alert>
                        ) : null}
                        {rubricError ? (
                            <Alert severity="error" onClose={() => setRubricError(null)}>
                                {rubricError}
                            </Alert>
                        ) : null}

                        <TableContainer component={Paper} elevation={0} variant="outlined">
                            <Table size="small">
                                <TableHead>
                                    <TableRow sx={{ backgroundColor: 'action.hover' }}>
                                        <TableCell sx={{ ...headerCellSx, width: 150 }}>
                                            {t('indicators', 'rubrica_valor')}
                                        </TableCell>
                                        <TableCell sx={headerCellSx}>
                                            {t('indicators', 'rubrica_descripcion')}
                                        </TableCell>
                                        <TableCell sx={headerCellSx} align="right" width={200}>
                                            {t('indicators', 'acciones')}
                                        </TableCell>
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                    {rubricLoading ? (
                                        <TableRow>
                                            <TableCell colSpan={3} align="center" sx={{ py: 3 }}>
                                                {t('indicators', 'cargando')}
                                            </TableCell>
                                        </TableRow>
                                    ) : rubricRows.length === 0 ? (
                                        <TableRow>
                                            <TableCell colSpan={3} align="center" sx={{ py: 3 }}>
                                                <Typography color="text.secondary">
                                                    {t('indicators', 'no_rubricas')}
                                                </Typography>
                                            </TableCell>
                                        </TableRow>
                                    ) : (
                                        rubricRows.map((rubric) => {
                                            const isEditing = editingRubricId === rubric.id;

                                            return (
                                                <TableRow key={rubric.id} hover>
                                                    <TableCell sx={bodyCellSx}>
                                                        {isEditing ? (
                                                            <AppTextField
                                                                type="number"
                                                                size="small"
                                                                fullWidth
                                                                inputProps={{ min: 0, max: 100 }}
                                                                value={editRubricValue}
                                                                onChange={(e) =>
                                                                    setEditRubricValue(
                                                                        Number(e.target.value),
                                                                    )
                                                                }
                                                                disabled={rubricSaving}
                                                            />
                                                        ) : (
                                                            rubric.value
                                                        )}
                                                    </TableCell>
                                                    <TableCell sx={bodyCellSx}>
                                                        {isEditing ? (
                                                            <AppTextField
                                                                size="small"
                                                                fullWidth
                                                                multiline
                                                                minRows={2}
                                                                value={editRubricDescription}
                                                                onChange={(e) =>
                                                                    setEditRubricDescription(
                                                                        e.target.value,
                                                                    )
                                                                }
                                                                disabled={rubricSaving}
                                                            />
                                                        ) : (
                                                            rubric.description
                                                        )}
                                                    </TableCell>
                                                    <TableCell sx={bodyCellSx} align="right">
                                                        {isEditing ? (
                                                            <>
                                                                <Tooltip title={t('indicators', 'guardar')}>
                                                                    <IconButton
                                                                        size="small"
                                                                        color="primary"
                                                                        disabled={rubricSaving}
                                                                        onClick={() =>
                                                                            void onSaveEditRubric(rubric)
                                                                        }
                                                                    >
                                                                        <SaveOutlinedIcon fontSize="small" />
                                                                    </IconButton>
                                                                </Tooltip>
                                                                <Tooltip title={t('indicators', 'cancelar')}>
                                                                    <IconButton
                                                                        size="small"
                                                                        disabled={rubricSaving}
                                                                        onClick={cancelEditRubric}
                                                                    >
                                                                        <CloseOutlinedIcon fontSize="small" />
                                                                    </IconButton>
                                                                </Tooltip>
                                                            </>
                                                        ) : (
                                                            <>
                                                                <Tooltip title={t('indicators', 'editar')}>
                                                                    <IconButton
                                                                        size="small"
                                                                        color="primary"
                                                                        disabled={rubricSaving}
                                                                        onClick={() => startEditRubric(rubric)}
                                                                    >
                                                                        <EditOutlinedIcon fontSize="small" />
                                                                    </IconButton>
                                                                </Tooltip>
                                                                <Tooltip title={t('indicators', 'eliminar')}>
                                                                    <IconButton
                                                                        size="small"
                                                                        color="error"
                                                                        disabled={rubricSaving}
                                                                        onClick={() =>
                                                                            void onDeleteRubric(rubric)
                                                                        }
                                                                    >
                                                                        <DeleteOutlineIcon fontSize="small" />
                                                                    </IconButton>
                                                                </Tooltip>
                                                            </>
                                                        )}
                                                    </TableCell>
                                                </TableRow>
                                            );
                                        })
                                    )}
                                </TableBody>
                            </Table>
                        </TableContainer>

                        <Typography variant="subtitle2" sx={{ pt: 1 }}>
                            {t('indicators', 'nueva_rubrica')}
                        </Typography>
                        <Box component="form" onSubmit={onAddRubric}>
                            <Grid container spacing={2} alignItems="flex-start">
                                <Grid size={{ xs: 12, sm: 3 }}>
                                    <AppTextField
                                        type="number"
                                        fullWidth
                                        size="small"
                                        label={t('indicators', 'rubrica_valor')}
                                        inputProps={{ min: 0, max: 50 }}
                                        value={newRubricValue}
                                        onChange={(e) =>
                                            setNewRubricValue(
                                                e.target.value === ''
                                                    ? ''
                                                    : Number(e.target.value),
                                            )
                                        }
                                        disabled={rubricSaving}
                                    />
                                </Grid>
                                <Grid size={{ xs: 12, sm: 7 }}>
                                    <AppTextField
                                        fullWidth
                                        size="small"
                                        label={t('indicators', 'rubrica_descripcion')}
                                        value={newRubricDescription}
                                        onChange={(e) => setNewRubricDescription(e.target.value)}
                                        disabled={rubricSaving}
                                    />
                                </Grid>
                                <Grid size={{ xs: 12, sm: 2 }}>
                                    <AppButton
                                        type="submit"
                                        variant="contained"
                                        fullWidth
                                        disabled={rubricSaving || rubricLoading}
                                    >
                                        {t('indicators', 'agregar_rubrica')}
                                    </AppButton>
                                </Grid>
                            </Grid>
                        </Box>
                    </Stack>
                </DialogContent>
                <DialogActions>
                    <AppButton
                        type="button"
                        variant="outlined"
                        onClick={closeRubricDialog}
                        disabled={rubricSaving}
                    >
                        {t('indicators', 'cerrar')}
                    </AppButton>
                </DialogActions>
            </Dialog>
        </div>
    );
}