const { useState, useRef, useEffect } = React;

window.AdminAjustes = function({ 
    isMaster, 
    settings = {},
    refreshData,
    companyLogoUrl, 
    setCompanyLogoUrl, 
    showCompanyLogo, 
    setShowCompanyLogo, 
    inssRate, 
    setInssRate, 
    vacRate, 
    setVacRate, 
    lunchLimitMinutes, 
    setLunchLimitMinutes, 
    gracePeriodMinutes, 
    setGracePeriodMinutes, 
    maxTardinessAllowed, 
    setMaxTardinessAllowed, 
    tardinessPenaltyAction, 
    setTardinessPenaltyAction, 
    saveCompanySettings, 
    newReasonInput, 
    setNewReasonInput, 
    setReasonsList, 
    reasonsList,
    actions = [],
    roles = [],
    showToast
}) {
    // DATOS DE LA EMPRESA / FISCALES
    const [companyName, setCompanyName] = useState(settings?.companyName || window.SHIFT_CONFIG?.companyName || '');
    const [taxRegime, setTaxRegime] = useState(settings?.taxRegime || 'cuota_fija');
    const [rucNumber, setRucNumber] = useState(settings?.rucNumber || '');
    const [ownerName, setOwnerName] = useState(settings?.ownerName || '');
    const [legalRepId, setLegalRepId] = useState(settings?.legalRepId || '');
    const [businessAddress, setBusinessAddress] = useState(settings?.businessAddress || '');
    const [municipality, setMunicipality] = useState(settings?.municipality || 'Managua');

    // CORTES DE PLANILLA
    const [cutStartDayQ1, setCutStartDayQ1] = useState(settings?.cutStartDayQ1 || 1);
    const [cutEndDayQ1, setCutEndDayQ1] = useState(settings?.cutEndDayQ1 || 15);
    const [cutStartDayQ2, setCutStartDayQ2] = useState(settings?.cutStartDayQ2 || 16);
    const [cutEndDayQ2, setCutEndDayQ2] = useState(settings?.cutEndDayQ2 || 30);

    // INATEC
    const [appliesInatec, setAppliesInatec] = useState(settings?.appliesInatec !== false);

    // GEOCERCAS Y ASISTENCIA GPS
    const [geofenceEnabled, setGeofenceEnabled] = useState(Boolean(settings?.geofenceEnabled));
    const [geofenceLat, setGeofenceLat] = useState(settings?.geofenceLat !== null && settings?.geofenceLat !== undefined ? settings.geofenceLat : '');
    const [geofenceLng, setGeofenceLng] = useState(settings?.geofenceLng !== null && settings?.geofenceLng !== undefined ? settings.geofenceLng : '');
    const [geofenceRadiusMeters, setGeofenceRadiusMeters] = useState(settings?.geofenceRadiusMeters || 150);
    const [geofenceStrictMode, setGeofenceStrictMode] = useState(Boolean(settings?.geofenceStrictMode));
    const [isGettingGps, setIsGettingGps] = useState(false);
    const [gpsFeedback, setGpsFeedback] = useState('');

    // DISPERSION BANCARIA DE PLANILLA
    const [companyDebitAccount, setCompanyDebitAccount] = useState(settings?.companyDebitAccount || '');
    const [companyDefaultBank, setCompanyDefaultBank] = useState(settings?.companyDefaultBank || 'BAC Credomatic');
    const [companyBankAccounts, setCompanyBankAccounts] = useState(settings?.companyBankAccounts || [
        { id: 1, bankName: 'BAC Credomatic', accountNumber: settings?.companyDebitAccount || '365829101', currency: 'NIO', type: 'Planilla' }
    ]);
    const [newBankName, setNewBankName] = useState('BAC Credomatic');
    const [newBankAccountNum, setNewBankAccountNum] = useState('');
    const [newBankCurrency, setNewBankCurrency] = useState('NIO');
    const [newBankType, setNewBankType] = useState('Planilla');

    // RECORTE DE LOGO
    const [showCropModal, setShowCropModal] = useState(false);
    const [rawImageSrc, setRawImageSrc] = useState(null);
    const [zoomScale, setZoomScale] = useState(1);
    const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
    const [isDragging, setIsDragging] = useState(false);
    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
    const [isSavingLogo, setIsSavingLogo] = useState(false);

    // GOOGLE GEMINI API
    const [geminiApiKey, setGeminiApiKey] = useState(settings?.geminiApiKey || '');
    const [showGeminiKey, setShowGeminiKey] = useState(false);
    const [testingGemini, setTestingGemini] = useState(false);
    const [savingGemini, setSavingGemini] = useState(false);
    const [geminiStatus, setGeminiStatus] = useState(null);

    // NOTIFICACIONES EMPRESARIALES (WHATSAPP & EMAIL)
    const [useGlobalWa, setUseGlobalWa] = useState(settings?.use_global_whatsapp !== false);
    const [useGlobalSmtp, setUseGlobalSmtp] = useState(settings?.use_global_smtp !== false);

    const [waCustomToken, setWaCustomToken] = useState(settings?.whatsapp_access_token || '');
    const [waCustomPhoneId, setWaCustomPhoneId] = useState(settings?.whatsapp_phone_number_id || '');
    const [waCustomWabaId, setWaCustomWabaId] = useState(settings?.whatsapp_waba_id || '');

    const [smtpHost, setSmtpHost] = useState(settings?.smtp_host || '');
    const [smtpPort, setSmtpPort] = useState(settings?.smtp_port || 587);
    const [smtpUser, setSmtpUser] = useState(settings?.smtp_user || '');
    const [smtpPass, setSmtpPass] = useState(settings?.smtp_pass || '');
    const [smtpFromEmail, setSmtpFromEmail] = useState(settings?.smtp_from_email || '');
    const [smtpFromName, setSmtpFromName] = useState(settings?.smtp_from_name || 'Shift ERP');
    const [smtpSecure, setSmtpSecure] = useState(settings?.smtp_secure || 'tls');

    const [notifyPayslipsWa, setNotifyPayslipsWa] = useState(settings?.notify_payslips_whatsapp !== false);
    const [notifyPayslipsEmail, setNotifyPayslipsEmail] = useState(settings?.notify_payslips_email !== false);
    const [notifyTardinessWa, setNotifyTardinessWa] = useState(settings?.notify_tardiness_whatsapp !== false);
    const [notifyTardinessEmail, setNotifyTardinessEmail] = useState(settings?.notify_tardiness_email !== false);
    const [notifyOwnerTardinessWa, setNotifyOwnerTardinessWa] = useState(settings?.notify_owner_tardiness_whatsapp !== false);
    const [notifyWelcomeWa, setNotifyWelcomeWa] = useState(settings?.notify_welcome_whatsapp !== false);

    const [noshowMode, setNoshowMode] = useState(settings?.noshowMode || 'tolerance');
    const [noshowToleranceMinutes, setNoshowToleranceMinutes] = useState(settings?.noshowToleranceMinutes ?? 30);

    const defaultMatrix = {
        tardiness: { wa_emp: true, email_emp: false, wa_sup: true, email_sup: false, wa_owner: false, email_owner: false },
        noshow: { wa_emp: false, email_emp: false, wa_sup: true, email_sup: true, wa_owner: true, email_owner: true },
        open_shift: { wa_emp: true, email_emp: false, wa_sup: true, email_sup: false, wa_owner: false, email_owner: true },
        overtime: { wa_emp: true, email_emp: true, wa_sup: false, email_sup: false, wa_owner: true, email_owner: true },
        payslip: { wa_emp: true, email_emp: true, wa_sup: false, email_sup: false, wa_owner: true, email_owner: true },
        welcome: { wa_emp: true, email_emp: true, wa_sup: false, email_sup: false, wa_owner: false, email_owner: false }
    };
    const [notifMatrix, setNotifMatrix] = useState(settings?.notificationMatrix || defaultMatrix);

    // DÍAS FERIADOS DE LA EMPRESA
    const [companyHolidays, setCompanyHolidays] = useState(settings?.holidays || []);
    const [showHolidayModal, setShowHolidayModal] = useState(false);
    const [editingHoliday, setEditingHoliday] = useState(null);
    const [holidayNameInput, setHolidayNameInput] = useState('');
    const [holidayDateInput, setHolidayDateInput] = useState('');
    const [holidayMandatoryInput, setHolidayMandatoryInput] = useState(true);
    const [isAuditingNoShows, setIsAuditingNoShows] = useState(false);

    const [testWaPhone, setTestWaPhone] = useState('');
    const [testEmailAddr, setTestEmailAddr] = useState('');
    const [testingCompanyWa, setTestingCompanyWa] = useState(false);
    const [testingCompanyEmail, setTestingCompanyEmail] = useState(false);
    const [testFeedback, setTestFeedback] = useState('');

    // NAVEGACIÓN POR PESTAÑAS (TAB SYSTEM)
    const [activeTab, setActiveTab] = useState('empresa'); // 'empresa' | 'nomina' | 'asistencia' | 'notificaciones' | 'ia'

    // ESTADO GENERAL DE GUARDADO
    const [isSavingAll, setIsSavingAll] = useState(false);
    const [saveFeedback, setSaveFeedback] = useState('');

    // TRABAJADORES ASEGURADOS
    const [insuredWorkersCount, setInsuredWorkersCount] = useState(0);

    // MOTIVOS DE EXCEPCION
    const [localReasonInput, setLocalReasonInput] = useState('');

    const canvasRef = useRef(null);
    const imageObjRef = useRef(null);
    const mapContainerRef = useRef(null);
    const leafletMapRef = useRef(null);
    const leafletMarkerRef = useRef(null);
    const leafletCircleRef = useRef(null);

    const hasInitializedRef = useRef(false);

    const toggleMatrixCell = (eventKey, cellKey) => {
        setNotifMatrix(prev => {
            const currentEvent = prev?.[eventKey] || defaultMatrix[eventKey] || {};
            const currentValue = Boolean(currentEvent[cellKey]);
            return {
                ...prev,
                [eventKey]: {
                    ...currentEvent,
                    [cellKey]: !currentValue
                }
            };
        });
    };

    const handleSaveHoliday = async () => {
        if (!holidayNameInput.trim() || !holidayDateInput.trim()) {
            return alert("Por favor ingresa el nombre y la fecha del día feriado.");
        }
        try {
            const res = await window.apiCall('save_holiday', {
                id: editingHoliday ? editingHoliday.id : null,
                name: holidayNameInput.trim(),
                date: holidayDateInput.trim(),
                isMandatory: holidayMandatoryInput
            });
            if (res && res.success) {
                setShowHolidayModal(false);
                setEditingHoliday(null);
                setHolidayNameInput('');
                setHolidayDateInput('');
                if (refreshData) await refreshData();
            } else {
                alert(res?.error || "Error al guardar el día feriado.");
            }
        } catch (e) {
            alert("Error de conexión al guardar feriado.");
        }
    };

    const handleDeleteHoliday = async (hId) => {
        if (!confirm("¿Deseas eliminar este día feriado de la empresa?")) return;
        try {
            const res = await window.apiCall('delete_holiday', { id: hId });
            if (res && res.success && refreshData) await refreshData();
        } catch (e) {}
    };

    const handleLoadNicaraguaHolidays = async () => {
        if (!confirm("¿Deseas cargar la lista de feriados nacionales oficiales de Nicaragua para este año?")) return;
        try {
            const res = await window.apiCall('seed_nicaragua_holidays');
            if (res && res.success) {
                if (refreshData) await refreshData();
                alert(res.message || "Feriados nacionales de Nicaragua cargados exitosamente.");
            } else {
                alert(res?.error || "Error al cargar feriados nacionales.");
            }
        } catch (e) {
            alert("Error de conexión al cargar feriados nacionales.");
        }
    };

    const handleRunNoShowAudit = async () => {
        setIsAuditingNoShows(true);
        try {
            const todayNIC = window.getNICDate ? window.getNICDate() : new Date().toISOString().split('T')[0];
            const res = await window.apiCall('audit_noshow_absences', { date: todayNIC });
            if (res && res.success) {
                const count = res.detected_no_shows?.length || 0;
                if (count === 0) {
                    alert(`Auditoría completada: Todos los colaboradores programados para hoy (${res.target_date}) registraron su entrada o tienen feriado/vacaciones activas.`);
                } else {
                    const names = res.detected_no_shows.map(m => `• ${m.name} (Horario: ${m.schedule_start} - ${m.schedule_end})`).join('\n');
                    alert(`Se detectaron ${count} colaborador(es) sin presentarse a laborar (No-Show):\n\n${names}\n\nSe enviaron ${res.alerts_dispatched} avisos a sus supervisores/propietario según la matriz.`);
                }
            } else {
                alert(res?.error || "No se pudo realizar la auditoría de No-Show.");
            }
        } catch (e) {
            alert("Error de conexión al auditar ausencias.");
        } finally {
            setIsAuditingNoShows(false);
        }
    };

    const prevCompanyKeyRef = useRef(null);

    // Sincronizar datos de configuración únicamente al montar el componente o al cambiar de empresa
    useEffect(() => {
        if (!settings || Object.keys(settings).length === 0) return;

        const currentCompanyKey = settings.companyName || settings.rucNumber || 'default_company';
        const isNewCompany = prevCompanyKeyRef.current !== currentCompanyKey;

        if (!hasInitializedRef.current || isNewCompany) {
            hasInitializedRef.current = true;
            prevCompanyKeyRef.current = currentCompanyKey;

            if (settings.companyName) setCompanyName(settings.companyName);
            if (settings.taxRegime) setTaxRegime(settings.taxRegime);
            if (settings.rucNumber !== undefined && settings.rucNumber !== null) setRucNumber(settings.rucNumber);
            if (settings.ownerName !== undefined && settings.ownerName !== null) setOwnerName(settings.ownerName);
            if (settings.legalRepId !== undefined && settings.legalRepId !== null) setLegalRepId(settings.legalRepId);
            if (settings.businessAddress !== undefined && settings.businessAddress !== null) setBusinessAddress(settings.businessAddress);
            if (settings.municipality !== undefined && settings.municipality !== null) setMunicipality(settings.municipality);
            if (settings.logoUrl && typeof setCompanyLogoUrl === 'function') setCompanyLogoUrl(settings.logoUrl);
            if (settings.cutStartDayQ1 !== undefined) setCutStartDayQ1(settings.cutStartDayQ1);
            if (settings.cutEndDayQ1 !== undefined) setCutEndDayQ1(settings.cutEndDayQ1);
            if (settings.cutStartDayQ2 !== undefined) setCutStartDayQ2(settings.cutStartDayQ2);
            if (settings.cutEndDayQ2 !== undefined) setCutEndDayQ2(settings.cutEndDayQ2);
            if (settings.appliesInatec !== undefined) setAppliesInatec(settings.appliesInatec);
            if (settings.geminiApiKey !== undefined) setGeminiApiKey(settings.geminiApiKey);
            if (settings.geofenceEnabled !== undefined) setGeofenceEnabled(Boolean(settings.geofenceEnabled));
            if (settings.geofenceLat !== undefined && settings.geofenceLat !== null) setGeofenceLat(settings.geofenceLat);
            if (settings.geofenceLng !== undefined && settings.geofenceLng !== null) setGeofenceLng(settings.geofenceLng);
            if (settings.geofenceRadiusMeters !== undefined) setGeofenceRadiusMeters(settings.geofenceRadiusMeters);
            if (settings.geofenceStrictMode !== undefined) setGeofenceStrictMode(Boolean(settings.geofenceStrictMode));
            if (settings.companyDebitAccount !== undefined) setCompanyDebitAccount(settings.companyDebitAccount);
            if (settings.companyDefaultBank !== undefined) setCompanyDefaultBank(settings.companyDefaultBank);
            if (settings.companyBankAccounts !== undefined && Array.isArray(settings.companyBankAccounts)) setCompanyBankAccounts(settings.companyBankAccounts);

            if (settings.use_global_whatsapp !== undefined) setUseGlobalWa(Boolean(settings.use_global_whatsapp));
            if (settings.use_global_smtp !== undefined) setUseGlobalSmtp(Boolean(settings.use_global_smtp));
            if (settings.whatsapp_access_token !== undefined) setWaCustomToken(settings.whatsapp_access_token);
            if (settings.whatsapp_phone_number_id !== undefined) setWaCustomPhoneId(settings.whatsapp_phone_number_id);
            if (settings.whatsapp_waba_id !== undefined) setWaCustomWabaId(settings.whatsapp_waba_id);

            if (settings.smtp_host !== undefined) setSmtpHost(settings.smtp_host);
            if (settings.smtp_port !== undefined) setSmtpPort(settings.smtp_port);
            if (settings.smtp_user !== undefined) setSmtpUser(settings.smtp_user);
            if (settings.smtp_pass !== undefined) setSmtpPass(settings.smtp_pass);
            if (settings.smtp_from_email !== undefined) setSmtpFromEmail(settings.smtp_from_email);
            if (settings.smtp_from_name !== undefined) setSmtpFromName(settings.smtp_from_name);
            if (settings.smtp_secure !== undefined) setSmtpSecure(settings.smtp_secure);

            if (settings.notify_payslips_whatsapp !== undefined) setNotifyPayslipsWa(Boolean(settings.notify_payslips_whatsapp));
            if (settings.notify_payslips_email !== undefined) setNotifyPayslipsEmail(Boolean(settings.notify_payslips_email));
            if (settings.notify_tardiness_whatsapp !== undefined) setNotifyTardinessWa(Boolean(settings.notify_tardiness_whatsapp));
            if (settings.notify_tardiness_email !== undefined) setNotifyTardinessEmail(Boolean(settings.notify_tardiness_email));
            if (settings.notify_owner_tardiness_whatsapp !== undefined) setNotifyOwnerTardinessWa(Boolean(settings.notify_owner_tardiness_whatsapp));
            if (settings.notify_welcome_whatsapp !== undefined) setNotifyWelcomeWa(Boolean(settings.notify_welcome_whatsapp));
            if (settings.noshowMode !== undefined) setNoshowMode(settings.noshowMode);
            if (settings.noshowToleranceMinutes !== undefined) setNoshowToleranceMinutes(settings.noshowToleranceMinutes);

            if (settings.notificationMatrix) {
                setNotifMatrix(prev => ({
                    ...defaultMatrix,
                    ...(settings.notificationMatrix || {})
                }));
            }
            if (settings.holidays) setCompanyHolidays(settings.holidays);
        }
    }, [settings]);

    const handleTestCompanyWa = async () => {
        const phone = testWaPhone.trim();
        if (!phone) return alert("Ingresa un número de teléfono para enviar la prueba de WhatsApp.");
        setTestingCompanyWa(true);
        setTestFeedback('');
        try {
            const res = await window.apiCall('test_whatsapp_gateway', { phone });
            if (res && res.success) {
                setTestFeedback(`¡Mensaje de prueba de WhatsApp enviado con éxito al número +${res.recipient || phone}!`);
            } else {
                setTestFeedback(`Error en la prueba de WhatsApp: ${res?.error || 'No se pudo entregar'}`);
            }
        } catch (err) {
            setTestFeedback('Error de red: ' + err.message);
        } finally {
            setTestingCompanyWa(false);
        }
    };

    const handleTestCompanyEmail = async () => {
        const email = testEmailAddr.trim();
        if (!email) return alert("Ingresa un correo electrónico para enviar el email de prueba.");
        setTestingCompanyEmail(true);
        setTestFeedback('');
        try {
            const res = await window.apiCall('test_email_gateway', { email });
            if (res && res.success) {
                setTestFeedback(`¡Correo electrónico de prueba enviado con éxito a ${res.recipient || email}!`);
            } else {
                setTestFeedback(`Error en prueba de correo: ${res?.error || 'Fallo de entrega'}`);
            }
        } catch (err) {
            setTestFeedback('Error de red: ' + err.message);
        } finally {
            setTestingCompanyEmail(false);
        }
    };

    // Cargar número de asegurados para el cálculo automático de INSS patronal
    useEffect(() => {
        const loadInitialStats = async () => {
            try {
                const res = await window.apiCall('get_initial_data', {});
                if (res && res.success && res.data) {
                    if (res.data.users && Array.isArray(res.data.users)) {
                        const insured = res.data.users.filter(u => u.status === 'activo' && u.appliesInss !== false).length;
                        setInsuredWorkersCount(insured);
                    }
                }
            } catch (e) {}
        };
        loadInitialStats();
    }, []);

    // Captura satelital de la ubicación actual
    const handleGetCurrentLocation = () => {
        if (!navigator.geolocation) {
            setGpsFeedback('Tu dispositivo o navegador no soporta geolocalización GPS.');
            return;
        }
        setIsGettingGps(true);
        setGpsFeedback('Obteniendo coordenadas satelitales en tiempo real...');
        navigator.geolocation.getCurrentPosition(
            (pos) => {
                const lat = Number(pos.coords.latitude.toFixed(6));
                const lng = Number(pos.coords.longitude.toFixed(6));
                setGeofenceLat(lat);
                setGeofenceLng(lng);
                setIsGettingGps(false);
                setGpsFeedback(`Ubicación capturada con éxito (Precisión: ±${Math.round(pos.coords.accuracy)} metros)`);
                setTimeout(() => setGpsFeedback(''), 4500);
            },
            (err) => {
                setIsGettingGps(false);
                setGpsFeedback('Error GPS: ' + (err.message || 'Permiso denegado'));
                setTimeout(() => setGpsFeedback(''), 4500);
            },
            { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
        );
    };

    // Actualización reactiva del mapa perimetral Leaflet
    useEffect(() => {
        if (!geofenceEnabled || !mapContainerRef.current || typeof window.L === 'undefined') return;

        const defaultLat = (geofenceLat !== '' && geofenceLat !== null && !isNaN(geofenceLat)) ? parseFloat(geofenceLat) : 12.136389;
        const defaultLng = (geofenceLng !== '' && geofenceLng !== null && !isNaN(geofenceLng)) ? parseFloat(geofenceLng) : -86.251389;

        // Si el mapa ya existía en un contenedor anterior desmontado, destruirlo limpiamente
        if (leafletMapRef.current) {
            try {
                if (leafletMapRef.current.getContainer() !== mapContainerRef.current) {
                    leafletMapRef.current.remove();
                    leafletMapRef.current = null;
                    leafletMarkerRef.current = null;
                    leafletCircleRef.current = null;
                }
            } catch(e) {
                leafletMapRef.current = null;
            }
        }

        if (!leafletMapRef.current) {
            const m = window.L.map(mapContainerRef.current, {
                center: [defaultLat, defaultLng],
                zoom: 16,
                zoomControl: true
            });

            window.L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '© OpenStreetMap'
            }).addTo(m);

            leafletMapRef.current = m;

            m.on('click', (e) => {
                const newLat = Number(e.latlng.lat.toFixed(6));
                const newLng = Number(e.latlng.lng.toFixed(6));
                setGeofenceLat(newLat);
                setGeofenceLng(newLng);
            });
        }

        const currentMap = leafletMapRef.current;
        if (currentMap) {
            const pos = [defaultLat, defaultLng];
            if (!leafletMarkerRef.current) {
                leafletMarkerRef.current = window.L.marker(pos, { draggable: true }).addTo(currentMap);
                leafletMarkerRef.current.on('dragend', (e) => {
                    const ll = e.target.getLatLng();
                    setGeofenceLat(Number(ll.lat.toFixed(6)));
                    setGeofenceLng(Number(ll.lng.toFixed(6)));
                });
            } else {
                leafletMarkerRef.current.setLatLng(pos);
            }

            if (!leafletCircleRef.current) {
                leafletCircleRef.current = window.L.circle(pos, {
                    radius: parseInt(geofenceRadiusMeters) || 150,
                    color: '#4f46e5',
                    fillColor: '#6366f1',
                    fillOpacity: 0.2,
                    weight: 2
                }).addTo(currentMap);
            } else {
                leafletCircleRef.current.setLatLng(pos);
                leafletCircleRef.current.setRadius(parseInt(geofenceRadiusMeters) || 150);
            }

            currentMap.setView(pos, currentMap.getZoom() || 16);
            setTimeout(() => {
                if (leafletMapRef.current) {
                    leafletMapRef.current.invalidateSize();
                }
            }, 300);
        }
    }, [geofenceEnabled, geofenceLat, geofenceLng, geofenceRadiusMeters]);

    // Limpieza de mapa al desmontar componente
    useEffect(() => {
        return () => {
            if (leafletMapRef.current) {
                try {
                    leafletMapRef.current.remove();
                } catch(e) {}
                leafletMapRef.current = null;
            }
        };
    }, []);

    // Manejo de carga de imagen para logo
    const handleFileSelect = (e) => {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = (ev) => {
            const img = new Image();
            img.onload = () => {
                imageObjRef.current = img;
                setRawImageSrc(ev.target.result);
                setZoomScale(1);
                setPanOffset({ x: 0, y: 0 });
                setShowCropModal(true);
            };
            img.src = ev.target.result;
        };
        reader.readAsDataURL(file);
    };

    const drawCanvas = () => {
        const canvas = canvasRef.current;
        const img = imageObjRef.current;
        if (!canvas || !img) return;

        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.save();
        ctx.translate(canvas.width / 2 + panOffset.x, canvas.height / 2 + panOffset.y);
        ctx.scale(zoomScale, zoomScale);

        const hRatio = (canvas.width * 0.85) / img.width;
        const vRatio = (canvas.height * 0.85) / img.height;
        const ratio = Math.min(hRatio, vRatio);

        const drawW = img.width * ratio;
        const drawH = img.height * ratio;

        ctx.drawImage(img, -drawW / 2, -drawH / 2, drawW, drawH);
        ctx.restore();
    };

    useEffect(() => {
        if (showCropModal) {
            drawCanvas();
        }
    }, [showCropModal, zoomScale, panOffset]);

    const handleMouseDown = (e) => {
        setIsDragging(true);
        setDragStart({ x: e.clientX - panOffset.x, y: e.clientY - panOffset.y });
    };

    const handleMouseMove = (e) => {
        if (!isDragging) return;
        setPanOffset({
            x: e.clientX - dragStart.x,
            y: e.clientY - dragStart.y
        });
    };

    const handleMouseUp = () => setIsDragging(false);

    const handleApplyCropAndSave = async () => {
        const canvas = canvasRef.current;
        if (!canvas) return;

        setIsSavingLogo(true);
        const croppedBase64 = canvas.toDataURL('image/png', 0.95);

        try {
            const res = await window.apiCall('upload_company_logo', { logo_base64: croppedBase64 });

            if (res && res.success) {
                const finalUrl = res.logo_url;
                if (typeof setCompanyLogoUrl === 'function') {
                    setCompanyLogoUrl(finalUrl);
                }
                if (window.SHIFT_CONFIG) {
                    window.SHIFT_CONFIG.companyLogo = finalUrl;
                }
                setShowCropModal(false);
            } else {
                alert("Error al guardar el logo: " + (res?.error || "Error desconocido"));
            }
        } catch (err) {
            console.error("Error al subir logo:", err);
        } finally {
            setIsSavingLogo(false);
        }
    };

    const handleToggleShowLogo = async (e) => {
        const newValue = e.target.checked;
        if (typeof setShowCompanyLogo === 'function') {
            setShowCompanyLogo(newValue);
        }
        if (typeof saveCompanySettings === 'function') {
            await saveCompanySettings({ show_company_logo: newValue ? 1 : 0 });
        }
    };

    // Agregar y eliminar motivos de excepción
    const handleAddReason = () => {
        const val = localReasonInput.trim();
        if (!val) return;
        const currentList = Array.isArray(reasonsList) ? reasonsList : [];
        if (currentList.includes(val)) return;
        const updated = [...currentList, val];
        if (typeof setReasonsList === 'function') {
            setReasonsList(updated);
        }
        setLocalReasonInput('');
    };

    const handleRemoveReason = (reasonToRemove) => {
        const currentList = Array.isArray(reasonsList) ? reasonsList : [];
        const updated = currentList.filter(r => r !== reasonToRemove);
        if (typeof setReasonsList === 'function') {
            setReasonsList(updated);
        }
    };

    // Test de conexión Google Gemini
    const handleTestGeminiKey = async () => {
        if (!geminiApiKey.trim()) {
            setGeminiStatus({ type: 'error', text: 'Ingresa una API Key antes de probar la conexión.' });
            return;
        }
        setTestingGemini(true);
        setGeminiStatus(null);
        try {
            const res = await window.apiCall('ask_ai_copilot', {
                prompt: 'Responde únicamente: Conexión confirmada.',
                customApiKey: geminiApiKey.trim()
            });
            if (res && res.success && res.response) {
                setGeminiStatus({ type: 'success', text: 'Conexión con Gemini verificada correctamente.' });
            } else {
                setGeminiStatus({ type: 'error', text: res?.error || 'Error al conectar con la API de Gemini.' });
            }
        } catch (err) {
            setGeminiStatus({ type: 'error', text: 'Error de red: ' + (err.message || 'Fallo en la solicitud') });
        } finally {
            setTestingGemini(false);
        }
    };

    const handleSaveGeminiKey = async () => {
        if (!geminiApiKey.trim()) {
            setGeminiStatus({ type: 'error', text: 'Ingresa una clave válida antes de guardar.' });
            return;
        }
        setSavingGemini(true);
        try {
            if (typeof saveCompanySettings === 'function') {
                await saveCompanySettings({
                    gemini_api_key: geminiApiKey.trim()
                });
                setGeminiStatus({ type: 'success', text: 'Clave guardada exitosamente.' });
                setTimeout(() => setGeminiStatus(null), 4000);
            }
        } catch (e) {
            setGeminiStatus({ type: 'error', text: 'Error al guardar la clave de Gemini.' });
        } finally {
            setSavingGemini(false);
        }
    };

    const autoRate = insuredWorkersCount >= 50 ? 22.5 : 21.5;

    // Guardado general centralizado
    const handleSaveAllSettings = async () => {
        setIsSavingAll(true);
        setSaveFeedback('');
        try {
            const patronalValue = inssRate !== undefined 
                ? parseFloat(inssRate) 
                : parseFloat(document.getElementById('setting_inss_patronal_rate')?.value || autoRate);

            const vacationValue = vacRate !== undefined 
                ? parseFloat(vacRate) 
                : parseFloat(document.getElementById('setting_vacation_rate')?.value || 2.5);

            if (typeof saveCompanySettings === 'function') {
                const res = await saveCompanySettings({
                    company_name: companyName.trim(),
                    tax_regime: taxRegime,
                    ruc_number: rucNumber.trim(),
                    owner_name: ownerName.trim(),
                    legal_rep_id: legalRepId.trim(),
                    business_address: businessAddress.trim(),
                    municipality: municipality.trim(),
                    company_debit_account: companyDebitAccount.trim(),
                    company_default_bank: companyDefaultBank,
                    company_bank_accounts: companyBankAccounts,
                    geofence_enabled: geofenceEnabled ? 1 : 0,
                    geofence_lat: (geofenceLat !== '' && geofenceLat !== null) ? parseFloat(geofenceLat) : null,
                    geofence_lng: (geofenceLng !== '' && geofenceLng !== null) ? parseFloat(geofenceLng) : null,
                    geofence_radius_meters: parseInt(geofenceRadiusMeters) || 150,
                    geofence_strict_mode: geofenceStrictMode ? 1 : 0,
                    cut_start_q1: parseInt(cutStartDayQ1) || 1,
                    cut_end_q1: parseInt(cutEndDayQ1) || 15,
                    cut_start_q2: parseInt(cutStartDayQ2) || 16,
                    cut_end_q2: parseInt(cutEndDayQ2) || 30,
                    applies_inatec: appliesInatec ? 1 : 0,
                    inss_patronal_rate: patronalValue,
                    vacation_rate: vacationValue,
                    lunch_limit_minutes: parseInt(lunchLimitMinutes) || 60,
                    grace_period_minutes: parseInt(gracePeriodMinutes) || 5,
                    max_tardiness_allowed: parseInt(maxTardinessAllowed) || 3,
                    tardiness_penalty_action: tardinessPenaltyAction || 'deduct_minutes',
                    gemini_api_key: geminiApiKey.trim(),
                    use_global_whatsapp: useGlobalWa ? 1 : 0,
                    use_global_smtp: useGlobalSmtp ? 1 : 0,
                    whatsapp_access_token: waCustomToken.trim(),
                    whatsapp_phone_number_id: waCustomPhoneId.trim(),
                    whatsapp_waba_id: waCustomWabaId.trim(),
                    smtp_host: smtpHost.trim(),
                    smtp_port: parseInt(smtpPort) || 587,
                    smtp_user: smtpUser.trim(),
                    smtp_pass: smtpPass.trim(),
                    smtp_from_email: smtpFromEmail.trim(),
                    smtp_from_name: smtpFromName.trim(),
                    smtp_secure: smtpSecure,
                    notify_payslips_whatsapp: notifyPayslipsWa ? 1 : 0,
                    notify_payslips_email: notifyPayslipsEmail ? 1 : 0,
                    notify_tardiness_whatsapp: notifyTardinessWa ? 1 : 0,
                    notify_tardiness_email: notifyTardinessEmail ? 1 : 0,
                    notify_owner_tardiness_whatsapp: notifyOwnerTardinessWa ? 1 : 0,
                    notify_welcome_whatsapp: notifyWelcomeWa ? 1 : 0,
                    noshow_mode: noshowMode,
                    noshow_tolerance_minutes: parseInt(noshowToleranceMinutes) || 30,
                    notification_matrix: notifMatrix,
                    exception_reasons: Array.isArray(reasonsList) ? reasonsList : []
                });

                if (res && res.success === false) {
                    setSaveFeedback('Error al guardar: ' + (res.error || 'No se pudieron guardar los ajustes.'));
                } else {
                    setSaveFeedback('Configuración guardada exitosamente.');
                    setTimeout(() => setSaveFeedback(''), 4000);
                }
            }
        } catch (err) {
            console.error('Error al guardar ajustes:', err);
            setSaveFeedback('Error al guardar la configuración: ' + (err.message || 'Error de conexión'));
        } finally {
            setIsSavingAll(false);
        }
    };

    return (
        <div className="space-y-6 fade-in max-w-6xl mx-auto pb-20 font-sans">
            {/* BARRA SUPERIOR STICKY CON BOTON GUARDAR GENERAL */}
            <div className="bg-white p-4 sm:p-5 rounded-2xl shadow-xs border border-slate-200/80 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sticky top-4 z-20 backdrop-blur-md bg-white/95">
                <div>
                    <h2 className="text-xl font-bold text-slate-900 tracking-tight flex items-center gap-2">
                        <svg className="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        <span>Configuración General y Ajustes</span>
                    </h2>
                    <p className="text-slate-500 font-medium text-xs mt-0.5">
                        Administra parámetros corporativos, reglas de nómina, asistencias y notificaciones
                    </p>
                </div>

                <div className="flex items-center gap-3 w-full sm:w-auto justify-end">
                    {saveFeedback && (
                        <span className="text-[11px] font-black text-emerald-700 bg-emerald-50 border border-emerald-200 px-3 py-1.5 rounded-xl animate-fade-in">
                            {saveFeedback}
                        </span>
                    )}
                    <button 
                        type="button"
                        onClick={handleSaveAllSettings} 
                        disabled={isSavingAll}
                        className="px-4 py-2.5 bg-slate-900 hover:bg-black disabled:opacity-50 text-white font-bold rounded-xl text-xs shadow-xs active:scale-95 transition-all flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap"
                    >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7"/></svg>
                        <span>{isSavingAll ? "Guardando..." : "Guardar Cambios"}</span>
                    </button>
                </div>
            </div>

            {/* BARRA DE NAVEGACIÓN PESTAÑAS (SEGMENTED TAB BAR) */}
            <div className="flex bg-slate-100 p-1.5 rounded-2xl border border-slate-200/80 gap-1 overflow-x-auto">
                {[
                    { 
                        id: 'empresa', 
                        label: 'Empresa e Identidad', 
                        icon: <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg> 
                    },
                    { 
                        id: 'nomina', 
                        label: 'Nómina y Leyes', 
                        icon: <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" /></svg> 
                    },
                    { 
                        id: 'asistencia', 
                        label: 'Asistencia y GPS', 
                        icon: <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 
                    },
                    { 
                        id: 'notificaciones', 
                        label: 'Notificaciones y Feriados', 
                        icon: <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg> 
                    },
                    { 
                        id: 'ia', 
                        label: 'Inteligencia Artificial', 
                        icon: <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg> 
                    },
                    { 
                        id: 'roles', 
                        label: 'Roles y Permisos', 
                        icon: <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg> 
                    }
                ].map(tab => (
                    <button
                        key={tab.id}
                        type="button"
                        onClick={() => setActiveTab(tab.id)}
                        className={`flex-1 min-w-[130px] sm:min-w-0 py-2.5 px-3.5 rounded-xl text-xs font-semibold transition-all flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap ${
                            activeTab === tab.id
                                ? 'bg-white text-slate-900 shadow-xs font-bold border border-slate-200/80'
                                : 'text-slate-600 hover:text-slate-900 hover:bg-slate-200/50'
                        }`}
                    >
                        <span>{tab.icon}</span>
                        <span>{tab.label}</span>
                    </button>
                ))}
            </div>

            {/* PESTAÑA 1: EMPRESA E IDENTIDAD */}
            {activeTab === 'empresa' && (
                <div className="space-y-4 fade-in">
                    {/* SECCION 1: IDENTIDAD CORPORATIVA */}
                    <div className="bg-white p-3.5 sm:p-4 rounded-xl shadow-xs border border-slate-200/80 space-y-3">
                        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
                            <div>
                                <h3 className="text-sm font-bold text-slate-900 tracking-tight">Identidad Corporativa & Logo</h3>
                                <p className="text-slate-500 font-medium text-[11px]">
                                    Logo institucional visible en el portal, comprobantes y boletas de vacaciones
                                </p>
                            </div>

                            <label className="flex items-center gap-2 cursor-pointer bg-slate-50 hover:bg-slate-100 px-3 py-1.5 rounded-xl border border-slate-200 transition-colors">
                                <input 
                                    type="checkbox" 
                                    checked={Boolean(showCompanyLogo)} 
                                    onChange={handleToggleShowLogo} 
                                    className="w-4 h-4 accent-slate-900 rounded cursor-pointer" 
                                />
                                <span className="text-xs font-semibold text-slate-700">Mostrar Logo en Plataforma</span>
                            </label>
                        </div>

                        <div className="flex flex-col sm:flex-row items-center justify-between gap-3 p-3 bg-slate-50 rounded-xl border border-slate-200/60">
                            <div className="flex items-center gap-3 w-full sm:w-auto">
                                <input 
                                    type="file" 
                                    accept="image/*" 
                                    onChange={handleFileSelect} 
                                    className="text-xs text-slate-500 file:mr-3 file:py-1 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-slate-900 file:text-white cursor-pointer hover:file:bg-black transition-all" 
                                />
                                <span className="text-[10px] text-slate-400 font-medium hidden md:inline">PNG o SVG transparente</span>
                            </div>

                            <div className="flex items-center gap-3 bg-white px-3.5 py-2 rounded-xl border border-slate-200 flex-shrink-0 shadow-xs">
                                <span className="text-[10px] font-extrabold text-slate-500 uppercase tracking-wider">Vista Previa:</span>
                                {companyLogoUrl ? (
                                    <img src={companyLogoUrl} alt="Logo Empresa" className="h-12 w-auto object-contain max-w-[180px] bg-slate-50 p-1 rounded-lg border border-slate-100" />
                                ) : (
                                    <span className="text-xs font-semibold text-slate-400 italic">Sin logo cargado</span>
                                )}
                            </div>
                        </div>
                    </div>

            {/* SECCION 2: DATOS LEGALES Y FISCALES DE LA EMPRESA */}
            <div className="bg-white p-4 sm:p-5 rounded-xl shadow-xs border border-slate-200/80 space-y-4">
                <div className="space-y-1">
                    <h3 className="text-base font-bold text-slate-900 tracking-tight">Información Legal y Fiscal de la Empresa</h3>
                    <p className="text-slate-500 font-medium text-xs">
                        Datos del empleador utilizados en contratos de trabajo, colillas y reportes oficiales
                    </p>
                </div>

                <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-3.5">
                    <div className="sm:col-span-2 md:col-span-3">
                        <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block mb-1">Nombre o Razón Social</label>
                        <input 
                            type="text" 
                            value={companyName} 
                            onChange={e => setCompanyName(e.target.value)} 
                            placeholder="Nombre de la empresa" 
                            className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all" 
                        />
                    </div>

                    <div>
                        <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block mb-1">Régimen Fiscal</label>
                        <select 
                            value={taxRegime} 
                            onChange={e => setTaxRegime(e.target.value)} 
                            className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all"
                        >
                            <option value="cuota_fija">Cuota Fija (Persona Natural)</option>
                            <option value="general">Régimen General (Sociedad / S.A.)</option>
                        </select>
                    </div>

                    <div>
                        <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block mb-1">Número RUC</label>
                        <input 
                            type="text" 
                            value={rucNumber} 
                            onChange={e => setRucNumber(e.target.value)} 
                            placeholder="J0310000000001" 
                            className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all" 
                        />
                    </div>

                    <div>
                        <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block mb-1">Representante Legal / Propietario</label>
                        <input 
                            type="text" 
                            value={ownerName} 
                            onChange={e => setOwnerName(e.target.value)} 
                            placeholder="Nombre y Apellidos" 
                            className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all" 
                        />
                    </div>

                    <div>
                        <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block mb-1">Cédula de Identidad</label>
                        <input 
                            type="text" 
                            value={legalRepId} 
                            onChange={e => setLegalRepId(e.target.value)} 
                            placeholder="001-000000-0000A" 
                            className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all" 
                        />
                    </div>

                    <div>
                        <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block mb-1">Dirección Comercial</label>
                        <input 
                            type="text" 
                            value={businessAddress} 
                            onChange={e => setBusinessAddress(e.target.value)} 
                            placeholder="De donde fue el banco, 2c al lago" 
                            className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all" 
                        />
                    </div>

                    <div>
                        <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block mb-1">Municipio / Departamento</label>
                        <input 
                            type="text" 
                            value={municipality} 
                            onChange={e => setMunicipality(e.target.value)} 
                            placeholder="Managua" 
                            className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all" 
                        />
                    </div>

                    <div className="sm:col-span-2 md:col-span-3 pt-2 border-t border-slate-100 mt-1">
                        <span className="text-xs font-bold uppercase tracking-wider text-slate-800 block mb-2">Dispersión Bancaria y Pagos Masivos</span>
                    </div>

                    <div className="sm:col-span-1 md:col-span-1">
                        <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block mb-1">Banco Principal Empleador</label>
                        <select 
                            value={companyDefaultBank} 
                            onChange={e => setCompanyDefaultBank(e.target.value)} 
                            className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all"
                        >
                            <option value="BAC Credomatic">BAC Credomatic (Conexión Empresarial)</option>
                            <option value="BANPRO Promerica">BANPRO Grupo Promerica</option>
                            <option value="LAFISE Bancentro">LAFISE Bancentro</option>
                            <option value="Banco Ficohsa">Banco Ficohsa Nicaragua</option>
                            <option value="BDF">Banco de Finanzas (BDF)</option>
                        </select>
                    </div>

                    <div className="sm:col-span-1 md:col-span-2">
                        <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block mb-1">Cuenta Débito Empresarial (NIO)</label>
                        <input 
                            type="text" 
                            value={companyDebitAccount} 
                            onChange={e => setCompanyDebitAccount(e.target.value)} 
                            placeholder="Ej. 109283746" 
                            className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all" 
                        />
                        <span className="text-[10px] text-slate-400 font-medium block mt-1">Cuenta origen desde la cual se debitará la planilla al exportar los archivos bancarios.</span>
                    </div>
                </div>
            </div>
            </div>
            )}

            {/* PESTAÑA 2: NÓMINA Y LEYES */}
            {activeTab === 'nomina' && (
                <div className="space-y-4 fade-in">
                    {/* SECCION 3: PERIODOS Y CORTES DE PLANILLA */}
                    <div className="bg-white p-4 sm:p-5 rounded-xl shadow-xs border border-slate-200/80 space-y-4">
                        <div className="space-y-1">
                            <h3 className="text-base font-bold text-slate-900 tracking-tight">Ciclos y Ventanas de Corte de Planilla</h3>
                            <p className="text-slate-500 font-medium text-xs">
                                Definición de días calendario para el cómputo de la primera y segunda quincena
                            </p>
                        </div>

                        <div className="grid sm:grid-cols-2 gap-3.5">
                            <div className="p-3.5 bg-slate-50 rounded-xl border border-slate-200/60 flex items-center justify-between gap-3">
                                <div>
                                    <h4 className="font-bold text-xs uppercase tracking-wider text-slate-800">Primera Quincena</h4>
                                    <span className="text-[11px] text-slate-400 font-medium">Días del mes</span>
                                </div>
                                <div className="flex items-center gap-2">
                                    <div>
                                        <span className="text-[9px] font-bold text-slate-400 uppercase block mb-0.5 text-center">Inicio</span>
                                        <input 
                                            type="number" 
                                            min="1" 
                                            max="31" 
                                            value={cutStartDayQ1} 
                                            onChange={e => setCutStartDayQ1(e.target.value)} 
                                            className="w-14 p-2 bg-white border border-slate-200 rounded-lg font-bold text-xs text-center outline-none focus:border-slate-400" 
                                        />
                                    </div>
                                    <span className="text-slate-300 font-bold mt-3">-</span>
                                    <div>
                                        <span className="text-[9px] font-bold text-slate-400 uppercase block mb-0.5 text-center">Fin</span>
                                        <input 
                                            type="number" 
                                            min="1" 
                                            max="31" 
                                            value={cutEndDayQ1} 
                                            onChange={e => setCutEndDayQ1(e.target.value)} 
                                            className="w-14 p-2 bg-white border border-slate-200 rounded-lg font-bold text-xs text-center outline-none focus:border-slate-400" 
                                        />
                                    </div>
                                </div>
                            </div>

                            <div className="p-3.5 bg-slate-50 rounded-xl border border-slate-200/60 flex items-center justify-between gap-3">
                                <div>
                                    <h4 className="font-bold text-xs uppercase tracking-wider text-slate-800">Segunda Quincena</h4>
                                    <span className="text-[11px] text-slate-400 font-medium">Días del mes</span>
                                </div>
                                <div className="flex items-center gap-2">
                                    <div>
                                        <span className="text-[9px] font-bold text-slate-400 uppercase block mb-0.5 text-center">Inicio</span>
                                        <input 
                                            type="number" 
                                            min="1" 
                                            max="31" 
                                            value={cutStartDayQ2} 
                                            onChange={e => setCutStartDayQ2(e.target.value)} 
                                            className="w-14 p-2 bg-white border border-slate-200 rounded-lg font-bold text-xs text-center outline-none focus:border-slate-400" 
                                        />
                                    </div>
                                    <span className="text-slate-300 font-bold mt-3">-</span>
                                    <div>
                                        <span className="text-[9px] font-bold text-slate-400 uppercase block mb-0.5 text-center">Fin</span>
                                        <input 
                                            type="number" 
                                            min="1" 
                                            max="31" 
                                            value={cutEndDayQ2} 
                                            onChange={e => setCutEndDayQ2(e.target.value)} 
                                            className="w-14 p-2 bg-white border border-slate-200 rounded-lg font-bold text-xs text-center outline-none focus:border-slate-400" 
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* SECCION 4: LEYES LABORALES Y TASAS DE NOMINA */}
                    <div className="bg-white p-3.5 sm:p-4 rounded-xl shadow-xs border border-slate-200/80 space-y-3">
                        <div>
                            <h3 className="text-sm font-bold text-slate-900 tracking-tight">Leyes Laborales & Tasas de Nómina</h3>
                            <p className="text-slate-500 font-medium text-[11px]">
                                Seguridad Social (INSS), Código del Trabajo (Ley 185) e INATEC
                            </p>
                        </div>

                        <div className="grid sm:grid-cols-3 gap-3">
                            <div className="p-3 bg-slate-50 border border-slate-200/60 rounded-xl space-y-1">
                                <label className="text-[10px] font-bold uppercase tracking-wider text-slate-600 block">Tasa INSS Patronal (%)</label>
                                <div className="flex items-center gap-2">
                                    <input 
                                        type="number" 
                                        step="0.1" 
                                        name="inss_patronal_rate"
                                        id="setting_inss_patronal_rate"
                                        value={inssRate !== undefined ? inssRate : autoRate} 
                                        onChange={e => typeof setInssRate === 'function' && setInssRate(parseFloat(e.target.value) || autoRate)} 
                                        className="w-16 p-1.5 bg-white border border-slate-200 rounded-lg font-bold text-xs text-center outline-none focus:border-slate-400" 
                                    />
                                    <span className="text-[10px] text-slate-500 font-medium">Sugerido: <strong>{autoRate}%</strong></span>
                                </div>
                            </div>

                            <div className="p-3 bg-slate-50 border border-slate-200/60 rounded-xl space-y-1">
                                <label className="text-[10px] font-bold uppercase tracking-wider text-slate-600 block">Acumulación Vacaciones</label>
                                <div className="flex items-center gap-2">
                                    <input 
                                        type="number" 
                                        step="0.1" 
                                        name="vacation_rate"
                                        id="setting_vacation_rate"
                                        value={vacRate !== undefined ? vacRate : 2.5} 
                                        onChange={e => typeof setVacRate === 'function' && setVacRate(parseFloat(e.target.value) || 2.5)} 
                                        className="w-16 p-1.5 bg-white border border-slate-200 rounded-lg font-bold text-xs text-center outline-none focus:border-slate-400" 
                                    />
                                    <span className="text-[10px] text-slate-500 font-medium">días/mes (Art. 76 CT)</span>
                                </div>
                            </div>

                            <div className="p-3 bg-slate-50 border border-slate-200/60 rounded-xl flex items-center justify-between gap-2">
                                <div>
                                    <span className="text-[10px] font-bold uppercase tracking-wider text-slate-800 block">Aporte INATEC (2%)</span>
                                    <span className="text-[10px] text-slate-400 font-medium block">Capacitación Técnica</span>
                                </div>
                                <label className="flex items-center gap-1.5 cursor-pointer bg-white px-2.5 py-1 rounded-lg border border-slate-200 flex-shrink-0">
                                    <input 
                                        type="checkbox" 
                                        checked={Boolean(appliesInatec)} 
                                        onChange={e => setAppliesInatec(e.target.checked)} 
                                        className="w-3.5 h-3.5 accent-slate-900 rounded cursor-pointer" 
                                    />
                                    <span className="text-xs font-semibold text-slate-700">Aplica</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    {/* SECCION DE CUENTAS BANCARIAS DE LA EMPRESA */}
                    <div className="bg-white p-3.5 sm:p-4 rounded-xl shadow-xs border border-slate-200/80 space-y-3">
                        <div>
                            <h3 className="text-sm font-bold text-slate-900 tracking-tight">Cuentas Bancarias de la Empresa</h3>
                            <p className="text-slate-500 font-medium text-[11px]">
                                Registro de cuentas para la dispersión y pago interno de planillas
                            </p>
                        </div>

                        <div className="p-3 bg-slate-50 border border-slate-200/60 rounded-xl grid grid-cols-1 sm:grid-cols-4 gap-2 items-end">
                            <div>
                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Banco</label>
                                <select 
                                    value={newBankName} 
                                    onChange={e => setNewBankName(e.target.value)} 
                                    className="w-full p-2 bg-white border border-slate-200 rounded-lg text-xs font-bold outline-none"
                                >
                                    <option value="BAC Credomatic">BAC Credomatic</option>
                                    <option value="Banpro">Banpro Grupo Promerica</option>
                                    <option value="Banco LAFISE Bancentro">Banco LAFISE Bancentro</option>
                                    <option value="BDF">BDF</option>
                                    <option value="Ficohsa">Ficohsa</option>
                                    <option value="Avanz">Avanz</option>
                                    <option value="Efectivo / Caja Chica">Efectivo / Caja Chica</option>
                                </select>
                            </div>
                            <div>
                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Número de Cuenta</label>
                                <input 
                                    type="text" 
                                    placeholder="Ej. 3658291010" 
                                    value={newBankAccountNum} 
                                    onChange={e => setNewBankAccountNum(e.target.value)} 
                                    className="w-full p-2 bg-white border border-slate-200 rounded-lg text-xs font-bold outline-none"
                                />
                            </div>
                            <div>
                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Moneda & Tipo</label>
                                <div className="flex gap-1">
                                    <select 
                                        value={newBankCurrency} 
                                        onChange={e => setNewBankCurrency(e.target.value)} 
                                        className="p-2 bg-white border border-slate-200 rounded-lg text-xs font-bold outline-none flex-1"
                                    >
                                        <option value="NIO">NIO (C$)</option>
                                        <option value="USD">USD ($)</option>
                                    </select>
                                    <select 
                                        value={newBankType} 
                                        onChange={e => setNewBankType(e.target.value)} 
                                        className="p-2 bg-white border border-slate-200 rounded-lg text-xs font-bold outline-none flex-1"
                                    >
                                        <option value="Planilla">Planilla</option>
                                        <option value="Operativa">Operativa</option>
                                        <option value="Caja">Caja</option>
                                    </select>
                                </div>
                            </div>
                            <button 
                                type="button" 
                                onClick={() => {
                                    if (!newBankAccountNum.trim() && newBankName !== 'Efectivo / Caja Chica') {
                                        alert('Ingresa el número de cuenta.');
                                        return;
                                    }
                                    const newAcc = {
                                        id: Date.now(),
                                        bankName: newBankName,
                                        accountNumber: newBankAccountNum.trim() || 'N/A',
                                        currency: newBankCurrency,
                                        type: newBankType
                                    };
                                    setCompanyBankAccounts([...companyBankAccounts, newAcc]);
                                    setNewBankAccountNum('');
                                }}
                                className="w-full p-2 bg-slate-900 hover:bg-black text-white rounded-lg text-xs font-bold transition-all cursor-pointer shadow-xs"
                            >
                                + Agregar Cuenta
                            </button>
                        </div>

                        <div className="space-y-2 pt-1">
                            {companyBankAccounts.length === 0 ? (
                                <p className="text-xs text-slate-400 font-medium text-center py-2">No hay cuentas bancarias registradas.</p>
                            ) : (
                                companyBankAccounts.map(acc => (
                                    <div key={acc.id} className="p-3 bg-white border border-slate-200/80 rounded-xl flex items-center justify-between gap-3 shadow-xs">
                                        <div>
                                            <span className="font-bold text-xs text-slate-900 block">{acc.bankName}</span>
                                            <span className="text-[11px] font-mono text-slate-500">N° {acc.accountNumber} • {acc.currency} • ({acc.type})</span>
                                        </div>
                                        <button 
                                            type="button" 
                                            onClick={() => {
                                                setCompanyBankAccounts(companyBankAccounts.filter(a => a.id !== acc.id));
                                            }}
                                            className="p-1.5 px-3 bg-rose-50 text-rose-600 rounded-lg hover:bg-rose-100 transition-colors cursor-pointer text-xs font-bold border border-rose-200/60"
                                        >
                                            Eliminar
                                        </button>
                                    </div>
                                ))
                            )}
                        </div>
                    </div>
                </div>
            )}

            {/* PESTAÑA 3: POLÍTICAS DE ASISTENCIA Y MOTIVOS DE EXCEPCIÓN */}
            {activeTab === 'asistencia' && (
                <div className="space-y-4 fade-in">
                    {/* SECCION 5: POLITICAS DE TARDANZAS Y ALMUERZOS */}
                    <div className="bg-white p-4 sm:p-5 rounded-xl shadow-xs border border-slate-200/80 space-y-4">
                        <div className="space-y-1">
                            <h3 className="text-base font-bold text-slate-900 tracking-tight">Políticas de Asistencia y Tolerancia</h3>
                            <p className="text-slate-500 font-medium text-xs">
                                Tiempos de gracia en entrada, límites de receso y acciones por tardanzas recurrentes
                            </p>
                        </div>

                        <div className="grid sm:grid-cols-2 md:grid-cols-4 gap-3.5">
                            <div>
                                <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block mb-1">Margen Gracia (Min)</label>
                                <input 
                                    type="number" 
                                    value={gracePeriodMinutes} 
                                    onChange={e => typeof setGracePeriodMinutes === 'function' && setGracePeriodMinutes(e.target.value)} 
                                    className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all" 
                                />
                            </div>
                            <div>
                                <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block mb-1">Máx. Tardanzas / Mes</label>
                                <input 
                                    type="number" 
                                    value={maxTardinessAllowed} 
                                    onChange={e => typeof setMaxTardinessAllowed === 'function' && setMaxTardinessAllowed(e.target.value)} 
                                    className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all" 
                                />
                            </div>
                            <div>
                                <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block mb-1">Límite Almuerzo (Min)</label>
                                <input 
                                    type="number" 
                                    value={lunchLimitMinutes} 
                                    onChange={e => typeof setLunchLimitMinutes === 'function' && setLunchLimitMinutes(e.target.value)} 
                                    className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all" 
                                />
                            </div>
                            <div>
                                <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block mb-1">Acción Exceso Tardanzas</label>
                                <select 
                                    value={tardinessPenaltyAction} 
                                    onChange={e => typeof setTardinessPenaltyAction === 'function' && setTardinessPenaltyAction(e.target.value)} 
                                    className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all" 
                                >
                                    <option value="deduct_minutes">Descontar minutos exactos</option>
                                    <option value="warning">Solo alerta de auditoría</option>
                                    <option value="deduct_half_day">Descontar medio día</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    {/* SECCION 6: MOTIVOS DE EXCEPCION DE HORAS Y TURNOS */}
                    <div className="bg-white p-4 sm:p-5 rounded-xl shadow-xs border border-slate-200/80 space-y-4">
                        <div className="space-y-1">
                            <h3 className="text-base font-bold text-slate-900 tracking-tight">Motivos de Excepción de Turno</h3>
                            <p className="text-slate-500 font-medium text-xs">
                                Opciones disponibles para justificar horas extraordinarias y cambios de turno
                            </p>
                        </div>

                        <div className="space-y-3">
                            <div className="flex gap-2">
                                <input 
                                    type="text" 
                                    value={localReasonInput} 
                                    onChange={e => setLocalReasonInput(e.target.value)} 
                                    onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); handleAddReason(); } }}
                                    placeholder="Escribe un nuevo motivo (ej. Inventario general)..." 
                                    className="flex-1 p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all" 
                                />
                                <button 
                                    type="button" 
                                    onClick={handleAddReason} 
                                    className="px-4 py-2.5 bg-slate-900 hover:bg-black text-white rounded-xl font-bold text-xs transition-all cursor-pointer whitespace-nowrap shadow-xs"
                                >
                                    Agregar Motivo
                                </button>
                            </div>

                            <div className="flex flex-wrap gap-2">
                                {(Array.isArray(reasonsList) && reasonsList.length > 0) ? (
                                    reasonsList.map((reason, idx) => (
                                        <div 
                                            key={idx} 
                                            className="flex items-center gap-2 px-3 py-1.5 bg-slate-100 rounded-lg text-xs font-medium text-slate-700 border border-slate-200"
                                        >
                                            <span>{reason}</span>
                                            <button 
                                                type="button" 
                                                onClick={() => handleRemoveReason(reason)} 
                                                className="text-slate-400 hover:text-rose-600 transition-colors cursor-pointer"
                                                title="Eliminar motivo"
                                            >
                                                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                                                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                                                </svg>
                                            </button>
                                        </div>
                                    ))
                                ) : (
                                    <p className="text-xs text-slate-400 font-medium">No hay motivos configurados actualmente.</p>
                                )}
                            </div>
                        </div>
                    </div>

                    {/* SECCION 2.1: PERIMETRO DE ASISTENCIA GPS (GEOCERCA CORPORATIVA) */}
                    <div className="bg-white p-4 sm:p-5 rounded-xl shadow-xs border border-slate-200/80 space-y-4">
                        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
                            <div className="space-y-1">
                                <h3 className="text-base font-bold text-slate-900 tracking-tight">Perímetro de Asistencia GPS (Geocerca Corporativa)</h3>
                                <p className="text-slate-500 font-medium text-xs">
                                    Control perimetral satelital para validar marcas de entrada y salida dentro del radio autorizado
                                </p>
                            </div>
                            <label className="flex items-center gap-2 cursor-pointer bg-slate-50 hover:bg-slate-100 px-3 py-1.5 rounded-xl border border-slate-200 transition-colors">
                                <input 
                                    type="checkbox" 
                                    checked={Boolean(geofenceEnabled)} 
                                    onChange={e => setGeofenceEnabled(e.target.checked)} 
                                    className="w-4 h-4 accent-slate-900 rounded cursor-pointer" 
                                />
                                <span className="text-xs font-semibold text-slate-700">Activar Geocerca</span>
                            </label>
                        </div>

                        {geofenceEnabled && (
                            <div className="space-y-4 pt-1">
                                {gpsFeedback && (
                                    <div className="p-3 bg-slate-100 border border-slate-200 text-slate-800 rounded-xl text-xs font-medium">
                                        {gpsFeedback}
                                    </div>
                                )}

                                <div className="grid sm:grid-cols-3 gap-3.5">
                                    <div>
                                        <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block mb-1">Latitud Sede</label>
                                        <input 
                                            type="number" 
                                            step="any"
                                            value={geofenceLat} 
                                            onChange={e => setGeofenceLat(e.target.value)} 
                                            placeholder="12.132820" 
                                            className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all"
                                        />
                                    </div>
                                    <div>
                                        <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block mb-1">Longitud Sede</label>
                                        <input 
                                            type="number" 
                                            step="any"
                                            value={geofenceLng} 
                                            onChange={e => setGeofenceLng(e.target.value)} 
                                            placeholder="-86.250400" 
                                            className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all"
                                        />
                                    </div>
                                    <div>
                                        <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block mb-1">Radio Máximo (Metros)</label>
                                        <input 
                                            type="number" 
                                            value={geofenceRadiusMeters} 
                                            onChange={e => setGeofenceRadiusMeters(e.target.value)} 
                                            placeholder="150" 
                                            className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white transition-all"
                                        />
                                    </div>
                                </div>

                                <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-3.5 bg-slate-50 rounded-xl border border-slate-100">
                                    <div className="space-y-0.5">
                                        <label className="flex items-center gap-2 cursor-pointer">
                                            <input 
                                                type="checkbox" 
                                                checked={Boolean(geofenceStrictMode)} 
                                                onChange={e => setGeofenceStrictMode(e.target.checked)} 
                                                className="w-4 h-4 accent-slate-900 rounded cursor-pointer" 
                                            />
                                            <span className="text-xs font-bold text-slate-800">Modo Estricto de Geocerca</span>
                                        </label>
                                        <p className="text-[11px] text-slate-400 font-medium pl-6">
                                            Si se activa, impedirá registrar asistencia fuera del radio. Si está desactivado, etiquetará como 'Fuera de Perímetro'.
                                        </p>
                                    </div>

                                    <button 
                                        type="button"
                                        onClick={handleGetCurrentLocation}
                                        disabled={isGettingGps}
                                        className="px-3.5 py-2 bg-slate-900 hover:bg-black disabled:opacity-50 text-white font-bold text-xs rounded-xl transition-all shadow-xs flex items-center gap-2 whitespace-nowrap cursor-pointer"
                                    >
                                        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                                            <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                                        </svg>
                                        <span>{isGettingGps ? "Obteniendo GPS..." : "Capturar Ubicación Actual"}</span>
                                    </button>
                                </div>

                                <div className="space-y-1">
                                    <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block">
                                        Previsualización Interactiva del Perímetro Corporativo
                                    </label>
                                    <div 
                                        ref={mapContainerRef} 
                                        style={{ height: '240px', minHeight: '240px', width: '100%' }}
                                        className="w-full rounded-xl border border-slate-200 overflow-hidden shadow-xs relative z-0 cursor-crosshair"
                                    ></div>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            )}

            {/* PESTAÑA 4: NOTIFICACIONES, NO-SHOW Y FERIADOS */}
            {activeTab === 'notificaciones' && (
                <div className="space-y-4 fade-in">
                    {/* SECCIÓN NOTIFICACIONES Y MENSAJERÍA EMPRESARIAL */}
            {(() => {
                const clientMods = settings?.modules || window.SHIFT_CONFIG?.modules || {};
                const hasWaModule = isMaster || (clientMods.whatsapp !== false && clientMods.whatsapp !== 0 && clientMods.module_whatsapp !== false);
                const hasEmailModule = isMaster || (clientMods.email !== false && clientMods.email !== 0 && clientMods.module_email !== false);

                return (
                    <div className="bg-white p-4 sm:p-5 rounded-xl shadow-xs border border-slate-200/80 space-y-4">
                        <div className="space-y-1 border-b pb-3">
                            <h3 className="text-base font-bold text-slate-900 tracking-tight">Canales de Notificación (WhatsApp & Email)</h3>
                            <p className="text-slate-500 font-medium text-xs">
                                Configura qué notificaciones automáticas enviará el sistema a tus colaboradores y supervisores
                            </p>
                        </div>

                        {/* ESTATUS DE MÓDULOS ACTIVOS POR EL SAAS */}
                        <div className="grid md:grid-cols-2 gap-3">
                            <div className={`p-3 rounded-xl border flex items-center justify-between ${hasWaModule ? 'bg-slate-50 border-slate-200' : 'bg-slate-50 border-slate-200 opacity-60'}`}>
                                <div className="flex items-center gap-3">
                                    <div className={`w-8 h-8 rounded-lg flex items-center justify-center font-bold text-xs ${hasWaModule ? 'bg-slate-900 text-white' : 'bg-slate-200 text-slate-500'}`}>
                                        WA
                                    </div>
                                    <div>
                                        <h4 className="text-xs font-bold text-slate-900">Módulo WhatsApp Meta Cloud</h4>
                                        <p className="text-[11px] font-medium text-slate-500">{hasWaModule ? 'Habilitado en tu plan empresarial' : 'No contratado en el plan SaaS'}</p>
                                    </div>
                                </div>
                                <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase ${hasWaModule ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-200 text-slate-600'}`}>
                                    {hasWaModule ? 'ACTIVO' : 'BLOQUEADO'}
                                </span>
                            </div>

                            <div className={`p-3 rounded-xl border flex items-center justify-between ${hasEmailModule ? 'bg-slate-50 border-slate-200' : 'bg-slate-50 border-slate-200 opacity-60'}`}>
                                <div className="flex items-center gap-3">
                                    <div className={`w-8 h-8 rounded-lg flex items-center justify-center font-bold text-xs ${hasEmailModule ? 'bg-slate-900 text-white' : 'bg-slate-200 text-slate-500'}`}>
                                        @
                                    </div>
                                    <div>
                                        <h4 className="text-xs font-bold text-slate-900">Módulo Correo Electrónico</h4>
                                        <p className="text-[11px] font-medium text-slate-500">{hasEmailModule ? 'Habilitado para envíos SMTP' : 'Inactivo en el plan SaaS'}</p>
                                    </div>
                                </div>
                                <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase ${hasEmailModule ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-200 text-slate-600'}`}>
                                    {hasEmailModule ? 'ACTIVO' : 'BLOQUEADO'}
                                </span>
                            </div>
                        </div>

                        {/* SI NINGÚN MÓDULO ESTÁ ACTIVO */}
                        {!hasWaModule && !hasEmailModule && (
                            <div className="p-4 bg-amber-50 border border-amber-200 rounded-2xl flex items-center gap-3 text-amber-800">
                                <svg className="w-5 h-5 flex-shrink-0 text-amber-600" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                                <span className="text-xs font-bold">
                                    No tienes módulos de mensajería (WhatsApp ni Email) activados en tu suscripción. Contacta al administrador SaaS para habilitar las notificaciones automáticas.
                                </span>
                            </div>
                        )}

                        {/* MATRIZ GRANULAR DE NOTIFICACIONES ENTERPRISE */}
                        {(hasWaModule || hasEmailModule) && (
                            <div className="space-y-6 border-t pt-5">
                                {/* CONFIGURACIÓN DE REGLAS DE TIEMPO Y TOLERANCIA NO-SHOW */}
                                <div className="space-y-4 bg-slate-50/70 p-5 border border-slate-200/80 rounded-2xl">
                                    <div>
                                        <h4 className="text-xs font-black uppercase tracking-wider text-slate-900 mb-1 flex items-center gap-1.5">
                                            <svg className="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                            <span>Reglas de Tiempo y Margen de Tolerancia de Inasistencia (No-Show)</span>
                                        </h4>
                                        <p className="text-[10px] text-slate-400 font-medium">Configura cuándo el sistema consultará e informará la ausencia si un colaborador no registra su entrada.</p>
                                    </div>

                                    <div className="grid sm:grid-cols-2 gap-3">
                                        <label className={`p-4 rounded-2xl border flex items-start gap-3 cursor-pointer transition-all ${noshowMode === 'tolerance' ? 'bg-amber-50/80 border-amber-300 shadow-xs' : 'bg-white border-slate-200'}`}>
                                            <input type="radio" name="noshow_timing_mode" checked={noshowMode === 'tolerance'} onChange={() => setNoshowMode('tolerance')} className="mt-1 accent-amber-600 cursor-pointer" />
                                            <div>
                                                <span className="text-xs font-black text-slate-900 block">Margen de Tolerancia tras inicio de jornada (Recomendado)</span>
                                                <span className="text-[10px] text-slate-500 font-medium block mt-0.5">Notifica automáticamente tras transcurrir el tiempo de tolerancia especificado desde la hora de inicio del turno.</span>
                                            </div>
                                        </label>

                                        <label className={`p-4 rounded-2xl border flex items-start gap-3 cursor-pointer transition-all ${noshowMode === 'end_of_day' ? 'bg-amber-50/80 border-amber-300 shadow-xs' : 'bg-white border-slate-200'}`}>
                                            <input type="radio" name="noshow_timing_mode" checked={noshowMode === 'end_of_day'} onChange={() => setNoshowMode('end_of_day')} className="mt-1 accent-amber-600 cursor-pointer" />
                                            <div>
                                                <span className="text-xs font-black text-slate-900 block">Al finalizar la jornada laboral</span>
                                                <span className="text-[10px] text-slate-500 font-medium block mt-0.5">Notifica únicamente al concluir la hora de salida del turno programado del colaborador.</span>
                                            </div>
                                        </label>
                                    </div>

                                    {noshowMode === 'tolerance' && (
                                        <div className="p-4 bg-white border border-slate-200/90 rounded-2xl flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                                            <div>
                                                <label className="text-[10px] font-black uppercase tracking-wider text-slate-700 block mb-0.5">Minutos de Tolerancia para Notificar Ausencia</label>
                                                <p className="text-[10px] text-slate-400 font-medium">Ejemplo: Si la entrada es a las 8:00 AM y la tolerancia es de 30 minutos, el aviso se emitirá a partir de las 8:30 AM.</p>
                                            </div>
                                            <div className="flex items-center gap-2">
                                                <input
                                                    type="number"
                                                    min="5"
                                                    max="240"
                                                    value={noshowToleranceMinutes}
                                                    onChange={e => setNoshowToleranceMinutes(e.target.value)}
                                                    className="w-24 p-2.5 bg-slate-50 border border-slate-300 rounded-xl font-bold text-slate-900 text-center text-xs outline-none focus:border-amber-500 focus:bg-white"
                                                />
                                                <span className="text-xs font-black text-slate-500">minutos</span>
                                            </div>
                                        </div>
                                    )}
                                </div>

                                <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
                                    <div>
                                        <h4 className="text-xs font-black uppercase tracking-wider text-slate-900">Matriz Granular de Comunicaciones y Notificaciones</h4>
                                        <p className="text-[10px] text-slate-400 font-medium">Activa o desactiva qué canales (WhatsApp / Email) y a qué destinatarios (Colaborador, Supervisor o Propietario) se enviará cada alerta.</p>
                                    </div>
                                    <button
                                        type="button"
                                        onClick={handleRunNoShowAudit}
                                        disabled={isAuditingNoShows}
                                        className="px-3.5 py-2 bg-amber-500 hover:bg-amber-600 text-white rounded-xl text-[10px] font-black uppercase tracking-wider transition-all flex items-center gap-1.5 shadow-xs cursor-pointer disabled:opacity-50"
                                        title="Probar detección manual de ausencias y No-Show para el día de hoy"
                                    >
                                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                                        <span>{isAuditingNoShows ? 'Auditando...' : 'Auditar No-Show Hoy'}</span>
                                    </button>
                                </div>

                                <div className="overflow-x-auto border border-slate-200/80 rounded-2xl">
                                    <table className="w-full text-left border-collapse text-xs">
                                        <thead className="bg-slate-50 text-[10px] font-black text-slate-500 uppercase border-b border-slate-200">
                                            <tr>
                                                <th className="p-3.5 border-r border-slate-200">Evento de Sistema</th>
                                                <th className="p-3.5 text-center border-r border-slate-200" colSpan={(hasWaModule ? 1 : 0) + (hasEmailModule ? 1 : 0)}>Colaborador</th>
                                                <th className="p-3.5 text-center border-r border-slate-200" colSpan={(hasWaModule ? 1 : 0) + (hasEmailModule ? 1 : 0)}>Supervisor Directo</th>
                                                <th className="p-3.5 text-center" colSpan={(hasWaModule ? 1 : 0) + (hasEmailModule ? 1 : 0)}>Propietario / Admin</th>
                                            </tr>
                                            <tr className="bg-slate-100/60 text-[9px] font-extrabold text-slate-400 border-b border-slate-200">
                                                <th className="p-2 border-r border-slate-200">Tipo de Incidencia</th>
                                                {hasWaModule && <th className="p-2 text-center border-r border-slate-200">WA</th>}
                                                {hasEmailModule && <th className="p-2 text-center border-r border-slate-200">Email</th>}
                                                {hasWaModule && <th className="p-2 text-center border-r border-slate-200">WA</th>}
                                                {hasEmailModule && <th className="p-2 text-center border-r border-slate-200">Email</th>}
                                                {hasWaModule && <th className="p-2 text-center border-r border-slate-200">WA</th>}
                                                {hasEmailModule && <th className="p-2 text-center">Email</th>}
                                            </tr>
                                        </thead>
                                        <tbody className="divide-y divide-slate-100 font-medium">
                                            {[
                                                { key: 'tardiness', label: 'Llegada Tarde / Tardanza', desc: 'Alertas por llegada fuera del tiempo de gracia' },
                                                { key: 'noshow', label: 'Ausencia / No Presentado (No-Show)', desc: 'Sin marca de entrada tras margen de tolerancia' },
                                                { key: 'open_shift', label: 'Salida Olvidada / Turno Abierto', desc: 'Turno abierto sin marca de salida' },
                                                { key: 'overtime', label: 'Aprobación de Horas Extras', desc: 'Aviso cuando se aprueban horas extras' },
                                                { key: 'payslip', label: 'Entrega de Colilla de Pago PDF', desc: 'Emisión y envío de colilla salarial' },
                                                { key: 'welcome', label: 'Bienvenida a Nuevo Ingreso', desc: 'Envío de credenciales a nuevo personal' }
                                            ].map(evt => (
                                                <tr key={evt.key} className="hover:bg-slate-50/70 transition-colors">
                                                    <td className="p-3.5 border-r border-slate-200">
                                                        <span className="font-black text-slate-900 block">{evt.label}</span>
                                                        <span className="text-[10px] text-slate-400">{evt.desc}</span>
                                                    </td>
                                                    {hasWaModule && (
                                                        <td className="p-3 text-center border-r border-slate-200 bg-emerald-50/20">
                                                            <input type="checkbox" checked={Boolean(notifMatrix[evt.key]?.wa_emp)} onChange={() => toggleMatrixCell(evt.key, 'wa_emp')} className="w-4 h-4 accent-emerald-600 rounded cursor-pointer" />
                                                        </td>
                                                    )}
                                                    {hasEmailModule && (
                                                        <td className="p-3 text-center border-r border-slate-200 bg-indigo-50/20">
                                                            <input type="checkbox" checked={Boolean(notifMatrix[evt.key]?.email_emp)} onChange={() => toggleMatrixCell(evt.key, 'email_emp')} className="w-4 h-4 accent-indigo-600 rounded cursor-pointer" />
                                                        </td>
                                                    )}
                                                    {hasWaModule && (
                                                        <td className="p-3 text-center border-r border-slate-200 bg-emerald-50/20">
                                                            <input type="checkbox" checked={Boolean(notifMatrix[evt.key]?.wa_sup)} onChange={() => toggleMatrixCell(evt.key, 'wa_sup')} className="w-4 h-4 accent-emerald-600 rounded cursor-pointer" />
                                                        </td>
                                                    )}
                                                    {hasEmailModule && (
                                                        <td className="p-3 text-center border-r border-slate-200 bg-indigo-50/20">
                                                            <input type="checkbox" checked={Boolean(notifMatrix[evt.key]?.email_sup)} onChange={() => toggleMatrixCell(evt.key, 'email_sup')} className="w-4 h-4 accent-indigo-600 rounded cursor-pointer" />
                                                        </td>
                                                    )}
                                                    {hasWaModule && (
                                                        <td className="p-3 text-center border-r border-slate-200 bg-emerald-50/20">
                                                            <input type="checkbox" checked={Boolean(notifMatrix[evt.key]?.wa_owner)} onChange={() => toggleMatrixCell(evt.key, 'wa_owner')} className="w-4 h-4 accent-emerald-600 rounded cursor-pointer" />
                                                        </td>
                                                    )}
                                                    {hasEmailModule && (
                                                        <td className="p-3 text-center bg-indigo-50/20">
                                                            <input type="checkbox" checked={Boolean(notifMatrix[evt.key]?.email_owner)} onChange={() => toggleMatrixCell(evt.key, 'email_owner')} className="w-4 h-4 accent-indigo-600 rounded cursor-pointer" />
                                                        </td>
                                                    )}
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        )}

                        {/* CONFIGURACIÓN DE PASARELA WHATSAPP (SOLO SI MODULE WHATSAPP ESTÁ HABILITADO) */}
                        {hasWaModule && (
                            <div className="space-y-6 border-t pt-6">
                                <div>
                                    <h4 className="text-xs font-black uppercase tracking-wider text-slate-900 mb-1">Configuración de Pasarela de WhatsApp Meta Cloud</h4>
                                    <p className="text-[10px] text-slate-400 font-medium">Elige si deseas usar la pasarela oficial verificada de SHIFT o conectar tu propia cuenta business de Meta Cloud.</p>
                                </div>

                                <div className="grid sm:grid-cols-2 gap-3">
                                    <label className={`p-4 rounded-2xl border flex items-start gap-3 cursor-pointer transition-all ${useGlobalWa ? 'bg-emerald-50/60 border-emerald-300 shadow-xs' : 'bg-slate-50 border-slate-200'}`}>
                                        <input type="radio" name="wa_mode" checked={useGlobalWa} onChange={() => setUseGlobalWa(true)} className="mt-1 accent-emerald-600" />
                                        <div>
                                            <span className="text-xs font-black text-slate-900 block">Usar Pasarela Global de SHIFT</span>
                                            <span className="text-[10px] text-slate-500 font-medium block mt-0.5">Utiliza la línea de WhatsApp verificada y la integración en tiempo real provista por SHIFT. No requiere configuración adicional.</span>
                                        </div>
                                    </label>

                                    <label className={`p-4 rounded-2xl border flex items-start gap-3 cursor-pointer transition-all ${!useGlobalWa ? 'bg-emerald-50/60 border-emerald-300 shadow-xs' : 'bg-slate-50 border-slate-200'}`}>
                                        <input type="radio" name="wa_mode" checked={!useGlobalWa} onChange={() => setUseGlobalWa(false)} className="mt-1 accent-emerald-600" />
                                        <div>
                                            <span className="text-xs font-black text-slate-900 block">Usar Credenciales Propias Meta Cloud</span>
                                            <span className="text-[10px] text-slate-500 font-medium block mt-0.5">Usa tu propio número empresarial, Phone ID y Access Token de Meta for Developers.</span>
                                        </div>
                                    </label>
                                </div>

                                {!useGlobalWa && (
                                    <div className="p-5 bg-slate-50 border border-slate-200/80 rounded-2xl space-y-4 fade-in">
                                        <span className="text-[10px] font-black uppercase text-emerald-700 tracking-wider block">Credenciales Meta Cloud WhatsApp</span>
                                        <div className="grid sm:grid-cols-2 gap-3">
                                            <div>
                                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Phone Number ID</label>
                                                <input type="text" value={waCustomPhoneId} onChange={e => setWaCustomPhoneId(e.target.value)} placeholder="Ej. 1362993856888988" className="w-full p-3 bg-white border border-slate-200 rounded-xl font-mono text-xs outline-none focus:border-emerald-600" />
                                            </div>
                                            <div>
                                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Business Account ID (WABA)</label>
                                                <input type="text" value={waCustomWabaId} onChange={e => setWaCustomWabaId(e.target.value)} placeholder="Ej. 1798705111135383" className="w-full p-3 bg-white border border-slate-200 rounded-xl font-mono text-xs outline-none focus:border-emerald-600" />
                                            </div>
                                            <div className="sm:col-span-2">
                                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">System User API Access Token (Permanente)</label>
                                                <textarea rows="2" value={waCustomToken} onChange={e => setWaCustomToken(e.target.value)} placeholder="EAAMaj..." className="w-full p-3 bg-white border border-slate-200 rounded-xl font-mono text-xs outline-none focus:border-emerald-600 resize-none"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                )}
                            </div>
                        )}

                        {/* CONFIGURACIÓN DE SERVIDOR DE CORREO (SOLO SI MODULE EMAIL ESTÁ HABILITADO) */}
                        {hasEmailModule && (
                            <div className="space-y-6 border-t pt-6">
                                <div>
                                    <h4 className="text-xs font-black uppercase tracking-wider text-slate-900 mb-1">Configuración del Servidor de Correo (SMTP)</h4>
                                    <p className="text-[10px] text-slate-400 font-medium">Define el servidor SMTP utilizado para emitir colillas y notificaciones por email.</p>
                                </div>

                                <div className="grid sm:grid-cols-2 gap-3">
                                    <label className={`p-4 rounded-2xl border flex items-start gap-3 cursor-pointer transition-all ${useGlobalSmtp ? 'bg-indigo-50/60 border-indigo-300 shadow-xs' : 'bg-slate-50 border-slate-200'}`}>
                                        <input type="radio" name="smtp_mode" checked={useGlobalSmtp} onChange={() => setUseGlobalSmtp(true)} className="mt-1 accent-indigo-600" />
                                        <div>
                                            <span className="text-xs font-black text-slate-900 block">Usar Servidor SMTP Global de SHIFT</span>
                                            <span className="text-[10px] text-slate-500 font-medium block mt-0.5">Envío centralizado administrado por el sistema.</span>
                                        </div>
                                    </label>

                                    <label className={`p-4 rounded-2xl border flex items-start gap-3 cursor-pointer transition-all ${!useGlobalSmtp ? 'bg-indigo-50/60 border-indigo-300 shadow-xs' : 'bg-slate-50 border-slate-200'}`}>
                                        <input type="radio" name="smtp_mode" checked={!useGlobalSmtp} onChange={() => setUseGlobalSmtp(false)} className="mt-1 accent-indigo-600" />
                                        <div>
                                            <span className="text-xs font-black text-slate-900 block">Usar Servidor SMTP Propio</span>
                                            <span className="text-[10px] text-slate-500 font-medium block mt-0.5">Configura tu propio servidor corporativo (Google Workspace, Microsoft 365, cPanel, etc.).</span>
                                        </div>
                                    </label>
                                </div>

                                {!useGlobalSmtp && (
                                    <div className="p-5 bg-slate-50 border border-slate-200/80 rounded-2xl space-y-4 fade-in">
                                        <span className="text-[10px] font-black uppercase text-indigo-700 tracking-wider block">Servidor SMTP Personalizado</span>
                                        <div className="grid sm:grid-cols-3 gap-3">
                                            <div className="sm:col-span-2">
                                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Host Servidor SMTP</label>
                                                <input type="text" value={smtpHost} onChange={e => setSmtpHost(e.target.value)} placeholder="mail.miempresa.com" className="w-full p-3 bg-white border border-slate-200 rounded-xl font-mono text-xs outline-none focus:border-indigo-600" />
                                            </div>
                                            <div>
                                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Puerto SMTP</label>
                                                <input type="number" value={smtpPort} onChange={e => setSmtpPort(e.target.value)} placeholder="587" className="w-full p-3 bg-white border border-slate-200 rounded-xl font-mono text-xs outline-none focus:border-indigo-600" />
                                            </div>
                                            <div>
                                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Usuario SMTP</label>
                                                <input type="text" value={smtpUser} onChange={e => setSmtpUser(e.target.value)} placeholder="notificaciones@miempresa.com" className="w-full p-3 bg-white border border-slate-200 rounded-xl text-xs outline-none focus:border-indigo-600" />
                                            </div>
                                            <div>
                                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Contraseña SMTP</label>
                                                <input type="password" value={smtpPass} onChange={e => setSmtpPass(e.target.value)} placeholder="••••••••" className="w-full p-3 bg-white border border-slate-200 rounded-xl text-xs outline-none focus:border-indigo-600" />
                                            </div>
                                            <div>
                                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Cifrado</label>
                                                <select value={smtpSecure} onChange={e => setSmtpSecure(e.target.value)} className="w-full p-3 bg-white border border-slate-200 rounded-xl text-xs outline-none focus:border-indigo-600">
                                                    <option value="tls">TLS (Puerto 587)</option>
                                                    <option value="ssl">SSL (Puerto 465)</option>
                                                    <option value="none">Sin Cifrado (Puerto 25)</option>
                                                </select>
                                            </div>
                                            <div>
                                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Correo Remitente (From)</label>
                                                <input type="email" value={smtpFromEmail} onChange={e => setSmtpFromEmail(e.target.value)} placeholder="noreply@miempresa.com" className="w-full p-3 bg-white border border-slate-200 rounded-xl text-xs outline-none focus:border-indigo-600" />
                                            </div>
                                            <div className="sm:col-span-2">
                                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Nombre Remitente (From Name)</label>
                                                <input type="text" value={smtpFromName} onChange={e => setSmtpFromName(e.target.value)} placeholder="Mi Empresa - Nómina" className="w-full p-3 bg-white border border-slate-200 rounded-xl text-xs outline-none focus:border-indigo-600" />
                                            </div>
                                        </div>
                                    </div>
                                )}
                            </div>
                        )}

                        {/* WIDGETS DE VERIFICACION DE PASARELAS EN TIEMPO REAL */}
                        {(hasWaModule || hasEmailModule) && (
                            <div className="border-t pt-5 space-y-4">
                                <div className="flex items-center justify-between">
                                    <div>
                                        <h4 className="text-xs font-black uppercase tracking-wider text-slate-900">Verificación de Pasarelas en Tiempo Real</h4>
                                        <p className="text-[10px] text-slate-400 font-medium">Realiza un envío de prueba directo para confirmar la conectividad de la pasarela activa.</p>
                                    </div>
                                </div>

                                {testFeedback && (
                                    <div className="p-3 bg-indigo-50 border border-indigo-200 text-indigo-900 rounded-xl text-xs font-bold fade-in">
                                        {testFeedback}
                                    </div>
                                )}

                                <div className="grid md:grid-cols-2 gap-4">
                                    {/* PRUEBA WHATSAPP */}
                                    {hasWaModule && (
                                        <div className="p-4 bg-slate-50 border rounded-2xl space-y-3">
                                            <span className="text-[10px] font-black uppercase text-emerald-700 tracking-wider block">Test Mensaje WhatsApp Meta Cloud</span>
                                            <div className="flex gap-2">
                                                <input 
                                                    type="text" 
                                                    value={testWaPhone} 
                                                    onChange={e => setTestWaPhone(e.target.value)} 
                                                    placeholder="Número con código de país (ej. 50587289931)" 
                                                    className="flex-1 p-3 bg-white border border-slate-200 rounded-xl font-mono text-xs outline-none focus:border-emerald-600 text-slate-800"
                                                />
                                                <button 
                                                    type="button" 
                                                    onClick={handleTestCompanyWa} 
                                                    disabled={testingCompanyWa || !testWaPhone.trim()} 
                                                    className="px-4 py-3 bg-emerald-600 hover:bg-emerald-700 disabled:opacity-50 text-white rounded-xl font-bold text-xs shadow-xs transition-all cursor-pointer whitespace-nowrap"
                                                >
                                                    {testingCompanyWa ? "Enviando..." : "Probar WhatsApp"}
                                                </button>
                                            </div>
                                        </div>
                                    )}

                                    {/* PRUEBA CORREO */}
                                    {hasEmailModule && (
                                        <div className="p-4 bg-slate-50 border rounded-2xl space-y-3">
                                            <span className="text-[10px] font-black uppercase text-indigo-700 tracking-wider block">Test Correo Electrónico SMTP</span>
                                            <div className="flex gap-2">
                                                <input 
                                                    type="email" 
                                                    value={testEmailAddr} 
                                                    onChange={e => setTestEmailAddr(e.target.value)} 
                                                    placeholder="correo@ejemplo.com" 
                                                    className="flex-1 p-3 bg-white border border-slate-200 rounded-xl text-xs outline-none focus:border-indigo-600 text-slate-800"
                                                />
                                                <button 
                                                    type="button" 
                                                    onClick={handleTestCompanyEmail} 
                                                    disabled={testingCompanyEmail || !testEmailAddr.trim()} 
                                                    className="px-4 py-3 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white rounded-xl font-bold text-xs shadow-xs transition-all cursor-pointer whitespace-nowrap"
                                                >
                                                    {testingCompanyEmail ? "Enviando..." : "Probar Correo"}
                                                </button>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            </div>
                        )}
                    </div>
                );
            })()}

            {/* SECCION 7: CATALOGO DE DIAS FERIADOS DE LA EMPRESA */}
            <div className="bg-white p-6 sm:p-8 rounded-2xl shadow-xs border border-slate-200/80 space-y-6">
                <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
                    <div>
                        <div className="flex items-center gap-2">
                            <h3 className="text-base font-bold text-slate-900">Catálogo de Días Feriados (Nicaragua)</h3>
                            <span className="px-2.5 py-0.5 bg-amber-50 text-amber-700 border border-amber-200 rounded-full text-[9px] font-bold uppercase tracking-wider">
                                {companyHolidays.length} Feriados
                            </span>
                        </div>
                        <p className="text-slate-400 font-bold uppercase text-[10px] tracking-wider mt-0.5">
                            Días de asueto remunerado nacional/local. Exenta la auditoría de ausencias y calcula sobreprecio de pago doble si laboran.
                        </p>
                    </div>
                    <div className="flex items-center gap-2">
                        <button 
                            type="button"
                            onClick={handleLoadNicaraguaHolidays}
                            className="px-3.5 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 cursor-pointer"
                            title="Carga la lista oficial de feriados según el Código del Trabajo de Nicaragua"
                        >
                            <svg className="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                            <span>Cargar Feriados de Nicaragua</span>
                        </button>
                        <button 
                            type="button"
                            onClick={() => {
                                setEditingHoliday(null);
                                setHolidayNameInput('');
                                setHolidayDateInput('');
                                setHolidayMandatoryInput(true);
                                setShowHolidayModal(true);
                            }}
                            className="px-4 py-2.5 bg-slate-900 hover:bg-black text-white rounded-xl text-xs font-black uppercase tracking-wider transition-all flex items-center gap-2 cursor-pointer shadow-xs"
                        >
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                            <span>Agregar Día Feriado</span>
                        </button>
                    </div>
                </div>

                <div className="overflow-x-auto border border-slate-200/80 rounded-2xl">
                    <table className="w-full text-left border-collapse text-xs">
                        <thead className="bg-slate-50 text-[10px] font-black text-slate-500 uppercase border-b border-slate-200">
                            <tr>
                                <th className="p-3.5">Nombre del Feriado</th>
                                <th className="p-3.5">Fecha</th>
                                <th className="p-3.5 text-center">Tipo de Asueto</th>
                                <th className="p-3.5 text-right">Acciones</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-100 font-medium">
                            {companyHolidays.length > 0 ? (
                                companyHolidays.map(h => (
                                    <tr key={h.id || h.date} className="hover:bg-slate-50/70 transition-colors">
                                        <td className="p-3.5 font-bold text-slate-900">
                                            {h.name}
                                        </td>
                                        <td className="p-3.5 font-mono text-slate-600">
                                            {h.date}
                                        </td>
                                        <td className="p-3.5 text-center">
                                            <span className={`px-2.5 py-1 rounded-xl text-[9px] font-black uppercase ${
                                                h.isMandatory !== false ? 'bg-amber-100 text-amber-800' : 'bg-slate-100 text-slate-600'
                                            }`}>
                                                {h.isMandatory !== false ? 'Obligatorio / Remunerado' : 'Asueto Local / Opcional'}
                                            </span>
                                        </td>
                                        <td className="p-3.5 text-right space-x-2">
                                            <button 
                                                type="button"
                                                onClick={() => {
                                                    setEditingHoliday(h);
                                                    setHolidayNameInput(h.name);
                                                    setHolidayDateInput(h.date);
                                                    setHolidayMandatoryInput(h.isMandatory !== false);
                                                    setShowHolidayModal(true);
                                                }}
                                                className="px-2.5 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-[10px] font-bold cursor-pointer"
                                            >
                                                Editar
                                            </button>
                                            <button 
                                                type="button"
                                                onClick={() => handleDeleteHoliday(h.id)}
                                                className="px-2.5 py-1.5 bg-rose-50 hover:bg-rose-100 text-rose-700 rounded-lg text-[10px] font-bold cursor-pointer"
                                            >
                                                Eliminar
                                            </button>
                                        </td>
                                    </tr>
                                ))
                            ) : (
                                <tr>
                                    <td colSpan="4" className="p-6 text-center text-slate-400 font-semibold">
                                        No hay días feriados registrados para la empresa. Haz clic en "Agregar Día Feriado" para definir uno.
                                    </td>
                                </tr>
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
            </div>
            )}

            {/* PESTAÑA 5: INTELIGENCIA ARTIFICIAL */}
            {activeTab === 'ia' && (
                <div className="space-y-4 fade-in">
                    <div className="bg-white p-4 sm:p-5 rounded-xl shadow-xs border border-slate-200/80 space-y-4">
                        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
                            <div className="space-y-1">
                                <div className="flex items-center gap-2">
                                    <h3 className="text-base font-bold text-slate-900 tracking-tight">Google Gemini AI</h3>
                                    <span className="px-2 py-0.5 bg-slate-100 text-slate-700 border border-slate-200 rounded-full text-[10px] font-bold uppercase tracking-wider">
                                        Motor Inteligente
                                    </span>
                                </div>
                                <p className="text-slate-500 font-medium text-xs">
                                    Asistente conversacional de recursos humanos y auditorías inteligentes
                                </p>
                            </div>
                            {geminiStatus && (
                                <span className={`text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full border ${
                                    geminiStatus.type === 'success' 
                                        ? 'bg-emerald-50 text-emerald-700 border-emerald-200' 
                                        : geminiStatus.type === 'error'
                                        ? 'bg-red-50 text-red-700 border-red-200'
                                        : 'bg-slate-100 text-slate-600 border-slate-200'
                                }`}>
                                    {geminiStatus.text}
                                </span>
                            )}
                        </div>

                        <div className="space-y-2">
                            <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 block">
                                API Key de Google Gemini
                            </label>
                            <div className="flex flex-col sm:flex-row gap-2">
                                <div className="relative flex-1">
                                    <input 
                                        type={showGeminiKey ? "text" : "password"}
                                        value={geminiApiKey}
                                        onChange={e => setGeminiApiKey(e.target.value)}
                                        placeholder="AIzaSy..."
                                        className="w-full p-2.5 pr-20 bg-slate-50 border border-slate-200 rounded-xl font-mono text-xs outline-none focus:border-slate-400 focus:bg-white transition-all text-slate-800"
                                    />
                                    <button
                                        type="button"
                                        onClick={() => setShowGeminiKey(!showGeminiKey)}
                                        className="absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] font-semibold uppercase tracking-wider text-slate-400 hover:text-slate-700 px-2 py-1 rounded hover:bg-slate-100 transition-colors cursor-pointer"
                                    >
                                        {showGeminiKey ? "Ocultar" : "Mostrar"}
                                    </button>
                                </div>
                                <button
                                    type="button"
                                    onClick={handleTestGeminiKey}
                                    disabled={testingGemini || !geminiApiKey.trim()}
                                    className="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 disabled:opacity-40 text-slate-700 rounded-xl font-bold text-xs transition-all whitespace-nowrap cursor-pointer"
                                >
                                    {testingGemini ? "Probando..." : "Probar Clave"}
                                </button>
                                <button
                                    type="button"
                                    onClick={handleSaveGeminiKey}
                                    disabled={savingGemini}
                                    className="px-5 py-2.5 bg-slate-900 hover:bg-black disabled:opacity-50 text-white rounded-xl font-bold text-xs shadow-xs transition-all whitespace-nowrap cursor-pointer"
                                >
                                    {savingGemini ? "Guardando..." : "Guardar Clave"}
                                </button>
                            </div>
                            <div className="flex items-center justify-between text-[11px] text-slate-400 font-medium pt-0.5">
                                <span>Obtén tu clave gratuita en <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer" className="text-slate-800 font-bold underline hover:text-black">Google AI Studio</a></span>
                                {geminiApiKey && <span className="text-emerald-600 font-bold">Clave configurada</span>}
                            </div>
                        </div>
                    </div>
                </div>
            )}
            {/* PESTAÑA 6: ROLES Y PERMISOS */}
            {activeTab === 'roles' && window.AdminRoles && (
                <div className="fade-in">
                    <window.AdminRoles 
                        actions={actions} 
                        roles={roles} 
                        showToast={showToast} 
                        refreshData={refreshData} 
                    />
                </div>
            )}

            {/* FEEDBACK Y BOTON PRINCIPAL DE GUARDADO */}
            {saveFeedback && (
                <div className="p-4 bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-2xl text-xs font-bold text-center">
                    {saveFeedback}
                </div>
            )}



            {/* MODAL DE RECORTE DE LOGO */}
            {showCropModal && (
                <div className="fixed inset-0 bg-slate-900/80 z-[130] flex items-center justify-center p-4 fade-in" onClick={() => setShowCropModal(false)}>
                    <div className="bg-white rounded-2xl w-full max-w-lg p-5 shadow-2xl space-y-4 border border-slate-200/80" onClick={e=>e.stopPropagation()}>
                        <div className="flex justify-between items-center border-b pb-2.5">
                            <div>
                                <h3 className="font-bold text-base text-slate-900">Ajustar y Recortar Logo</h3>
                                <p className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Arrastra para encuadrar y ajusta el zoom</p>
                            </div>
                            <button onClick={() => setShowCropModal(false)} className="p-1.5 bg-slate-50 rounded-full text-slate-400 hover:text-slate-600 cursor-pointer">
                                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
                            </button>
                        </div>

                        <div className="flex justify-center bg-slate-100 p-3 rounded-xl overflow-hidden border relative">
                            <div className="relative">
                                <canvas 
                                    ref={canvasRef} 
                                    width={360} 
                                    height={200} 
                                    onMouseDown={handleMouseDown}
                                    onMouseMove={handleMouseMove}
                                    onMouseUp={handleMouseUp}
                                    onMouseLeave={handleMouseUp}
                                    className="cursor-move rounded-xl shadow-inner bg-transparent" 
                                />
                                <div className="absolute inset-3 border-2 border-dashed border-slate-400/80 rounded-xl pointer-events-none"></div>
                            </div>
                        </div>

                        <div className="space-y-1 px-1">
                            <div className="flex justify-between text-xs font-bold text-slate-600">
                                <span>Zoom</span>
                                <span>{zoomScale.toFixed(1)}x</span>
                            </div>
                            <input 
                                type="range" 
                                min="0.5" 
                                max="3.0" 
                                step="0.1" 
                                value={zoomScale} 
                                onChange={e => setZoomScale(parseFloat(e.target.value))} 
                                className="w-full h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-900" 
                            />
                        </div>

                        <div className="flex gap-2.5 pt-1">
                            <button onClick={() => setShowCropModal(false)} className="flex-1 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-bold text-xs cursor-pointer transition-colors">
                                Cancelar
                            </button>
                            <button 
                                onClick={handleApplyCropAndSave} 
                                disabled={isSavingLogo}
                                className="flex-1 py-2.5 bg-slate-900 hover:bg-black text-white font-bold rounded-xl text-xs shadow-xs active:scale-95 transition-all flex items-center justify-center gap-2 cursor-pointer"
                            >
                                {isSavingLogo ? "Guardando..." : "Guardar Logo"}
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {/* MODAL CREAR / EDITAR DIA FERIADO */}
            {showHolidayModal && (
                <div className="fixed inset-0 bg-slate-900/80 z-[130] flex items-center justify-center p-4 fade-in" onClick={() => setShowHolidayModal(false)}>
                    <div className="bg-white rounded-2xl w-full max-w-md p-5 shadow-2xl space-y-4 border border-slate-200/80" onClick={e=>e.stopPropagation()}>
                        <div className="flex justify-between items-center border-b pb-2.5">
                            <div>
                                <h3 className="font-bold text-base text-slate-900">
                                    {editingHoliday ? 'Editar Día Feriado' : 'Nuevo Día Feriado'}
                                </h3>
                                <p className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Definición de asueto laboral</p>
                            </div>
                            <button onClick={() => setShowHolidayModal(false)} className="p-1.5 bg-slate-50 rounded-full text-slate-400 hover:text-slate-600 cursor-pointer">
                                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
                            </button>
                        </div>

                        <div className="space-y-3">
                            <div>
                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Nombre o Motivo del Feriado</label>
                                <input 
                                    type="text" 
                                    value={holidayNameInput} 
                                    onChange={e => setHolidayNameInput(e.target.value)} 
                                    placeholder="Ej. Día del Trabajo / Santo Domingo" 
                                    className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs text-slate-800 outline-none focus:border-slate-400 focus:bg-white" 
                                />
                            </div>

                            <div>
                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Fecha (Año-Mes-Día)</label>
                                <input 
                                    type="date" 
                                    value={holidayDateInput} 
                                    onChange={e => setHolidayDateInput(e.target.value)} 
                                    className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs text-slate-800 outline-none focus:border-slate-400 focus:bg-white" 
                                />
                            </div>

                            <label className="flex items-center gap-2.5 p-3 bg-slate-50 rounded-xl border border-slate-200 cursor-pointer">
                                <input 
                                    type="checkbox" 
                                    checked={holidayMandatoryInput} 
                                    onChange={e => setHolidayMandatoryInput(e.target.checked)} 
                                    className="w-4 h-4 accent-slate-900 rounded cursor-pointer" 
                                />
                                <div>
                                    <span className="text-xs font-bold text-slate-900 block leading-tight">Feriado Nacional / Remunerado</span>
                                    <span className="text-[10px] text-slate-400 leading-tight block">Si un trabajador labora este día, se paga recargo del 100% (pago doble según Art. 62 CT).</span>
                                </div>
                            </label>
                        </div>

                        <div className="flex gap-2.5 pt-1 border-t">
                            <button onClick={() => setShowHolidayModal(false)} className="flex-1 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-bold text-xs cursor-pointer transition-colors">
                                Cancelar
                            </button>
                            <button 
                                onClick={handleSaveHoliday}
                                className="flex-1 py-2.5 bg-slate-900 hover:bg-black text-white font-bold rounded-xl text-xs shadow-xs transition-all cursor-pointer"
                            >
                                Guardar Feriado
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};