'use client';
import { useState, useEffect, useMemo, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
import CooperativeSelect from '../common/CooperativeSelect';
import Modal from '../common/Modal';
import IndicatorForm from '../common/IndicatorForm';
import PeriodSelect from '../common/PeriodSelect';
import ExportRequestModal from '../common/ExportRequestModal';
import CarbonFootprintWizard from '../common/CarbonFootprintWizard';
import { fetchCooperatives } from '@/services/client/CompaniesService';
import { fetchPeriods } from '@/services/client/PeriodsService';
import { usePageHeader } from '@/context/PageHeaderContext';

const parseSpanishDecimal = (raw, nonNumericError) => {
    const NON_NUMERIC_ERROR = nonNumericError;
    if (raw === undefined || raw === null) {
        return { valid: false, error: NON_NUMERIC_ERROR };
    }

    if (typeof raw === 'number') {
        if (!Number.isFinite(raw)) {
            return { valid: false, error: NON_NUMERIC_ERROR };
        }
        if (!Number.isInteger(raw)) {
            return { valid: false, error: NON_NUMERIC_ERROR };
        }
        return { valid: true, value: raw };
    }

    if (typeof raw !== 'string') {
        return { valid: false, error: NON_NUMERIC_ERROR };
    }

    const trimmed = raw.trim();
    if (!trimmed) {
        return { valid: false, error: NON_NUMERIC_ERROR };
    }

    const sign = trimmed.startsWith('-') || trimmed.startsWith('+') ? trimmed[0] : '';
    const unsigned = sign ? trimmed.slice(1) : trimmed;
    if (!unsigned) {
        return { valid: false, error: NON_NUMERIC_ERROR };
    }

    const commaCount = (unsigned.match(/,/g) || []).length;
    if (commaCount > 1) {
        return { valid: false, error: NON_NUMERIC_ERROR };
    }

    const hasComma = commaCount === 1;
    const hasDot = unsigned.includes('.');
    const thousandsRegex = /^\d{1,3}(\.\d{3})*$/;

    if (hasComma) {
        const [integerPart, decimalPart] = unsigned.split(',');
        if (!decimalPart || !/^\d+$/.test(decimalPart)) {
            return { valid: false, error: NON_NUMERIC_ERROR };
        }
        if (
            integerPart &&
            !/^\d+$/.test(integerPart.replace(/\./g, '')) &&
            !thousandsRegex.test(integerPart)
        ) {
            return { valid: false, error: NON_NUMERIC_ERROR };
        }
        const normalized = `${sign}${integerPart.replace(/\./g, '')}.${decimalPart}`;
        const num = Number(normalized);
        if (!Number.isFinite(num)) {
            return { valid: false, error: NON_NUMERIC_ERROR };
        }
        return { valid: true, value: num };
    }

    if (hasDot) {
        if (!/^\d{1,3}(\.\d{3})+$/.test(unsigned)) {
            return { valid: false, error: NON_NUMERIC_ERROR };
        }
        const normalized = `${sign}${unsigned.replace(/\./g, '')}`;
        const num = Number(normalized);
        if (!Number.isFinite(num)) {
            return { valid: false, error: NON_NUMERIC_ERROR };
        }
        return { valid: true, value: num };
    }

    if (!/^\d+$/.test(unsigned)) {
        return { valid: false, error: NON_NUMERIC_ERROR };
    }

    const num = Number(`${sign}${unsigned}`);
    if (!Number.isFinite(num)) {
        return { valid: false, error: NON_NUMERIC_ERROR };
    }
    return { valid: true, value: num };
};

const Content = ({ }) => {
    const { t } = useTranslation();
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isFileUploadModalOpen, setIsFileUploadModalOpen] = useState(false);
    const [isValidationModalOpen, setIsValidationModalOpen] = useState(false);
    const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false);
    const [isManualSuccessModalOpen, setIsManualSuccessModalOpen] = useState(false);
    const [isPreviewModalOpen, setIsPreviewModalOpen] = useState(false);
    const exportRequestRef = useRef(null);
    const [selectedRow, setSelectedRow] = useState(null);
    const [valor, setValor] = useState('');
    const [validationError, setValidationError] = useState('');
    const [searchTerm, setSearchTerm] = useState('');
    const [isSaving, setIsSaving] = useState(false);
    const [selectedFile, setSelectedFile] = useState(null);
    const [fileUploadPeriodo, setFileUploadPeriodo] = useState('');
    const [fileUploadCooperativa, setFileUploadCooperativa] = useState('');
    const [isUploadingFile, setIsUploadingFile] = useState(false);
    const [fileUploadErrors, setFileUploadErrors] = useState([]);
    const [filePreviewRows, setFilePreviewRows] = useState([]);
    const [filePreviewSelection, setFilePreviewSelection] = useState(new Set());
    const [filePreviewLoading, setFilePreviewLoading] = useState(false);
    const [fileCommitLoading, setFileCommitLoading] = useState(false);
    const [fileCommitResult, setFileCommitResult] = useState(null);
    const [tempPeriodo, setTempPeriodo] = useState('');
    const [tempCooperativa, setTempCooperativa] = useState('');
    const [tempODS, setTempODS] = useState('');
    const [isInfoModalOpen, setIsInfoModalOpen] = useState(false);
    const [showInsertarValores, setShowInsertarValores] = useState(false);
    const [showCarbonCategories, setShowCarbonCategories] = useState(false);
    const [showCarbonSubmenu, setShowCarbonSubmenu] = useState(false);
    const [isCarbonModalOpen, setIsCarbonModalOpen] = useState(false);
    const [carbonPeriodo, setCarbonPeriodo] = useState('');
    const [carbonCooperativa, setCarbonCooperativa] = useState('');
    const [isCarbonRequiredModalOpen, setIsCarbonRequiredModalOpen] = useState(false);
    const [carbonMissingFields, setCarbonMissingFields] = useState([]);
    const [isMinistryModalOpen, setIsMinistryModalOpen] = useState(false);
    const [ministryPeriodo, setMinistryPeriodo] = useState('');
    const [ministryCooperativa, setMinistryCooperativa] = useState('');
    const [ministryFile, setMinistryFile] = useState(null);
    const [isMinistryRequiredModalOpen, setIsMinistryRequiredModalOpen] = useState(false);
    const [ministryMissingFields, setMinistryMissingFields] = useState([]);
    const [isMinistrySuccessModalOpen, setIsMinistrySuccessModalOpen] = useState(false);
    const [sortColumn, setSortColumn] = useState('codigo');
    const [sortDirection, setSortDirection] = useState('asc');
    const { setTitleOverride } = usePageHeader();

    const handleSort = (column) => {
        if (sortColumn === column) {
            setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
        } else {
            setSortColumn(column);
            setSortDirection('asc');
        }
    };

    const SortArrow = ({ column }) => {
        if (sortColumn !== column) return <span style={{opacity: 0.3, marginLeft: '4px'}}>&#8597;</span>;
        return <span style={{marginLeft: '4px'}}>{sortDirection === 'asc' ? '▲' : '▼'}</span>;
    };

    useEffect(() => {
        if (showCarbonCategories) {
            setTitleOverride(t('manageIndicatorsValues.titles.insertCategories'));
        } else if (showInsertarValores) {
            setTitleOverride(t('manageIndicatorsValues.titles.insertValues'));
        } else {
            setTitleOverride(null);
        }
        return () => setTitleOverride(null);
    }, [showInsertarValores, showCarbonCategories, setTitleOverride, t]);

    const [cooperativesRaw, setCooperativesRaw] = useState([]);
    const [cooperatives, setCooperatives] = useState([]);
    const [loadingCooperatives, setLoadingCooperatives] = useState(false);
    const [errorCooperatives, setErrorCooperatives] = useState(null);

    const [periods, setPeriods] = useState([]);
    const [loadingPeriods, setLoadingPeriods] = useState(false);
    const [errorPeriods, setErrorPeriods] = useState(null);

    useEffect(() => {
        setLoadingCooperatives(true);
        fetchCooperatives(
            (res) => {
                if (!res.result.status || res.result.error) {
                    setErrorCooperatives(res.result.error || t('common.errorLoadingCooperatives'));
                } else {
                    const raw = res.value || [];
                    setCooperativesRaw(raw);
                    const normalized = raw.map(c => ({
                        id: c.id || c.documentId || null,
                        name: c.completeName || c.shortName || c.name || t('common.noName'),
                        shortName: c.shortName || null,
                        code: c.code || c.codigo || c.slug || null,
                        raw: c,
                    }));
                    setCooperatives(normalized);
                }
            },
            () => setLoadingCooperatives(false)
        );
    }, [t]);

    useEffect(() => {
        setLoadingPeriods(true);
        fetchPeriods(
            (res) => {
                if (!res.result.status || res.result.error) {
                    setErrorPeriods(res.result.error || t('common.errorLoadingPeriods'));
                } else {
                    const raw = res.value || [];
                    setPeriods(raw);
                }
            },
            () => setLoadingPeriods(false)
        );
    }, [t]);

    const [indicators, setIndicators] = useState([]);
    const [indicatorsMeta, setIndicatorsMeta] = useState(null);
    const [loadingIndicators, setLoadingIndicators] = useState(false);
    const [errorIndicators, setErrorIndicators] = useState(null);
    const [indicatorsPage, setIndicatorsPage] = useState(1);
    const indicatorsPageSize = 25;

    useEffect(() => {
        setIndicators([]);
        setIndicatorsMeta(null);
        setErrorIndicators(null);
        if (!tempPeriodo || !tempCooperativa) return; 
        setLoadingIndicators(true);
        import('@/services/client/IndicatorsService').then(mod => {
            const params = { period: tempPeriodo, companyId: tempCooperativa, page: indicatorsPage, pageSize: indicatorsPageSize };
            if (tempODS && tempODS.trim()) params.sdgCodes = tempODS.trim();
            if (searchTerm && searchTerm.trim()) params.search = searchTerm.trim();
            console.log('Fetching indicators with params:', params);
            mod.fetchIndicators(params, (res) => {
                if (!res.result.status || res.result.error) {
                    setErrorIndicators(res.result.error || t('manageIndicatorsValues.table.errorLoading'));
                } else {
                    setIndicators(res.value || []);
                    setIndicatorsMeta(res.meta || null);
                }
            }, () => setLoadingIndicators(false));
        });
    }, [tempPeriodo, tempCooperativa, indicatorsPage, tempODS, searchTerm, t]);

    useEffect(() => { setIndicatorsPage(1); }, [tempODS, searchTerm]);

    const filteredTableData = (() => {
        if (!tempPeriodo || !tempCooperativa) return [];
        let data = [...indicators];
        if (sortColumn) {
            data.sort((a, b) => {
                let valA, valB;
                switch (sortColumn) {
                    case 'codigo':
                        valA = (a.indicator?.code || '').toLowerCase();
                        valB = (b.indicator?.code || '').toLowerCase();
                        break;
                    case 'indicador':
                        valA = (a.indicator?.name || '').toLowerCase();
                        valB = (b.indicator?.name || '').toLowerCase();
                        break;
                    case 'periodo':
                        valA = (a.periodName || '').toLowerCase();
                        valB = (b.periodName || '').toLowerCase();
                        break;
                    case 'valor': {
                        const parseVal = (v) => {
                            if (v == null || v === '' || v === '-') return null;
                            const s = String(v).replace(/\s/g, '').replace(/,/g, '.');
                            const n = Number(s);
                            return isNaN(n) ? null : n;
                        };
                        valA = parseVal(a.value);
                        valB = parseVal(b.value);
                        // Push nulls to the end regardless of sort direction
                        if (valA === null && valB === null) return 0;
                        if (valA === null) return 1;
                        if (valB === null) return -1;
                        break;
                    }
                    default:
                        return 0;
                }
                if (valA < valB) return sortDirection === 'asc' ? -1 : 1;
                if (valA > valB) return sortDirection === 'asc' ? 1 : -1;
                return 0;
            });
        }
        return data;
    })();

    const openModal = (row) => {
        const normalizedSdgs = Array.isArray(row.sdgs)
            ? row.sdgs
            : (typeof row.sdgCodes === 'string' && row.sdgCodes.trim())
                ? row.sdgCodes.split(/[-,\s]+/).filter(Boolean).map(code => ({ code, name: null }))
                : [];
        const mapped = {
            ...row,
            codigo: row.indicator?.code || row.codigo || '',
            indicador: row.indicator?.name || row.indicador || '',
            periodo: row.period || row.periodo || tempPeriodo || '',
            unidad: row.indicator?.unit || row.unidad || '-',
            unit: row.unit || '-',
            ods: row.indicator?.ods || row.ods || '-',
            sdgCodes: normalizedSdgs.length ? normalizedSdgs.map(s => s.code).join('-') : (row.sdgCodes || '-'),
            sdgs: normalizedSdgs,
            valor: (row.value ?? row.valor ?? ''),
            autoCalculated: row.autoCalculated || false,
            goalType: row.goalType || 'NONE',
            minimumThreshold: row.minimumThreshold,
            maximumThreshold: row.maximumThreshold,
            fixedValue: row.fixedValue,
            fixedText: row.fixedText,
            relativePercentage: row.relativePercentage
        };
        setSelectedRow(mapped);
        setValor(mapped.valor === null || mapped.valor === undefined ? '' : String(mapped.valor));
        setIsModalOpen(true);
    };
    const closeModal = () => { 
        setIsModalOpen(false); 
        setSelectedRow(null); 
        setValor(''); 
        setValidationError('');
    };
    
    const handleValueChange = (newValue) => { 
        setValor(newValue);
        if (validationError) {
            setValidationError('');
        }
    };
    
    const validateValue = (value, goalType, thresholds) => {
        const parsed = parseSpanishDecimal(value, t('manageIndicatorsValues.manualModal.nonNumericError'));

        if (!parsed.valid) {
            return { valid: false, error: parsed.error };
        }

        return { valid: true, value: parsed.value };
    };

    const handleSave = async () => {
        if (!selectedRow || isSaving) return;
        
        const validation = validateValue(valor, selectedRow.goalType, {
            minimumThreshold: selectedRow.minimumThreshold,
            maximumThreshold: selectedRow.maximumThreshold,
            fixedValue: selectedRow.fixedValue,
            relativePercentage: selectedRow.relativePercentage
        });

        if (!validation.valid) {
            setValidationError(validation.error);
            return;
        }
        
        setValidationError('');

        const numericValue = validation.value;

        setIsSaving(true);
        try {
            const { updateIndicatorValue } = await import('@/services/client/IndicatorsService');
            await updateIndicatorValue({
                indicatorCompany: selectedRow.indicatorCompanyId,
                value: numericValue,
                period: selectedRow.periodo || tempPeriodo
            });
            
            closeModal();
            setIsManualSuccessModalOpen(true);
            setLoadingIndicators(true);
            import('@/services/client/IndicatorsService').then(mod => {
                const params = { period: tempPeriodo, companyId: tempCooperativa, page: indicatorsPage, pageSize: indicatorsPageSize };
                if (tempODS && tempODS.trim()) params.sdgCodes = tempODS.trim();
                if (searchTerm && searchTerm.trim()) params.search = searchTerm.trim();
                mod.fetchIndicators(params, (res) => {
                    if (!res.result.status || res.result.error) {
                        setErrorIndicators(res.result.error || t('manageIndicatorsValues.table.errorLoading'));
                    } else {
                        setIndicators(res.value || []);
                        setIndicatorsMeta(res.meta || null);
                    }
                }, () => setLoadingIndicators(false));
            });
        } catch (error) {
            console.error('Error saving indicator value:', error);
            alert(`${t('manageIndicatorsValues.manualModal.saveErrorPrefix')} ${error.message || t('manageIndicatorsValues.manualModal.unknownError')}`);
        } finally {
            setIsSaving(false);
        }
    };
    const closeValidationModal = () => { setIsValidationModalOpen(false); setIsModalOpen(true); };
    const closeManualSuccessModal = () => { setIsManualSuccessModalOpen(false); };
    const resetMinistryModal = () => {
        setMinistryPeriodo('');
        setMinistryCooperativa('');
        setMinistryFile(null);
    };
    const closeMinistryRequiredModal = () => {
        setIsMinistryRequiredModalOpen(false);
    };
    const closeMinistryModal = () => {
        setIsMinistryModalOpen(false);
        setIsMinistryRequiredModalOpen(false);
        setMinistryMissingFields([]);
        resetMinistryModal();
    };
    const closeMinistrySuccessModal = () => {
        setIsMinistrySuccessModalOpen(false);
    };
    const closeCarbonRequiredModal = () => {
        setIsCarbonRequiredModalOpen(false);
    };
    const handleCarbonSubmit = () => {
        const missingFields = [];
        if (!carbonPeriodo) missingFields.push(t('manageIndicatorsValues.ministryModal.validationError.fields.period'));
        if (!carbonCooperativa) missingFields.push(t('manageIndicatorsValues.ministryModal.validationError.fields.cooperative'));

        if (missingFields.length > 0) {
            setCarbonMissingFields(missingFields);
            setIsCarbonRequiredModalOpen(true);
            return;
        }
        setIsCarbonRequiredModalOpen(false);
        setCarbonMissingFields([]);
        setIsCarbonModalOpen(false);
        setShowCarbonCategories(true);
    };
    const handleMinistrySubmit = () => {
        const missingFields = [];

        if (!ministryPeriodo) missingFields.push(t('manageIndicatorsValues.ministryModal.validationError.fields.period'));
        if (!ministryCooperativa) missingFields.push(t('manageIndicatorsValues.ministryModal.validationError.fields.cooperative'));
        if (!ministryFile) missingFields.push(t('manageIndicatorsValues.ministryModal.validationError.fields.dataFile'));

        if (missingFields.length > 0) {
            setMinistryMissingFields(missingFields);
            setIsMinistryRequiredModalOpen(true);
            return;
        }

        setIsMinistryRequiredModalOpen(false);
        setMinistryMissingFields([]);
        setIsMinistryModalOpen(false);
        resetMinistryModal();
        setIsMinistrySuccessModalOpen(true);
    };
    const openFileUploadModal = () => { 
        setIsFileUploadModalOpen(true);
        setFileUploadErrors([]);
    };
    const closeFileUploadModal = () => { 
        setIsFileUploadModalOpen(false); 
        setSelectedFile(null); 
        setFileUploadPeriodo(''); 
        setFileUploadCooperativa('');
        setFileUploadErrors([]);
    };
    const handleFileChange = (event) => { 
        const file = event.target.files[0]; 
        setSelectedFile(file);
        setFileUploadErrors([]);
    };

    const openInfoModal = () => setIsInfoModalOpen(true);
    const closeInfoModal = () => setIsInfoModalOpen(false);
    const closePreviewModal = () => {
        setIsPreviewModalOpen(false);
        setFilePreviewRows([]);
        setFileCommitResult(null);
        setFilePreviewSelection(new Set());
    };

    // Document request modal - delegated to shared ExportRequestModal
    const openExportRequestModal = () => exportRequestRef.current?.open();

    const handleFileUpload = async () => {
        if (!selectedFile || !fileUploadPeriodo || !fileUploadCooperativa || isUploadingFile) return;
        setIsUploadingFile(true);
        setFileUploadErrors([]);
        setFilePreviewRows([]);
        setFilePreviewSelection(new Set());
        setFilePreviewLoading(true);
        try {
            const { previewIndicatorValuesFile } = await import('@/services/client/IndicatorsService');
            const result = await previewIndicatorValuesFile({ file: selectedFile, period: fileUploadPeriodo, companyId: fileUploadCooperativa });
            if (!result.success && !(result.preview && result.preview.length)) {
                setFileUploadErrors(result.errors || []);
                setFilePreviewRows([]);
                setIsUploadingFile(false);
                setFilePreviewLoading(false);
                return;
            }
            // success preview (may have some non-blocking errors alongside valid rows)
            setFileUploadErrors(result.errors || []);
            setFilePreviewRows(result.preview || []);
            const allCodes = new Set((result.preview || []).map(r => r.code));
            setFilePreviewSelection(allCodes); // default select all
            setIsPreviewModalOpen(true);
            // Preserve selectedFile, period and cooperativa for commit step.
            // Only close the modal visually without clearing state so commitPreviewRows works.
            setIsFileUploadModalOpen(false);
        } catch (e) {
            setFileUploadErrors([{ code: null, value: null, reason: e.message || t('manageIndicatorsValues.fileUpload.errorsFallback') }]);
        } finally {
            setIsUploadingFile(false);
            setFilePreviewLoading(false);
        }
    };

    const togglePreviewRow = (code) => {
        setFilePreviewSelection(prev => {
            const next = new Set(prev);
            if (next.has(code)) next.delete(code); else next.add(code);
            return next;
        });
    };

    const commitPreviewRows = async () => {
        if (!selectedFile || !fileUploadPeriodo || !fileUploadCooperativa || filePreviewSelection.size === 0 || fileCommitLoading) return;
        setFileCommitLoading(true);
        setFileCommitResult(null);
        try {
            const { commitIndicatorValuesFile } = await import('@/services/client/IndicatorsService');
            const confirmedCodes = Array.from(filePreviewSelection);
            const result = await commitIndicatorValuesFile({ file: selectedFile, period: fileUploadPeriodo, companyId: fileUploadCooperativa, confirmedCodes });
            setFileCommitResult(result);
            if (result.success) {
                // refresh indicators if same context
                if (tempPeriodo === fileUploadPeriodo && tempCooperativa === fileUploadCooperativa) {
                    setLoadingIndicators(true);
                    import('@/services/client/IndicatorsService').then(mod => {
                        const params = { period: tempPeriodo, companyId: tempCooperativa, page: indicatorsPage, pageSize: indicatorsPageSize };
                        if (tempODS && tempODS.trim()) params.sdgCodes = tempODS.trim();
                        if (searchTerm && searchTerm.trim()) params.search = searchTerm.trim();
                        mod.fetchIndicators(params, (res) => {
                            if (!res.result.status || res.result.error) {
                                setErrorIndicators(res.result.error || t('manageIndicatorsValues.table.errorLoading'));
                            } else {
                                setIndicators(res.value || []);
                                setIndicatorsMeta(res.meta || null);
                            }
                        }, () => setLoadingIndicators(false));
                    });
                }
            }
        } catch (e) {
            setFileCommitResult({ success: false, insertedCount: 0, errors: [{ code: null, value: null, reason: e.message || t('manageIndicatorsValues.previewModal.commitFallback') }] });
        } finally {
            setFileCommitLoading(false);
        }
    };
    
    const closeSuccessModal = () => { setIsSuccessModalOpen(false); };
    const isValidValue = typeof valor === 'string' ? valor.trim() !== '' : valor !== null && valor !== undefined && String(valor).trim() !== '';
    const isValidFile = selectedFile !== null && fileUploadPeriodo !== '' && fileUploadCooperativa !== '';

    const formatPreviewIndicatorName = (name) => {
        if (name === null || name === undefined) return '-';
        const normalized = String(name).trim();
        return normalized || '-';
    };

    const isCommitSuccessScreen = fileCommitResult?.success === true;

    const sdgOptions = useMemo(() => {
        // Prefer the full list from backend meta (independent of current ODS filter)
        if (indicatorsMeta?.availableSdgs && Array.isArray(indicatorsMeta.availableSdgs)) {
            return indicatorsMeta.availableSdgs;
        }
        // Fallback: derive from current page data
        const map = new Map();
        indicators.forEach(row => {
            const rowSdgs = Array.isArray(row.sdgs)
                ? row.sdgs
                : (typeof row.sdgCodes === 'string' && row.sdgCodes.trim())
                    ? row.sdgCodes.split(/[-,\s]+/).filter(Boolean).map(code => ({ code, name: null }))
                    : [];
            rowSdgs.forEach(s => { if (s && s.code) { if (!map.has(s.code)) map.set(s.code, s.name || s.code); } });
        });
        return Array.from(map.entries()).map(([code, name]) => ({ code, name }));
    }, [indicatorsMeta, indicators]);

    return (
        <>
            <div className="container-xxl my-4 indicator-form-section">
                {!showInsertarValores && !showCarbonCategories ? (
                    <div className="indicator-menu">
                        <div className="indicator-menu__panel">
                            <button
                                type="button"
                                className="btn w-100 indicator-menu__button"
                                onClick={() => setShowInsertarValores(true)}
                            >
                                {t('manageIndicatorsValues.menu.insertIndicatorValues')}
                            </button>
                            <button
                                type="button"
                                className="btn w-100 indicator-menu__button"
                                onClick={() => window.open('https://forms.cloud.microsoft/e/eXwu4JRpXd', '_blank', 'noopener,noreferrer')}
                            >
                                {t('manageIndicatorsValues.menu.insertQualitativeBySdg')}
                            </button>
                            <button type="button" className="btn w-100 indicator-menu__button">
                                {t('manageIndicatorsValues.menu.insertFoodWasteReport')}
                            </button>
                            <button
                                type="button"
                                className="btn w-100 d-flex align-items-center justify-content-between indicator-menu__button indicator-menu__button--caret"
                                onClick={() => setShowCarbonSubmenu(v => !v)}
                            >
                                <span>{t('manageIndicatorsValues.menu.insertCarbonFootprintReport')}</span>
                                <span className="indicator-menu__caret" aria-hidden="true">
                                    {showCarbonSubmenu ? <FiChevronUp /> : <FiChevronDown />}
                                </span>
                            </button>
                            {showCarbonSubmenu && (
                                <div className="indicator-menu__submenu">
                                    <button
                                        type="button"
                                        className="btn w-100 indicator-menu__submenu-button"
                                        onClick={() => setIsMinistryModalOpen(true)}
                                    >
                                        {t('manageIndicatorsValues.menu.uploadMinistryCalculator')}
                                    </button>
                                    <button
                                        type="button"
                                        className="btn w-100 indicator-menu__submenu-button"
                                        onClick={() => setIsCarbonModalOpen(true)}
                                    >
                                       {t('manageIndicatorsValues.menu.insertByCategories')}
                                    </button>
                                </div>
                            )}
                        </div>
                    </div>
                ) : showCarbonCategories ? (
                    <CarbonFootprintWizard
                        periodId={carbonPeriodo}
                        cooperativeId={carbonCooperativa}
                        periodLabel={(() => {
                            const p = periods.find(p => String(typeof p === 'object' ? p.id : p) === String(carbonPeriodo));
                            return p ? (typeof p === 'object' ? p.name : String(p)) : carbonPeriodo;
                        })()}
                        cooperativeName={(() => {
                            const c = cooperatives.find(c => String(c.id || c.code) === String(carbonCooperativa));
                            return c ? c.name : carbonCooperativa;
                        })()}
                        onCancel={() => { setShowCarbonCategories(false); setCarbonPeriodo(''); setCarbonCooperativa(''); }}
                    />
                ) : (
                    <>
                        <div className="card mb-3">
                            <div className="card-body" style={{paddingTop: '9px'}}>
                                <div className="d-flex flex-wrap align-items-end justify-content-between gap-3">
                                    <div className="d-flex flex-wrap align-items-end gap-3" style={{"gap": "0.5rem"}}>
                                         <img src="/assets/images/icons/filter-logo.png" alt={t('manageIndicatorsValues.filters.filterAlt')} style={{width: '33px',height: '33px',marginRight: '8px',marginBottom: '3px'}}/>
                                        <div style={{minWidth: '200px'}}>
                                            <PeriodSelect
                                                periods={periods}
                                                loading={loadingPeriods}
                                                error={errorPeriods}
                                                value={tempPeriodo}
                                                onChange={(e) => setTempPeriodo(e.target.value)}
                                                label={t('manageIndicatorsValues.filters.period')}
                                                formGroupClassName="form-group mb-0"
                                            />
                                        </div>
                                        <div style={{minWidth: '200px'}}>
                                            <CooperativeSelect
                                                cooperatives={cooperatives}
                                                loading={loadingCooperatives}
                                                error={errorCooperatives}
                                                value={tempCooperativa}
                                                onChange={(e) => setTempCooperativa(e.target.value)}
                                                label={t('manageIndicatorsValues.filters.cooperative')}
                                                formGroupClassName="form-group mb-0"
                                            />
                                        </div>
                                        <div className="form-group mb-0" style={{minWidth: '200px'}}>
                                            <label className="form-label">{t('manageIndicatorsValues.filters.sdg')}</label>
                                            <select className="form-control" value={tempODS} onChange={(e) => setTempODS(e.target.value)}>
                                                <option value="">{t('manageIndicatorsValues.filters.select')}</option>
                                                {sdgOptions.map(opt => (
                                                    <option key={opt.code} value={opt.code}>{opt.code}{opt.name ? ` - ${opt.name}` : ''}</option>
                                                ))}
                                            </select>
                                        </div>
                                    </div>
                                    <div className="d-flex align-items-end">
                                        <button className="rn-button-style--2  btn-primary-color logout-button mr-3 header-logout-button " onClick={openFileUploadModal}><span>{t('manageIndicatorsValues.actions.uploadFile')}</span></button>
                                        {/* <button className="rn-button-style--2  btn-primary-color logout-button mr-3 header-logout-button " onClick={openExportRequestModal}><span>{t('manageIndicatorsValues.actions.generateDocument')}</span></button> */}

                                        <button
                                            type="button"
                                            className="btn p-0 border-0 bg-transparent info-modal-trigger"
                                            onClick={openInfoModal}
                                            aria-label={t('manageIndicatorsValues.filters.showInfoAria')}
                                        >
                                            <img
                                                src="/assets/images/icons/info-logo.png"
                                                alt={t('manageIndicatorsValues.filters.infoAlt')}
                                                style={{width: '48px', height: '48px', marginLeft: '8px', marginBottom: '0px'}}
                                            />
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="card">
                            <div className="card-header d-flex align-items-center justify-content-between">
                                <h3 className="fs-3 mb-0 fw-semibold" style={{color: '#3d8465'}}>{t('manageIndicatorsValues.table.title')}</h3>
                                <div className="d-flex align-items-center gap-2">
                                    <svg style={{width: '16px', height: '16px'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                    </svg>
                                    <input type="text" placeholder={t('manageIndicatorsValues.filters.searchPlaceholder')} className="form-control" style={{width: '300px', fontSize: '14px', padding: '1px 9px', height: 'auto', border: '1px solid #000 !important', borderRadius: '0px', boxShadow: 'none'}} value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
                                </div>
                            </div>
                            <div className="table-responsive">
                                <table className="table table-hover align-middle mb-0">
                                    <thead>
                                        <tr>
                                            <th style={{cursor: 'pointer', userSelect: 'none'}} onClick={() => handleSort('codigo')}>{t('manageIndicatorsValues.table.code')}<SortArrow column="codigo" /></th>
                                            <th>{t('manageIndicatorsValues.table.sdg')}</th>
                                            <th style={{cursor: 'pointer', userSelect: 'none'}} onClick={() => handleSort('indicador')}>{t('manageIndicatorsValues.table.indicator')}<SortArrow column="indicador" /></th>
                                            <th>{t('manageIndicatorsValues.table.unit')}</th>
                                            <th style={{cursor: 'pointer', userSelect: 'none'}} onClick={() => handleSort('periodo')}>{t('manageIndicatorsValues.table.period')}<SortArrow column="periodo" /></th>
                                            <th style={{cursor: 'pointer', userSelect: 'none'}} onClick={() => handleSort('valor')}>{t('manageIndicatorsValues.table.value')}<SortArrow column="valor" /></th>
                                            <th className="text-end">{t('manageIndicatorsValues.table.load')}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {!tempPeriodo || !tempCooperativa ? (
                                            <tr>
                                                <td colSpan="7" className="text-center text-muted" style={{padding: '2rem'}}>
                                                    <div>
                                                        <svg style={{width: '48px', height: '48px', marginBottom: '1rem', opacity: '0.5'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                                        </svg>
                                                        <p className="mb-0" style={{fontSize: '16px'}}>{t('manageIndicatorsValues.table.selectFiltersPrompt')}</p>
                                                    </div>
                                                </td>
                                            </tr>
                                        ) : loadingIndicators ? (
                                            <tr>
                                                <td colSpan="7" className="text-center text-muted" style={{padding: '2rem'}}>
                                                    {t('manageIndicatorsValues.table.loading')}
                                                </td>
                                            </tr>
                                        ) : errorIndicators ? (
                                            <tr>
                                                <td colSpan="7" className="text-center text-danger" style={{padding: '2rem'}}>
                                                    {String(errorIndicators)}
                                                </td>
                                            </tr>
                                        ) : filteredTableData.length === 0 ? (
                                            <tr>
                                                <td colSpan="7" className="text-center text-muted" style={{padding: '2rem'}}>
                                                    <div>
                                                        <svg style={{width: '48px', height: '48px', marginBottom: '1rem', opacity: '0.5'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                                        </svg>
                                                        <p className="mb-0" style={{fontSize: '16px'}}>{t('manageIndicatorsValues.table.noResults')}</p>
                                                    </div>
                                                </td>
                                            </tr>
                                        ) : (
                                            filteredTableData.map((row, index) => (
                                                <tr key={index}>
                                                    <td>{row.indicator?.code}</td>
                                                    <td>{Array.isArray(row.sdgs) && row.sdgs.length ? row.sdgs.map(s => s.code).join('-') : (row.sdgCodes || '-')}</td>
                                                    <td>{row.indicator?.name}
                                                        {row.indicator?.enableAutoCalculationFormula == true && (
                                                            <>
                                                            <br />
                                                            <small style={{color: 'rgb(140, 140, 140)', fontStyle: 'italic', fontWeight: '300'}}>{t('manageIndicatorsValues.table.appliedFormulaLabel')} {row.indicator.autoCalculationFormula}</small>
                                                            </>
                                                        )}
                                                    </td>
                                                    <td>{row.unit}</td>
                                                    <td>{row.periodName || ''}</td>
                                                    <td>{row.value ?? '-'}</td>
                                                    <td className="text-end">
                                                        <button
                                                            className="btn btn-sm upload-icon-button"
                                                            onClick={() => openModal(row)}
                                                            title={row.autoCalculated ? t('manageIndicatorsValues.table.viewCalculated') : t('manageIndicatorsValues.table.loadValue')}
                                                            aria-label={row.autoCalculated ? t('manageIndicatorsValues.table.viewCalculated') : t('manageIndicatorsValues.table.loadValue')}
                                                        >
                                                            {row.autoCalculated ? (
                                                                <svg width="14px" height="14px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="#0c7e42"><g id="SVGRepo_bgCarrier" ></g><g id="SVGRepo_tracerCarrier" ></g><g id="SVGRepo_iconCarrier"><path fill="#0c7e42" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"></path></g></svg>
                                                            ) : (
                                                               <svg width="14px" height="14px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" ></g><g id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.5" d="M4 22H20" stroke="#0c7e42" strokeWidth="1.5" strokeLinecap="round"></path> <path d="M14.6296 2.92142L13.8881 3.66293L7.07106 10.4799C6.60933 10.9416 6.37846 11.1725 6.17992 11.4271C5.94571 11.7273 5.74491 12.0522 5.58107 12.396C5.44219 12.6874 5.33894 12.9972 5.13245 13.6167L4.25745 16.2417L4.04356 16.8833C3.94194 17.1882 4.02128 17.5243 4.2485 17.7515C4.47573 17.9787 4.81182 18.0581 5.11667 17.9564L5.75834 17.7426L8.38334 16.8675L8.3834 16.8675C9.00284 16.6611 9.31256 16.5578 9.60398 16.4189C9.94775 16.2551 10.2727 16.0543 10.5729 15.8201C10.8275 15.6215 11.0583 15.3907 11.5201 14.929L11.5201 14.9289L18.3371 8.11195L19.0786 7.37044C20.3071 6.14188 20.3071 4.14999 19.0786 2.92142C17.85 1.69286 15.8581 1.69286 14.6296 2.92142Z" stroke="#0c7e42" strokeWidth="1.5"></path> <path opacity="0.5" d="M13.8879 3.66406C13.8879 3.66406 13.9806 5.23976 15.3709 6.63008C16.7613 8.0204 18.337 8.11308 18.337 8.11308M5.75821 17.7437L4.25732 16.2428" stroke="#0c7e42" strokeWidth="1.5"></path> </g></svg>
                                                            )}
                                                        </button>
                                                    </td>
                                                </tr>
                                            ))
                                        )}
                                    </tbody>
                                </table>
                            </div>
                            <div className="card-footer bg-light d-flex justify-content-between align-items-center">
                                <small className="text-muted">
                                    {(!tempPeriodo || !tempCooperativa) ? t('manageIndicatorsValues.table.selectFiltersPromptShort')
                                      : loadingIndicators ? t('manageIndicatorsValues.table.loading')
                                      : errorIndicators ? t('manageIndicatorsValues.table.errorLoading')
                                      : indicatorsMeta?.pagination ? t('manageIndicatorsValues.table.paginationSummary', { shown: filteredTableData.length, total: indicatorsMeta.pagination.total, page: indicatorsMeta.pagination.page, pageCount: indicatorsMeta.pagination.pageCount })
                                      : t('manageIndicatorsValues.table.simpleSummary', { count: filteredTableData.length })}
                                </small>
                                {indicatorsMeta?.pagination && indicatorsMeta.pagination.pageCount > 1 && (
                                    <div className="d-flex gap-2">
                                        <button className="btn btn-sm" disabled={indicatorsPage <= 1} onClick={() => setIndicatorsPage(p => Math.max(1, p - 1))}>{t('manageIndicatorsValues.table.prev')}</button>
                                        <button className="btn btn-sm" disabled={indicatorsPage >= indicatorsMeta.pagination.pageCount} onClick={() => setIndicatorsPage(p => Math.min(indicatorsMeta.pagination.pageCount, p + 1))}>{t('manageIndicatorsValues.table.next')}</button>
                                    </div>
                                )}
                            </div>
                        </div>
                    </>
                )}
            </div>
            <Modal
                isOpen={isCarbonModalOpen}
                onClose={() => { setIsCarbonModalOpen(false); setCarbonPeriodo(''); setCarbonCooperativa(''); setIsCarbonRequiredModalOpen(false); setCarbonMissingFields([]); }}
                title={t('manageIndicatorsValues.carbonModal.title')}
                onSubmit={handleCarbonSubmit}
                submitLabel="Empezar"
                size="lg"
            >
                <div className="container-fluid indicator-form-section">
                    <div className="row">
                        <div className="col-12">
                            <p style={{ color: '#9ca3af', fontSize: '15px', marginBottom: '18px', marginTop: '-4px' }}>
                                Insertar datos por categorías
                            </p>
                            <div style={{
                                background: '#f0f9f4',
                                borderLeft: '4px solid #1e6b3c',
                                borderRadius: '4px',
                                padding: '16px 20px',
                                marginBottom: '24px',
                            }}>
                                <p style={{ color: '#1f2937', fontSize: '14px', lineHeight: 1.6, marginBottom: '12px' }}>
                                    Vamos a guiarte paso a paso para introducir la información necesaria para calcular la <strong>Huella de Carbono</strong>.
                                </p>
                                <p style={{ color: '#1f2937', fontSize: '14px', lineHeight: 1.6, marginBottom: 0 }}>
                                    En primer lugar, selecciona la <strong>Entidad</strong> y el <strong>Año</strong> sobre los que vas a introducir los datos.
                                </p>
                            </div>
                            <div className="row">
                                <div className="col-md-6">
                                    <PeriodSelect
                                        periods={periods}
                                        loading={loadingPeriods}
                                        error={errorPeriods}
                                        value={carbonPeriodo}
                                        onChange={(e) => setCarbonPeriodo(e.target.value)}
                                        label="Periodo"
                                        required
                                        strongLabel
                                    />
                                </div>
                                <div className="col-md-6">
                                    <CooperativeSelect
                                        cooperatives={cooperatives}
                                        loading={loadingCooperatives}
                                        error={errorCooperatives}
                                        value={carbonCooperativa}
                                        onChange={(e) => setCarbonCooperativa(e.target.value)}
                                        label="Entidad"
                                        required
                                        strongLabel
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </Modal>
            <Modal
                isOpen={isMinistryModalOpen}
                onClose={closeMinistryModal}
                title={t('manageIndicatorsValues.ministryModal.title')}
                onSubmit={handleMinistrySubmit}
                submitLabel={t('manageIndicatorsValues.ministryModal.submit')}
                size="lg"
            >
                <div className="container-fluid indicator-form-section">
                    <div className="row">
                        <div className="col-12">
                            <div className="mb-4">
                                <h6 className="mb-3">Subir calculadora de MITECO</h6>
                            </div>
                            <div className="row mb-4">
                                <div className="col-md-6">
                                    <PeriodSelect
                                        periods={periods}
                                        loading={loadingPeriods}
                                        error={errorPeriods}
                                        value={ministryPeriodo}
                                        onChange={(e) => setMinistryPeriodo(e.target.value)}
                                        label="Periodo"
                                        required
                                        strongLabel
                                    />
                                </div>
                                <div className="col-md-6">
                                    <CooperativeSelect
                                        cooperatives={cooperatives}
                                        loading={loadingCooperatives}
                                        error={errorCooperatives}
                                        value={ministryCooperativa}
                                        onChange={(e) => setMinistryCooperativa(e.target.value)}
                                        label="Entidad"
                                        required
                                        strongLabel
                                    />
                                </div>
                            </div>
                            <div className="form-group mb-4">
                                <label className="form-label">
                                    <strong>Archivo de datos</strong> <span className="text-danger">*</span>
                                </label>
                                <div className="custom-file">
                                    <input
                                        type="file"
                                        className="custom-file-input"
                                        id="ministryFileUpload"
                                        accept=".xlsx,.xls"
                                        onChange={(e) => setMinistryFile(e.target.files[0] || null)}
                                    />
                                    <label className="custom-file-label" htmlFor="ministryFileUpload">
                                        {ministryFile ? ministryFile.name : 'Seleccionar archivo...'}
                                    </label>
                                </div>
                                <small className="form-text text-muted">Formatos permitidos: Excel (.xlsx)</small>
                            </div>
                            <div className="mt-4">
                                <h6 className="mb-2">Instrucciones:</h6>
                                <ul className="text-muted small">
                                    <li>Seleccione el periodo y cooperativa para los datos que va a cargar</li>
                                    <li>Confirme que el Excel a cargar dispone de toda la información</li>
                                    <li>Los datos se asociarán al periodo y cooperativa seleccionados</li>
                                    <li>Los datos previos, en caso de existir, serán reemplazados por los nuevos</li>
                                    <li>Este proceso no valida los datos incorporados en el Excel</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </Modal>
            <Modal
                isOpen={isMinistryRequiredModalOpen}
                onClose={closeMinistryRequiredModal}
                title="Error de validación"
                size="sm"
                contentClassName="ministry-required-error-modal"
            >
                <div className="ministry-required-error-modal__body">
                    <div className="ministry-required-error-modal__icon" aria-hidden="true">
                        <svg width="56" height="56" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="39" cy="39" r="38" stroke="currentColor" strokeWidth="2" />
                            <path d="M28 28L50 50" stroke="currentColor" strokeWidth="5" strokeLinecap="round" />
                            <path d="M50 28L28 50" stroke="currentColor" strokeWidth="5" strokeLinecap="round" />
                        </svg>
                    </div>
                    <h5 className="ministry-required-error-modal__heading">Campos obligatorios</h5>
                    <button
                        type="button"
                        className="btn ministry-required-error-modal__button"
                        onClick={closeMinistryRequiredModal}
                    >
                        {t('manageIndicatorsValues.ministryModal.validationError.close')}
                    </button>
                </div>
            </Modal>
            <Modal
                isOpen={isCarbonRequiredModalOpen}
                onClose={closeCarbonRequiredModal}
                title="Error de validación"
                size="sm"
                contentClassName="ministry-required-error-modal"
            >
                <div className="ministry-required-error-modal__body">
                    <div className="ministry-required-error-modal__icon" aria-hidden="true">
                        <svg width="56" height="56" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="39" cy="39" r="38" stroke="currentColor" strokeWidth="2" />
                            <path d="M28 28L50 50" stroke="currentColor" strokeWidth="5" strokeLinecap="round" />
                            <path d="M50 28L28 50" stroke="currentColor" strokeWidth="5" strokeLinecap="round" />
                        </svg>
                    </div>
                    <h5 className="ministry-required-error-modal__heading">Campos obligatorios</h5>
                    <button
                        type="button"
                        className="btn ministry-required-error-modal__button"
                        onClick={closeCarbonRequiredModal}
                    >
                        {t('manageIndicatorsValues.ministryModal.validationError.close')}
                    </button>
                </div>
            </Modal>
            <Modal
                isOpen={isMinistrySuccessModalOpen}
                onClose={closeMinistrySuccessModal}
                title={<span style={{ color: '#1f2937', fontSize: '17px' }}>{t('manageIndicatorsValues.ministryModal.successHeaderTitle')}</span>}
                size="md"
            >
                <div className="text-center">
                    <div className="mb-3">
                        <svg style={{ width: '64px', height: '64px', color: '#28a745' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <h5 className="mb-3">{t('manageIndicatorsValues.ministryModal.successContentTitle')}</h5>
                    <p className="text-muted mb-4" style={{ fontSize: '13px', lineHeight: 1.5 }}>{t('manageIndicatorsValues.ministryModal.successContentMessage')}</p>
                    <div className="text-center">
                        <button type="button" className="btn manual-upload-button" onClick={closeMinistrySuccessModal}>
                            {t('manageIndicatorsValues.ministryModal.successButton')}
                        </button>
                    </div>
                </div>
            </Modal>
            <style>{`
                .custom-modal-content.ministry-required-error-modal {
                    width: min(360px, calc(100vw - 32px));
                    margin: 0 auto;
                    border-radius: 16px;
                }

                .custom-modal-content.ministry-required-error-modal .custom-modal-header {
                    padding: 18px 18px 0;
                    border-bottom: 0;
                }

                .custom-modal-content.ministry-required-error-modal .custom-modal-title {
                    color: #252833;
                    font-size: 18px;
                    line-height: 1.2;
                    font-weight: 700;
                }

                .custom-modal-content.ministry-required-error-modal .custom-modal-body {
                    padding: 10px 18px 24px;
                }

                .ministry-required-error-modal__body {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                }

                .ministry-required-error-modal__icon {
                    color: #d32f2f;
                    margin-bottom: 16px;
                }

                .ministry-required-error-modal__heading {
                    margin: 0 0 18px;
                    color: #252833;
                    font-size: 18px;
                    line-height: 1.2;
                    font-weight: 700;
                }

                .ministry-required-error-modal__button {
                    min-width: 90px;
                    padding: 6px 16px;
                    border: 1px solid #1f2937;
                    border-radius: 8px;
                    color: #1f2937;
                    background: #ffffff;
                    font-size: 13px;
                    font-weight: 500;
                }

                .ministry-required-error-modal__button:hover,
                .ministry-required-error-modal__button:focus {
                    border-color: #000000;
                    color: #000000;
                    background: #f3f4f6;
                    box-shadow: none;
                }

                @media (max-width: 767px) {
                    .custom-modal-content.ministry-required-error-modal {
                        width: min(360px, calc(100vw - 24px));
                    }

                    .custom-modal-content.ministry-required-error-modal .custom-modal-title {
                        font-size: 17px;
                    }

                    .custom-modal-content.ministry-required-error-modal .custom-modal-body {
                        padding: 8px 16px 20px;
                    }

                    .ministry-required-error-modal__heading {
                        font-size: 17px;
                    }
                }
            `}</style>
            {showInsertarValores && (
                <>
                    <Modal
                isOpen={isModalOpen}
                onClose={closeModal}
                title={selectedRow?.autoCalculated ? t('manageIndicatorsValues.manualModal.titleView') : t('manageIndicatorsValues.manualModal.titleEdit')}
                onSubmit={selectedRow?.autoCalculated ? null : handleSave}
                submitDisabled={!isValidValue || isSaving}
                submitLabel={isSaving ? t('manageIndicatorsValues.manualModal.saving') : t('manageIndicatorsValues.manualModal.submit')}
                size="lg"
            >
                <IndicatorForm
                    selectedRow={selectedRow}
                    onValueChange={handleValueChange}
                    initialValue={selectedRow?.valor || ''}
                    validationError={validationError}
                />
            </Modal>
            <Modal
                isOpen={isFileUploadModalOpen}
                onClose={closeFileUploadModal}
                title={t('manageIndicatorsValues.fileUpload.title')}
                onSubmit={handleFileUpload}
                submitDisabled={!isValidFile || isUploadingFile}
                submitLabel={isUploadingFile ? t('manageIndicatorsValues.fileUpload.uploading') : t('manageIndicatorsValues.fileUpload.submit')}
                size="lg"
            >
                <div className="container-fluid indicator-form-section">
                    <div className="row">
                        <div className="col-12">
                            <div className="mb-4">
                                <h6 className="mb-3">{t('manageIndicatorsValues.fileUpload.configTitle')}</h6>
                                <p className="text-muted small mb-3">{t('manageIndicatorsValues.fileUpload.configSubtitle')}</p>
                            </div>
                            <div className="row mb-4">
                                <div className="col-md-6">
                                    <PeriodSelect
                                        periods={periods}
                                        loading={loadingPeriods}
                                        error={errorPeriods}
                                        value={fileUploadPeriodo}
                                        onChange={(e) => setFileUploadPeriodo(e.target.value)}
                                        label={t('manageIndicatorsValues.fileUpload.period')}
                                        required
                                        strongLabel
                                    />
                                </div>
                                <div className="col-md-6">
                                    <CooperativeSelect
                                        cooperatives={cooperatives}
                                        loading={loadingCooperatives}
                                        error={errorCooperatives}
                                        value={fileUploadCooperativa}
                                        onChange={(e) => setFileUploadCooperativa(e.target.value)}
                                        label="Entidad"
                                        required
                                        strongLabel
                                    />
                                </div>
                            </div>
                            <div className="form-group mb-4">
                                <label className="form-label">
                                    <strong>{t('manageIndicatorsValues.fileUpload.dataFile')}</strong> <span className="text-danger">*</span>
                                </label>
                                <div className="custom-file">
                                    <input
                                        type="file"
                                        className="custom-file-input"
                                        id="fileUpload"
                                        accept=".xlsx,.xls,.csv,.json"
                                        onChange={handleFileChange}
                                    />
                                    <label className="custom-file-label" htmlFor="fileUpload">
                                        {selectedFile ? selectedFile.name : t('manageIndicatorsValues.fileUpload.selectFile')}
                                    </label>
                                </div>
                                <small className="form-text text-muted">
                                    {t('manageIndicatorsValues.fileUpload.formatsAllowed')}
                                </small>
                            </div>
                            {selectedFile && fileUploadPeriodo && fileUploadCooperativa && fileUploadErrors.length === 0 && (() => {
                                const selectedPeriod = periods.find(p => String(p.id) === String(fileUploadPeriodo));
                                const selectedCooperative = cooperatives.find(c => String(c.id) === String(fileUploadCooperativa));
                                const periodLabel = selectedPeriod?.name || fileUploadPeriodo;
                                const cooperativeLabel = selectedCooperative?.shortName || selectedCooperative?.name || fileUploadCooperativa;
                                return (
                                <div className="alert alert-success">
                                    <div className="d-flex align-items-center">
                                        <svg style={{width: '20px', height: '20px', marginRight: '8px'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                        <div>
                                            <strong>{t('manageIndicatorsValues.fileUpload.configComplete')}</strong><br />
                                            <span className="text-muted">
                                                {t('manageIndicatorsValues.fileUpload.summaryPeriodLabel')} {periodLabel} |
                                                {' '}{t('manageIndicatorsValues.fileUpload.summaryCooperativeLabel')} {cooperativeLabel} |
                                                {' '}{t('manageIndicatorsValues.fileUpload.summaryFileLabel')} {selectedFile.name}
                                            </span><br />
                                            <small className="text-muted">
                                                {t('manageIndicatorsValues.fileUpload.sizeLabel')} {(selectedFile.size / 1024).toFixed(2)} {t('manageIndicatorsValues.fileUpload.sizeUnit')}
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                );
                            })()}
                            {fileUploadErrors.length > 0 && (
                                <div className="alert alert-danger mt-4">
                                    <div className="d-flex align-items-start">
                                        <svg style={{width: '24px', height: '24px', marginRight: '12px', flexShrink: 0}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                        <div style={{flex: 1}}>
                                            <h6 className="mb-2"><strong>{t('manageIndicatorsValues.fileUpload.errorsTitle')}</strong></h6>
                                            <p className="mb-2 small">{t('manageIndicatorsValues.fileUpload.errorsDescription')}</p>
                                            <div style={{maxHeight: '300px', overflowY: 'auto'}}>
                                                <table className="table table-sm table-bordered mb-0">
                                                    <thead className="table-light">
                                                        <tr>
                                                            <th style={{width: '20%'}}>{t('manageIndicatorsValues.fileUpload.colCode')}</th>
                                                            <th style={{width: '20%'}}>{t('manageIndicatorsValues.fileUpload.colValue')}</th>
                                                            <th style={{width: '60%'}}>{t('manageIndicatorsValues.fileUpload.colError')}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {fileUploadErrors.map((error, idx) => (
                                                            <tr key={idx}>
                                                                <td><code>{error.code}</code></td>
                                                                <td>{error.value !== null && error.value !== undefined ? error.value : '-'}</td>
                                                                <td className="text-danger small">{error.reason}</td>
                                                            </tr>
                                                        ))}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )}
                            <div className="mt-4">
                                <h6 className="mb-2">{t('manageIndicatorsValues.fileUpload.instructionsTitle')}</h6>
                                <ul className="text-muted small">
                                    {t('manageIndicatorsValues.fileUpload.instructions', { returnObjects: true }).map((item, idx) => (
                                        <li key={idx}>{item}</li>
                                    ))}
                                </ul>
                            </div>
                            <div className="mt-4">
                                <h6 className="mb-2">{t('manageIndicatorsValues.fileUpload.importantTitle')}</h6>
                                <ul className="text-muted small">
                                    <li>{t('manageIndicatorsValues.fileUpload.importantInstruction')}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </Modal>
            <Modal
                isOpen={isPreviewModalOpen}
                onClose={closePreviewModal}
                title={isCommitSuccessScreen ? t('manageIndicatorsValues.previewModal.completedTitle') : t('manageIndicatorsValues.previewModal.title')}
                onSubmit={isCommitSuccessScreen ? null : commitPreviewRows}
                submitDisabled={filePreviewSelection.size === 0 || fileCommitLoading}
                submitLabel={fileCommitLoading ? t('manageIndicatorsValues.previewModal.saving') : t('manageIndicatorsValues.previewModal.submit')}
                size="xl"
            >
                {isCommitSuccessScreen ? (
                    <div className="text-center py-4">
                        <div className="mb-3">
                            <svg style={{width: '64px', height: '64px', color: '#28a745'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <h5 className="mb-2">{t('manageIndicatorsValues.previewModal.completedHeading')}</h5>
                        <p className="text-muted">{t('manageIndicatorsValues.previewModal.rowsProcessedLabel')} {fileCommitResult?.insertedCount ?? 0}</p>
                        <button type="button" className="btn manual-upload-button" onClick={closePreviewModal}>{t('manageIndicatorsValues.previewModal.close')}</button>
                    </div>
                ) : (
                    <>
                        <div className="mb-3">
                            <p className="text-muted small mb-2">{t('manageIndicatorsValues.previewModal.description')}</p>
                            <div className="d-flex flex-wrap gap-2 align-items-center mb-2">
                                <button type="button" className="btn btn-sm btn-outline-secondary preview-action-button" onClick={() => setFilePreviewSelection(new Set(filePreviewRows.map(r => r.code)))}>{t('manageIndicatorsValues.previewModal.selectAll')}</button>
                                <button type="button" className="btn btn-sm btn-outline-secondary preview-action-button" onClick={() => setFilePreviewSelection(new Set())}>{t('manageIndicatorsValues.previewModal.clearSelection')}</button>
                                <style jsx>{`
                                    /* Use :global to ensure styles apply inside portal-rendered Modal content */
                                    :global(.preview-action-button) {}
                                    :global(.btn.preview-action-button:hover) {
                                        background-color: #0c7e42 !important;
                                        color: #ffffff !important;
                                        border-color: #0c7e42 !important;
                                    }
                                    :global(.btn.preview-action-button) {
                                        transition: background-color .15s ease-in-out, color .15s ease-in-out;
                                    }
                                    /* Indicator preview badges */
                                    :global(.indicator-badge) {
                                        display: inline-block;
                                        padding: 0.25rem 0.5rem;
                                        font-size: 0.65rem;
                                        font-weight: 600;
                                        line-height: 1;
                                        border-radius: 0.25rem;
                                        color: #ffffff !important;
                                        text-transform: uppercase;
                                        letter-spacing: .5px;
                                    }
                                    :global(.indicator-badge.insert) { background-color: #0c7e42 !important; }
                                    :global(.indicator-badge.update) { background-color: #c9a200 !important; }
                                    :global(.indicator-badge.nochange) { background-color: #444444 !important; }
                                    /* Smaller checkbox */
                                    :global(.preview-select-checkbox) {
                                        width: 14px;
                                        height: 14px;
                                        vertical-align: middle;
                                        margin: 0 0 0 2px;
                                        cursor: pointer;
                                    }
                                    /* Align checkbox cell contents */
                                    :global(.preview-select-checkbox) { accent-color: #0c7e42; }
                                `}</style>
                                <span className="small text-muted">{t('manageIndicatorsValues.previewModal.selectedLabel')} {filePreviewSelection.size}/{filePreviewRows.length}</span>
                            </div>
                        </div>
                        {fileCommitResult && fileCommitResult.success === false && (
                            <div className="alert alert-danger py-2">
                                <strong>{t('manageIndicatorsValues.previewModal.saveFailed')}</strong> {fileCommitResult.errors && fileCommitResult.errors.length ? t('manageIndicatorsValues.previewModal.saveFailedReviewErrors') : ''}
                            </div>
                        )}
                        <div style={{maxHeight: '60vh', overflowY: 'auto'}} className="table-responsive border rounded">
                            <table className="table table-sm table-hover mb-0">
                                <thead className="table-light">
                                    <tr>
                                        <th style={{width:'3rem'}}>{t('manageIndicatorsValues.previewModal.colSelect')}</th>
                                        <th>{t('manageIndicatorsValues.previewModal.colCode')}</th>
                                        <th>{t('manageIndicatorsValues.previewModal.colIndicatorName')}</th>
                                        <th>{t('manageIndicatorsValues.previewModal.colNewValue')}</th>
                                        <th>{t('manageIndicatorsValues.previewModal.colExistingValue')}</th>
                                        <th>{t('manageIndicatorsValues.previewModal.colAction')}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {filePreviewLoading ? (
                                        <tr><td colSpan={6} className="text-center text-muted">{t('manageIndicatorsValues.previewModal.loadingPreview')}</td></tr>
                                    ) : filePreviewRows.length === 0 ? (
                                        <tr><td colSpan={6} className="text-center text-muted">{t('manageIndicatorsValues.previewModal.noRows')}</td></tr>
                                    ) : (
                                        filePreviewRows.map(r => {
                                            const selected = filePreviewSelection.has(r.code);
                                            return (
                                                <tr key={r.code} className={!selected ? 'table-secondary' : ''}>
                                                    <td>
                                                        <input
                                                            type="checkbox"
                                                            className="preview-select-checkbox"
                                                            checked={selected}
                                                            onChange={() => togglePreviewRow(r.code)}
                                                        />
                                                    </td>
                                                    <td>{r.code}</td>
                                                    <td>{formatPreviewIndicatorName(r.indicatorName)}</td>
                                                    <td>{r.value ?? '-'}</td>
                                                    <td>{r.existingValue ?? '-'}</td>
                                                    <td>
                                                        {r.willInsert ? (
                                                            <span className="indicator-badge insert">{t('manageIndicatorsValues.previewModal.actionInsert')}</span>
                                                        ) : r.willUpdate ? (
                                                            <span className="indicator-badge update">{t('manageIndicatorsValues.previewModal.actionUpdate')}</span>
                                                        ) : (
                                                            <span className="indicator-badge nochange">{t('manageIndicatorsValues.previewModal.actionNoChange')}</span>
                                                        )}
                                                    </td>
                                                </tr>
                                            );
                                        })
                                    )}
                                </tbody>
                            </table>
                        </div>
                        {fileCommitResult && fileCommitResult.errors && fileCommitResult.errors.length > 0 && (
                            <div className="mt-3">
                                <h6 className="small fw-semibold">{t('manageIndicatorsValues.previewModal.saveErrorsTitle')}</h6>
                                <div style={{maxHeight: '200px', overflowY: 'auto'}}>
                                    <table className="table table-sm table-bordered mb-0">
                                        <thead>
                                            <tr><th style={{width:'20%'}}>{t('manageIndicatorsValues.previewModal.colCode')}</th><th style={{width:'20%'}}>{t('manageIndicatorsValues.fileUpload.colValue')}</th><th>{t('manageIndicatorsValues.previewModal.colReason')}</th></tr>
                                        </thead>
                                        <tbody>
                                            {fileCommitResult.errors.map((e,i) => (
                                                <tr key={i}>
                                                    <td>{e.code ?? '-'}</td>
                                                    <td>{e.value ?? '-'}</td>
                                                    <td className="small text-muted">{e.reason}</td>
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        )}
                        {fileUploadErrors && fileUploadErrors.length > 0 && (
                            <div className="mt-3">
                                <h6 className="small fw-semibold text-warning">{t('manageIndicatorsValues.previewModal.warningsTitlePrefix')} ({fileUploadErrors.length} {t('manageIndicatorsValues.previewModal.warningsTitleSuffix')}):</h6>
                                <div style={{maxHeight: '200px', overflowY: 'auto'}}>
                                    <table className="table table-sm table-bordered mb-0">
                                        <thead>
                                            <tr><th style={{width:'20%'}}>{t('manageIndicatorsValues.previewModal.colCode')}</th><th style={{width:'20%'}}>{t('manageIndicatorsValues.fileUpload.colValue')}</th><th>{t('manageIndicatorsValues.previewModal.colReason')}</th></tr>
                                        </thead>
                                        <tbody>
                                            {fileUploadErrors.map((e,i) => (
                                                <tr key={`warn-${i}`}>
                                                    <td>{e.code ?? '-'}</td>
                                                    <td>{e.value ?? '-'}</td>
                                                    <td className="small text-muted">{e.reason}</td>
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        )}
                    </>
                )}
            </Modal>
            <Modal isOpen={isValidationModalOpen} onClose={closeValidationModal} title={t('manageIndicatorsValues.validationModal.title')} size="md">
                <div className="text-center">
                    <p className="mb-3">{t('manageIndicatorsValues.validationModal.messagePrefix')}<br />{t('manageIndicatorsValues.validationModal.messageSuffix')} "{valor}".</p>
                    <div className="text-center">
                        <button type="button" className="btn manual-upload-button" onClick={closeValidationModal}>{t('manageIndicatorsValues.validationModal.edit')}</button>
                    </div>
                </div>
            </Modal>
            <Modal isOpen={isSuccessModalOpen} onClose={closeSuccessModal} title={t('manageIndicatorsValues.successModal.fileTitle')} size="md">
                <div className="text-center">
                    <div className="mb-3">
                        <svg style={{width: '64px', height: '64px', color: '#28a745'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <h5 className="mb-3">{t('manageIndicatorsValues.successModal.fileHeading')}</h5>
                    <p className="text-muted mb-4">{t('manageIndicatorsValues.successModal.fileMessage')}</p>
                    <div className="text-center">
                        <button type="button" className="btn manual-upload-button" onClick={closeSuccessModal}>{t('manageIndicatorsValues.successModal.close')}</button>
                    </div>
                </div>
            </Modal>
            <Modal isOpen={isManualSuccessModalOpen} onClose={closeManualSuccessModal} title={t('manageIndicatorsValues.successModal.manualTitle')} size="md">
                <div className="text-center">
                    <div className="mb-3">
                        <svg style={{width: '64px', height: '64px', color: '#28a745'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <h5 className="mb-3">{t('manageIndicatorsValues.successModal.manualHeading')}</h5>
                    <p className="text-muted mb-4">{t('manageIndicatorsValues.successModal.manualMessage')}</p>
                    <div className="text-center">
                        <button type="button" className="btn manual-upload-button" onClick={closeManualSuccessModal}>{t('manageIndicatorsValues.successModal.close')}</button>
                    </div>
                </div>
            </Modal>
            <Modal
                isOpen={isInfoModalOpen}
                onClose={closeInfoModal}
                title={t('manageIndicatorsValues.infoModal.title')}
                size="md"
                contentClassName="info-modal"
            >
                <p className="mb-0">
                    {t('manageIndicatorsValues.infoModal.body')}
                </p>
            </Modal>
            <ExportRequestModal
                ref={exportRequestRef}
                cooperatives={cooperatives}
                loadingCooperatives={loadingCooperatives}
                errorCooperatives={errorCooperatives}
                periods={periods}
                loadingPeriods={loadingPeriods}
                errorPeriods={errorPeriods}
            />
                </>
            )}
        </>
    );
};

const IndicatorFormSection = ({ data, imagesBaseUrl, theme, index, currentUser }) => {
    if(!data || data.enableViewForm !== true){
        return <></>;
    } 
    return <Content/>; 
};
export default IndicatorFormSection;