/**
 * Blockenix Customizer Live Preview
 * Handles real-time updates in the Customizer preview pane
 */
(function ($) {
    'use strict';

    // Use WordPress Customizer API
    var api = wp.customize;

    // Wait for document ready and api to be available
    $(function () {
        // Ensure api is available
        if (typeof api === 'undefined' || typeof api === 'function') {
            return;
        }

        // ============================================
        // HEADER & MENU COLORS
        // ============================================
        
        api('header_bg_color', function (value) {
            value.bind(function (newval) {
                var styleId = 'blockenix-header-bg-color';
                var $header = $('.site-header');
                var bgStyle = '';
                
                if (newval && newval !== 'transparent' && (newval === '#1a1a2e' || newval === '#16213e')) {
                    // Apply gradient for default colors
                    bgStyle = 'background: linear-gradient(135deg, ' + newval + ' 0%, #16213e 100%) !important; background-color: ' + newval + ' !important;';
                } else if (newval && newval !== 'transparent') {
                    // Apply solid color for other colors
                    bgStyle = 'background: ' + newval + ' !important; background-color: ' + newval + ' !important;';
                } else {
                    // Transparent
                    bgStyle = 'background-color: transparent !important; background: none !important;';
                }
                
                var style = '<style id="' + styleId + '">.site-header { ' + bgStyle + ' }</style>';
                $('#' + styleId).remove();
                $('head').append(style);
            });
        });

        api('menu_bg_color', function (value) {
            value.bind(function (newval) {
                var $nav = $('.primary-navigation');
                if (newval === 'transparent') {
                    $nav.css({
                        'background-color': 'transparent',
                        'background': 'none'
                    });
                } else {
                    $nav.css({
                        'background-color': newval,
                        'background': 'none'
                    });
                }
            });
        });

        api('menu_text_color', function (value) {
            value.bind(function (newval) {
                $('.menu li a, .primary-navigation a, .menu a').css('color', newval);
            });
        });

        api('menu_hover_bg_color', function (value) {
            value.bind(function (newval) {
                var styleId = 'blockenix-menu-hover-bg';
                var style = '<style id="' + styleId + '">.menu li:hover > a, .menu li.current-menu-item > a, .primary-navigation .menu li:hover > a { background-color: ' + newval + ' !important; }</style>';
                $('#' + styleId).remove();
                $('head').append(style);
            });
        });

        api('menu_hover_text_color', function (value) {
            value.bind(function (newval) {
                var styleId = 'blockenix-menu-hover-text';
                var style = '<style id="' + styleId + '">.menu li:hover > a, .menu li.current-menu-item > a, .primary-navigation .menu li:hover > a { color: ' + newval + ' !important; }</style>';
                $('#' + styleId).remove();
                $('head').append(style);
            });
        });

        // ============================================
        // FOOTER COLORS
        // ============================================
        
        api('footer_background_color', function (value) {
            value.bind(function (newval) {
                var styleId = 'blockenix-footer-bg-color';
                var $footer = $('.site-footer');
                var bgStyle = '';
                
                if (newval && newval !== 'transparent' && (newval === '#1a1a2e' || newval === '#16213e')) {
                    // Apply gradient for default colors
                    bgStyle = 'background: linear-gradient(135deg, ' + newval + ' 0%, #16213e 100%) !important; background-color: ' + newval + ' !important;';
                } else if (newval && newval !== 'transparent') {
                    // Apply solid color for other colors
                    bgStyle = 'background: ' + newval + ' !important; background-color: ' + newval + ' !important;';
                } else {
                    // Transparent
                    bgStyle = 'background-color: transparent !important; background: none !important;';
                }
                
                var style = '<style id="' + styleId + '">.site-footer { ' + bgStyle + ' }</style>';
                $('#' + styleId).remove();
                $('head').append(style);
            });
        });
        
        api('footer_text_color', function (value) {
            value.bind(function (newval) {
                var styleId = 'blockenix-footer-text-color';
                var style = '<style id="' + styleId + '">.site-footer, .site-footer p, .site-footer a, .site-footer .footer-bottom, .site-footer .footer-widget, .site-footer .footer-widget-title, .site-footer .footer-widget p, .site-footer .footer-widget ul, .site-footer .footer-widget li { color: ' + newval + ' !important; } .site-footer .footer-widget a { color: ' + newval + ' !important; opacity: 0.9; } .site-footer .footer-widget a:hover { color: ' + newval + ' !important; opacity: 1; }</style>';
                $('#' + styleId).remove();
                $('head').append(style);
            });
        });

        api('footer_text_color', function (value) {
            value.bind(function (newval) {
                $('.site-footer, .site-footer p, .site-footer a, .site-footer .footer-bottom, .site-footer *').css('color', newval);
            });
        });

        // ============================================
        // GLOBAL COLORS
        // ============================================
        
        api('global_text_color', function (value) {
            value.bind(function (newval) {
                $('body, p, .entry-summary, .entry-content, article').css('color', newval);
            });
        });

        api('heading_text_color', function (value) {
            value.bind(function (newval) {
                $('h1, h2, h3, h4, h5, h6, .entry-title, .entry-title a, .entry-header h1, .entry-header h2').css('color', newval);
            });
        });

        // ============================================
        // TYPOGRAPHY - RESPONSIVE FONT SIZES
        // ============================================
        
        api('body_font_size_desktop', function (value) {
            value.bind(function (newval) {
                var styleId = 'blockenix-body-font-desktop';
                var style = '<style id="' + styleId + '">body { font-size: ' + newval + 'px !important; }</style>';
                $('#' + styleId).remove();
                $('head').append(style);
            });
        });

        api('body_font_size_tablet', function (value) {
            value.bind(function (newval) {
                var styleId = 'blockenix-body-font-tablet';
                var style = '<style id="' + styleId + '">@media (max-width: 768px) { body { font-size: ' + newval + 'px !important; } }</style>';
                $('#' + styleId).remove();
                $('head').append(style);
            });
        });

        api('body_font_size_mobile', function (value) {
            value.bind(function (newval) {
                var styleId = 'blockenix-body-font-mobile';
                var style = '<style id="' + styleId + '">@media (max-width: 480px) { body { font-size: ' + newval + 'px !important; } }</style>';
                $('#' + styleId).remove();
                $('head').append(style);
            });
        });

        // Heading Font Sizes (H1-H6)
        var headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
        var devices = ['desktop', 'tablet', 'mobile'];
        
        headings.forEach(function (heading) {
            devices.forEach(function (device) {
                var settingId = heading + '_font_size_' + device;
                api(settingId, function (value) {
                    value.bind(function (newval) {
                        var selector = heading.toUpperCase();
                        var mediaQuery = '';
                        
                        if (device === 'tablet') {
                            mediaQuery = '@media (max-width: 768px) { ';
                        } else if (device === 'mobile') {
                            mediaQuery = '@media (max-width: 480px) { ';
                        }
                        
                        var styleId = 'blockenix-' + settingId.replace(/_/g, '-');
                        var style = '<style id="' + styleId + '">' + mediaQuery + selector + ' { font-size: ' + newval + 'px !important; }' + (mediaQuery ? ' }' : '') + '</style>';
                        $('#' + styleId).remove();
                        $('head').append(style);
                    });
                });
            });

            // Font Weight
            api(heading + '_font_weight', function (value) {
                value.bind(function (newval) {
                    $(heading.toUpperCase()).css('font-weight', newval);
                });
            });

            // Font Style
            api(heading + '_font_style', function (value) {
                value.bind(function (newval) {
                    $(heading.toUpperCase()).css('font-style', newval);
                });
            });

            // Text Alignment
            api(heading + '_text_align', function (value) {
                value.bind(function (newval) {
                    $(heading.toUpperCase()).css('text-align', newval);
                });
            });
        });

        // Body Typography
        api('body_font_weight', function (value) {
            value.bind(function (newval) {
                $('body').css('font-weight', newval);
            });
        });

        api('body_font_style', function (value) {
            value.bind(function (newval) {
                $('body').css('font-style', newval);
            });
        });

        api('body_text_align', function (value) {
            value.bind(function (newval) {
                $('body, p').css('text-align', newval);
            });
        });

        api('body_font_family', function (value) {
            value.bind(function (newval) {
                $('body').css('font-family', newval);
            });
        });

        api('heading_font_family', function (value) {
            value.bind(function (newval) {
                $('h1, h2, h3, h4, h5, h6, .entry-title').css('font-family', newval);
            });
        });

        // ============================================
        // LAYOUT SETTINGS
        // ============================================
        
        api('blockenix_container_type', function (value) {
            value.bind(function (newval) {
                $('.container, .container-fluid, .custom-width').removeClass('container container-fluid custom-width').addClass(newval);
            });
        });

        api('blockenix_custom_width', function (value) {
            value.bind(function (newval) {
                $('.custom-width').css('max-width', newval + 'px');
            });
        });

        // ============================================
        // LOGO SETTINGS
        // ============================================
        
        api('blockenix_logo_width', function (value) {
            value.bind(function (newval) {
                $('.site-logo img').css('width', newval + 'px');
            });
        });

        api('blockenix_logo_height', function (value) {
            value.bind(function (newval) {
                $('.site-logo img').css('height', newval + 'px');
            });
        });

        // ============================================
        // BUTTON SETTINGS
        // ============================================
        
        var buttonSelectors = '.read-more, button, input[type="button"], input[type="submit"], .wp-block-button__link, .wp-element-button';
        var buttonHoverSelectors = '.read-more:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover, .wp-block-button__link:hover, .wp-element-button:hover';

        // Button Background Color
        api('button_bg_color', function (value) {
            value.bind(function (newval) {
                var styleId = 'blockenix-button-bg-color';
                var style = '<style id="' + styleId + '">' + buttonSelectors + ' { background-color: ' + newval + ' !important; background: ' + newval + ' !important; }</style>';
                $('#' + styleId).remove();
                $('head').append(style);
            });
        });

        // Button Hover Background Color
        api('button_hover_bg_color', function (value) {
            value.bind(function (newval) {
                var styleId = 'blockenix-button-hover-bg';
                var style = '<style id="' + styleId + '">' + buttonHoverSelectors + ' { background-color: ' + newval + ' !important; }</style>';
                $('#' + styleId).remove();
                $('head').append(style);
            });
        });

        // Button Text Color
        api('button_text_color', function (value) {
            value.bind(function (newval) {
                var styleId = 'blockenix-button-text-color';
                var style = '<style id="' + styleId + '">' + buttonSelectors + ' { color: ' + newval + ' !important; }</style>';
                $('#' + styleId).remove();
                $('head').append(style);
            });
        });

        // Button Text Hover Color
        api('button_text_hover_color', function (value) {
            value.bind(function (newval) {
                var styleId = 'blockenix-button-hover-text';
                var style = '<style id="' + styleId + '">' + buttonHoverSelectors + ' { color: ' + newval + ' !important; }</style>';
                $('#' + styleId).remove();
                $('head').append(style);
            });
        });

        // Button Font Family
        api('button_font_family', function (value) {
            value.bind(function (newval) {
                $(buttonSelectors).css('font-family', newval);
            });
        });

        // Button Font Sizes (Responsive)
        api('button_font_size_desktop', function (value) {
            value.bind(function (newval) {
                var styleId = 'blockenix-button-font-desktop';
                var style = '<style id="' + styleId + '">' + buttonSelectors + ' { font-size: ' + newval + 'px !important; }</style>';
                $('#' + styleId).remove();
                $('head').append(style);
            });
        });

        api('button_font_size_tablet', function (value) {
            value.bind(function (newval) {
                var styleId = 'blockenix-button-font-tablet';
                var style = '<style id="' + styleId + '">@media (max-width: 768px) { ' + buttonSelectors + ' { font-size: ' + newval + 'px !important; } }</style>';
                $('#' + styleId).remove();
                $('head').append(style);
            });
        });

        api('button_font_size_mobile', function (value) {
            value.bind(function (newval) {
                var styleId = 'blockenix-button-font-mobile';
                var style = '<style id="' + styleId + '">@media (max-width: 480px) { ' + buttonSelectors + ' { font-size: ' + newval + 'px !important; } }</style>';
                $('#' + styleId).remove();
                $('head').append(style);
            });
        });

        // Button Alignment
        api('button_text_align', function (value) {
            value.bind(function (newval) {
                $(buttonSelectors).css('text-align', newval);
            });
        });

        // Button Font Weight
        api('button_font_weight', function (value) {
            value.bind(function (newval) {
                $(buttonSelectors).css('font-weight', newval);
            });
        });

        // Button Font Style
        api('button_font_style', function (value) {
            value.bind(function (newval) {
                $(buttonSelectors).css('font-style', newval);
            });
        });

        // Button Padding
        api('button_padding_top', function (value) {
            value.bind(function (newval) {
                $(buttonSelectors).each(function() {
                    var $this = $(this);
                    var currentPadding = $this.css('padding');
                    var paddingParts = currentPadding.split(' ');
                    if (paddingParts.length === 4) {
                        $this.css('padding', newval + 'px ' + paddingParts[1] + ' ' + paddingParts[2] + ' ' + paddingParts[3]);
                    } else {
                        var right = api('button_padding_right').get();
                        var bottom = api('button_padding_bottom').get();
                        var left = api('button_padding_left').get();
                        $this.css('padding', newval + 'px ' + right + 'px ' + bottom + 'px ' + left + 'px');
                    }
                });
            });
        });

        api('button_padding_right', function (value) {
            value.bind(function (newval) {
                $(buttonSelectors).each(function() {
                    var $this = $(this);
                    var top = api('button_padding_top').get();
                    var bottom = api('button_padding_bottom').get();
                    var left = api('button_padding_left').get();
                    $this.css('padding', top + 'px ' + newval + 'px ' + bottom + 'px ' + left + 'px');
                });
            });
        });

        api('button_padding_bottom', function (value) {
            value.bind(function (newval) {
                $(buttonSelectors).each(function() {
                    var $this = $(this);
                    var top = api('button_padding_top').get();
                    var right = api('button_padding_right').get();
                    var left = api('button_padding_left').get();
                    $this.css('padding', top + 'px ' + right + 'px ' + newval + 'px ' + left + 'px');
                });
            });
        });

        api('button_padding_left', function (value) {
            value.bind(function (newval) {
                $(buttonSelectors).each(function() {
                    var $this = $(this);
                    var top = api('button_padding_top').get();
                    var right = api('button_padding_right').get();
                    var bottom = api('button_padding_bottom').get();
                    $this.css('padding', top + 'px ' + right + 'px ' + bottom + 'px ' + newval + 'px');
                });
            });
        });

        // Button Margin
        api('button_margin_top', function (value) {
            value.bind(function (newval) {
                $(buttonSelectors).each(function() {
                    var $this = $(this);
                    var right = api('button_margin_right').get();
                    var bottom = api('button_margin_bottom').get();
                    var left = api('button_margin_left').get();
                    $this.css('margin', newval + 'px ' + right + 'px ' + bottom + 'px ' + left + 'px');
                });
            });
        });

        api('button_margin_right', function (value) {
            value.bind(function (newval) {
                $(buttonSelectors).each(function() {
                    var $this = $(this);
                    var top = api('button_margin_top').get();
                    var bottom = api('button_margin_bottom').get();
                    var left = api('button_margin_left').get();
                    $this.css('margin', top + 'px ' + newval + 'px ' + bottom + 'px ' + left + 'px');
                });
            });
        });

        api('button_margin_bottom', function (value) {
            value.bind(function (newval) {
                $(buttonSelectors).each(function() {
                    var $this = $(this);
                    var top = api('button_margin_top').get();
                    var right = api('button_margin_right').get();
                    var left = api('button_margin_left').get();
                    $this.css('margin', top + 'px ' + right + 'px ' + newval + 'px ' + left + 'px');
                });
            });
        });

        api('button_margin_left', function (value) {
            value.bind(function (newval) {
                $(buttonSelectors).each(function() {
                    var $this = $(this);
                    var top = api('button_margin_top').get();
                    var right = api('button_margin_right').get();
                    var bottom = api('button_margin_bottom').get();
                    $this.css('margin', top + 'px ' + right + 'px ' + bottom + 'px ' + newval + 'px');
                });
            });
        });

        // Button Border
        api('button_border_width', function (value) {
            value.bind(function (newval) {
                var style = api('button_border_style').get();
                var color = api('button_border_color').get();
                $(buttonSelectors).css({
                    'border-width': newval + 'px',
                    'border-style': style,
                    'border-color': color
                });
            });
        });

        api('button_border_style', function (value) {
            value.bind(function (newval) {
                var width = api('button_border_width').get();
                var color = api('button_border_color').get();
                $(buttonSelectors).css({
                    'border-width': width + 'px',
                    'border-style': newval,
                    'border-color': color
                });
            });
        });

        api('button_border_color', function (value) {
            value.bind(function (newval) {
                var width = api('button_border_width').get();
                var style = api('button_border_style').get();
                $(buttonSelectors).css({
                    'border-width': width + 'px',
                    'border-style': style,
                    'border-color': newval
                });
            });
        });

        api('button_border_radius', function (value) {
            value.bind(function (newval) {
                $(buttonSelectors).css('border-radius', newval + 'px');
            });
        });

    });

})(jQuery);