/**
 * Agent 管理组件
 */
app.component('agents-page', {
    props: ['agents'],
    emits: ['refresh'],
    setup(props, { emit }) {
        const { ref, reactive, computed } = Vue;
        
        // 对话框状态
        const dialogVisible = ref(false);
        const dialogTitle = ref('新建 Agent');
        const editingId = ref(null);
        
        // 表单数据
        const form = reactive({
            id: '',
            name: '',
            workspace_path: '~/.config/minenasai/workspace',
            model: 'claude-sonnet-4-20250514',
            temperature: 0.7,
            tools_allow: [],
            tools_deny: [],
            sandbox_mode: 'workspace'
        });
        
        // 可用工具列表
        const availableTools = [
            { value: 'read', label: '读取文件' },
            { value: 'write', label: '写入文件' },
            { value: 'python', label: 'Python 执行' },
            { value: 'exec', label: '执行命令' },
            { value: 'web_search', label: '网页搜索' },
            { value: 'delete', label: '删除文件' },
            { value: 'docker', label: 'Docker 操作' },
            { value: 'system_config', label: '系统配置' }
        ];
        
        // 模型列表
        const models = [
            'claude-sonnet-4-20250514',
            'claude-3-5-sonnet-20241022',
            'gpt-4o',
            'deepseek-chat',
            'glm-4-flash',
            'moonshot-v1-8k'
        ];
        
        // 沙箱模式
        const sandboxModes = [
            { value: 'workspace', label: '工作目录限制' },
            { value: 'docker', label: 'Docker 容器' },
            { value: 'none', label: '无限制（危险）' }
        ];
        
        // 打开新建对话框
        function handleAdd() {
            editingId.value = null;
            dialogTitle.value = '新建 Agent';
            Object.assign(form, {
                id: '',
                name: '',
                workspace_path: '~/.config/minenasai/workspace',
                model: 'claude-sonnet-4-20250514',
                temperature: 0.7,
                tools_allow: ['read', 'write', 'python'],
                tools_deny: ['delete', 'system_config'],
                sandbox_mode: 'workspace'
            });
            dialogVisible.value = true;
        }
        
        // 打开编辑对话框
        function handleEdit(agent) {
            editingId.value = agent.id;
            dialogTitle.value = '编辑 Agent';
            Object.assign(form, {
                id: agent.id,
                name: agent.name,
                workspace_path: agent.workspace_path || '~/.config/minenasai/workspace',
                model: agent.model || 'claude-sonnet-4-20250514',
                temperature: agent.temperature || 0.7,
                tools_allow: agent.tools?.allow || [],
                tools_deny: agent.tools?.deny || [],
                sandbox_mode: agent.sandbox?.mode || 'workspace'
            });
            dialogVisible.value = true;
        }
        
        // 删除 Agent
        async function handleDelete(agent) {
            try {
                await ElementPlus.ElMessageBox.confirm(
                    `确定要删除 Agent "${agent.name}" 吗？`,
                    '删除确认',
                    { type: 'warning' }
                );
                await fetch(`/api/agents/${agent.id}`, { method: 'DELETE' });
                ElementPlus.ElMessage.success('删除成功');
                emit('refresh');
            } catch (e) {
                if (e !== 'cancel') {
                    ElementPlus.ElMessage.error('删除失败: ' + e.message);
                }
            }
        }
        
        // 保存 Agent
        async function handleSave() {
            try {
                const data = {
                    id: form.id,
                    name: form.name,
                    workspace_path: form.workspace_path,
                    model: form.model,
                    temperature: form.temperature,
                    tools: {
                        allow: form.tools_allow,
                        deny: form.tools_deny
                    },
                    sandbox: {
                        mode: form.sandbox_mode
                    }
                };
                
                if (editingId.value) {
                    await fetch(`/api/agents/${editingId.value}`, {
                        method: 'PUT',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(data)
                    });
                } else {
                    await fetch('/api/agents', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(data)
                    });
                }
                
                dialogVisible.value = false;
                ElementPlus.ElMessage.success('保存成功');
                emit('refresh');
            } catch (e) {
                ElementPlus.ElMessage.error('保存失败: ' + e.message);
            }
        }
        
        return {
            dialogVisible,
            dialogTitle,
            form,
            availableTools,
            models,
            sandboxModes,
            handleAdd,
            handleEdit,
            handleDelete,
            handleSave
        };
    },
    template: `
        <div class="agents-page">
            <el-card class="config-card">
                <template #header>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span>Agent 列表</span>
                        <el-button type="primary" @click="handleAdd">
                            <el-icon><Plus /></el-icon>
                            新建 Agent
                        </el-button>
                    </div>
                </template>
                
                <el-table :data="agents" border stripe>
                    <el-table-column prop="id" label="ID" width="120" />
                    <el-table-column prop="name" label="名称" width="150" />
                    <el-table-column prop="model" label="模型" width="200">
                        <template #default="{ row }">
                            <el-tag size="small">{{ row.model || 'claude-sonnet-4-20250514' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="workspace_path" label="工作目录" />
                    <el-table-column label="状态" width="100">
                        <template #default="{ row }">
                            <el-tag :type="row.status === 'active' ? 'success' : 'info'" size="small">
                                {{ row.status === 'active' ? '活跃' : '空闲' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="160" fixed="right">
                        <template #default="{ row }">
                            <el-button text type="primary" @click="handleEdit(row)">编辑</el-button>
                            <el-button text type="danger" @click="handleDelete(row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
                <el-empty v-if="!agents || agents.length === 0" description="暂无 Agent" />
            </el-card>
            
            <!-- 编辑对话框 -->
            <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
                <el-form :model="form" label-width="120px">
                    <el-form-item label="Agent ID" required>
                        <el-input v-model="form.id" :disabled="!!editingId" placeholder="唯一标识，如 main" />
                    </el-form-item>
                    <el-form-item label="名称" required>
                        <el-input v-model="form.name" placeholder="Agent 显示名称" />
                    </el-form-item>
                    <el-form-item label="模型">
                        <el-select v-model="form.model" style="width: 100%">
                            <el-option v-for="m in models" :key="m" :value="m" :label="m" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="温度">
                        <el-slider v-model="form.temperature" :min="0" :max="2" :step="0.1" show-input />
                    </el-form-item>
                    <el-form-item label="工作目录">
                        <el-input v-model="form.workspace_path" placeholder="~/.config/minenasai/workspace" />
                    </el-form-item>
                    <el-form-item label="允许的工具">
                        <el-select v-model="form.tools_allow" multiple style="width: 100%">
                            <el-option v-for="t in availableTools" :key="t.value" :value="t.value" :label="t.label" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="禁止的工具">
                        <el-select v-model="form.tools_deny" multiple style="width: 100%">
                            <el-option v-for="t in availableTools" :key="t.value" :value="t.value" :label="t.label" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="沙箱模式">
                        <el-select v-model="form.sandbox_mode" style="width: 100%">
                            <el-option v-for="m in sandboxModes" :key="m.value" :value="m.value" :label="m.label" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                </template>
            </el-dialog>
        </div>
    `
});