(function ($) {
    "use strict";

    const initRollingText = ($scope) => {
        const wrapper = $scope.find('.sifency-rolling-wrapper')[0];
        if (!wrapper) return;

        if (typeof gsap === 'undefined') {
            console.error('Sifency Error: GSAP is missing for Rolling Text.');
            return;
        }

        const config = JSON.parse(wrapper.dataset.config || '{}');
        const staggerTime = parseFloat(config.stagger || 0.02);
        const durationTime = parseFloat(config.duration || 0.4);

        const links = wrapper.querySelectorAll('.sifency-roll-link');

        links.forEach(link => {
            const container = link.querySelector('.sifency-roll-container');
            const rawText = container.dataset.text;

            container.innerHTML = '';

            const chars = rawText.split('');
            const charWrappers = [];

            chars.forEach(char => {
                const charWrap = document.createElement('span');
                charWrap.className = 'sifency-char-wrap';

                const front = document.createElement('span');
                front.className = 'sifency-char-front';
                front.innerHTML = char === ' ' ? '&nbsp;' : char;

                const bottom = document.createElement('span');
                bottom.className = 'sifency-char-bottom';
                bottom.innerHTML = char === ' ' ? '&nbsp;' : char;

                charWrap.appendChild(front);
                charWrap.appendChild(bottom);
                container.appendChild(charWrap);

                charWrappers.push({ front, bottom });
            });

            const fronts = charWrappers.map(el => el.front);
            const bottoms = charWrappers.map(el => el.bottom);

            gsap.set(fronts, { yPercent: 0, force3D: true });
            gsap.set(bottoms, { yPercent: 100, position: 'absolute', top: 0, left: 0, force3D: true });

            let isHovered = false;

            link.addEventListener('mouseenter', () => {
                if (isHovered) return;
                isHovered = true;

                gsap.to(fronts, {
                    yPercent: -100,
                    duration: durationTime,
                    ease: "power2.inOut",
                    stagger: staggerTime,
                    overwrite: "auto"
                });

                gsap.to(bottoms, {
                    yPercent: 0,
                    duration: durationTime,
                    ease: "power2.inOut",
                    stagger: staggerTime,
                    overwrite: "auto"
                });
            });

            link.addEventListener('mouseleave', () => {
                isHovered = false;

                gsap.to(fronts, {
                    yPercent: 0,
                    duration: durationTime,
                    ease: "power2.inOut",
                    stagger: staggerTime,
                    overwrite: "auto"
                });

                gsap.to(bottoms, {
                    yPercent: 100,
                    duration: durationTime,
                    ease: "power2.inOut",
                    stagger: staggerTime,
                    overwrite: "auto"
                });
            });
        });
    };

    $(window).on('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction(
            'frontend/element_ready/sifency-rolling-text.default',
            initRollingText
        );
    });

})(jQuery);