{% extends "admin/change_form.html" %}
{% load static %}

{% block extrastyle %}
{{ block.super }}
<style>
/* 版本切换字段组样式 */
.version-v1, .version-v2 {
    transition: all 0.3s ease-in-out;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    background: #f9f9f9;
}

/* 当前激活版本的样式 */
.version-active {
    border-left: 4px solid #417690;
    background: #f0f8ff;
}

/* 隐藏非活动版本 */
.version-hidden {
    display: none;
}

/* 单选框样式优化 */
.field-api_version .radiolist {
    display: flex;
    gap: 30px;
    margin: 10px 0;
}

.field-api_version .radiolist li {
    list-style: none;
    display: flex;
    align-items: center;
}

.field-api_version .radiolist input[type="radio"] {
    margin-right: 8px;
}

/* 字段集标题样式 */
fieldset .module h2 {
    background: #79aec8;
    color: white;
    padding: 8px 15px;
    margin: 0 -15px 15px -15px;
    border-radius: 4px 4px 0 0;
}

/* 警告和提示信息样式 */
.alert {
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 15px;
    border: 1px solid transparent;
}

.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

/* 表单字段标签样式 */
.field-box {
    margin-bottom: 15px;
}

.field-box label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

/* 帮助文本样式 */
.help {
    color: #666;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}
</style>
{% endblock %}

{% block extrahead %}
{{ block.super }}
<script>
(function($) {
    'use strict';
    
    // DOM加载完成后执行
    $(document).ready(function() {
        console.log('AI配置版本切换脚本已加载');
        
        function toggleVersionFields() {
            var selectedVersion = $('input[name="api_version"]:checked').val();
            console.log('当前选择的版本:', selectedVersion);
            
            // 隐藏所有版本相关字段组
            $('.version-v1, .version-v2').addClass('version-hidden').removeClass('version-active');
            
            // 禁用所有版本字段
            $('.version-v1').find('input, select, textarea').prop('disabled', true);
            $('.version-v2').find('input, select, textarea').prop('disabled', true);
            
            // 显示当前选中的版本字段并启用
            if (selectedVersion === 'v1') {
                $('.version-v1').removeClass('version-hidden').addClass('version-active');
                $('.version-v1').find('input, select, textarea').prop('disabled', false);
                console.log('已切换到旧版API配置');
            } else if (selectedVersion === 'v2') {
                $('.version-v2').removeClass('version-hidden').addClass('version-active');
                $('.version-v2').find('input, select, textarea').prop('disabled', false);
                console.log('已切换到新版千帆API配置');
            }
        }
        
        // 初始加载时执行
        toggleVersionFields();
        
        // 版本切换时执行
        $('input[name="api_version"]').change(function() {
            console.log('版本切换事件触发');
            toggleVersionFields();
        });
        
        // 表单提交前验证
        $('form').submit(function(event) {
            console.log('表单提交验证开始');
            var selectedVersion = $('input[name="api_version"]:checked').val();
            var isValid = true;
            var errorMessage = '';
            var errorField = '';
            
            if (selectedVersion === 'v1') {
                var apiKey = $('#id_api_key').val();
                var secretKey = $('#id_secret_key').val();
                
                if (!apiKey || !apiKey.trim()) {
                    isValid = false;
                    errorMessage = '使用旧版API时必须填写API_KEY';
                    errorField = 'api_key';
                } else if (!secretKey || !secretKey.trim()) {
                    isValid = false;
                    errorMessage = '使用旧版API时必须填写SECRET_KEY';
                    errorField = 'secret_key';
                }
            } else if (selectedVersion === 'v2') {
                var authKey = $('#id_authorization_key').val();
                var appId = $('#id_qianfan_appid').val();
                var temperature = parseFloat($('#id_temperature').val()) || 0;
                var topP = parseFloat($('#id_top_p').val()) || 0;
                
                if (!authKey || !authKey.trim()) {
                    isValid = false;
                    errorMessage = '使用新版千帆API时必须填写密钥';
                    errorField = 'authorization_key';
                } else if (!appId || !appId.trim()) {
                    isValid = false;
                    errorMessage = '使用新版千帆API时必须填写千帆AppID';
                    errorField = 'qianfan_appid';
                } else if (temperature !== 0.95 && topP !== 0.8) {
                    if (!confirm('警告：建议temperature和top_p不要同时更改，这可能导致输出结果不可预测。确定要继续吗？')) {
                        isValid = false;
                        errorMessage = '用户取消了提交';
                    }
                }
            }
            
            if (!isValid && errorMessage && errorMessage !== '用户取消了提交') {
                // 高亮显示错误字段
                if (errorField) {
                    $('#' + errorField).closest('.form-row').addClass('errors');
                    $('#' + errorField).focus();
                }
                
                alert('错误：' + errorMessage);
                event.preventDefault();
                return false;
            } else if (!isValid && errorMessage === '用户取消了提交') {
                event.preventDefault();
                return false;
            }
            
            console.log('表单验证通过');
            return true;
        });
        
        // 输入框获取焦点时移除错误样式
        $('input, select, textarea').focus(function() {
            $(this).closest('.form-row').removeClass('errors');
        });
        
        // 为版本切换添加键盘快捷键支持
        $(document).keydown(function(e) {
            // Ctrl+1 切换到旧版，Ctrl+2 切换到新版
            if (e.ctrlKey) {
                if (e.key === '1') {
                    e.preventDefault();
                    $('input[name="api_version"][value="v1"]').prop('checked', true).change();
                    console.log('快捷键：切换到旧版API');
                } else if (e.key === '2') {
                    e.preventDefault();
                    $('input[name="api_version"][value="v2"]').prop('checked', true).change();
                    console.log('快捷键：切换到新版API');
                }
            }
        });
        
        // 添加版本切换提示
        var versionHelp = $('<div class="help" style="margin-top: 10px; font-style: italic;">提示：使用 Ctrl+1 切换到旧版，Ctrl+2 切换到新版</div>');
        $('.field-api_version').append(versionHelp);
    });
    
})(django.jQuery || jQuery);
</script>
{% endblock %}

{% block content %}
{{ block.super }}
{% endblock %}