jQuery(document).ready(function($) {
    initSyrusSettings($);
});

function initSyrusSettings($) {
    let $sidebar = $('.syrus-settings-sidebar');
    let $sidebarLinks = $('.syrus-sidebar-nav a');
    let $sections = $('.syrus-settings-section');
    let $toggleSwitches = $('.syrus-toggle-switch input[type="checkbox"]');

    if (!$sidebar.length) return;

    $sidebarLinks.on('click', function(e) {
        e.preventDefault();
        
        let targetId = $(this).attr('href').substring(1);
        let $targetSection = $('#' + targetId);
        
        if ($targetSection.length) {
            $sidebarLinks.removeClass('active');
            $(this).addClass('active');
            
            $('html, body').animate({
                scrollTop: $targetSection.offset().top - 50
            }, 500);
            
            $sections.css({
                'transform': 'translateY(0)',
                'opacity': '0.7'
            });
            
            setTimeout(function() {
                $targetSection.css({
                    'transform': 'translateY(-5px)',
                    'opacity': '1'
                });
            }, 200);
        }
    });

    let observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting && entry.intersectionRatio > 0.5) {
                let $activeLink = $('.syrus-sidebar-nav a[href="#' + entry.target.id + '"]');
                if ($activeLink.length) {
                    $sidebarLinks.removeClass('active');
                    $activeLink.addClass('active');
                }
            }
        });
    }, { threshold: [0.5] });

    $sections.each(function() {
        observer.observe(this);
    });

    if ($sidebarLinks.length > 0) {
        $sidebarLinks.first().addClass('active');
    }

    $('.syrus-toggle-slider').on('click', function(e) {
        e.preventDefault();
        let $checkbox = $(this).prev('input[type="checkbox"]');
        if ($checkbox.length) {
            $checkbox.prop('checked', !$checkbox.is(':checked'));
            $checkbox.trigger('change');
        }
    });

    $toggleSwitches.on('change', function() {
        let $slider = $(this).next('.syrus-toggle-slider');
        if ($slider.length) {
            if ($(this).is(':checked')) {
                $slider.css('transform', 'scale(1.05)');
                setTimeout(function() {
                    $slider.css('transform', 'scale(1)');
                }, 150);
            } else {
                $slider.css('transform', 'scale(0.95)');
                setTimeout(function() {
                    $slider.css('transform', 'scale(1)');
                }, 150);
            }
        }
    });

    $toggleSwitches.on('focus', function() {
        let $slider = $(this).next('.syrus-toggle-slider');
        if ($slider.length) {
            $slider.css('box-shadow', `
                inset 4px 4px 10px rgba(0,0,0,0.15),
                inset -4px -4px 10px rgba(255,255,255,0.9),
                0 0 0 3px rgba(15, 110, 180, 0.2)
            `);
        }
    });

    $toggleSwitches.on('blur', function() {
        let $slider = $(this).next('.syrus-toggle-slider');
        if ($slider.length) {
            if ($(this).is(':checked')) {
                $slider.css('box-shadow', `
                    inset 4px 4px 10px rgba(15, 110, 180, 0.3),
                    inset -4px -4px 10px rgba(30, 126, 200, 0.1)
                `);
            } else {
                $slider.css('box-shadow', `
                    inset 4px 4px 10px rgba(0,0,0,0.15),
                    inset -4px -4px 10px rgba(255,255,255,0.9)
                `);
            }
        }
    });

    $('.syrus-form-input').on('focus', function() {
        $(this).closest('.syrus-form-row').css('transform', 'translateY(-2px)');
    });

    $('.syrus-form-input').on('blur', function() {
        $(this).closest('.syrus-form-row').css('transform', 'translateY(0)');
    });

    $('.syrus-save-button').on('click', function() {
        let $this = $(this);
        $this.css('transform', 'translateY(2px) scale(0.98)');
        
        setTimeout(function() {
            $this.css('transform', 'translateY(-2px) scale(1)');
        }, 100);
    });
}