<template>
  <!-- 导师页右侧广告面板：模式一（列表页）/ 模式二（详情页） -->
  <div class="mentor-aside-panel">

    <!-- ==================== 模式一：导师列表页展示 ==================== -->
    <template v-if="mode === 'list'">
      <!-- 顶部渐变区域：标题 + 副标题 -->
      <div class="mentor-aside-panel__header">
        <div class="mentor-aside-panel__title">和真实职场导师聊聊</div>
        <div class="mentor-aside-panel__subtitle">让职业选择更清晰</div>
      </div>

      <!-- 统计数字区域 -->
      <div class="mentor-aside-panel__stats">
        <div class="mentor-aside-panel__stat-item">
          <span class="mentor-aside-panel__stat-num">3000+</span>
          <span class="mentor-aside-panel__stat-label">名企导师</span>
        </div>
        <div class="mentor-aside-panel__stat-divider"></div>
        <div class="mentor-aside-panel__stat-item">
          <span class="mentor-aside-panel__stat-num">5000+</span>
          <span class="mentor-aside-panel__stat-label">服务学员</span>
        </div>
      </div>

      <!-- 为什么选择我们的导师？ -->
      <div class="mentor-aside-panel__reasons">
        <div class="mentor-aside-panel__section-title">
          <span class="mentor-aside-panel__section-icon">✦</span>
          <span class="mentor-aside-panel__section-text">为什么选择我们的导师？</span>
        </div>
        <div class="mentor-aside-panel__reason-list">
          <!-- 真实在职导师 -->
          <div class="mentor-aside-panel__reason-item">
            <div class="mentor-aside-panel__reason-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="#52CAD1"/>
              </svg>
            </div>
            <div class="mentor-aside-panel__reason-info">
              <div class="mentor-aside-panel__reason-title">真实在职导师</div>
              <div class="mentor-aside-panel__reason-desc">信息真实，经验更落地</div>
            </div>
          </div>
          <!-- 名企背景严选 -->
          <div class="mentor-aside-panel__reason-item">
            <div class="mentor-aside-panel__reason-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M12 2L4 6V12C4 16.42 7.44 20.74 12 22C16.56 20.74 20 16.42 20 12V6L12 2Z" fill="#52CAD1"/>
              </svg>
            </div>
            <div class="mentor-aside-panel__reason-info">
              <div class="mentor-aside-panel__reason-title">名企背景严选</div>
              <div class="mentor-aside-panel__reason-desc">覆盖大厂、外企、央国企等类型</div>
            </div>
          </div>
          <!-- 企业一线视角 -->
          <div class="mentor-aside-panel__reason-item">
            <div class="mentor-aside-panel__reason-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M20 6H16V4C16 2.89 15.11 2 14 2H10C8.89 2 8 2.89 8 4V6H4C2.89 6 2 6.89 2 8V19C2 20.11 2.89 21 4 21H20C21.11 21 22 20.11 22 19V8C22 6.89 21.11 6 20 6ZM10 4H14V6H10V4Z" fill="#52CAD1"/>
              </svg>
            </div>
            <div class="mentor-aside-panel__reason-info">
              <div class="mentor-aside-panel__reason-title">企业一线视角</div>
              <div class="mentor-aside-panel__reason-desc">不讲空话，只讲真实经验</div>
            </div>
          </div>
          <!-- 个性化辅导方案 -->
          <div class="mentor-aside-panel__reason-item">
            <div class="mentor-aside-panel__reason-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M12 3L1 9L5 11.18V17.18L12 21L19 17.18V11.18L21 10.09V17H23V9L12 3ZM18.82 9L12 12.72L5.18 9L12 5.28L18.82 9ZM17 15.99L12 18.72L7 15.99V12.27L12 15L17 12.27V15.99Z" fill="#52CAD1"/>
              </svg>
            </div>
            <div class="mentor-aside-panel__reason-info">
              <div class="mentor-aside-panel__reason-title">个性化辅导方案</div>
              <div class="mentor-aside-panel__reason-desc">针对不同需求，量身定制学习路径</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 热门导师方向 -->
      <div class="mentor-aside-panel__directions">
        <div class="mentor-aside-panel__section-title">
          <span class="mentor-aside-panel__section-icon">✦</span>
          <span class="mentor-aside-panel__section-text">热门导师方向</span>
        </div>
        <div class="mentor-aside-panel__direction-list">
          <div class="mentor-aside-panel__direction-card">
            <div class="mentor-aside-panel__direction-name">互联网产品导师</div>
            <div class="mentor-aside-panel__direction-tags">
              <span class="mentor-aside-panel__direction-tag">需求分析</span>
              <span class="mentor-aside-panel__direction-tag">PRD撰写</span>
              <span class="mentor-aside-panel__direction-tag">产品设计</span>
            </div>
          </div>
          <div class="mentor-aside-panel__direction-card">
            <div class="mentor-aside-panel__direction-name">金融/财务导师</div>
            <div class="mentor-aside-panel__direction-tags">
              <span class="mentor-aside-panel__direction-tag">财务分析</span>
              <span class="mentor-aside-panel__direction-tag">估值建模</span>
              <span class="mentor-aside-panel__direction-tag">行业研究</span>
            </div>
          </div>
          <div class="mentor-aside-panel__direction-card">
            <div class="mentor-aside-panel__direction-name">数据分析导师</div>
            <div class="mentor-aside-panel__direction-tags">
              <span class="mentor-aside-panel__direction-tag">数据收集</span>
              <span class="mentor-aside-panel__direction-tag">分析报告</span>
              <span class="mentor-aside-panel__direction-tag">指标监测</span>
            </div>
          </div>
          <div class="mentor-aside-panel__direction-card">
            <div class="mentor-aside-panel__direction-name">市场营销导师</div>
            <div class="mentor-aside-panel__direction-tags">
              <span class="mentor-aside-panel__direction-tag">市场调研</span>
              <span class="mentor-aside-panel__direction-tag">品牌策略</span>
              <span class="mentor-aside-panel__direction-tag">推广活动</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部按钮 + 提示文字 -->
      <div class="mentor-aside-panel__footer">
        <button class="mentor-aside-panel__cta-btn" @click="openQrDialog">预约导师咨询</button>
        <div class="mentor-aside-panel__footer-tip">已有5000+学员获得帮助</div>
      </div>
    </template>

    <!-- ==================== 模式二：导师详情页 — 辅导场景预览 ==================== -->
    <template v-if="mode === 'detail'">
      <!-- 顶部渐变区域 -->
      <div class="mentor-aside-panel__header">
        <div class="mentor-aside-panel__title">辅导场景预览</div>
        <div class="mentor-aside-panel__subtitle">看看这位导师能如何帮到你</div>
      </div>

      <!-- 模拟对话区域 -->
      <div class="mentor-aside-panel__chat">
        <!-- 加载中 -->
        <div v-if="chatLoading" class="mentor-aside-panel__chat-loading">
          <div class="mentor-aside-panel__chat-spinner"></div>
          <span>正在加载...</span>
        </div>

        <!-- 对话消息列表 -->
        <template v-else>
          <div
            v-for="(msg, index) in chatMessages"
            :key="index"
            class="mentor-aside-panel__chat-bubble"
            :class="{
              'mentor-aside-panel__chat-bubble--user': msg.role === 'user',
              'mentor-aside-panel__chat-bubble--mentor': msg.role === 'mentor'
            }"
          >
            <span class="mentor-aside-panel__chat-text">{{ msg.content }}</span>
          </div>
        </template>
      </div>

      <!-- 底部按钮 + 提示文字 -->
      <div class="mentor-aside-panel__footer">
        <button class="mentor-aside-panel__cta-btn" @click="openQrDialog">继续咨询</button>
        <div class="mentor-aside-panel__footer-tip">对话内容根据导师服务类型与行业背景动态生成</div>
      </div>
    </template>

    <!-- 二维码弹窗组件 -->
    <MentorQrCodeDialog
      v-model:visible="showQrDialog"
      :mentorId="mentorId"
      :source="mode === 'list' ? 'fixed' : 'api'"
    />

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { fetchMentorMockChat } from '@/api/mentor'
import type { MentorMockMessage } from '@/api/mentor'
import MentorQrCodeDialog from '@/components/MentorQrCodeDialog.vue'

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

const props = withDefaults(defineProps<{
  /** 显示模式：list=列表页，detail=详情页 */
  mode?: 'list' | 'detail'
  /** 导师ID（模式二需要，用于请求模拟对话） */
  mentorId?: string
}>(), {
  mode: 'list',
  mentorId: '',
})

// ==================== 模式二：模拟对话数据 ====================

/** 对话消息列表 */
const chatMessages = ref<MentorMockMessage[]>([])

/** 对话加载状态 */
const chatLoading = ref(false)

/**
 * 加载导师模拟对话
 */
async function loadMockChat() {
  if (!props.mentorId) return
  chatLoading.value = true
  try {
    const res: any = await fetchMentorMockChat(props.mentorId)
    const data = res?.data ?? res
    chatMessages.value = data?.messages ?? []
  } catch (e) {
    console.error('[模拟对话] 加载失败', e)
  } finally {
    chatLoading.value = false
  }
}

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

onMounted(() => {
  // 模式二时自动加载模拟对话
  if (props.mode === 'detail' && props.mentorId) {
    loadMockChat()
  }
})

// ==================== 二维码弹窗 ====================

/** 弹窗是否显示 */
const showQrDialog = ref(false)

/**
 * 打开二维码弹窗
 */
function openQrDialog() {
  showQrDialog.value = true
}
</script>
