// 创建 MCP 客户端
const mcpClient = new Client({ 
  name: "mcp-chat-client", 
  version: "1.0.0" 
});

// 初始化 SSE 传输并连接到高德地图 MCP 服务
const transport = new SSEClientTransport(new URL(AMAP_MCP_URL));
mcpClient.connect(transport);

// 获取可用工具列表
const toolsResult = await mcpClient.listTools();
const availableTools = toolsResult.tools;
console.log(`获取到 ${availableTools.length} 个可用工具`);

// 准备工具定义供大模型使用
const toolDefinitions = availableTools.map(tool => ({
  type: "function",
  function: {
    name: tool.name,
    description: tool.description,
    parameters: tool.inputSchema
  }
}));

// 调用硅基流动 API
const response = await axios.post(
  SILICONFLOW_API_URL,
  {
    model: QWEN_MODEL,
    messages: messages,
    tools: toolDefinitions,
    temperature: 0.7,
    // 其他参数...
  },
  {
    headers: {
      'Authorization': `Bearer ${SILICONFLOW_API_KEY}`,
      'Content-Type': 'application/json',
    },
  }
);

// 如果模型决定调用工具
if (responseMessage.tool_calls && responseMessage.tool_calls.length > 0) {
  // 处理工具调用
  for (const toolCall of responseMessage.tool_calls) {
    const toolName = toolCall.function.name;
    const toolArgs = JSON.parse(toolCall.function.arguments);
    
    // 调用 MCP 工具
    const toolResult = await mcpClient.callTool({
      name: toolName,
      arguments: toolArgs
    });
    
    console.log(`工具 ${toolName} 调用结果:`, toolResult);
  }
}

// 完整的消息处理流程
async function processQuery(message) {
  // 1. 添加用户消息到历史
  const messages = [...messageHistory, { role: 'user', content: message }];
  
  // 2. 调用大模型 API
  const initialResponse = await callLLMAPI(messages, availableTools);
  
  // 3. 如果有工具调用
  if (initialResponse.tool_calls) {
    // 3.1 执行工具调用
    const toolResults = await executeToolCalls(initialResponse.tool_calls);
    
    // 3.2 将工具结果添加到消息历史
    const messagesWithTools = addToolResultsToMessages(messages, 
                                                     initialResponse.tool_calls, 
                                                     toolResults);
    
    // 3.3 再次调用大模型获取最终响应
    const finalResponse = await callLLMAPI(messagesWithTools);
    return finalResponse.content;
  }
  
  // 4. 如果没有工具调用，直接返回内容
  return initialResponse.content;
}

// DOM 元素初始化
const chatMessages = document.getElementById('chatMessages');
const userInput = document.getElementById('userInput');
const sendButton = document.getElementById('sendButton');

// 初始化
document.addEventListener('DOMContentLoaded', () => {
  // 添加欢迎消息
  addMessage('system', '欢迎使用高德地图 MCP 聊天助手！您可以询问天气、路线规划、地点查询等问题。');
});

// 处理用户输入
async function handleUserInput() {
  const query = userInput.value.trim();
  if (!query || isProcessing) return;
  
  // 清空输入框并添加用户消息
  userInput.value = '';
  addMessage('user', query);
  messages.push({ role: 'user', content: query });
  
  // 显示加载指示器
  addLoadingMessage();
  isProcessing = true;
  
  try {
    // 调用后端 API
    const response = await callBackendAPI(query);
    removeLoadingMessage();
    addMessage('assistant', response);
  } catch (error) {
    removeLoadingMessage();
    addMessage('error', `出错了: ${error.message || '未知错误'}`);
    console.error('处理查询时出错:', error);
  } finally {
    isProcessing = false;
  }
}

// 调用后端 API
async function callBackendAPI(query) {
  try {
    // 发送请求
    const response = await fetch(BACKEND_API_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ messages: messages })
    });
    
    // 错误处理
    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.error || `请求失败: ${response.status}`);
    }
    
    // 处理响应
    const data = await response.json();
    if (data.content) {
      messages.push({ role: 'assistant', content: data.content });
      return data.content;
    } else {
      throw new Error('服务器响应格式错误');
    }
  } catch (error) {
    console.error('API调用失败:', error);
    throw error;
  }
}

// 工具调用错误处理示例
try {
  const toolResult = await mcpClient.callTool({
    name: toolName,
    arguments: toolArgs
  });
  return toolResult;
} catch (error) {
  console.error(`工具 ${toolName} 调用失败:`, error);
  // 返回友好的错误消息给用户
  return { error: `无法完成操作: ${error.message || '未知错误'}` };
}