<template>
  <div class="agent-chat-page">
    <div class="chat-header">
      <div class="header-left">
        <h2>{{ agent ? agent.name : 'AI Agent 对话' }}</h2>
        <span v-if="agent" class="agent-status" :class="agent.status">{{ agent.status }}</span>
      </div>
      <div class="header-actions">
        <el-select
          v-model="currentAgentId"
          placeholder="选择 Agent"
          @change="switchAgent"
          style="width: 220px"
          clearable
        >
          <el-option
            v-for="a in agents"
            :key="a.id"
            :label="a.name"
            :value="a.id"
          >
            <span>{{ a.name }}</span>
            <span class="agent-option-desc">{{ a.description?.slice(0, 30) }}</span>
          </el-option>
        </el-select>
        <el-button @click="clearChat" :disabled="messages.length === 0">
          清空对话
        </el-button>
      </div>
    </div>

    <div class="chat-messages" ref="messagesRef">
      <div v-if="messages.length === 0" class="chat-empty">
        <el-icon :size="48"><ChatLineSquare /></el-icon>
        <p>选择一个 Agent 开始对话</p>
        <p class="hint">Agent 可以使用内置工具帮你完成任务</p>
      </div>

      <div
        v-for="(msg, i) in messages"
        :key="i"
        class="message"
        :class="[msg.role, msg.status === 'error' ? 'error' : '']"
      >
        <div class="message-avatar">
          <el-avatar :size="36" :icon="msg.role === 'user' ? UserFilled : Promotion" />
        </div>
        <div class="message-bubble">
          <div class="message-text" v-html="renderMarkdown(msg.content)"></div>
          <div v-if="msg.tool_calls && msg.tool_calls.length > 0" class="tool-calls">
            <div class="tool-calls-header">
              <el-icon><Tools /></el-icon>
              工具调用 ({{ msg.tool_calls.length }})
            </div>
            <div
              v-for="(tc, j) in msg.tool_calls"
              :key="j"
              class="tool-call-item"
            >
              <span class="tool-name">{{ tc.function?.name || '?' }}</span>
              <el-tag size="small" type="info">
                {{ Object.keys(JSON.parse(tc.function?.arguments || '{}')).length }} 个参数
              </el-tag>
            </div>
          </div>
          <div class="message-meta">
            {{ msg.role === 'user' ? '用户' : 'Agent' }} ·
            {{ formatTime(msg.timestamp) }}
            <span v-if="msg.iterations" class="meta-iterations">
              · {{ msg.iterations }} 步 · {{ msg.tool_calls_made }} 次工具调用
            </span>
          </div>
        </div>
      </div>

      <div v-if="loading" class="message assistant">
        <div class="message-avatar">
          <el-avatar :size="36" icon="Promotion" />
        </div>
        <div class="message-bubble">
          <div class="thinking">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="chat-input">
      <el-input
        v-model="inputMessage"
        type="textarea"
        :rows="3"
        placeholder="输入你的问题，Agent 会自动使用工具来帮助你..."
        @keydown.enter.exact.prevent="sendMessage"
        :disabled="loading"
      />
      <el-button
        type="primary"
        @click="sendMessage"
        :loading="loading"
        :disabled="!inputMessage.trim()"
        class="send-btn"
      >
        {{ loading ? '思考中...' : '发送' }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ChatLineSquare,
  UserFilled,
  Promotion,
  Tools,
} from '@element-plus/icons-vue'
import api from '@/api'
import type { Agent } from '@/stores/agent'

interface ChatMessage {
  role: 'user' | 'assistant'
  content: string
  tool_calls?: any[]
  timestamp: number
  iterations?: number
  tool_calls_made?: number
  status?: string
}

const route = useRoute()
const agents = ref<Agent[]>([])
const currentAgentId = ref('')
const messages = ref<ChatMessage[]>([])
const inputMessage = ref('')
const loading = ref(false)
const messagesRef = ref<HTMLElement | null>(null)
const sessionId = ref('')

const agent = ref<Agent | null>(null)

onMounted(async () => {
  await loadAgents()
  if (route.params.id) {
    currentAgentId.value = route.params.id as string
    await switchAgent()
  }
})

async function loadAgents() {
  try {
    const resp = await api.get('/api/v1/agents')
    agents.value = resp.data || []
  } catch (e) {
    console.error('加载 Agent 列表失败:', e)
  }
}

async function switchAgent() {
  if (!currentAgentId.value) {
    agent.value = null
    return
  }
  try {
    const resp = await api.get(`/api/v1/agents/${currentAgentId.value}`)
    agent.value = resp.data
  } catch (e: any) {
    ElMessage.error('加载 Agent 失败')
    agent.value = null
  }
}

async function sendMessage() {
  const text = inputMessage.value.trim()
  if (!text || loading.value) return

  messages.value.push({
    role: 'user',
    content: text,
    timestamp: Date.now(),
  })
  inputMessage.value = ''
  loading.value = true
  scrollToBottom()

  try {
    const endpoint = currentAgentId.value
      ? `/api/v1/agent-chat/${currentAgentId.value}`
      : '/api/v1/agent-chat/bare'

    const resp = await api.post(endpoint, {
      message: text,
      session_id: sessionId.value || undefined,
    })

    const data = resp.data
    sessionId.value = data.session_id

    messages.value.push({
      role: 'assistant',
      content: data.content,
      timestamp: Date.now(),
      iterations: data.iterations_used,
      tool_calls_made: data.tool_calls_made,
      status: data.truncated ? 'error' : 'success',
    })
  } catch (e: any) {
    messages.value.push({
      role: 'assistant',
      content: `错误：${e.response?.data?.detail || e.message || '请求失败'}`,
      timestamp: Date.now(),
      status: 'error',
    })
  } finally {
    loading.value = false
    scrollToBottom()
  }
}

function clearChat() {
  messages.value = []
  sessionId.value = ''
}

function scrollToBottom() {
  nextTick(() => {
    if (messagesRef.value) {
      messagesRef.value.scrollTop = messagesRef.value.scrollHeight
    }
  })
}

function formatTime(ts: number) {
  return new Date(ts).toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
  })
}

function renderMarkdown(text: string): string {
  if (!text) return ''
  // 简单的 Markdown 渲染（代码块、加粗、链接）
  let html = text
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    // 代码块
    .replace(/```(\w*)\n([\s\S]*?)```/g, '<pre><code class="language-$1">$2</code></pre>')
    // 行内代码
    .replace(/`([^`]+)`/g, '<code>$1</code>')
    // 加粗
    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
    // 换行
    .replace(/\n/g, '<br>')
  return html
}
</script>

<style scoped>
.agent-chat-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--el-border-color-light);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-left h2 {
  margin: 0;
  font-size: 18px;
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.agent-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--el-color-info-light-8);
}

.agent-status.published { background: var(--el-color-success-light-8); color: var(--el-color-success); }
.agent-status.draft { background: var(--el-color-warning-light-8); color: var(--el-color-warning); }

.agent-option-desc {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-left: 8px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--el-text-color-secondary);
  gap: 12px;
}

.chat-empty .hint {
  font-size: 13px;
  color: var(--el-text-color-placeholder);
}

.message {
  display: flex;
  gap: 12px;
  max-width: 85%;
}

.message.user { align-self: flex-end; flex-direction: row-reverse; }
.message.assistant { align-self: flex-start; }

.message-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--el-fill-color-light);
  line-height: 1.6;
  font-size: 14px;
}

.message.user .message-bubble {
  background: var(--el-color-primary-light-8);
}

.message.error .message-bubble {
  border: 1px solid var(--el-color-danger-light-5);
}

.message-text :deep(pre) {
  background: var(--el-fill-color);
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 13px;
}

.message-text :deep(code) {
  background: var(--el-fill-color);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}

.tool-calls {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--el-border-color-light);
}

.tool-calls-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-bottom: 4px;
}

.tool-call-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 12px;
}

.tool-name {
  font-weight: 500;
  color: var(--el-color-primary);
}

.message-meta {
  font-size: 11px;
  color: var(--el-text-color-placeholder);
  margin-top: 4px;
}

.meta-iterations {
  color: var(--el-color-info);
}

.thinking {
  display: flex;
  gap: 4px;
  padding: 8px 0;
}

.dot {
  width: 8px;
  height: 8px;
  background: var(--el-text-color-placeholder);
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}

.dot:nth-child(2) { animation-delay: 0.16s; }
.dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.chat-input {
  display: flex;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--el-border-color-light);
}

.chat-input .el-textarea {
  flex: 1;
}

.send-btn {
  align-self: flex-end;
  min-width: 100px;
}
</style>
