(function($) {
    'use strict';

    function toggleSections(source) {
        $('.kng-maintenance-section').removeClass('is-active');
        $('.kng-maintenance-section[data-section="' + source + '"]').addClass('is-active');
    }

    function toggleTemplateContent(templateId) {
        $('.kng-maintenance-content-block').removeClass('is-active');
        $('.kng-maintenance-content-block[data-template="' + templateId + '"]').addClass('is-active');
    }

    $(document).ready(function() {
        var $sourceInputs = $('input[name="kng_maintenance_settings[template_source]"]');
        var activeSource = $sourceInputs.filter(':checked').val() || 'built_in';
        toggleSections(activeSource);

        var $templateInputs = $('input[name="kng_maintenance_settings[template_id]"]');
        var activeTemplate = $templateInputs.filter(':checked').val() || 'minimal';
        toggleTemplateContent(activeTemplate);

        $sourceInputs.on('change', function() {
            toggleSections($(this).val());
        });

        $templateInputs.on('change', function() {
            toggleTemplateContent($(this).val());
        });

        var $segment = $('#ka-v3-theme-segment');
        var $buttons = $segment.find('.ka-v3-segmented-btn');
        var mql = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
        var mode = ($segment.attr('data-active') || 'dark').toString();
        var mqlHandler = null;

        function saveUISetting(value) {
            if (!window.KNGMaintenance) {
                return;
            }
            $.post(KNGMaintenance.ajaxUrl, {
                action: 'king_addons_save_dashboard_ui',
                nonce: KNGMaintenance.themeNonce,
                key: 'theme_mode',
                value: value
            });
        }

        function updateSegment(activeMode) {
            $segment.attr('data-active', activeMode);
            $buttons.each(function() {
                var theme = ($(this).data('theme') || 'dark').toString();
                $(this).attr('aria-pressed', theme === activeMode ? 'true' : 'false');
            });
        }

        function applyTheme(isDark) {
            $('body').toggleClass('ka-v3-dark', isDark);
            document.documentElement.classList.toggle('ka-v3-dark', isDark);
        }

        function setThemeMode(nextMode, save) {
            mode = (nextMode || 'dark').toString();
            updateSegment(mode);

            if (mqlHandler && mql) {
                if (mql.removeEventListener) {
                    mql.removeEventListener('change', mqlHandler);
                } else if (mql.removeListener) {
                    mql.removeListener(mqlHandler);
                }
                mqlHandler = null;
            }

            if (mode === 'auto') {
                applyTheme(!!(mql && mql.matches));
                mqlHandler = function(e) {
                    if (mode !== 'auto') {
                        return;
                    }
                    applyTheme(!!e.matches);
                };
                if (mql) {
                    if (mql.addEventListener) {
                        mql.addEventListener('change', mqlHandler);
                    } else if (mql.addListener) {
                        mql.addListener(mqlHandler);
                    }
                }
            } else {
                applyTheme(mode === 'dark');
            }

            if (save) {
                saveUISetting(mode);
            }
        }

        $segment.on('click', '.ka-v3-segmented-btn', function(e) {
            e.preventDefault();
            setThemeMode(($(this).data('theme') || 'dark').toString(), true);
        });

        window.kaV3ToggleDark = function() {
            var isDark = $('body').hasClass('ka-v3-dark');
            setThemeMode(isDark ? 'light' : 'dark', true);
        };

        setThemeMode(mode, false);
    });
})(jQuery);