<template>
  <!-- Nova AI 对话面板 -->
  <div class="ai-chat">

    <!-- 顶部头部区域 -->
    <div class="ai-chat__header">
      <div class="ai-chat__header-left">
        <!-- Nova 头像 -->
        <img class="ai-chat__avatar" src="@/assets/images/nova-logo.png" alt="Nova" />
        <!-- 名称和副标题 -->
        <div class="ai-chat__info">
          <div class="ai-chat__name">Nova</div>
          <div class="ai-chat__desc">你的AI求职助理</div>
        </div>
      </div>
      <!-- 在线状态标签 -->
      <div class="ai-chat__online-tag">
        <span class="ai-chat__online-dot"></span>
        <span>在线</span>
      </div>
    </div>

    <!-- 聊天消息区域 -->
    <div class="ai-chat__messages scrollbar-thin" ref="messagesRef">

      <!-- 固定欢迎气泡 -->
      <div class="ai-chat__welcome-bubble">
        <div class="ai-chat__welcome-title">欢迎使用 Offer派！👋</div>
        <div class="ai-chat__welcome-text">从找岗位到投递跟进，我会陪你一步步拿下理想Offer。</div>
      </div>

      <!-- 动态消息列表 -->
      <div
        v-for="(msg, i) in messages"
        :key="i"
        class="ai-chat__msg"
        :class="msg.role === 'assistant' ? 'ai-chat__msg--ai' : 'ai-chat__msg--user'"
      >
        <div class="ai-chat__msg-bubble" v-html="formatContent(msg.content)"></div>
      </div>

      <!-- AI 等待中 3 点动效 -->
      <div v-if="aiLoading" class="ai-chat__msg ai-chat__msg--ai">
        <div class="ai-chat__typing-indicator">
          <span class="ai-chat__typing-dot"></span>
          <span class="ai-chat__typing-dot"></span>
          <span class="ai-chat__typing-dot"></span>
        </div>
      </div>

    </div>

    <!-- 话题推荐模块（固定在输入框上方） -->
    <div class="ai-chat__topics">
      <div class="ai-chat__topics-header">
        <svg class="ai-chat__topics-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M8 1L10 6L15 6.5L11.5 10L12.5 15L8 12.5L3.5 15L4.5 10L1 6.5L6 6L8 1Z" fill="#52CAD1"/>
        </svg>
        <span class="ai-chat__topics-title">话题推荐</span>
      </div>
      <div
        v-for="(topic, i) in topicList"
        :key="i"
        class="ai-chat__topic-btn"
        @click="sendQuickQuestion(topic)"
      >
        {{ topic }}
      </div>
    </div>

    <!-- 底部输入框 -->
    <div class="ai-chat__input-area">
      <input
        v-model="inputText"
        class="ai-chat__input"
        placeholder="请输入你想问的问题…"
        @keyup.enter="sendMessage"
        :disabled="aiLoading"
      />
      <button class="ai-chat__send-btn" @click="sendMessage" :disabled="aiLoading">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
          <path d="M4 10L16 4L13 10L16 16L4 10Z" fill="#FFFFFF"/>
        </svg>
      </button>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import markdownit from 'markdown-it'
import { sendNovaChat } from '@/utils/aiRequest'
import type { NovaChatHistoryItem } from '@/utils/aiRequest'
import { fetchResumeList } from '@/api/resume'

// ==================== Markdown 渲染实例 ====================

/** markdown-it 实例，用于将 AI 回复的 Markdown 文本渲染为 HTML */
const md = markdownit({
  html: false,
  breaks: true,
  linkify: true,
})

// ==================== Props ====================

/** 组件属性 */
const props = defineProps<{
  /** 岗位 ID，由父页面传入 */
  jobId?: string
}>()

/** 当前路由 */
const currentRoute = useRoute()
const store = useStore()

// ==================== 状态 ====================

/** 输入框内容 */
const inputText = ref('')

/** 消息列表容器 DOM 引用 */
const messagesRef = ref<HTMLElement>()

/** AI 是否正在请求中 */
const aiLoading = ref(false)

/** 默认简历 ID */
const defaultResumeId = ref<string>('')

// ==================== 话题推荐列表 ====================

/** 固定话题推荐（始终显示） */
const topicList = [
  '我适合投哪些岗位？',
  '帮我看看我的简历可以怎么优化？',
  '近期有哪些岗位值得投？',
]

// ==================== 类型定义 ====================

/** 聊天消息类型 */
interface ChatMsg {
  role: 'assistant' | 'user'
  content: string
}

// ==================== 本地缓存 ====================

/** 获取当前用户的缓存 key，使用 vuex 中的用户 ID 区分不同账号 */
function getCacheKey(): string {
  const userId = store.state.userInfo?.id || 'anonymous'
  return `nova_chat_${userId}`
}

/** 从 localStorage 加载聊天记录 */
function loadChatFromCache(): ChatMsg[] {
  try {
    const key = getCacheKey()
    const cached = localStorage.getItem(key)
    if (cached) {
      return JSON.parse(cached)
    }
  } catch {
    // 解析失败忽略
  }
  return []
}

/** 保存聊天记录到 localStorage */
function saveChatToCache() {
  try {
    const key = getCacheKey()
    localStorage.setItem(key, JSON.stringify(messages.value))
  } catch {
    // 存储失败忽略
  }
}

// ==================== 数据 ====================

/** 聊天消息列表 */
const messages = ref<ChatMsg[]>([])

/** 是否在岗位详情页 */
const isJobDetailPage = computed(() => currentRoute.name === 'JobDetail' || currentRoute.path.startsWith('/jobs/'))

// ==================== 内容格式化 ====================

/** 将消息内容通过 markdown-it 渲染为 HTML */
function formatContent(content: string): string {
  return md.render(content)
}

// ==================== 滚动控制 ====================

/** 滚动到聊天区域底部 */
function scrollToBottom() {
  nextTick(() => {
    if (messagesRef.value) {
      messagesRef.value.scrollTop = messagesRef.value.scrollHeight
    }
  })
}

// ==================== 加载默认简历 ID ====================

/** 加载默认简历 ID */
async function loadDefaultResumeId() {
  try {
    const res = await fetchResumeList()
    if (res.code === '0' && res.data && res.data.length > 0) {
      const defaultResume = res.data.find(r => r.isDefault === 1)
      defaultResumeId.value = defaultResume?.id || res.data[0]?.id || ''
    }
  } catch {
    // 加载失败忽略
  }
}

// ==================== 事件处理 ====================

/** 点击话题推荐，填入输入框并发送 */
function sendQuickQuestion(question: string) {
  inputText.value = question
  sendMessage()
}

/** 发送消息 */
async function sendMessage() {
  if (!inputText.value.trim() || aiLoading.value) return

  const userText = inputText.value.trim()
  inputText.value = ''

  // 添加用户消息
  messages.value.push({ role: 'user', content: userText })
  saveChatToCache()
  scrollToBottom()

  // 构建历史对话（最近 20 条）
  const history: NovaChatHistoryItem[] = messages.value
    .slice(-20)
    .map(m => ({ role: m.role, content: m.content }))

  // 调用 Nova 对话接口
  aiLoading.value = true
  scrollToBottom()
  try {
    const res = await sendNovaChat({
      message: userText,
      resumeId: defaultResumeId.value || 0,
      jobId: props.jobId || undefined,
      history,
    })
    // 从 res.data.message 取 AI 回复（接口返回结构：{ code, msg, data: { message } }）
    const aiReply = res?.data?.message || '抱歉，我暂时无法回答这个问题。'
    messages.value.push({ role: 'assistant', content: aiReply })
  } catch (e) {
    console.error('Nova 对话请求失败', e)
    messages.value.push({ role: 'assistant', content: '网络异常，请稍后重试。' })
  } finally {
    aiLoading.value = false
    saveChatToCache()
    scrollToBottom()
  }
}

// ==================== 生命周期 ====================

onMounted(() => {
  // 从缓存加载聊天记录（如果用户信息已就绪则按用户隔离）
  messages.value = loadChatFromCache()
  if (messages.value.length > 0) {
    scrollToBottom()
  }
  // 加载默认简历 ID
  if (store.state.isAuthenticated) {
    loadDefaultResumeId()
  }
})

// 监听 userInfo 变化：用户登录后 userInfo 从 null 变为有值时重新加载对应用户的缓存
watch(() => store.state.userInfo, (newInfo, oldInfo) => {
  if (newInfo && newInfo.id && (!oldInfo || !oldInfo.id)) {
    // 用户信息就绪，重新加载该用户的聊天记录
    messages.value = loadChatFromCache()
    if (messages.value.length > 0) {
      scrollToBottom()
    }
  }
})

// 监听 jobId 变化
watch(() => props.jobId, (newId, oldId) => {
  if (newId && newId !== oldId && !isJobDetailPage.value) {
    messages.value.push({ role: 'assistant', content: '你想知道关于这个岗位的什么信息？' })
    saveChatToCache()
    scrollToBottom()
  }
})

// ==================== 对外暴露方法 ====================

/** 触发"问Nova"交互：推送提示消息并聚焦输入框 */
function triggerAsk() {
  messages.value.push({ role: 'assistant', content: '你想知道关于这个岗位的什么信息？' })
  saveChatToCache()
  scrollToBottom()
}

defineExpose({ triggerAsk })
</script>
