<script setup lang="ts">
import { ref, nextTick, computed, onMounted, watch, onUnmounted } from 'vue'
import { useUserStore } from '../stores/user'
import { marked } from 'marked'

// 配置 marked
marked.setOptions({
  async: false,
})

// 渲染 Markdown
const renderMarkdown = (content: string) => {
  return marked.parse(content)
}

// 定义Agent类型
interface Agent {
  id: string
  name: string
  description: string
  icon?: string
  hello_prompt?: string
}

// 定义API返回的Agent类型
interface AgentResponse {
  id: string
  name: string
  description: string
  hello_prompt: string
}

// 获取用户状态
const userStore = useUserStore()
const isAuthenticated = computed(() => userStore.isAuthenticated)

// 显示访问限制提示
const showAccessDeniedAlert = ref(false)

// Agent列表
const agents = ref<Agent[]>([])
const isLoadingAgents = ref(false)

// 当前选中的Agent
const selectedAgent = ref<Agent | null>(null)

// 根据环境选择API基础URL
const apiBaseUrl =
  import.meta.env.MODE === 'development' ? 'http://127.0.0.1:8000' : 'https://api.ibtc.work'

// 获取Agent列表
const fetchAgents = async () => {
  if (!isAuthenticated.value) return

  isLoadingAgents.value = true
  try {
    const headers: Record<string, string> = {}
    if (userStore.authHeader) {
      headers['Authorization'] = userStore.authHeader
    }

    const response = await fetch(`${apiBaseUrl}/agent/list`, {
      method: 'GET',
      headers,
    })

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }

    const data = await response.json()
    agents.value = data.map((agent: AgentResponse) => ({
      ...agent,
      icon: '📊', // 可以根据agent类型设置不同的图标
    }))

    // 如果有Agent，默认选中第一个并显示问候语
    if (agents.value.length > 0 && !selectedAgent.value) {
      selectedAgent.value = agents.value[0]
      addInitialGreeting(agents.value[0])
    }
  } catch (error) {
    console.error('获取Agent列表失败:', error)
  } finally {
    isLoadingAgents.value = false
  }
}

// 当用户登录状态改变时获取Agent列表
onMounted(() => {
  if (isAuthenticated.value) {
    fetchAgents()
  }
})

interface ChatMessage {
  role: 'user' | 'assistant' | 'thought'
  content: string
  files: Array<{
    type: string
    url: string
  }>
  thought?: {
    thought: string
    observation: string
    tool: string
    tool_input: string
  }
  tools?: string[]
}

const userInput = ref('')
const chatHistory = ref<ChatMessage[]>([])
const isLoading = ref(false)
const messagesContainer = ref<HTMLElement | null>(null)

// 当用户不是VIP时，显示提示
onMounted(() => {
  if (isAuthenticated.value) {
    fetchAgents()
  }
})

const closeAlert = () => {
  showAccessDeniedAlert.value = false
}

const scrollToBottom = async () => {
  await nextTick()
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

// 添加初始问候语
const addInitialGreeting = (agent: Agent) => {
  chatHistory.value = [
    {
      role: 'assistant',
      content:
        agent.hello_prompt ||
        '你好！我是AI Agent，可以回答你的任何关于Web3的问题。请告诉我你想了解什么？',
      files: [],
    },
  ]
}

// 监听选中的Agent变化
watch(selectedAgent, (newAgent) => {
  if (newAgent) {
    addInitialGreeting(newAgent)
  }
})

const sendMessage = async () => {
  if (!userInput.value.trim() || isLoading.value || !isAuthenticated.value || !selectedAgent.value)
    return

  // 添加用户消息到历史记录
  chatHistory.value.push({
    role: 'user',
    content: userInput.value,
    files: [],
  })

  // 滚动到底部以显示用户消息
  await scrollToBottom()

  const currentInput = userInput.value
  userInput.value = ''
  isLoading.value = true

  // 添加临时助手消息用于流式显示
  const tempMessageIndex = chatHistory.value.length
  chatHistory.value.push({
    role: 'assistant',
    content: 'AI 正在思考...',
    files: [],
    tools: [],
  })

  await scrollToBottom()

  try {
    // 准备请求头，包含认证信息
    const headers: Record<string, string> = {
      'Content-Type': 'application/json',
    }

    // 添加认证头
    if (userStore.authHeader) {
      headers['Authorization'] = userStore.authHeader
    }

    // 调用流式接口
    const response = await fetch(`${apiBaseUrl}/agent/chat`, {
      method: 'POST',
      headers,
      body: JSON.stringify({
        user_prompt: currentInput,
        agent_id: selectedAgent.value.id,
      }),
    })

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }

    const reader = response.body?.getReader()
    if (!reader) {
      throw new Error('无法获取响应流')
    }

    const decoder = new TextDecoder()
    let responseText = ''

    // 处理流式响应
    while (true) {
      const { done, value } = await reader.read()
      if (done) break

      const chunk = decoder.decode(value, { stream: true })
      const lines = chunk.split('\n')

      for (const line of lines) {
        if (!line.trim() || !line.startsWith('data: ')) continue

        try {
          const data = JSON.parse(line.slice(6))

          switch (data.event) {
            case 'agent_thought':
              // 记录使用的工具
              if (data.tool) {
                if (!chatHistory.value[tempMessageIndex].tools) {
                  chatHistory.value[tempMessageIndex].tools = []
                }
                chatHistory.value[tempMessageIndex].tools?.push(data.tool)

                // 更新显示的工具列表
                let toolsText = ''
                chatHistory.value[tempMessageIndex].tools?.forEach((tool, index) => {
                  toolsText += `${index + 1}.调用 ${tool} 工具\n`
                })

                if (responseText) {
                  chatHistory.value[tempMessageIndex].content = toolsText + '\n' + responseText
                } else {
                  chatHistory.value[tempMessageIndex].content = toolsText
                }
                await scrollToBottom()
              }
              break

            case 'agent_message':
              if (data.answer) {
                responseText += data.answer

                // 更新临时助手消息的内容，保留工具列表
                let toolsText = ''
                if (chatHistory.value[tempMessageIndex].tools?.length) {
                  chatHistory.value[tempMessageIndex].tools?.forEach((tool, index) => {
                    toolsText += `${index + 1}.调用 ${tool} 工具\n`
                  })
                  chatHistory.value[tempMessageIndex].content = toolsText + '\n' + responseText
                } else {
                  chatHistory.value[tempMessageIndex].content = responseText
                }
                await scrollToBottom()
              }
              break

            case 'message_file':
              if (data.type === 'image') {
                // 找到最后一条助手消息来添加文件
                const lastIndex = chatHistory.value.length - 1
                if (chatHistory.value[lastIndex].role === 'assistant') {
                  chatHistory.value[lastIndex].files.push({
                    type: 'image',
                    url: data.url,
                  })
                }
              }
              break

            case 'message_end':
              break

            case 'tts_message':
              // 处理语音合成消息
              break
          }
        } catch (e) {
          console.error('解析响应数据出错:', e)
        }
      }
    }
  } catch (error) {
    console.error('调用API出错:', error)
    // 更新错误消息
    chatHistory.value[tempMessageIndex].content = '抱歉，请求出错了。请稍后再试。'
    await scrollToBottom()
  } finally {
    isLoading.value = false
  }
}

// 添加下拉菜单状态控制
const showAgentMenu = ref(false)

// 切换下拉菜单
const toggleAgentMenu = () => {
  showAgentMenu.value = !showAgentMenu.value
}

// 选择Agent
const selectAgent = (agent: Agent) => {
  selectedAgent.value = agent
  showAgentMenu.value = false
}

// 点击其他地方关闭菜单
const closeAgentMenu = (event: MouseEvent) => {
  const target = event.target as HTMLElement
  if (!target.closest('.agent-selector')) {
    showAgentMenu.value = false
  }
}

onMounted(() => {
  if (isAuthenticated.value) {
    fetchAgents()
  }
  document.addEventListener('click', closeAgentMenu)
})

onUnmounted(() => {
  document.removeEventListener('click', closeAgentMenu)
})
</script>

<template>
  <div class="ai-agent-view">
    <!-- 访问限制提示 -->
    <div v-if="showAccessDeniedAlert" class="access-denied-alert">
      <div class="alert-content">
        <span>AI Agent功能仅对VIP及超级VIP用户开放</span>
        <button class="close-alert" @click="closeAlert">×</button>
      </div>
    </div>

    <!-- <h1 class="page-title">AI Agent</h1>
    <p class="page-description">为您提供全面区块链信息查询和专业分析</p> -->

    <!-- 未登录状态显示登录提示 -->
    <div v-if="!isAuthenticated" class="login-prompt">
      <div class="login-prompt-content">
        <h2>需要登录</h2>
        <p>请登录或注册账号以使用AI Agent功能</p>
        <div class="login-prompt-actions">
          <router-link to="/login" class="login-button">登录</router-link>
          <router-link to="/register" class="register-button">注册</router-link>
        </div>
      </div>
    </div>

    <!-- 已登录用户显示聊天界面 -->
    <div v-else class="main-container">
      <!-- 右侧聊天界面 -->
      <div class="chat-container">
        <div class="chat-window">
          <div class="messages-container" ref="messagesContainer">
            <div v-for="(message, index) in chatHistory" :key="index" class="message-wrapper">
              <div :class="['message', message.role === 'user' ? 'user-message' : 'ai-message']">
                <div class="message-content">
                  <div class="message-text" v-html="renderMarkdown(message.content)"></div>
                </div>
              </div>
            </div>
          </div>

          <div class="input-container">
            <div class="input-wrapper">
              <textarea
                v-model="userInput"
                class="message-input"
                placeholder="请输入您的问题..."
                @keydown.enter.prevent="sendMessage"
                :disabled="isLoading || !isAuthenticated || !selectedAgent"
              ></textarea>
              <button
                class="send-button"
                @click="sendMessage"
                :disabled="isLoading || !isAuthenticated || !selectedAgent"
              >
                <span class="send-icon">➤</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 添加新的 Agent 选择器 -->
      <div class="agent-selector">
        <button class="agent-selector-button" @click="toggleAgentMenu">
          <span class="agent-icon">{{ selectedAgent?.icon || '🤖' }}</span>
          <span class="agent-name">{{ selectedAgent?.name || '选择 Agent' }}</span>
        </button>
        <div v-if="showAgentMenu" class="agent-selector-menu">
          <div v-if="isLoadingAgents" class="agent-loading">加载中...</div>
          <template v-else>
            <div
              v-for="agent in agents"
              :key="agent.id"
              class="agent-menu-item"
              :class="{ active: selectedAgent?.id === agent.id }"
              @click="selectAgent(agent)"
            >
              <div class="agent-icon">{{ agent.icon }}</div>
              <div class="agent-info">
                <div class="agent-name">{{ agent.name }}</div>
                <div class="agent-description">{{ agent.description }}</div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.ai-agent-view {
  width: 100%;
  height: calc(100vh - var(--header-height));
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #343541;
}

/* 访问限制提示样式 */
.access-denied-alert {
  position: fixed;
  top: calc(var(--header-height) + 20px);
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 152, 0, 0.95);
  color: #000;
  padding: 12px 20px;
  border-radius: var(--border-radius);
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: slideDown 0.3s ease-out;
  max-width: 90%;
  width: auto;
}

.alert-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 500;
}

.close-alert {
  background: none;
  border: none;
  color: #000;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 4px;
}

@keyframes slideDown {
  from {
    transform: translate(-50%, -20px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.page-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.page-description {
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
}

/* 登录提示样式 */
.login-prompt {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem 1rem;
  width: 100%;
  height: calc(80vh - 150px);
}

.login-prompt-content {
  background-color: var(--color-bg-card);
  border-radius: var(--border-radius);
  padding: 2rem;
  text-align: center;
  max-width: 500px;
  width: 100%;
  border: 1px solid var(--color-border);
}

.login-prompt-content h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.login-prompt-content p {
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
}

.login-prompt-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.login-button,
.register-button {
  padding: 0.8rem 2rem;
  border-radius: var(--border-radius);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.login-button {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.login-button:hover {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border-hover);
}

.register-button {
  background-color: #3355ff;
  color: white;
  border: 1px solid #3355ff;
}

.register-button:hover {
  background-color: #2244ee;
}

/* 聊天界面样式 */
.main-container {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  background-color: #343541;
  overflow: hidden;
  position: relative;
}

.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background-color: #343541;
}

.chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-bg-primary);
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 0.5rem;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.message-wrapper {
  margin: 0.5rem 0;
  display: flex;
  width: 100%;
}

.user-message {
  justify-content: flex-end;
  width: 100%;
  display: flex;
}

.ai-message {
  justify-content: flex-start;
  width: 100%;
  display: flex;
}

.message {
  display: flex;
  padding: 0;
}

.message-content {
  display: inline-block;
  max-width: 800px;
  min-width: 4em;
  padding: 1rem;
  border-radius: 0.75rem;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  box-sizing: border-box;
  background-clip: padding-box;
  overflow: hidden;
}

.user-message .message-content {
  background-color: #2563eb;
  color: white;
  border-radius: 1rem 1rem 0 1rem;
}

.ai-message .message-content {
  background-color: #1f2937;
  color: var(--color-text-primary);
  border-radius: 1rem 1rem 1rem 0;
}

.message-text {
  font-size: 1rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.message-text :deep(ul),
.message-text :deep(ol) {
  margin: 0.5em 0;
  padding-left: 0;
  list-style-position: inside;
  width: 100%;
  box-sizing: border-box;
}

.message-text :deep(li) {
  margin: 0.25em 0;
  padding-left: 0;
  text-indent: 0;
  list-style-position: inside;
}

.message-text :deep(li > p) {
  display: inline;
  margin: 0;
}

.input-container {
  padding: 1.5rem 2rem;
  background-color: var(--color-bg-primary);
  border-top: 1px solid var(--color-divider);
}

.input-wrapper {
  /* max-width: 48rem; */
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.message-input {
  flex: 1;
  height: 3.5rem;
  min-height: 2.5rem;
  max-height: 8rem;
  padding: 0.75rem 1rem;
  padding-right: 3rem;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text-primary);
  font-size: 1rem;
  line-height: 1rem;
  resize: none;
  outline: none;
  transition: border-color 0.2s ease;
  text-align: left;
  overflow-y: auto;
}

.message-input::placeholder {
  color: var(--color-text-secondary);
  opacity: 1;
  line-height: 1rem;
  text-align: left;
}

.message-input:focus {
  border-color: var(--color-accent);
}

.message-input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.send-button {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.send-button:hover:not(:disabled) {
  background-color: var(--color-accent-hover);
}

.send-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.send-icon {
  font-size: 1rem;
  transform: rotate(270deg);
}

:deep(.markdown-body) {
  color: inherit;
  font-size: 1rem;
  line-height: 1.6;
  width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

:deep(.markdown-body pre) {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto;
}

:deep(.markdown-body code) {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-family: monospace;
  font-size: 0.9em;
}

:deep(.markdown-body pre code) {
  background-color: transparent;
  padding: 0;
}

:deep(.markdown-body p) {
  margin: 0.5em 0;
  overflow-wrap: break-word;
  word-break: break-word;
  width: 100%;
  box-sizing: border-box;
}

:deep(.markdown-body blockquote) {
  border-left: 4px solid var(--color-accent);
  margin: 0.5rem 0;
  padding: 0.5rem 1rem;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0 0.25rem 0.25rem 0;
}

:deep(.markdown-body table) {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5rem 0;
}

:deep(.markdown-body th),
:deep(.markdown-body td) {
  border: 1px solid var(--color-border);
  padding: 0.5rem;
  text-align: left;
}

:deep(.markdown-body th) {
  background-color: rgba(0, 0, 0, 0.2);
}

:deep(.markdown-body img) {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

:deep(.markdown-body a) {
  color: var(--color-accent);
  text-decoration: none;
}

:deep(.markdown-body a:hover) {
  text-decoration: underline;
}

/* 添加新的 Agent 选择器样式 */
.agent-selector {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
}

.agent-selector-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.agent-selector-button:hover {
  background-color: var(--color-bg-secondary);
}

.agent-selector-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  min-width: 200px;
  max-width: 300px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.agent-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--color-border);
}

.agent-menu-item:last-child {
  border-bottom: none;
}

.agent-menu-item:hover {
  background-color: var(--color-bg-secondary);
}

.agent-menu-item.active {
  background-color: var(--color-bg-secondary);
}

.agent-menu-item .agent-icon {
  font-size: 1.25rem;
}

.agent-menu-item .agent-info {
  flex: 1;
  min-width: 0;
}

.agent-menu-item .agent-name {
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
}

.agent-menu-item .agent-description {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .agent-selector {
    top: 0.5rem;
    right: 0.5rem;
  }

  .agent-selector-menu {
    max-width: calc(100vw - 2rem);
  }
}

@media (max-width: 480px) {
  .agent-selector {
    max-height: 50px;
  }

  .agent-menu-item {
    padding: 0.4rem;
    min-width: 100px;
  }

  .agent-name {
    font-size: 0.8rem;
  }

  .message {
    padding: 0.75rem;
  }

  .input-field {
    font-size: 0.9rem;
    padding: 0.75rem;
  }
}

.message-content {
  overflow: auto;
  word-break: break-all;
}

.message-content pre,
.message-content table {
  max-width: 100%;
  overflow-x: auto;
  word-break: break-all;
}

.message-content ul,
.message-content ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.message-content li {
  margin: 0.25em 0;
  word-break: break-word;
  overflow-wrap: break-word;
}
</style>
