<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { computed, onMounted, ref } from 'vue';

import { chatWithAgent, listAgents, type AgentDefinition, type AgentMessage, type AgentReferenceChunk } from '@/api/agent';

interface ChatBubble {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  references?: AgentReferenceChunk[];
  requestId?: string;
}

const loading = ref(false);
const sending = ref(false);
const agents = ref<AgentDefinition[]>([]);
const selectedAgentId = ref('');
const inputText = ref('');
const messages = ref<ChatBubble[]>([]);
const ragEnabled = ref(true);

const selectedAgent = computed(() => agents.value.find((agent) => agent.id === selectedAgentId.value));

async function loadAgents() {
  loading.value = true;
  try {
    const response = await listAgents();
    agents.value = (response.data ?? []).filter((item) => item.status === 'ENABLED');
    if (!selectedAgentId.value && agents.value.length > 0) {
      const firstAgent = agents.value[0];
      selectedAgentId.value = firstAgent && firstAgent.id ? firstAgent.id : '';
    }
  } finally {
    loading.value = false;
  }
}

function buildRequestMessages(nextUserText: string): AgentMessage[] {
  const historyMessages: AgentMessage[] = messages.value.map((message) => ({
    role: message.role,
    content: message.content,
  }));
  historyMessages.push({ role: 'user', content: nextUserText });
  return historyMessages;
}

async function sendMessage() {
  const trimmed = inputText.value.trim();
  if (!selectedAgentId.value) {
    ElMessage.warning('请先选择Agent');
    return;
  }
  if (!trimmed) {
    return;
  }
  const requestMessages = buildRequestMessages(trimmed);
  const userBubble: ChatBubble = {
    id: `${Date.now()}_u`,
    role: 'user',
    content: trimmed,
  };
  messages.value.push(userBubble);
  inputText.value = '';

  sending.value = true;
  try {
    const response = await chatWithAgent(selectedAgentId.value, {
      messages: requestMessages,
      ragEnabled: ragEnabled.value,
    });
    const result = response.data;
    messages.value.push({
      id: `${Date.now()}_a`,
      role: 'assistant',
      content: result?.answer ?? '',
      references: result?.references ?? [],
      requestId: result?.modelRequestId,
    });
  } finally {
    sending.value = false;
  }
}

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

onMounted(loadAgents);
</script>

<template>
  <section class="page-panel agent-debug">
    <div class="page-panel__header">
      <h2>Agent 调试</h2>
      <span>Chat Debugger</span>
    </div>

    <div class="debug-toolbar">
      <el-select v-model="selectedAgentId" class="debug-toolbar__agent" :loading="loading" placeholder="请选择Agent">
        <el-option
          v-for="item in agents"
          :key="item.id"
          :label="`${item.agentName}(${item.agentCode})`"
          :value="item.id"
        />
      </el-select>
      <el-switch v-model="ragEnabled" active-text="RAG对话" inactive-text="普通对话" />
      <el-button @click="loadAgents">刷新Agent</el-button>
      <el-button @click="clearChat">清空会话</el-button>
    </div>

    <div class="debug-chat">
      <div v-for="bubble in messages" :key="bubble.id" class="chat-row" :class="`chat-row--${bubble.role}`">
        <div class="chat-bubble">
          <div class="chat-bubble__role">{{ bubble.role === 'user' ? '用户' : '助手' }}</div>
          <div class="chat-bubble__content">{{ bubble.content }}</div>
          <template v-if="bubble.role === 'assistant'">
            <div v-if="bubble.references?.length" class="chat-bubble__refs">
              <div class="chat-bubble__refs-title">引用切片</div>
              <ul>
                <li v-for="reference in bubble.references" :key="reference.chunkId">
                  <span class="ref-meta">#{{ reference.chunkId }} · 相似度 {{ (reference.score ?? 0).toFixed(4) }}</span>
                  <span>{{ reference.chunkContent }}</span>
                </li>
              </ul>
            </div>
            <div v-if="bubble.requestId" class="chat-bubble__request-id">requestId: {{ bubble.requestId }}</div>
          </template>
        </div>
      </div>
      <div v-if="messages.length === 0" class="chat-empty">
        选择Agent后输入问题，发起对话调试。
      </div>
    </div>

    <div class="debug-input">
      <el-input
        v-model="inputText"
        type="textarea"
        :rows="3"
        resize="none"
        :disabled="sending || !selectedAgent"
        placeholder="输入问题，回车发送（Shift+Enter换行）"
        @keydown.enter.exact.prevent="sendMessage"
      />
      <el-button type="primary" :loading="sending" :disabled="!selectedAgent" @click="sendMessage">发送</el-button>
    </div>
  </section>
</template>

<style scoped>
.agent-debug {
  display: flex;
  flex-direction: column;
}

.debug-toolbar {
  display: flex;
  gap: 10px;
  padding: 16px 22px 12px;
}

.debug-toolbar__agent {
  width: 320px;
}

.debug-chat {
  flex: 1;
  min-height: 420px;
  max-height: 58vh;
  padding: 12px 22px;
  overflow-y: auto;
  border-top: 1px solid var(--app-border-soft);
  border-bottom: 1px solid var(--app-border-soft);
  background: #fafcff;
}

.chat-row {
  display: flex;
  margin-bottom: 14px;
}

.chat-row--user {
  justify-content: flex-end;
}

.chat-row--assistant {
  justify-content: flex-start;
}

.chat-bubble {
  width: min(80%, 860px);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--app-border);
  background: #ffffff;
}

.chat-row--user .chat-bubble {
  background: #eef5ff;
  border-color: #d3e5ff;
}

.chat-bubble__role {
  margin-bottom: 6px;
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 600;
}

.chat-bubble__content {
  white-space: pre-wrap;
  line-height: 1.6;
}

.chat-bubble__refs {
  margin-top: 12px;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.chat-bubble__refs-title {
  margin-bottom: 8px;
  color: #344054;
  font-size: 12px;
  font-weight: 600;
}

.chat-bubble__refs ul {
  margin: 0;
  padding-left: 16px;
}

.chat-bubble__refs li {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ref-meta {
  color: var(--app-text-muted);
  font-size: 12px;
}

.chat-bubble__request-id {
  margin-top: 8px;
  color: var(--app-text-muted);
  font-size: 12px;
}

.chat-empty {
  color: var(--app-text-muted);
  text-align: center;
  padding: 36px 0;
}

.debug-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 22px 18px;
}

.debug-input .el-button {
  align-self: flex-end;
}
</style>
