<template>
  <div class="agent-panel-body">
    <!-- 消息列表 -->
    <div class="messages-container" ref="messagesContainerRef">
      <div class="messages-list">
        <!-- Ask 模式消息列表 -->
        <template v-if="chatMode === 'ask'">
        <div
          v-for="(chatItem, index) in messages"
          :key="chatItem.questionId || index"
          class="chat-item"
        >
          <!-- 用户问题 -->
          <div class="user-question">
            <div class="message-body-question">{{ chatItem.question }}</div>
            <div class="message-actions-user">
              <button
                class="action-btn"
                :title="t('chat.copy')"
                @click="handleCopy(chatItem.question)"
              >
                <img src="/fuzhi.svg" alt="复制" class="icon-svg" />
              </button>
            </div>
          </div>

          <!-- AI回答 -->
          <div
            v-for="answer in chatItem.answers"
            :key="answer.id"
            class="ai-answer"
          >
            <!-- AI思考状态 -->
            <div v-if="answer.status === 'thinking'" class="ai-thinking">
              <div class="thinking-dots">
                <span></span>
                <span></span>
                <span></span>
              </div>
              <span class="thinking-text">{{
                t("agent.thinking") || "AI正在思考中..."
              }}</span>
            </div>

            <!-- 打字机效果显示回答内容 -->
            <div
              v-else-if="answer.status === 'typing'"
              class="message-body-answer typewriter"
            >
              <!-- 使用增强版 MarkdownPreview 渲染（支持完整 Markdown + KaTeX） -->
              <MarkdownPreview
                :content="getTypingDisplayContent(answer)"
                :is-streaming="true"
                model="external"
              />
            </div>

            <!-- 错误状态 -->
            <div
              v-else-if="answer.status === 'error'"
              class="message-body-answer error-message"
            >
              <el-icon><WarningFilled /></el-icon>
              <span>{{ answer.answerContent }}</span>
              <el-icon
                class="retry-icon"
                @click="handleRetry(chatItem)"
                :title="t('chat.retrySend')"
              >
                <RefreshRight />
              </el-icon>
            </div>

            <!-- 正常显示回答内容 -->
            <div v-else class="message-body-answer">
              <MarkdownPreview
                :content="answer.answerContent"
                :is-streaming="false"
                model="external"
              />
              <div
                class="message-actions-answer"
                v-if="
                  answer.answerContent &&
                  !['thinking', 'typing', 'error'].includes(answer.status || '')
                "
              >
                <button
                  class="action-btn"
                  :class="{ disabled: !isAnswerCompleted(answer) }"
                  :title="t('chat.generateDocument')"
                  @click="handleSaveAndEdit(chatItem, answer)"
                >
                  <img src="/bianji.svg" alt="生成文档并编辑" class="icon-svg" />
                </button>
                <button
                  class="action-btn"
                  :title="t('chat.copy')"
                  @click="handleCopyAnswer(answer)"
                >
                  <img src="/fuzhi.svg" alt="复制" class="icon-svg" />
                </button>
              </div>
            </div>
          </div>
        </div>
        </template>

        <!-- Agent 模式消息列表 -->
        <template v-else>
          <div
            v-for="(message, index) in messages"
            :key="message.id || index"
            class="chat-item"
          >
            <!-- 用户问题 -->
            <div v-if="message.role === 'user'" class="user-question">
              <div
                v-if="message.attachedFiles && message.attachedFiles.length > 0"
                class="user-attached-files"
              >
                <CodexUserAttachedFileCard
                  v-for="(af, ai) in message.attachedFiles"
                  :key="`${af.id}-${ai}`"
                  :id="af.id"
                  :name="af.name || `file-${af.id}`"
                  :file-path="af.filePath"
                  :type="af.type"
                />
              </div>
              <div class="message-body-question">{{ message.content }}</div>
              <div class="message-actions-user">
                <button
                  class="action-btn"
                  :title="t('chat.copy')"
                  @click="handleCopy(message.content)"
                >
                  <img src="/fuzhi.svg" alt="复制" class="icon-svg" />
                </button>
              </div>
            </div>

            <!-- AI回答 -->
            <div v-else-if="message.role === 'assistant'" class="ai-answer">
              <!-- AI思考状态 -->
              <div v-if="message.status === 'pending'" class="ai-thinking">
                <div class="thinking-dots">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
                <span class="thinking-text">{{
                  t("agent.thinking") || "AI正在思考中..."
                }}</span>
              </div>

              <!-- 打字机效果显示回答内容 -->
              <div
                v-else-if="message.status === 'streaming' && message.isStreaming"
                class="message-body-answer typewriter"
              >
                <MarkdownPreview
                  :content="getTypingDisplayContent(message)"
                  :is-streaming="true"
                  model="external"
                />
              </div>

              <!-- 错误状态 -->
              <div
                v-else-if="message.status === 'error'"
                class="message-body-answer error-message"
              >
                <el-icon><WarningFilled /></el-icon>
                <span>{{ message.error || message.content }}</span>
                <el-icon
                  class="retry-icon"
                  @click="handleRetry(message)"
                  :title="t('chat.retrySend')"
                >
                  <RefreshRight />
                </el-icon>
              </div>

              <!-- 待审批状态 -->
              <div
                v-else-if="message.pendingApproval"
                class="message-body-answer approval-pending"
              >
                <div class="approval-content">
                  <div class="approval-header">
                    <el-icon><Warning /></el-icon>
                    <span>需要审批</span>
                  </div>
                  <div class="approval-body">
                    <div v-if="message.pendingApproval.type === 'command'">
                      <p><strong>命令:</strong> {{ message.pendingApproval.command }}</p>
                      <p v-if="message.pendingApproval.description">{{ message.pendingApproval.description }}</p>
                    </div>
                    <div v-else-if="message.pendingApproval.type === 'patch'">
                      <p><strong>文件:</strong> {{ message.pendingApproval.filePath }}</p>
                      <p v-if="message.pendingApproval.changes">
                        <strong>变更:</strong>
                        <pre>{{ message.pendingApproval.changes }}</pre>
                      </p>
                    </div>
                  </div>
                  <div class="approval-actions">
                    <el-button
                      size="small"
                      type="success"
                      @click="handleApprove(message, 'approved')"
                    >
                      批准
                    </el-button>
                    <el-button
                      size="small"
                      type="danger"
                      @click="handleApprove(message, 'denied')"
                    >
                      拒绝
                    </el-button>
                  </div>
                </div>
              </div>

              <!-- 正常显示回答内容 -->
              <div v-else class="message-body-answer">
                <MarkdownPreview
                  :content="message.content"
                  :is-streaming="false"
                  model="external"
                />
                <div
                  class="message-actions-answer"
                  v-if="
                    message.content &&
                    !['pending', 'streaming', 'error'].includes(message.status || '')
                  "
                >
                  <button
                    class="action-btn"
                    :class="{ disabled: !isMessageCompleted(message) }"
                    :title="t('chat.generateDocument')"
                    @click="handleSaveAndEditAgent(message)"
                  >
                    <img src="/bianji.svg" alt="生成文档并编辑" class="icon-svg" />
                  </button>
                  <button
                    class="action-btn"
                    :title="t('chat.copy')"
                    @click="handleCopyMessage(message)"
                  >
                    <img src="/fuzhi.svg" alt="复制" class="icon-svg" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>

    <!-- 流式状态提示 -->
    <div v-if="streamingError" class="websocket-error">
      <el-icon><CircleCloseFilled /></el-icon>
      <span>{{ t("agent.connectionError", { error: streamingError }) }}</span>
    </div>
    <div v-else-if="streamingAnswer" class="websocket-success">
      <el-icon><SuccessFilled /></el-icon>
      <span>{{ t("agent.streamingConnected") }}</span>
    </div>

    <!-- 聊天输入框 -->
    <div class="chat-container">
      <AgentChat
        ref="agentChatRef"
        :loading="sendingMessage"
        :maxlength="2000"
        :mode="chatMode"
        @send="handleSend"
        @file-upload="handleFileUpload"
        @knowledge-reference="handleKnowledgeReference"
        @select-model="handleSelectModel"
        @mode-change="chatMode = $event"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  computed,
  watch,
  nextTick,
  onMounted,
  onUnmounted,
  defineAsyncComponent,
} from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { ElMessage, ElLoading } from "element-plus";
import {
  WarningFilled,
  RefreshRight,
  CircleCloseFilled,
  SuccessFilled,
  Document,
  Warning,
} from "@element-plus/icons-vue";
import AgentChat from "./AgentChat.vue";
import CodexUserAttachedFileCard from "./CodexUserAttachedFileCard.vue";
import type { AttachedFilePayload } from "./agentAttachedPayload";
import {
  parseRefFileIdsList,
  resolveFileEntryId,
  buildAttachedFilesPayload,
  ensureAttachedPayloadCoversTurnFileIds,
} from "./agentAttachedPayload";
import MarkdownPreview from "@/components/Workspace/MarkdownPreview.vue";
import { useWorkspaceChatStore } from "@/stores/chatApi";
import { useCodexStore } from "@/stores/codex";
import { useAppStore } from "@/stores/app";
import { useWorkspaceStore } from "@/stores/workspace";
import {
  getFileContent,
} from "@/api/files";
import { getServicePrice, consumeBeans } from "@/api/pay";
import "katex/dist/katex.min.css";

const { t } = useI18n();
const router = useRouter();
const chatApiStore = useWorkspaceChatStore();
const codexStore = useCodexStore();
const workspaceStore = useWorkspaceStore();

const emit = defineEmits<{
  (e: "mode-change", mode: "ask" | "agent"): void;
}>();

// 聊天模式：ask (提问) 或 agent (智能体)
const props = defineProps<{
  mode?: "ask" | "agent";
}>();

const chatMode = ref<"ask" | "agent">(props.mode || "ask");

// 监听 props.mode 变化
watch(() => props.mode, (newMode) => {
  if (newMode && newMode !== chatMode.value) {
    chatMode.value = newMode;
  }
});

// 监听模式变化并通知父组件
watch(chatMode, (newMode) => {
  emit("mode-change", newMode);
});

// 引用
const filesArray = ref<number[]>([]);
const messagesContainerRef = ref<HTMLElement | null>(null);
const agentChatRef = ref<InstanceType<typeof AgentChat> | null>(null);

// 响应式数据
const shouldAutoScroll = ref(true);
const userScrolled = ref(false);
const isTypingActive = ref(false); // 标记当前是否有打字机效果在进行

// 打字机效果：为每个 typing 状态的 answer 维护显示内容
const typingDisplayContent = ref<Map<string, string>>(new Map());
// 打字机效果：追踪打字机动画帧
const typingAnimationFrames = ref<Map<string, number>>(new Map());

// 计算属性
const messages = computed(() => 
  chatMode.value === "ask" ? chatApiStore.messages : codexStore.messages
);
const currentSession = computed(() => 
  chatMode.value === "ask" ? chatApiStore.currentSession : codexStore.currentSession
);
const sendingMessage = computed(() => 
  chatMode.value === "ask" 
    ? (chatApiStore.messagesLoading || false)
    : (codexStore.messagesLoading || codexStore.aiThinking || false)
);
const streamingAnswer = computed(() => 
  chatMode.value === "ask"
    ? (chatApiStore.streamingAnswer || false)
    : (codexStore.streaming || codexStore.aiTyping || false)
);
const streamingError = computed(() => 
  chatMode.value === "ask" ? chatApiStore.streamingError : codexStore.streamingError
);

// 获取打字机显示内容
const getTypingDisplayContent = (item: any): string => {
  if (chatMode.value === "ask") {
    const answerId = item.id || item.questionId;
    if (!answerId) return item.answerContent || "";

  if (!typingDisplayContent.value.has(answerId)) {
    typingDisplayContent.value.set(answerId, "");
      startTypingEffect(answerId, item.answerContent || "");
    return "";
  }
  return typingDisplayContent.value.get(answerId) || "";
  } else {
    // Agent 模式
    const messageId = item.id;
    if (!messageId) return item.content || "";

    if (!typingDisplayContent.value.has(messageId)) {
      typingDisplayContent.value.set(messageId, "");
      startTypingEffect(messageId, item.content || "");
      return "";
    }
    return typingDisplayContent.value.get(messageId) || "";
  }
};

// 监听消息变化
watch(
  messages,
  (newMessages, oldMessages) => {
    console.log("消息列表变化:", newMessages.length, "条消息");

    // 如果消息被清空（例如点击新建对话），清理打字机状态和动画
    if (newMessages.length === 0) {
      typingDisplayContent.value.clear();
      typingAnimationFrames.value.forEach((frameId) => {
        if (frameId) cancelAnimationFrame(frameId);
      });
      typingAnimationFrames.value.clear();
      typingTargetContent.value.clear();
      isTypingActive.value = false;
      return;
    }

    if (newMessages.length > (oldMessages ? oldMessages.length : 0)) {
      nextTick(() => {
        scrollToBottom();
      });
    }

    // 检查是否有打字机效果正在进行
    let hasTyping = false;

    if (chatMode.value === "ask") {
    newMessages.forEach((message: any) => {
      if (message.answers && message.answers.length > 0) {
        const answer = message.answers[0];
        const answerId = answer.id || answer.questionId;

        if (answer.status === "typing" && answer.answerContent) {
          hasTyping = true;
          if (answerId) {
            updateTypingTarget(answerId, answer.answerContent);
          }
        } else if (answer.status === "completed") {
          if (answerId) {
            stopTypingEffect(answerId);
          }
          setTimeout(() => {
            forceScrollToBottom();
          }, 50);
        }
      }
    });
    } else {
      // Agent 模式
      newMessages.forEach((message: any) => {
        const messageId = message.id;

        if (message.status === "streaming" && message.isStreaming && message.content) {
          hasTyping = true;
          if (messageId) {
            updateTypingTarget(messageId, message.content);
          }
        } else if (message.status === "completed") {
          if (messageId) {
            stopTypingEffect(messageId);
          }
          setTimeout(() => {
            forceScrollToBottom();
          }, 50);
        }
      });
    }

    // 更新打字机活跃状态
    isTypingActive.value = hasTyping;

    // 历史回放：loadTurns 会一次性灌入 messages，且每条 user message 可能带 attachedFiles
    // 这里仅在“从空到有”的首次加载时恢复绿条（上一轮附件）
    if (
      agentChatRef.value &&
      (!oldMessages || oldMessages.length === 0) &&
      newMessages.length > 0
    ) {
      const lastUserWithFiles = [...newMessages]
        .reverse()
        .find(
          (m: any) =>
            m?.role === "user" &&
            Array.isArray(m?.attachedFiles) &&
            m.attachedFiles.length > 0,
        );
      if (lastUserWithFiles) {
        (agentChatRef.value as any).setLastRoundAttachments?.(
          lastUserWithFiles.attachedFiles,
        );
      }
    }
  },
  { deep: true },
);

// 方法
const handleSend = async (msg: any) => {
  if (chatMode.value === "ask") {
    await handleSendAsk(msg);
  } else {
    await handleSendAgent(msg);
  }
};

const handleSendAsk = async (msg: any) => {
  try {
    const content = typeof msg === "string" ? msg : msg.question;
    const knowledgeReferences = msg.knowledgeReferences || [];
    // 处理知识库引用
    let contextArray: number[] = [];
    if (knowledgeReferences.length > 0) {
      knowledgeReferences.forEach((ref: any) => {
        if (ref.type === "files" && ref.files && ref.files.length > 0) {
          // 将所有引用的文件 ID 添加到 context 数组中
          ref.files.forEach((file: any) => {
            const id = file.id || file.fileId;
            const fileId = typeof id === 'string' ? parseInt(id, 10) : id;
            if (typeof fileId === 'number' && !isNaN(fileId)) {
              contextArray.push(fileId);
            }
          });
        }
      });
      filesArray.value = contextArray;
    }
    // 发送文本消息
    if (content.trim()) {
      const tempQuestionId = `temp_${Date.now()}`;
      const userMessage = {
        questionId: tempQuestionId,
        question: content.trim(),
        questionCreatedAt: new Date().toISOString(),
        chatId: currentSession.value
          ? String((currentSession.value as any).sessionId || currentSession.value.id)
          : undefined,
        answers: [
          {
            id: `answer_${Date.now()}`,
            questionId: tempQuestionId,
            answerContent: "",
            createdAt: new Date().toISOString(),
            status: "thinking" as const,
          },
        ],
      };
      chatApiStore.messages.push(userMessage);
      resetAutoScrollState();
      nextTick(scrollToBottom);
      const result = await chatApiStore.sendMessage({
        sessionId: currentSession.value
          ? (currentSession.value as any).sessionId || currentSession.value.id
          : undefined,
        question: content.trim(),
        context: contextArray,
        provider: "doubao", // AgentPanel 工作台默认使用 doubao
      });
      if (!result.success) {
        console.error("发送消息失败:", result.error);
        chatApiStore.updateMessageStatus({
          questionId: tempQuestionId,
          status: "error",
          content: "发送失败，请重试",
        });
        return;
      }
      const { data } = await getServicePrice({ serviceTypeId: 3 });
      if (data !== undefined && data !== null) {
        try {
          const consumeResult = await consumeBeans({
            serviceType: "文档生成",
            beanQuantity: data,
            agentTaskId: result.data?.questionId,
          });
        } catch (error) {
          console.error("消费领医豆失败:", error);
        }
      }
    }
  } catch (error) {
    console.error("发送消息失败:", error);
  }
};

const handleSendAgent = async (msg: any) => {
  try {
    const content = typeof msg === "string" ? msg : msg.question;
    const knowledgeReferences = msg.knowledgeReferences || [];
    const localFiles = msg.files || [];

    let newContextFileIds: number[] = [];
    const uploadedMeta: { id: number; name: string }[] = [];

    if (localFiles.length > 0) {
      try {
        const { uploadBatchFiles } = await import("@/api/files");
        const uploadResult = await uploadBatchFiles(localFiles, -1);
        if (uploadResult) {
          const apiData = uploadResult.data;
          const uploadedItems = Array.isArray(apiData)
            ? apiData
            : apiData?.files || apiData?.items || [];

          uploadedItems.forEach((file: any) => {
            const fileId = file.id || file.fileId;
            const nm =
              file.name ||
              file.fileName ||
              file.itemName ||
              (fileId ? `file-${fileId}` : "");
            if (fileId) {
              const nid = Number(fileId);
              newContextFileIds.push(nid);
              uploadedMeta.push({ id: nid, name: nm || `file-${nid}` });
            }
          });
          ElMessage.success(
            t("KnowledgeBase.uploadToRootJoinChatSuccess") ||
              "文件已保存至知识库根目录并加入对话",
          );
        }
      } catch (uploadError) {
        console.error("Agent 模式拖拽文件上传失败:", uploadError);
        ElMessage.error(
          t("KnowledgeBase.uploadFailed") || "文件上传失败，请稍后重试",
        );
      }
    }

    if (knowledgeReferences.length > 0) {
      knowledgeReferences.forEach((ref: any) => {
        if (ref.type === "files" && ref.files && ref.files.length > 0) {
          const refIdList = parseRefFileIdsList(ref);
          ref.files.forEach((file: any, idx: number) => {
            const id = resolveFileEntryId(file, idx, refIdList);
            if (id !== undefined) {
              newContextFileIds.push(id);
            }
          });
        }
      });
    }

    const turnFileIds = [...new Set(newContextFileIds)];

    let attachedPayload = buildAttachedFilesPayload(
      knowledgeReferences,
      uploadedMeta,
    );
    attachedPayload = ensureAttachedPayloadCoversTurnFileIds(
      attachedPayload,
      turnFileIds,
      knowledgeReferences,
      uploadedMeta,
    );

    if (content.trim()) {
      resetAutoScrollState();
      nextTick(scrollToBottom);

      console.log("[AgentPanelBody Workspace] send turn", {
        turnFileIds,
        attachedPayload,
        knowledgeRefsCount: knowledgeReferences.length,
      });

      const result = await codexStore.sendMessage(
        content.trim(),
        currentSession.value ? (currentSession.value as any).sessionId : undefined,
        turnFileIds,
        attachedPayload.length > 0 ? attachedPayload : undefined,
      );

      if (!result.success) {
        console.error("发送消息失败:", result.error);
        ElMessage.error(result.error || "发送消息失败");
      } else if (agentChatRef.value) {
        // 发送成功后：编辑态引用仅用于发送前展示，清空后改用绿条提示“上一轮附件”
        (agentChatRef.value as any).clearEditingAttachments?.();
        // 仅当本轮有附件时才覆盖绿条；纯文字发送不清空上一轮绿条
        if (attachedPayload.length > 0) {
          (agentChatRef.value as any).setLastRoundAttachments(attachedPayload);
        }
      }
    }
  } catch (error) {
    console.error("发送消息失败:", error);
    ElMessage.error("发送消息失败");
  }
};

watch(
  () => (currentSession.value as any)?.sessionId,
  (sid, prev) => {
    if (!agentChatRef.value) return;
    if (sid && prev && sid === prev) return;
    // 切换/新建会话时清空：避免上一会话绿条串到下一会话
    (agentChatRef.value as any).clearEditingAttachments?.();
    (agentChatRef.value as any).clearLastRoundAttachments?.();
  },
);

const handleRetry = async (item: any) => {
  if (chatMode.value === "ask") {
    await handleRetryAsk(item);
  } else {
    await handleRetryAgent(item);
  }
};

const handleRetryAsk = async (chatItem: any) => {
  if (!currentSession.value || !chatItem.question) {
    console.warn("无法重试：缺少会话或问题内容");
    return;
  }

  try {
    console.log("重试发送消息:", chatItem.question);
    chatApiStore.updateMessageStatus({
      questionId: chatItem.questionId,
      status: "thinking",
      content: "",
    });

    resetAutoScrollState();
    nextTick(scrollToBottom);

    const result = await chatApiStore.sendMessage({
      sessionId: (currentSession.value as any).sessionId || currentSession.value.id,
      question: chatItem.question,
      context: filesArray.value,
      provider: "doubao", // AgentPanel 工作台默认使用 doubao
    });

    if (!result.success) {
      console.error("重试发送失败:", result.error);
      chatApiStore.updateMessageStatus({
        questionId: chatItem.questionId,
        status: "error",
        content: "发送失败，请重试",
      });
    }
  } catch (error) {
    console.error("重试发送过程中出错:", error);
    chatApiStore.updateMessageStatus({
      questionId: chatItem.questionId,
      status: "error",
      content: "发送失败，请重试",
    });
  }
};

const handleRetryAgent = async (message: any) => {
  if (!currentSession.value) {
    console.warn("无法重试：缺少会话");
    return;
  }

  const messageIndex = messages.value.findIndex((m: any) => m.id === message.id);
  if (messageIndex <= 0) {
    ElMessage.warning("无法找到原始问题");
    return;
  }

  const userMessage = messages.value[messageIndex - 1];
  if (!userMessage || userMessage.role !== "user") {
    ElMessage.warning("无法找到原始问题");
    return;
  }

  try {
    message.status = "pending";
    message.error = null;

    resetAutoScrollState();
    nextTick(scrollToBottom);

    const retryAttached = (userMessage as any).attachedFiles as
      | AttachedFilePayload[]
      | undefined;
    const retryFileIds =
      Array.isArray(retryAttached) && retryAttached.length > 0
        ? retryAttached.map((f) => Number(f.id)).filter((n) => !Number.isNaN(n))
        : null;

    const result = await codexStore.sendMessage(
      userMessage.content,
      (currentSession.value as any).sessionId,
      retryFileIds,
      retryAttached && retryAttached.length > 0 ? retryAttached : undefined,
    );

    if (!result.success) {
      console.error("重试发送失败:", result.error);
      message.status = "error";
      message.error = result.error || "发送失败，请重试";
    }
  } catch (error: any) {
    console.error("重试发送过程中出错:", error);
    message.status = "error";
    message.error = error.message || "发送失败，请重试";
  }
};

const handleApprove = async (message: any, decision: string) => {
  if (!message.pendingApproval) return;

  try {
    const approval = message.pendingApproval;
    let result;

    if (approval.type === "command") {
      result = await codexStore.approveCommand(
        approval.approvalId,
        decision as any,
      );
    } else if (approval.type === "patch") {
      result = await codexStore.approvePatch(
        approval.approvalId,
        decision as any,
        approval.fileChangeId,
      );
    }

    if (result && !result.success) {
      ElMessage.error(result.error || "审批操作失败");
    }
  } catch (error: any) {
    console.error("审批操作失败:", error);
    ElMessage.error(error.message || "审批操作失败");
  }
};

const isMessageCompleted = (message: any) => {
  if (!message.status) return true;
  return message.status === "completed";
};

const handleCopy = async (content: string) => {
  try {
    if (!content) {
      ElMessage.warning(t("chat.noContentToCopy") || "没有可复制的内容");
      return;
    }
    await navigator.clipboard.writeText(content);
    ElMessage.success(t("chat.contentCopied") || "内容已复制到剪贴板");
  } catch (error) {
    try {
      const textArea = document.createElement("textarea");
      textArea.value = content;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand("copy");
      document.body.removeChild(textArea);
      ElMessage.success(t("chat.contentCopied") || "内容已复制到剪贴板");
    } catch (fallbackError) {
      console.error("降级复制也失败:", fallbackError);
      ElMessage.error(t("chat.copyFailed") || "复制失败，请手动复制");
    }
  }
};

const handleCopyMessage = async (message: any) => {
  await handleCopy(message.content);
};

const handleSaveAndEditAgent = async (message: any) => {
  try {
    console.log("AgentPanelBody: 处理保存并编辑", { message });

    if (!message.content) {
      ElMessage.warning("没有可保存的内容");
      return;
    }

    // 检查消息状态
    if (message.status === "pending") {
      ElMessage.warning("AI正在思考中，请等待回答完成后再保存");
      return;
    }

    if (message.status === "streaming") {
      ElMessage.warning("回答正在生成中，请等待完成后再保存");
      return;
    }

    if (message.status === "error") {
      ElMessage.warning("回答出现错误，无法保存");
      return;
    }

    // 只有当状态为 completed 或者没有状态字段时才允许保存
    if (message.status && message.status !== "completed") {
      ElMessage.warning("回答尚未完成，请稍后再试");
      return;
    }

    if (!currentSession.value) {
      ElMessage.error("缺少会话信息，无法保存");
      return;
    }

    const messageIndex = messages.value.findIndex((m: any) => m.id === message.id);
    let questionContent = "";
    if (messageIndex > 0) {
      const prevMessage = messages.value[messageIndex - 1];
      if (prevMessage && prevMessage.role === "user") {
        questionContent = prevMessage.content;
      }
    }
    
    const title = questionContent || message.content;

    await workspaceStore.generateDocument({
      title,
      content: message.content,
      isDeepSearch: true,
      onSuccess: async (fileInfo, draftContent) => {
        // 5. 添加到对话框引用
        if (agentChatRef.value) {
          agentChatRef.value.addFileReferences(
            [
              {
                id: fileInfo.id || fileInfo.fileId,
                name: fileInfo.name || fileInfo.fileName,
                type: "md",
              },
            ],
            [(fileInfo.id || fileInfo.fileId).toString()],
          );
        }

        // 6. 跳转到工作台编辑器
        await openInWorkspace({
          id: fileInfo.id,
          title: fileInfo.name || fileInfo.fileName,
          isDraft: false,
          preloadContent: draftContent,
        });
      }
    });
  } catch (error) {
    console.error("保存并编辑失败:", error);
    ElMessage.error("操作失败，请重试");
  }
};

const handleFileUpload = (file: File) => {
  console.log("文件上传:", file);
};

const handleKnowledgeReference = (doc: any) => {
  console.log("知识库引用:", doc);
};

const handleSelectModel = (model: any) => {
  console.log("选择模型:", model);
};

const isAnswerCompleted = (answer: any) => {
  if (!answer.status) return true;
  return answer.status === "completed";
};

const handleCopyAnswer = async (answer: any) => {
  await handleCopy(answer.answerContent);
};

const handleSaveAndEdit = async (chatItem: any, answer: any) => {
  try {
    console.log("AgentPanelBody: 处理保存并编辑", { chatItem, answer });

    if (!answer.answerContent) {
      ElMessage.warning("没有可保存的内容");
      return;
    }

    if (answer.status === "thinking") {
      ElMessage.warning("AI正在思考中，请等待回答完成后再保存");
      return;
    }

    if (answer.status === "typing") {
      ElMessage.warning("回答正在生成中，请等待完成后再保存");
      return;
    }

    if (answer.status === "error") {
      ElMessage.warning("回答出现错误，无法保存");
      return;
    }

    if (answer.status && answer.status !== "completed") {
      ElMessage.warning("回答尚未完成，请稍后再试");
      return;
    }

    if (!chatItem.questionId) {
      ElMessage.error("缺少问题ID，无法保存");
      return;
    }

    if (!currentSession.value) {
      ElMessage.error("缺少会话信息，无法保存");
      return;
    }

    const title = chatItem.question || "未命名文档";

    await workspaceStore.generateDocument({
      title,
      content: answer.answerContent,
      questionId: chatItem.questionId,
      isDeepSearch: false,
      onSuccess: async (fileInfo, draftContent) => {
        // 5. 添加到对话框引用
        if (agentChatRef.value) {
          agentChatRef.value.addFileReferences(
            [
              {
                id: fileInfo.id || fileInfo.fileId,
                name: fileInfo.name || fileInfo.fileName,
                type: "md",
              },
            ],
            [(fileInfo.id || fileInfo.fileId).toString()],
          );
        }

        // 6. 跳转到工作台编辑器
        await openInWorkspace({
          id: fileInfo.id,
          title: fileInfo.name || fileInfo.fileName,
          isDraft: false,
          preloadContent: draftContent,
        });
      }
    });
  } catch (error) {
    console.error("保存并编辑失败:", error);
    ElMessage.error("操作失败，请重试");
  }
};

const openInWorkspace = async (fileInfo: any) => {
  const loading = ElLoading.service({
    lock: true,
    text: "正在准备文档...",
    background: "rgba(0, 0, 0, 0.7)",
  });

  try {
    console.log("准备在工作台中打开文件:", fileInfo);

    let fileContent = fileInfo.preloadContent || "";
    // 先下载文件内容，确保文件可以正常访问
    try {
      if (!fileContent) {
        console.log("开始下载文件内容，fileId:", fileInfo.id);
        // 统一使用常规文件 API
        const contentResponse = await getFileContent(fileInfo.id);
        fileContent = contentResponse.data;
        console.log("文件内容下载成功，内容长度:", fileContent.length);
      } else {
        console.log("使用预传递的文件内容，内容长度:", fileContent.length);
      }
    } catch (downloadError) {
      console.error("下载文件内容失败:", downloadError);
      ElMessage.warning("文件内容预加载失败，将尝试在编辑器中重新加载");
    }

    const params: any = {
      fileId: fileInfo.id,
      fileName: fileInfo.title || fileInfo.name,
      fileType: "md", // 默认为 markdown
      isChatAnswer: fileInfo.isDraft === false ? "false" : "true", // 明确标记是否为智能体回答文件（草稿）
    };

    if (fileContent) {
      params.preloadContent = encodeURIComponent(fileContent);
    }

    await performRouterNavigation(params);
  } catch (error) {
    console.error("打开工作台编辑器失败:", error);
    ElMessage.error("打开编辑器失败，请重试");
  } finally {
    loading.close();
  }
};

const performRouterNavigation = async (params: any) => {
  try {
    console.log("开始执行路由跳转，参数:", params);

    try {
      await router.push({
        name: "Workspace",
        query: params,
      });
      console.log("使用路由名称跳转成功");
      return;
    } catch (nameError) {
      console.warn("路由名称跳转失败:", nameError);
    }

    try {
      await router.push({
        path: "/app/workspace",
        query: params,
      });
      console.log("使用路径跳转成功");
      return;
    } catch (pathError) {
      console.warn("路径跳转失败:", pathError);
    }

    const possiblePaths = ["/workspace", "/Workspace", "/app/Workspace"];

    for (const path of possiblePaths) {
      try {
        await router.push({
          path: path,
          query: params,
        });
        console.log(`使用路径 ${path} 跳转成功`);
        return;
      } catch (error) {
        console.warn(`路径 ${path} 跳转失败:`, error);
      }
    }

    console.error("所有路由跳转方式都失败");
    ElMessage.error("无法跳转到工作台，请手动导航到工作台页面");

    const queryString = new URLSearchParams(params).toString();
    const targetUrl = `#/app/workspace?${queryString}`;
    console.log("如需手动跳转，请访问:", targetUrl);
  } catch (error) {
    console.error("路由跳转过程中发生错误:", error);
    ElMessage.error("跳转失败，请重试");
  }
};

const scrollToBottom = () => {
  if (!shouldAutoScroll.value) {
    console.log("用户手动滚动过，跳过自动滚动到底部");
    return;
  }

  nextTick(() => {
    const container = messagesContainerRef.value;
    if (container) {
      container.scrollTop = container.scrollHeight;
    }
  });
};

const forceScrollToBottom = () => {
  const container = messagesContainerRef.value;
  if (container) {
    requestAnimationFrame(() => {
      if (container) {
        container.scrollTop = container.scrollHeight;
        shouldAutoScroll.value = true;
        userScrolled.value = false;
        console.log("打字机效果结束，强制滚动到底部并恢复自动滚动");
      }
    });
  }
};

const typingTargetContent = ref<Map<string, string>>(new Map());

const TYPING_CONFIG = {
  charsPerFrame: 3,
  minCharsPerFrame: 2,
  maxCharsPerFrame: 10,
};

const startTypingEffect = (answerId: string, targetContent: string) => {
  if (typingAnimationFrames.value.has(answerId)) {
    return;
  }

  typingTargetContent.value.set(answerId, targetContent);

  const charsPerFrame = TYPING_CONFIG.charsPerFrame;

  const typeNextChars = () => {
    const currentContent = typingDisplayContent.value.get(answerId) || "";
    const targetContent = typingTargetContent.value.get(answerId) || "";

    if (targetContent.length > currentContent.length) {
      const nextIndex = Math.min(
        currentContent.length + charsPerFrame,
        targetContent.length,
      );

      const nextContent = targetContent.substring(0, nextIndex);
      typingDisplayContent.value.set(answerId, nextContent);

      if (shouldAutoScroll.value) {
        nextTick(() => {
          const container = messagesContainerRef.value;
          if (container) {
            container.scrollTop = container.scrollHeight;
          }
        });
      }

      const frameId = requestAnimationFrame(typeNextChars);
      typingAnimationFrames.value.set(answerId, frameId);
    } else {
      typingAnimationFrames.value.delete(answerId);

      if (shouldAutoScroll.value) {
        nextTick(() => {
          const container = messagesContainerRef.value;
          if (container) {
            container.scrollTop = container.scrollHeight;
          }
        });
      }
    }
  };

  const frameId = requestAnimationFrame(typeNextChars);
  typingAnimationFrames.value.set(answerId, frameId);
};

const updateTypingTarget = (answerId: string, newTargetContent: string) => {
  const oldTarget = typingTargetContent.value.get(answerId) || "";

  if (newTargetContent !== oldTarget) {
    typingTargetContent.value.set(answerId, newTargetContent);

    if (!typingAnimationFrames.value.has(answerId)) {
      startTypingEffect(answerId, newTargetContent);
    }
  }
};

const stopTypingEffect = (answerId: string) => {
  const frameId = typingAnimationFrames.value.get(answerId);
  if (frameId) {
    cancelAnimationFrame(frameId);
    typingAnimationFrames.value.delete(answerId);
  }

  typingDisplayContent.value.delete(answerId);
  typingTargetContent.value.delete(answerId);
};

let scrollCheckTimeout: number | null = null;

const handleScroll = (event: Event) => {
  const container = event.target as HTMLElement;
  if (!container) return;

  if (scrollCheckTimeout) {
    clearTimeout(scrollCheckTimeout);
  }

  scrollCheckTimeout = window.setTimeout(() => {
    const scrollTop = container.scrollTop;
    const scrollHeight = container.scrollHeight;
    const clientHeight = container.clientHeight;
    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;

    const isAtBottom = distanceFromBottom <= 50;

    if (isAtBottom) {
      if (!shouldAutoScroll.value) {
        console.log("用户滚动到底部，恢复自动滚动");
        shouldAutoScroll.value = true;
        userScrolled.value = false;
      }
    } else {
      if (shouldAutoScroll.value && isTypingActive.value) {
        console.log("打字机效果中，用户手动滚动离开底部，停止自动滚动");
        shouldAutoScroll.value = false;
        userScrolled.value = true;
      }
    }
  }, 100);
};

const resetAutoScrollState = () => {
  shouldAutoScroll.value = true;
  userScrolled.value = false;
  console.log("重置自动滚动状态");
};

onMounted(() => {
  console.log("AgentPanelBody mounted");
  nextTick(() => {
    const container = messagesContainerRef.value;
    if (container) {
      container.addEventListener("scroll", handleScroll);
    }
  });
});

onUnmounted(() => {
  const container = messagesContainerRef.value;
  if (container) {
    container.removeEventListener("scroll", handleScroll);
  }

  if (scrollCheckTimeout) {
    clearTimeout(scrollCheckTimeout);
    scrollCheckTimeout = null;
  }

  typingAnimationFrames.value.forEach((frameId) => {
    cancelAnimationFrame(frameId);
  });
  typingAnimationFrames.value.clear();
  typingDisplayContent.value.clear();
  typingTargetContent.value.clear();
});

defineExpose({
  agentChatRef,
});
</script>

<style scoped>
.agent-panel-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px 10px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.chat-container {
  flex-shrink: 0;
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.user-question {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 26px;
}

.user-attached-files {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
  margin-bottom: 8px;
}

.ai-answer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
}

.message-body-question {
  padding: 8px 12px 8px 12px;
  border-radius: 8px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
  word-wrap: break-word;
  font-size: 14px;
  background: var(--user-question-bg);
  color: var(--user-question-text);
}

.message-body-answer {
  border-radius: 8px;
  line-height: 1.5;
  word-break: break-word;
  max-width: 100%;
  word-wrap: break-word;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--ai-answer-bg);
  color: var(--ai-answer-text);
}

.markdown-content {
  width: 100%;
  padding: 8px 12px;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.message-actions-answer {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 12px;
  gap: 4px;
}

.action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  &:hover {
    background: rgba(0, 0, 0, 0.05);
  }

  &.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(100%);
    
    &:hover {
      background: none;
    }
  }
}

.icon-svg {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain;
  flex-shrink: 0;
}

.ai-thinking {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--ai-answer-bg);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ai-answer-text);
  min-height: 60px;
  transition: all 0.3s ease;
}

.thinking-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.thinking-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary, #2871f6);
  animation: thinking 1.4s infinite ease-in-out;
  display: inline-block;
}

.thinking-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.thinking-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

.thinking-text {
  font-size: 14px;
  color: var(--color-text-secondary, #999);
  font-weight: 500;
}

@keyframes thinking {
  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.error-message {
  background: rgba(244, 67, 54, 0.1) !important;
  border: 1px solid #eaa8a3 !important;
  color: #f44336 !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px 2px 4px 12px;
  border-radius: 4px;
  gap: 8px;
}

.retry-icon {
  cursor: pointer;
  transition: all 0.2s ease;
}

.retry-icon:hover {
  color: #d32f2f;
  transform: rotate(180deg);
}

.websocket-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid #eaa8a3 !important;
  color: #f44336;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px 16px;
  font-size: 12px;
}

.websocket-success {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid #4caf50;
  color: #4caf50;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px 16px;
  font-size: 12px;
}

.messages-container::-webkit-scrollbar {
  width: 6px;
}

.messages-container::-webkit-scrollbar-track {
  background: transparent;
}

.messages-container::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.messages-container::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary);
}

.typewriter {
  position: relative;
}

.typewriter-content {
  white-space: normal !important;
  word-wrap: break-word;
}

.approval-pending {
  background: rgba(255, 193, 7, 0.1) !important;
  border: 1px solid #ffc107 !important;
  padding: 12px;
  border-radius: 8px;
}

.approval-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.approval-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #ff9800;
}

.approval-body {
  padding: 8px 0;
  font-size: 13px;
}

.approval-body pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 8px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  margin-top: 4px;
}

.approval-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.message-actions-user {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 4px;
  gap: 4px;
}

</style>