// Función fuera del componente para evitar recalcular la lógica cada render
const convertByteArrayToBase64 = (byteArray) => {
    if (!byteArray || !byteArray.length) return null;

    let binary = '';
    const bytes = new Uint8Array(byteArray);
    const len = bytes.byteLength;

    for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }

    return window.btoa(binary);
};

const EnterpriseData = ({ idEnt }) => {
    const [enterpriseData, setEnterpriseData] = React.useState({
        commercialName: '',
        enterpriseLogo: null,
    });
    const [loading, setLoading] = React.useState(false);

    React.useEffect(() => {
        let isMounted = true; // Previene actualización si el componente se desmonta

        const fetchEnterpriseData = async () => {
            if (!idEnt || idEnt <= 0) return;

            setLoading(true);
            try {
                const response = await fetch(`/global/GetEnterpriseData?entId=${idEnt}`, {
                    method: 'POST',
                });
                const data = await response.json();

                if (isMounted && data) {
                    setEnterpriseData({
                        commercialName: data.commercialName || '',
                        enterpriseLogo: data.enterpriseLogo || null,
                    });
                }
            } catch (error) {
                console.error('Error cargando datos de la empresa:', error);
            } finally {
                if (isMounted) setLoading(false);
            }
        };

        fetchEnterpriseData();

        return () => {
            isMounted = false; // Cleanup al desmontar o cambiar idEnt
        };
    }, [idEnt]); // Se vuelve a ejecutar cada vez que cambia 'idEnt'

    // Procesamiento de la imagen Base64
    const base64Image = convertByteArrayToBase64(enterpriseData.enterpriseLogo);
    const imageSrc = base64Image
        ? `data:image/png;base64,${base64Image}`
        : '/images/products/noImage.png';

    return (
        <div className="text-center my-4">
            <div className="cover-logo d-flex flex-column align-items-center justify-content-center">
                <h1 className="h2 font-weight-bold text-primary mb-3">
                    Catálogo de Productos
                </h1>

                {loading ? (
                    <div className="spinner-border text-primary my-3" role="status">
                        <span className="sr-only">Cargando...</span>
                    </div>
                ) : (
                    <>
                        <img
                            src={imageSrc}
                            alt={enterpriseData.commercialName || 'Logo Empresa'}
                            className="img-fluid my-2"
                            style={{ maxHeight: '120px', objectFit: 'contain' }}
                        />
                        <h2 className="h4 text-secondary mt-2">
                            {enterpriseData.commercialName}
                        </h2>
                    </>
                )}
            </div>
        </div>
    );
};