/**
 * LLM 配置组件
 */
app.component('llm-config-page', {
    props: ['config'],
    emits: ['save'],
    setup(props, { emit }) {
        const { ref, reactive, watch } = Vue;
        
        // 表单数据
        const form = reactive({
            default_provider: '',
            default_model: '',
            anthropic_api_key: '',
            openai_api_key: '',
            deepseek_api_key: '',
            zhipu_api_key: '',
            minimax_api_key: '',
            minimax_group_id: '',
            moonshot_api_key: '',
            gemini_api_key: ''
        });
        
        // 监听 props 变化
        watch(() => props.config, (newVal) => {
            if (newVal) {
                Object.assign(form, newVal);
            }
        }, { immediate: true, deep: true });
        
        // 提供商列表
        const providers = [
            { value: 'anthropic', label: 'Anthropic (Claude)', region: 'overseas', models: ['claude-sonnet-4-20250514', 'claude-3-5-sonnet-20241022', 'claude-3-opus-20240229'] },
            { value: 'openai', label: 'OpenAI (GPT)', region: 'overseas', models: ['gpt-4o', 'gpt-4-turbo', 'gpt-3.5-turbo'] },
            { value: 'gemini', label: 'Google Gemini', region: 'overseas', models: ['gemini-2.0-flash', 'gemini-1.5-pro'] },
            { value: 'deepseek', label: 'DeepSeek', region: 'domestic', models: ['deepseek-chat', 'deepseek-coder'] },
            { value: 'zhipu', label: '智谱 (GLM)', region: 'domestic', models: ['glm-4-flash', 'glm-4', 'glm-3-turbo'] },
            { value: 'minimax', label: 'MiniMax', region: 'domestic', models: ['abab6.5s-chat', 'abab5.5-chat'] },
            { value: 'moonshot', label: 'Moonshot (Kimi)', region: 'domestic', models: ['moonshot-v1-8k', 'moonshot-v1-32k', 'moonshot-v1-128k'] }
        ];
        
        // 当前选中提供商的模型列表
        const currentModels = Vue.computed(() => {
            const provider = providers.find(p => p.value === form.default_provider);
            return provider ? provider.models : [];
        });
        
        // 测试连接
        const testing = ref(null);
        async function testConnection(provider) {
            testing.value = provider;
            try {
                const res = await fetch(`/api/llm/test/${provider}`, { method: 'POST' });
                const data = await res.json();
                if (data.success) {
                    ElementPlus.ElMessage.success(`${provider} 连接成功`);
                } else {
                    ElementPlus.ElMessage.error(`${provider} 连接失败: ${data.error}`);
                }
            } catch (e) {
                ElementPlus.ElMessage.error(`测试失败: ${e.message}`);
            }
            testing.value = null;
        }
        
        // 保存配置
        function handleSave() {
            emit('save', { ...form });
        }
        
        return {
            form,
            providers,
            currentModels,
            testing,
            testConnection,
            handleSave
        };
    },
    template: `
        <div class="llm-config">
            <el-card class="config-card">
                <template #header>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span>默认提供商</span>
                    </div>
                </template>
                <el-form :model="form" label-width="120px">
                    <el-form-item label="默认提供商">
                        <el-select v-model="form.default_provider" style="width: 300px">
                            <el-option
                                v-for="p in providers"
                                :key="p.value"
                                :value="p.value"
                                :label="p.label"
                            >
                                <span>{{ p.label }}</span>
                                <el-tag size="small" :type="p.region === 'domestic' ? 'success' : ''" style="margin-left: 8px">
                                    {{ p.region === 'domestic' ? '国内' : '境外' }}
                                </el-tag>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="默认模型">
                        <el-select v-model="form.default_model" style="width: 300px">
                            <el-option v-for="m in currentModels" :key="m" :value="m" :label="m" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-card>
            
            <!-- 境外服务 -->
            <el-card class="config-card">
                <template #header>
                    <span>境外服务 <el-tag size="small" type="warning">需要代理</el-tag></span>
                </template>
                
                <div class="provider-card">
                    <div class="provider-header">
                        <div class="provider-name">
                            <span>🤖</span>
                            <span>Anthropic (Claude)</span>
                        </div>
                        <el-button size="small" :loading="testing === 'anthropic'" @click="testConnection('anthropic')">测试连接</el-button>
                    </div>
                    <el-form-item label="API Key" label-width="100px" style="margin-bottom: 0">
                        <el-input v-model="form.anthropic_api_key" type="password" show-password placeholder="sk-ant-xxx" style="width: 400px" />
                    </el-form-item>
                </div>
                
                <div class="provider-card">
                    <div class="provider-header">
                        <div class="provider-name">
                            <span>💬</span>
                            <span>OpenAI (GPT)</span>
                        </div>
                        <el-button size="small" :loading="testing === 'openai'" @click="testConnection('openai')">测试连接</el-button>
                    </div>
                    <el-form-item label="API Key" label-width="100px" style="margin-bottom: 0">
                        <el-input v-model="form.openai_api_key" type="password" show-password placeholder="sk-xxx" style="width: 400px" />
                    </el-form-item>
                </div>
                
                <div class="provider-card">
                    <div class="provider-header">
                        <div class="provider-name">
                            <span>✨</span>
                            <span>Google Gemini</span>
                        </div>
                        <el-button size="small" :loading="testing === 'gemini'" @click="testConnection('gemini')">测试连接</el-button>
                    </div>
                    <el-form-item label="API Key" label-width="100px" style="margin-bottom: 0">
                        <el-input v-model="form.gemini_api_key" type="password" show-password placeholder="AIzaSy-xxx" style="width: 400px" />
                    </el-form-item>
                </div>
            </el-card>
            
            <!-- 国内服务 -->
            <el-card class="config-card">
                <template #header>
                    <span>国内服务 <el-tag size="small" type="success">无需代理</el-tag></span>
                </template>
                
                <div class="provider-card">
                    <div class="provider-header">
                        <div class="provider-name">
                            <span>🔍</span>
                            <span>DeepSeek</span>
                            <span class="provider-badge domestic">推荐</span>
                        </div>
                        <el-button size="small" :loading="testing === 'deepseek'" @click="testConnection('deepseek')">测试连接</el-button>
                    </div>
                    <el-form-item label="API Key" label-width="100px" style="margin-bottom: 0">
                        <el-input v-model="form.deepseek_api_key" type="password" show-password placeholder="sk-xxx" style="width: 400px" />
                    </el-form-item>
                </div>
                
                <div class="provider-card">
                    <div class="provider-header">
                        <div class="provider-name">
                            <span>🧠</span>
                            <span>智谱 (GLM)</span>
                        </div>
                        <el-button size="small" :loading="testing === 'zhipu'" @click="testConnection('zhipu')">测试连接</el-button>
                    </div>
                    <el-form-item label="API Key" label-width="100px" style="margin-bottom: 0">
                        <el-input v-model="form.zhipu_api_key" type="password" show-password style="width: 400px" />
                    </el-form-item>
                </div>
                
                <div class="provider-card">
                    <div class="provider-header">
                        <div class="provider-name">
                            <span>🎯</span>
                            <span>MiniMax</span>
                        </div>
                        <el-button size="small" :loading="testing === 'minimax'" @click="testConnection('minimax')">测试连接</el-button>
                    </div>
                    <el-row :gutter="16">
                        <el-col :span="12">
                            <el-form-item label="API Key" label-width="100px" style="margin-bottom: 0">
                                <el-input v-model="form.minimax_api_key" type="password" show-password />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="Group ID" label-width="100px" style="margin-bottom: 0">
                                <el-input v-model="form.minimax_group_id" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                
                <div class="provider-card">
                    <div class="provider-header">
                        <div class="provider-name">
                            <span>🌙</span>
                            <span>Moonshot (Kimi)</span>
                        </div>
                        <el-button size="small" :loading="testing === 'moonshot'" @click="testConnection('moonshot')">测试连接</el-button>
                    </div>
                    <el-form-item label="API Key" label-width="100px" style="margin-bottom: 0">
                        <el-input v-model="form.moonshot_api_key" type="password" show-password style="width: 400px" />
                    </el-form-item>
                </div>
            </el-card>
            
            <div style="margin-top: 20px;">
                <el-button type="primary" @click="handleSave">保存配置</el-button>
            </div>
        </div>
    `
});