/**
 * 自定义器控制功能
 * 关于我们时间轴设置的用户体验
 */

(function($) {
    'use strict';

    // 确保 wp.customize 对象完全加载后再执行
    $(document).ready(function() {
        // 等待 wp.customize 对象可用
        var checkCustomizeReady = function() {
            if (typeof wp !== 'undefined' && wp.customize && wp.customize.bind) {
                wp.customize.bind('ready', function() {
                    // 关于我们时间轴控制功能
                    initAboutTimelineControls();
                    
                    // 视频Banner控制功能
                    initVideoBannerControls();
                    
                    // 业务流程控制功能
                    initBusinessProcessControls();
                });
            } else {
                // 如果 wp.customize 还没准备好，等待 100ms 后重试
                setTimeout(checkCustomizeReady, 100);
            }
        };
        
        checkCustomizeReady();
    });

    // 关于我们时间轴控制功能
    function initAboutTimelineControls() {
        // 时间轴现在使用独立字段面板，不需要额外的控制功能
        // 所有设置都通过WordPress自定义器的标准控件处理
    }

    // 视频Banner控制功能
    function initVideoBannerControls() {
        
        // 视频背景URL验证
        wp.customize('video_banner_video_bg_url', function(setting) {
            setting.bind(function(value) {
                validateVideoUrl(value);
            });
        });
        
        // 高度验证
        wp.customize('video_banner_height', function(setting) {
            setting.bind(function(value) {
                validateHeight(value);
            });
        });
        
        // 添加预设配置按钮
        addVideoBannerPresets();
        
        // 视频背景控制
        initVideoBgControls();
        
        // 内容预设
        addContentPresets();
    }
    
    // 视频URL验证
    function validateVideoUrl(url) {
        if (!url) return;
        
        const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov'];
        const isValidVideo = videoExtensions.some(ext => url.toLowerCase().includes(ext));
        
        if (!isValidVideo && !url.includes('youtube.com') && !url.includes('vimeo.com')) {
            showNotification('请输入有效的视频URL（支持MP4、WebM、OGG格式或YouTube/Vimeo链接）', 'warning');
        }
    }
    
    // 高度验证
    function validateHeight(height) {
        const numHeight = parseInt(height);
        if (numHeight < 300) {
            showNotification('建议高度不少于300px以确保良好的视觉效果', 'warning');
        } else if (numHeight > 1200) {
            showNotification('建议高度不超过1200px以确保页面性能', 'warning');
        }
    }
    
    // 添加预设配置按钮
    function addVideoBannerPresets() {
        // 确保 wp.customize 可用
        if (typeof wp === 'undefined' || !wp.customize || !wp.customize.section) {
            return;
        }
        
        const section = wp.customize.section('video_banner_section');
        if (!section) return;
        
        const presetContainer = $('<div class="video-banner-presets"></div>');
        presetContainer.append('<h4>快速预设</h4>');
        
        const presets = [
            {
                name: '标准配置',
                settings: {
                    video_banner_height: 800,
                    video_banner_video_bg_opacity: 0.7,
                    video_banner_video_bg_lazy_load: false
                }
            },
            {
                name: '高清大屏',
                settings: {
                    video_banner_height: 1000,
                    video_banner_video_bg_opacity: 0.8,
                    video_banner_video_bg_lazy_load: false
                }
            },
            {
                name: '移动优化',
                settings: {
                    video_banner_height: 600,
                    video_banner_video_bg_opacity: 0.6,
                    video_banner_video_bg_lazy_load: true
                }
            }
        ];
        
        presets.forEach(function(preset) {
            const button = $('<button type="button" class="button preset-button">' + preset.name + '</button>');
            button.on('click', function() {
                applyPreset(preset.settings);
                showNotification('已应用 "' + preset.name + '" 预设配置', 'success');
            });
            presetContainer.append(button);
        });
        
        // 将预设按钮添加到section容器
        setTimeout(function() {
            const sectionContainer = section.container.find('.accordion-section-content');
            if (sectionContainer.length) {
                sectionContainer.prepend(presetContainer);
            }
        }, 100);
    }
    
    // 应用预设配置
    function applyPreset(settings) {
        // 确保 wp.customize 可用
        if (typeof wp === 'undefined' || !wp.customize) {
            return;
        }
        
        Object.keys(settings).forEach(function(key) {
            const setting = wp.customize(key);
            if (setting) {
                setting.set(settings[key]);
            }
        });
    }
    
    // 视频背景控制
    function initVideoBgControls() {
        // 确保 wp.customize 可用
        if (typeof wp === 'undefined' || !wp.customize) {
            return;
        }
        
        // 视频背景启用/禁用控制
        wp.customize('video_banner_video_bg_enabled', function(setting) {
            setting.bind(function(enabled) {
                toggleVideoBgControls(enabled);
            });
        });
        
        // 初始状态 - 安全获取设置值
        setTimeout(function() {
            const enabledSetting = wp.customize('video_banner_video_bg_enabled');
            if (enabledSetting) {
                const initialEnabled = enabledSetting();
                toggleVideoBgControls(initialEnabled);
            }
        }, 50);
        
        // 不透明度控制
        wp.customize('video_banner_video_bg_opacity', function(setting) {
            setting.bind(function(opacity) {
                updateOpacityDisplay(opacity);
            });
        });
    }
    
    // 切换视频背景控制显示
    function toggleVideoBgControls(enabled) {
        // 确保 wp.customize 可用
        if (typeof wp === 'undefined' || !wp.customize || !wp.customize.control) {
            return;
        }
        
        const controls = [
            'video_banner_video_bg_url',
            'video_banner_video_bg_opacity',
            'video_banner_video_bg_lazy_load'
        ];
        
        controls.forEach(function(controlId) {
            const control = wp.customize.control(controlId);
            if (control) {
                if (enabled) {
                    control.container.show();
                } else {
                    control.container.hide();
                }
            }
        });
    }
    
    // 更新不透明度显示
    function updateOpacityDisplay(opacity) {
        // 确保 wp.customize 可用
        if (typeof wp === 'undefined' || !wp.customize || !wp.customize.control) {
            return;
        }
        
        const control = wp.customize.control('video_banner_video_bg_opacity');
        if (control) {
            const label = control.container.find('.customize-control-title');
            label.text('视频背景不透明度 (' + Math.round(opacity * 100) + '%)');
        }
    }
    
    // 添加内容预设
    function addContentPresets() {
        const contentPresets = [
            {
                name: '企业介绍',
                content: {
                    video_banner_content_subtitle: 'COMPANY INTRODUCTION',
                    video_banner_content_title: '能辉能源',
                    video_banner_content_description: '专业的能源解决方案提供商，致力于可持续发展'
                }
            },
            {
                name: '产品展示',
                content: {
                    video_banner_content_subtitle: 'PRODUCT SHOWCASE',
                    video_banner_content_title: '创新产品',
                    video_banner_content_description: '领先的技术，卓越的品质，为您提供最佳解决方案'
                }
            },
            {
                name: '服务介绍',
                content: {
                    video_banner_content_subtitle: 'OUR SERVICES',
                    video_banner_content_title: '专业服务',
                    video_banner_content_description: '全方位的服务支持，让您的项目更加成功'
                }
            }
        ];
        
        // 添加内容预设按钮
        setTimeout(function() {
            // 确保 wp.customize 可用
            if (typeof wp === 'undefined' || !wp.customize || !wp.customize.control) {
                return;
            }
            
            const titleControl = wp.customize.control('video_banner_content_title');
            if (titleControl) {
                const presetContainer = $('<div class="content-presets" style="margin-top: 10px;"></div>');
                presetContainer.append('<label>内容预设：</label>');
                
                contentPresets.forEach(function(preset) {
                    const button = $('<button type="button" class="button button-small" style="margin: 2px;">' + preset.name + '</button>');
                    button.on('click', function() {
                        // 确保 wp.customize 可用
                        if (typeof wp === 'undefined' || !wp.customize) {
                            return;
                        }
                        
                        Object.keys(preset.content).forEach(function(key) {
                            const setting = wp.customize(key);
                            if (setting) {
                                setting.set(preset.content[key]);
                            }
                        });
                        showNotification('已应用 "' + preset.name + '" 内容预设', 'success');
                    });
                    presetContainer.append(button);
                });
                
                titleControl.container.append(presetContainer);
            }
        }, 200);
    }
    
    // 显示通知
    function showNotification(message, type) {
        type = type || 'info';
        
        // 移除现有通知
        $('.video-banner-notification').remove();
        
        const notification = $('<div class="video-banner-notification notice notice-' + type + ' is-dismissible"><p>' + message + '</p></div>');
        
        // 添加关闭按钮功能
        notification.on('click', '.notice-dismiss', function() {
            notification.fadeOut();
        });
        
        // 显示通知
        $('#customize-controls').prepend(notification);
        
        // 自动隐藏
        setTimeout(function() {
            notification.fadeOut();
        }, 5000);
    }
    
    // 业务流程控制功能
    function initBusinessProcessControls() {
        // 业务流程显示控制
        wp.customize('business_process_show', function(setting) {
            setting.bind(function(value) {
                toggleBusinessProcessSections(value);
            });
        });
        
        // 初始化时检查显示状态
        const initialShow = wp.customize('business_process_show')();
        toggleBusinessProcessSections(initialShow);
        
        // 添加Tab预设配置
        addBusinessProcessPresets();
        
        // 图片验证
        initBusinessProcessImageValidation();
        
        // 添加批量操作功能
        addBusinessProcessBatchOperations();
    }
    
    // 切换业务流程相关设置的显示状态
    function toggleBusinessProcessSections(show) {
        const sections = [
            'business_process_tab1_section',
            'business_process_tab2_section', 
            'business_process_tab3_section',
            'business_process_tab4_section'
        ];
        
        sections.forEach(function(sectionId) {
            const section = wp.customize.section(sectionId);
            if (section) {
                if (show) {
                    section.container.show();
                } else {
                    section.container.hide();
                }
            }
        });
    }
    
    // 添加业务流程预设配置
    function addBusinessProcessPresets() {
        setTimeout(function() {
            const basicSection = wp.customize.section('business_process_basic_section');
            if (basicSection && basicSection.container) {
                const presetContainer = $('<div class="business-process-presets" style="margin: 15px 0; padding: 10px; background: #f9f9f9; border-radius: 4px;"></div>');
                
                presetContainer.append('<h4 style="margin: 0 0 10px 0; font-size: 12px; color: #555;">快速配置预设</h4>');
                
                const presets = [
                    {
                        name: '默认设计流程',
                        config: {
                            title: '设计业务流程',
                            subtitle: '专业的设计流程，确保项目高质量完成',
                            tab1: { title: '可行性研究', description: '前期调研并综合考虑"可行性、经济性、安全性"三个方面，多方案比较，确定最优设计方案和实施策略。' },
                            tab2: { title: '初步设计', description: '在基本方案确定的基础上，进行"精细设计"，确定主要设备的选型和布置，形成初步设计方案。' },
                            tab3: { title: '施工图设计', description: '基于初步设计方案，进行详细的施工图设计，确保设计方案的可实施性和工程质量。' },
                            tab4: { title: '竣工图设计', description: '项目完工后的竣工图设计，真实反映工程实际建设情况，为后续运维提供准确的技术资料。' }
                        }
                    },
                    {
                        name: '工程管理流程',
                        config: {
                            title: '工程管理流程',
                            subtitle: '规范化的工程管理，保障项目顺利实施',
                            tab1: { title: '项目启动', description: '项目立项、团队组建、资源配置，明确项目目标和实施计划。' },
                            tab2: { title: '方案设计', description: '深入分析需求，制定详细的技术方案和实施策略。' },
                            tab3: { title: '实施执行', description: '按照既定方案执行项目，严格控制质量、进度和成本。' },
                            tab4: { title: '验收交付', description: '项目验收、文档整理、知识转移，确保项目成功交付。' }
                        }
                    }
                ];
                
                presets.forEach(function(preset) {
                    const button = $('<button type="button" class="button button-secondary" style="margin-right: 5px; margin-bottom: 5px; font-size: 11px;">' + preset.name + '</button>');
                    
                    button.on('click', function(e) {
                        e.preventDefault();
                        applyBusinessProcessPreset(preset.config);
                        showNotification('已应用预设配置：' + preset.name, 'success');
                    });
                    
                    presetContainer.append(button);
                });
                
                // 添加重置按钮
                const resetButton = $('<button type="button" class="button button-link-delete" style="margin-left: 10px; font-size: 11px;">重置为默认</button>');
                resetButton.on('click', function(e) {
                    e.preventDefault();
                    resetBusinessProcessSettings();
                    showNotification('已重置为默认设置', 'info');
                });
                presetContainer.append(resetButton);
                
                basicSection.container.find('.customize-section-description-container').after(presetContainer);
            }
        }, 500);
    }
    
    // 应用业务流程预设配置
    function applyBusinessProcessPreset(config) {
        wp.customize('business_process_title').set(config.title);
        wp.customize('business_process_subtitle').set(config.subtitle);
        
        for (let i = 1; i <= 4; i++) {
            const tabConfig = config['tab' + i];
            if (tabConfig) {
                wp.customize('business_process_tab' + i + '_title').set(tabConfig.title);
                wp.customize('business_process_tab' + i + '_description').set(tabConfig.description);
            }
        }
    }
    
    // 重置业务流程设置
    function resetBusinessProcessSettings() {
        const defaults = {
            'business_process_show': true,
            'business_process_title': '设计业务流程',
            'business_process_subtitle': '专业的设计流程，确保项目高质量完成',
            'business_process_tab1_title': '可行性研究',
            'business_process_tab1_description': '前期调研并综合考虑"可行性、经济性、安全性"三个方面，多方案比较，确定最优设计方案和实施策略。',
            'business_process_tab2_title': '初步设计',
            'business_process_tab2_description': '在基本方案确定的基础上，进行"精细设计"，确定主要设备的选型和布置，形成初步设计方案。',
            'business_process_tab3_title': '施工图设计',
            'business_process_tab3_description': '基于初步设计方案，进行详细的施工图设计，确保设计方案的可实施性和工程质量。',
            'business_process_tab4_title': '竣工图设计',
            'business_process_tab4_description': '项目完工后的竣工图设计，真实反映工程实际建设情况，为后续运维提供准确的技术资料。'
        };
        
        Object.keys(defaults).forEach(function(key) {
            if (wp.customize(key)) {
                wp.customize(key).set(defaults[key]);
            }
        });
    }
    
    // 业务流程图片验证
    function initBusinessProcessImageValidation() {
        for (let i = 1; i <= 4; i++) {
            wp.customize('business_process_tab' + i + '_image', function(setting) {
                setting.bind(function(value) {
                    validateBusinessProcessImage(value, i);
                });
            });
        }
    }
    
    // 验证业务流程图片
    function validateBusinessProcessImage(imageUrl, tabNumber) {
        if (!imageUrl) {
            showNotification('Tab ' + String(tabNumber).padStart(2, '0') + ' 的图片不能为空', 'warning');
            return;
        }
        
        // 检查图片格式
        const validExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg'];
        const isValidImage = validExtensions.some(ext => imageUrl.toLowerCase().includes(ext));
        
        if (!isValidImage) {
            showNotification('Tab ' + String(tabNumber).padStart(2, '0') + ' 请选择有效的图片格式（JPG、PNG、GIF、WebP、SVG）', 'warning');
        }
    }
    
    // 添加批量操作功能
    function addBusinessProcessBatchOperations() {
        setTimeout(function() {
            const basicSection = wp.customize.section('business_process_basic_section');
            if (basicSection && basicSection.container) {
                const batchContainer = $('<div class="business-process-batch-ops" style="margin: 15px 0; padding: 10px; background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px;"></div>');
                
                batchContainer.append('<h4 style="margin: 0 0 10px 0; font-size: 12px; color: #856404;">批量操作</h4>');
                
                // 批量设置相同图片
                const imageInput = $('<input type="text" placeholder="输入图片URL，将应用到所有Tab" style="width: 100%; margin-bottom: 5px; padding: 4px;">');
                const applyImageButton = $('<button type="button" class="button button-secondary" style="font-size: 11px;">应用到所有Tab</button>');
                
                applyImageButton.on('click', function(e) {
                    e.preventDefault();
                    const imageUrl = imageInput.val().trim();
                    if (imageUrl) {
                        for (let i = 1; i <= 4; i++) {
                            wp.customize('business_process_tab' + i + '_image').set(imageUrl);
                        }
                        showNotification('已将图片应用到所有Tab', 'success');
                        imageInput.val('');
                    } else {
                        showNotification('请输入有效的图片URL', 'warning');
                    }
                });
                
                batchContainer.append(imageInput);
                batchContainer.append(applyImageButton);
                
                basicSection.container.find('.business-process-presets').after(batchContainer);
            }
        }, 600);
    }

})(jQuery);