<template>
	<el-drawer v-model="visible" title="MCP 工具能力" size="40%" direction="rtl" :before-close="handleClose">
			<!-- 工具列表 -->
			<div v-loading="loading">
				<div v-if="toolsList.length === 0 && !loading" class="text-center py-12">
					<el-empty description="暂无工具数据" />
				</div>

				<div v-else class="space-y-4">
					<div
						v-for="(tool, index) in toolsList"
						:key="index"
						class="p-4 border border-gray-200 rounded-lg transition-all duration-200 hover:shadow-md dark:border-gray-700 dark:bg-gray-800"
					>
						<div class="flex items-start justify-between mb-3">
							<div class="flex-1">
								<h4 class="text-base font-medium text-gray-900 dark:text-white">
									{{ tool.name || '未命名工具' }}
								</h4>
								<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
									{{ tool.description || '暂无描述' }}
								</p>
							</div>
							<el-tag size="small" type="primary">工具</el-tag>
						</div>

						<!-- 工具详细信息 -->
						<div class="space-y-3">
							<!-- 输入参数 -->
							<div v-if="tool.inputSchema">
								<h5 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">输入参数:</h5>
								<div class="p-3 bg-gray-50 rounded dark:bg-gray-700">
									<pre class="text-xs text-gray-800 dark:text-gray-200 whitespace-pre-wrap">{{ formatSchema(tool.inputSchema) }}</pre>
								</div>
							</div>

							<!-- 输出参数 -->
							<div v-if="tool.outputSchema">
								<h5 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">输出参数:</h5>
								<div class="p-3 bg-gray-50 rounded dark:bg-gray-700">
									<pre class="text-xs text-gray-800 dark:text-gray-200 whitespace-pre-wrap">{{ formatSchema(tool.outputSchema) }}</pre>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		<template #footer>
			<div class="flex justify-end">
				<el-button @click="handleClose">关闭</el-button>
			</div>
		</template>
	</el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { getTools } from '/@/api/knowledge/aiMcpConfig';
import { useMessage } from '/@/hooks/message';
import { useDict } from '/@/hooks/dict';
import { Monitor } from '@element-plus/icons-vue';

// 字典
const { yes_no_type } = useDict('yes_no_type');

// 响应式数据
const visible = ref(false);
const loading = ref(false);
const toolsList = ref<any[]>([]);
const mcpInfo = reactive<any>({});

// 打开抽屉
const openDrawer = async (mcpData: any) => {
	Object.assign(mcpInfo, mcpData);
	visible.value = true;
	await loadTools(mcpData.mcpId);
};

// 加载工具列表
const loadTools = async (mcpId: string) => {
	loading.value = true;
	try {
		const { data } = await getTools(mcpId);
		toolsList.value = data || [];
	} catch (error: any) {
		useMessage().error(error.msg || '获取工具列表失败');
		toolsList.value = [];
	} finally {
		loading.value = false;
	}
};

// 格式化Schema显示
const formatSchema = (schema: any) => {
	if (typeof schema === 'string') {
		try {
			return JSON.stringify(JSON.parse(schema), null, 2);
		} catch {
			return schema;
		}
	}
	return JSON.stringify(schema, null, 2);
};

// 关闭抽屉
const handleClose = () => {
	visible.value = false;
	toolsList.value = [];
	Object.keys(mcpInfo).forEach(key => delete mcpInfo[key]);
};

// 暴露方法
defineExpose({
	openDrawer,
});
</script>
