(function ($) {
    function updateCSSVariable(variableName, value) {
        document.documentElement.style.setProperty(variableName, value);
    }

    const colorSettings = {
        heading_color: '--heading-color',
        body_text_color: '--body-text-color',
        button_text_color: '--button-text-color',
        button_text_hover_color: '--button-text-hover-color',
        button_background_color: '--button-background-color',
        button_background_hover_color: '--button-background-hover-color',
        link_color: '--link-color',
        link_hover_color: '--link-hover-color',
        topbar_background_color: '--topbar-background-color',
        header_background_color: '--header-background-color',
        header_icon_color: '--header-icon-color',
        menu_text_color: '--menu-text-color',
        menu_text_hover_color: '--menu-text-hover-color',
        menu_text_active_color: '--menu-text-active-color',
        sidebar_background_color: '--sidebar-background-color',
        footer_background_color: '--footer-background-color',
        footer_text_color: '--footer-text-color',
        footer_link_color: '--footer-link-color',
        site_background_color: '--site-background-color',
    };

    function loadGoogleFont(fontFamily) {
        if (!fontFamily) return;
        
        let formattedFont = fontFamily.replace(/ /g, "+");
        let fontUrl = `https://fonts.googleapis.com/css2?family=${formattedFont}:wght@200;300;400;500;600;700&display=swap`;
        
        let existingLink = document.getElementById("customizer-google-font");

        if (existingLink) {
            existingLink.href = fontUrl;
        } else {
            let preloadLink = document.createElement("link");
            preloadLink.rel = "preload";
            preloadLink.as = "style";
            preloadLink.href = fontUrl;
            document.head.appendChild(preloadLink);

            let link = document.createElement("link");
            link.id = "customizer-google-font";
            link.rel = "stylesheet";
            link.href = fontUrl;
            document.head.appendChild(link);
        }

    }

    const fontSettings = {
        aurora_lite_fonts_body_font_family: '--body-font-family',
        aurora_lite_fonts_body_font_size_desktop: '--body-font-size-desktop',
        aurora_lite_fonts_body_font_size_tablet: '--body-font-size-tablet',
        aurora_lite_fonts_body_font_size_mobile: '--body-font-size-mobile',
        aurora_lite_fonts_body_font_weight: '--body-font-weight',
        aurora_lite_fonts_body_text_transform: '--body-text-transform',
        aurora_lite_fonts_body_font_style: '--body-font-style',
        aurora_lite_fonts_body_text_decoration: '--body-text-decoration',
        aurora_lite_fonts_body_line_height_desktop: '--body-line-height-desktop',
        aurora_lite_fonts_body_line_height_tablet: '--body-line-height-tablet',
        aurora_lite_fonts_body_line_height_mobile: '--body-line-height-mobile',
        aurora_lite_fonts_body_letter_spacing_desktop: '--body-letter-spacing-desktop',
        aurora_lite_fonts_body_letter_spacing_tablet: '--body-letter-spacing-tablet',
        aurora_lite_fonts_body_letter_spacing_mobile: '--body-letter-spacing-mobile',
        aurora_lite_fonts_body_word_spacing_desktop: '--body-word-spacing-desktop',
        aurora_lite_fonts_body_word_spacing_tablet: '--body-word-spacing-tablet',
        aurora_lite_fonts_body_word_spacing_mobile: '--body-word-spacing-mobile',

        aurora_lite_fonts_h1_font_family: '--h1-font-family',
        aurora_lite_fonts_h1_font_size_desktop: '--h1-font-size-desktop',
        aurora_lite_fonts_h1_font_size_tablet: '--h1-font-size-tablet',
        aurora_lite_fonts_h1_font_size_mobile: '--h1-font-size-mobile',
        aurora_lite_fonts_h1_font_weight: '--h1-font-weight',
        aurora_lite_fonts_h1_text_transform: '--h1-text-transform',
        aurora_lite_fonts_h1_font_style: '--h1-font-style',
        aurora_lite_fonts_h1_text_decoration: '--h1-text-decoration',
        aurora_lite_fonts_h1_line_height_desktop: '--h1-line-height-desktop',
        aurora_lite_fonts_h1_line_height_tablet: '--h1-line-height-tablet',
        aurora_lite_fonts_h1_line_height_mobile: '--h1-line-height-mobile',
        aurora_lite_fonts_h1_letter_spacing_desktop: '--h1-letter-spacing-desktop',
        aurora_lite_fonts_h1_letter_spacing_tablet: '--h1-letter-spacing-tablet',
        aurora_lite_fonts_h1_letter_spacing_mobile: '--h1-letter-spacing-mobile',
        aurora_lite_fonts_h1_word_spacing_desktop: '--h1-word-spacing-desktop',
        aurora_lite_fonts_h1_word_spacing_tablet: '--h1-word-spacing-tablet',
        aurora_lite_fonts_h1_word_spacing_mobile: '--h1-word-spacing-mobile',

        aurora_lite_fonts_h2_font_family: '--h2-font-family',
        aurora_lite_fonts_h2_font_size_desktop: '--h2-font-size-desktop',
        aurora_lite_fonts_h2_font_size_tablet: '--h2-font-size-tablet',
        aurora_lite_fonts_h2_font_size_mobile: '--h2-font-size-mobile',
        aurora_lite_fonts_h2_font_weight: '--h2-font-weight',
        aurora_lite_fonts_h2_text_transform: '--h2-text-transform',
        aurora_lite_fonts_h2_font_style: '--h2-font-style',
        aurora_lite_fonts_h2_text_decoration: '--h2-text-decoration',
        aurora_lite_fonts_h2_line_height_desktop: '--h2-line-height-desktop',
        aurora_lite_fonts_h2_line_height_tablet: '--h2-line-height-tablet',
        aurora_lite_fonts_h2_line_height_mobile: '--h2-line-height-mobile',
        aurora_lite_fonts_h2_letter_spacing_desktop: '--h2-letter-spacing-desktop',
        aurora_lite_fonts_h2_letter_spacing_tablet: '--h2-letter-spacing-tablet',
        aurora_lite_fonts_h2_letter_spacing_mobile: '--h2-letter-spacing-mobile',
        aurora_lite_fonts_h2_word_spacing_desktop: '--h2-word-spacing-desktop',
        aurora_lite_fonts_h2_word_spacing_tablet: '--h2-word-spacing-tablet',
        aurora_lite_fonts_h2_word_spacing_mobile: '--h2-word-spacing-mobile',

        aurora_lite_fonts_h3_font_family: '--h3-font-family',
        aurora_lite_fonts_h3_font_size_desktop: '--h3-font-size-desktop',
        aurora_lite_fonts_h3_font_size_tablet: '--h3-font-size-tablet',
        aurora_lite_fonts_h3_font_size_mobile: '--h3-font-size-mobile',
        aurora_lite_fonts_h3_font_weight: '--h3-font-weight',
        aurora_lite_fonts_h3_text_transform: '--h3-text-transform',
        aurora_lite_fonts_h3_font_style: '--h3-font-style',
        aurora_lite_fonts_h3_text_decoration: '--h3-text-decoration',
        aurora_lite_fonts_h3_line_height_desktop: '--h3-line-height-desktop',
        aurora_lite_fonts_h3_line_height_tablet: '--h3-line-height-tablet',
        aurora_lite_fonts_h3_line_height_mobile: '--h3-line-height-mobile',
        aurora_lite_fonts_h3_letter_spacing_desktop: '--h3-letter-spacing-desktop',
        aurora_lite_fonts_h3_letter_spacing_tablet: '--h3-letter-spacing-tablet',
        aurora_lite_fonts_h3_letter_spacing_mobile: '--h3-letter-spacing-mobile',
        aurora_lite_fonts_h3_word_spacing_desktop: '--h3-word-spacing-desktop',
        aurora_lite_fonts_h3_word_spacing_tablet: '--h3-word-spacing-tablet',
        aurora_lite_fonts_h3_word_spacing_mobile: '--h3-word-spacing-mobile',

        aurora_lite_fonts_h4_font_family: '--h4-font-family',
        aurora_lite_fonts_h4_font_size_desktop: '--h4-font-size-desktop',
        aurora_lite_fonts_h4_font_size_tablet: '--h4-font-size-tablet',
        aurora_lite_fonts_h4_font_size_mobile: '--h4-font-size-mobile',
        aurora_lite_fonts_h4_font_weight: '--h4-font-weight',
        aurora_lite_fonts_h4_text_transform: '--h4-text-transform',
        aurora_lite_fonts_h4_font_style: '--h4-font-style',
        aurora_lite_fonts_h4_text_decoration: '--h4-text-decoration',
        aurora_lite_fonts_h4_line_height_desktop: '--h4-line-height-desktop',
        aurora_lite_fonts_h4_line_height_tablet: '--h4-line-height-tablet',
        aurora_lite_fonts_h4_line_height_mobile: '--h4-line-height-mobile',
        aurora_lite_fonts_h4_letter_spacing_desktop: '--h4-letter-spacing-desktop',
        aurora_lite_fonts_h4_letter_spacing_tablet: '--h4-letter-spacing-tablet',
        aurora_lite_fonts_h4_letter_spacing_mobile: '--h4-letter-spacing-mobile',
        aurora_lite_fonts_h4_word_spacing_desktop: '--h4-word-spacing-desktop',
        aurora_lite_fonts_h4_word_spacing_tablet: '--h4-word-spacing-tablet',
        aurora_lite_fonts_h4_word_spacing_mobile: '--h4-word-spacing-mobile',

        aurora_lite_fonts_h5_font_family: '--h5-font-family',
        aurora_lite_fonts_h5_font_size_desktop: '--h5-font-size-desktop',
        aurora_lite_fonts_h5_font_size_tablet: '--h5-font-size-tablet',
        aurora_lite_fonts_h5_font_size_mobile: '--h5-font-size-mobile',
        aurora_lite_fonts_h5_font_weight: '--h5-font-weight',
        aurora_lite_fonts_h5_text_transform: '--h5-text-transform',
        aurora_lite_fonts_h5_font_style: '--h5-font-style',
        aurora_lite_fonts_h5_text_decoration: '--h5-text-decoration',
        aurora_lite_fonts_h5_line_height_desktop: '--h5-line-height-desktop',
        aurora_lite_fonts_h5_line_height_tablet: '--h5-line-height-tablet',
        aurora_lite_fonts_h5_line_height_mobile: '--h5-line-height-mobile',
        aurora_lite_fonts_h5_letter_spacing_desktop: '--h5-letter-spacing-desktop',
        aurora_lite_fonts_h5_letter_spacing_tablet: '--h5-letter-spacing-tablet',
        aurora_lite_fonts_h5_letter_spacing_mobile: '--h5-letter-spacing-mobile',
        aurora_lite_fonts_h5_word_spacing_desktop: '--h5-word-spacing-desktop',
        aurora_lite_fonts_h5_word_spacing_tablet: '--h5-word-spacing-tablet',
        aurora_lite_fonts_h5_word_spacing_mobile: '--h5-word-spacing-mobile',

        aurora_lite_fonts_h6_font_family: '--h6-font-family',
        aurora_lite_fonts_h6_font_size_desktop: '--h6-font-size-desktop',
        aurora_lite_fonts_h6_font_size_tablet: '--h6-font-size-tablet',
        aurora_lite_fonts_h6_font_size_mobile: '--h6-font-size-mobile',
        aurora_lite_fonts_h6_font_weight: '--h6-font-weight',
        aurora_lite_fonts_h6_text_transform: '--h6-text-transform',
        aurora_lite_fonts_h6_font_style: '--h6-font-style',
        aurora_lite_fonts_h6_text_decoration: '--h6-text-decoration',
        aurora_lite_fonts_h6_line_height_desktop: '--h6-line-height-desktop',
        aurora_lite_fonts_h6_line_height_tablet: '--h6-line-height-tablet',
        aurora_lite_fonts_h6_line_height_mobile: '--h6-line-height-mobile',
        aurora_lite_fonts_h6_letter_spacing_desktop: '--h6-letter-spacing-desktop',
        aurora_lite_fonts_h6_letter_spacing_tablet: '--h6-letter-spacing-tablet',
        aurora_lite_fonts_h6_letter_spacing_mobile: '--h6-letter-spacing-mobile',
        aurora_lite_fonts_h6_word_spacing_desktop: '--h6-word-spacing-desktop',
        aurora_lite_fonts_h6_word_spacing_tablet: '--h6-word-spacing-tablet',
        aurora_lite_fonts_h6_word_spacing_mobile: '--h6-word-spacing-mobile',

        aurora_lite_fonts_buttons_font_family: '--button-font-family',
        aurora_lite_fonts_buttons_font_size_desktop: '--button-font-size-desktop',
        aurora_lite_fonts_buttons_font_size_tablet: '--button-font-size-tablet',
        aurora_lite_fonts_buttons_font_size_mobile: '--button-font-size-mobile',
        aurora_lite_fonts_buttons_font_weight: '--button-font-weight',
        aurora_lite_fonts_buttons_text_transform: '--button-text-transform',
        aurora_lite_fonts_buttons_font_style: '--button-font-style',
        aurora_lite_fonts_buttons_text_decoration: '--button-text-decoration',
        aurora_lite_fonts_buttons_line_height_desktop: '--button-line-height-desktop',
        aurora_lite_fonts_buttons_line_height_tablet: '--button-line-height-tablet',
        aurora_lite_fonts_buttons_line_height_mobile: '--button-line-height-mobile',
        aurora_lite_fonts_buttons_letter_spacing_desktop: '--button-letter-spacing-desktop',
        aurora_lite_fonts_buttons_letter_spacing_tablet: '--button-letter-spacing-tablet',
        aurora_lite_fonts_buttons_letter_spacing_mobile: '--button-letter-spacing-mobile',
        aurora_lite_fonts_buttons_word_spacing_desktop: '--button-word-spacing-desktop',
        aurora_lite_fonts_buttons_word_spacing_tablet: '--button-word-spacing-tablet',
        aurora_lite_fonts_buttons_word_spacing_mobile: '--button-word-spacing-mobile',

        aurora_lite_fonts_menu_font_family: '--menu-font-family',
        aurora_lite_fonts_menu_font_size_desktop: '--menu-font-size-desktop',
        aurora_lite_fonts_menu_font_size_tablet: '--menu-font-size-tablet',
        aurora_lite_fonts_menu_font_size_mobile: '--menu-font-size-mobile',
        aurora_lite_fonts_menu_font_weight: '--menu-font-weight',
        aurora_lite_fonts_menu_text_transform: '--menu-text-transform',
        aurora_lite_fonts_menu_font_style: '--menu-font-style',
        aurora_lite_fonts_menu_text_decoration: '--menu-text-decoration',
        aurora_lite_fonts_menu_line_height_desktop: '--menu-line-height-desktop',
        aurora_lite_fonts_menu_line_height_tablet: '--menu-line-height-tablet',
        aurora_lite_fonts_menu_line_height_mobile: '--menu-line-height-mobile',
        aurora_lite_fonts_menu_letter_spacing_desktop: '--menu-letter-spacing-desktop',
        aurora_lite_fonts_menu_letter_spacing_tablet: '--menu-letter-spacing-tablet',
        aurora_lite_fonts_menu_letter_spacing_mobile: '--menu-letter-spacing-mobile',
        aurora_lite_fonts_menu_word_spacing_desktop: '--menu-word-spacing-desktop',
        aurora_lite_fonts_menu_word_spacing_tablet: '--menu-word-spacing-tablet',
        aurora_lite_fonts_menu_word_spacing_mobile: '--menu-word-spacing-mobile',
    };


    $.each(colorSettings, function (settingId, cssVariable) {
        wp.customize(settingId, function (value) {
            value.bind(function (newval) {
                updateCSSVariable(cssVariable, newval);
            });
        });
    });

    $.each(fontSettings, function (settingId, cssVariable) {
        wp.customize(settingId, function (value) {
            value.bind(function (newval) {
                updateCSSVariable(cssVariable, newval);
    
                if (cssVariable.includes('font-family')) {
                    loadGoogleFont(newval);
                }
            });
        });
    });
    
    wp.customize('aurora_lite_footer_copyright_text', function(value) {
        value.bind(function(newVal) {
            var $footerCopyright = $('.footer-copyright');
            $footerCopyright.html(newVal);
        });
    });

    wp.customize( 'aurora_lite_footer_col_2_title', function( value ) {
        value.bind( function( newVal ) {
            $( '.fc2.footer-col h4' ).text( newVal );
        } );
    });

    wp.customize( 'aurora_lite_footer_col_3_title', function( value ) {
        value.bind( function( newVal ) {
            $( '.fc3.footer-col h4' ).text( newVal );
        } );
    });

    wp.customize( 'aurora_lite_footer_col_4_title', function( value ) {
        value.bind( function( newVal ) {
            $( '.fc4.footer-col h4' ).text( newVal );
        } );
    });

    wp.customize('aurora_lite_site_width', function(value) {
        value.bind(function(newVal) {
            document.querySelector('.site-container').style.maxWidth = newVal + 'px';
        });
    });

    wp.customize('header_layout', function (value) {
        value.bind(function (newval) {
            const control = wp.customize.control('topbar_background_color');
            if (control) {
                const allowedHeaders = ['Apex', 'Detailed'];
                if (allowedHeaders.includes(newval)) {
                    control.container.show();
                } else {
                    control.container.hide();
                }
            }
        });
    });

    wp.customize('aurora_lite_search_placeholder', function (value) {
        value.bind(function (newVal) {
            document.querySelectorAll('.aurora-lite-search-input')
                .forEach(el => el.placeholder = newVal);
        });
    });

    wp.customize('aurora_lite_search_header_bg', function (value) {
        value.bind(function (newVal) {
            document.documentElement
                .style
                .setProperty('--aurora-lite-search-header-bg-color', newVal || '#664700');
        });
    });

    wp.customize('aurora_lite_author_header_bg', function(value) {
        value.bind(function(newVal) {
            document.documentElement.style.setProperty('--author-header-bg-color', newVal);
        });
    });


    wp.customize('aurora_lite_dropcase_style', function(value) {
        value.bind(function(newval) {
            document.body.classList.remove(
                'dropcase-pretty',
                'dropcase-bold',
                'dropcase-casual'
            );
            if (newval !== 'none') {
                document.body.classList.add('dropcase-' + newval);
            }
        });
    });

    jQuery(function ($) {
        $(document).on('click', '.aurora-lite-edit-section', function (e) {
            e.preventDefault();

            const section = $(this).data('section');
            if (!section) return;

            if (wp.customize && wp.customize.preview) {
                wp.customize.preview.send('aurora-lite-set-active-section', { section });
            }
        });
    });

    wp.customize('homepage_custom_content_top', function(value) {
        value.bind(function(newVal) {
            $('.cca-first').html(newVal);
        });
    });

    wp.customize('aurora_lite_logo_width_desktop', function(value) {
        value.bind(function(newval) {
            $('html').get(0).style.setProperty('--header-logo-width-desktop', newval + 'px');
        });
    });

    wp.customize('aurora_lite_logo_width_tablet', function(value) {
        value.bind(function(newval) {
            $('html').get(0).style.setProperty('--header-logo-width-tablet', newval + 'px');
        });
    });

    wp.customize('aurora_lite_logo_width_mobile', function(value) {
        value.bind(function(newval) {
            $('html').get(0).style.setProperty('--header-logo-width-mobile', newval + 'px');
        });
    });

    wp.customize('aurora_lite_footer_logo_width_desktop', function(value) {
        value.bind(function(newval) {
            $('html').get(0).style.setProperty('--footer-logo-width-desktop', newval + 'px');
        });
    });

    wp.customize('aurora_lite_footer_logo_width_tablet', function(value) {
        value.bind(function(newval) {
            $('html').get(0).style.setProperty('--footer-logo-width-tablet', newval + 'px');
        });
    });

    wp.customize('aurora_lite_footer_logo_width_mobile', function(value) {
        value.bind(function(newval) {
            $('html').get(0).style.setProperty('--footer-logo-width-mobile', newval + 'px');
        });
    });

})(jQuery);