<template>
  <div class="ai-chat">
    <!-- 顶部会员横幅 — 点击打开会员购买弹窗 -->
    <div class="ai-chat__banner" @click="showMemberDialog = true">
      <span class="dflex-start aliite-c"> <img src="@/assets/images/bule-flash.png" alt="Offer派" class="w16 h19 mr5" /> <span>升级 Pro 开启求职加速</span></span>
      <span class="ai-chat__banner-arrow">›</span>
    </div>

    <!-- AI 头像和名称 -->
    <div class="ai-chat__header">
      <div class="ai-chat__avatar">👤</div>
      <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__messages" ref="messagesRef">
      <!-- AI 欢迎消息 -->
      <div class="ai-chat__msg ai-chat__msg--ai">
        <div class="ai-chat__msg-bubble">
          <div class="ai-chat__msg-title">欢迎回来，{{nickName}}!</div>
          <div class="ai-chat__msg-text">很高兴再次见到你，让我们继续您通往理想工作的旅程吧。</div>
        </div>
      </div>

      <!-- 快捷问题（仅岗位详情页显示，3个用户提问靠右） -->
      <div v-if="userQuestions.length > 0" class="ai-chat__quick-questions">
        <div
          v-for="(q, i) in userQuestions"
          :key="i"
          class="ai-chat__quick-item ai-chat__quick-item--user"
          @click="sendQuickQuestion(q)"
        >
          {{ q }}
        </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="msg.content"></div>
      </div>

      <!-- AI 正在思考中加载指示器 -->
      <AiThinkingIndicator v-if="aiLoading" text="AI正在思考中" />
    </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">
        <span>➤</span>
      </button>
    </div>

    <!-- 会员购买弹窗 -->
    <MemberDialog v-model="showMemberDialog" />
  </div>
</template>

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

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

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

/** 当前路由（用于判断是否在岗位详情页） */
const currentRoute = useRoute()
const store = useStore()


/** 用户昵称 — 从全局 store 读取 */
const nickName = computed(() => store.state.userInfo?.nick || '')

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

/** 会员购买弹窗的显示状态 */
const showMemberDialog = ref(false)

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

/** 消息列表容器 DOM 引用（用于滚动控制） */
const messagesRef = ref<HTMLElement>()

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

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

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

/** 聊天消息类型 */
interface ChatMsg {
  /** 角色：assistant-AI助手 user-用户 */
  role: 'assistant' | 'user'
  /** 消息内容 */
  content: string
}

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

/** 获取当前用户的缓存 key */
function getCacheKey(): string {
  // 用 sessionStorage 中的登录状态 + 一个简单标识区分用户
  // 如果有更精确的用户 ID 可以替换
  const userId = sessionStorage.getItem('userId') || '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/'))

/** 快捷问题列表（仅岗位详情页显示的 3 个用户提问） */
const quickQuestions = computed(() => {
  if (!isJobDetailPage.value) return []
  return [
    '告诉我这个工作为什么适合我？',
    '我想修改这个岗位，怎么优化简历？',
    '帮我针对这个岗位生成一份面试攻略',
  ]
})

/** 用户提问列表（等同于 quickQuestions） */
const userQuestions = computed(() => quickQuestions.value)

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

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

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

/** 加载默认简历 ID（用于 Nova 对话接口） */
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,
    })
    // 添加 AI 回复消息
    const aiReply = res?.data?.message || res?.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()
  }
})

// 监听 jobId 变化（Jobs 页面点击"问助手"按钮时触发），自动插入 AI 提问消息
watch(() => props.jobId, (newId, oldId) => {
  if (newId && newId !== oldId && !isJobDetailPage.value) {
    // Jobs 页面：以 AI 身份插入提问到对话记录
    messages.value.push({ role: 'assistant', content: '你想知道关于这个岗位的什么信息？' })
    saveChatToCache()
    scrollToBottom()
  }
})
</script>
