/**
 * 代理配置组件
 */
app.component('proxy-config-page', {
    props: ['config'],
    emits: ['save'],
    setup(props, { emit }) {
        const { ref, reactive, watch } = Vue;
        
        // 表单数据
        const form = reactive({
            enabled: false,
            http: '',
            https: '',
            no_proxy: [],
            auto_detect: true
        });
        
        // 新的排除项
        const newNoProxy = ref('');
        
        // 监听 props 变化
        watch(() => props.config, (newVal) => {
            if (newVal) {
                Object.assign(form, {
                    ...newVal,
                    no_proxy: newVal.no_proxy || []
                });
            }
        }, { immediate: true, deep: true });
        
        // 添加排除项
        function addNoProxy() {
            if (newNoProxy.value && !form.no_proxy.includes(newNoProxy.value)) {
                form.no_proxy.push(newNoProxy.value);
                newNoProxy.value = '';
            }
        }
        
        // 删除排除项
        function removeNoProxy(item) {
            const idx = form.no_proxy.indexOf(item);
            if (idx > -1) {
                form.no_proxy.splice(idx, 1);
            }
        }
        
        // 测试代理
        const testing = ref(false);
        async function testProxy() {
            testing.value = true;
            try {
                const res = await fetch('/api/proxy/test', { method: 'POST' });
                const data = await res.json();
                if (data.success) {
                    ElementPlus.ElMessage.success('代理连接正常');
                } else {
                    ElementPlus.ElMessage.error('代理连接失败: ' + data.error);
                }
            } catch (e) {
                ElementPlus.ElMessage.error('测试失败: ' + e.message);
            }
            testing.value = false;
        }
        
        // 自动检测代理
        async function detectProxy() {
            try {
                const res = await fetch('/api/proxy/detect', { method: 'POST' });
                const data = await res.json();
                if (data.detected) {
                    form.http = data.http || '';
                    form.https = data.https || '';
                    ElementPlus.ElMessage.success('检测到代理: ' + (data.http || data.https));
                } else {
                    ElementPlus.ElMessage.warning('未检测到可用代理');
                }
            } catch (e) {
                ElementPlus.ElMessage.error('检测失败: ' + e.message);
            }
        }
        
        // 保存配置
        function handleSave() {
            emit('save', { ...form });
        }
        
        return {
            form,
            newNoProxy,
            testing,
            addNoProxy,
            removeNoProxy,
            testProxy,
            detectProxy,
            handleSave
        };
    },
    template: `
        <div class="proxy-config">
            <el-card class="config-card">
                <template #header>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span>代理设置</span>
                        <el-switch v-model="form.enabled" active-text="启用" inactive-text="禁用" />
                    </div>
                </template>
                
                <el-alert
                    title="代理用途说明"
                    type="info"
                    :closable="false"
                    show-icon
                    style="margin-bottom: 20px"
                >
                    境外 LLM 服务（Anthropic、OpenAI、Gemini）需要通过代理访问。
                    国内服务（DeepSeek、智谱、MiniMax、Moonshot）无需代理。
                </el-alert>
                
                <el-form :model="form" label-width="140px" :disabled="!form.enabled">
                    <el-form-item label="HTTP 代理">
                        <el-input v-model="form.http" placeholder="http://127.0.0.1:7890" style="width: 400px" />
                    </el-form-item>
                    <el-form-item label="HTTPS 代理">
                        <el-input v-model="form.https" placeholder="http://127.0.0.1:7890" style="width: 400px" />
                    </el-form-item>
                    <el-form-item label="自动检测">
                        <el-switch v-model="form.auto_detect" />
                        <el-button style="margin-left: 16px" @click="detectProxy" :disabled="!form.enabled">
                            检测本地代理
                        </el-button>
                    </el-form-item>
                    <el-form-item label="排除列表">
                        <div style="margin-bottom: 8px;">
                            <el-tag
                                v-for="item in form.no_proxy"
                                :key="item"
                                closable
                                @close="removeNoProxy(item)"
                                style="margin-right: 8px; margin-bottom: 4px;"
                            >
                                {{ item }}
                            </el-tag>
                        </div>
                        <el-input
                            v-model="newNoProxy"
                            placeholder="localhost"
                            style="width: 200px"
                            @keyup.enter="addNoProxy"
                        >
                            <template #append>
                                <el-button @click="addNoProxy">添加</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-form>
            </el-card>
            
            <el-card class="config-card" v-if="form.enabled">
                <template #header>
                    <span>连接测试</span>
                </template>
                <p style="margin-bottom: 16px; color: #909399;">
                    点击下方按钮测试代理是否能正常访问境外服务。
                </p>
                <el-button type="primary" :loading="testing" @click="testProxy">
                    测试代理连接
                </el-button>
            </el-card>
            
            <div style="margin-top: 20px;">
                <el-button type="primary" @click="handleSave">保存配置</el-button>
            </div>
        </div>
    `
});