<template>
  <div class="course-detail-page">
    <!-- 页面加载中 -->
    <div v-if="loading" class="loading-state">
      <div class="spinner"></div>
      <p>正在加载课程详情...</p>
    </div>

    <div v-else class="container">
      <!-- 顶部区域：课程信息 + 评分统计 -->
      <div class="top-section">
        <!-- 左侧：课程基本信息 -->
        <div class="info-card card">
          <div class="card-header">
            <h1 class="course-name">
              {{ course.course_name }}
              <div class="tags" v-if="course.titles && course.titles.length > 0">
                <span v-for="title in course.titles" 
                      :key="title.title" 
                      class="tag" 
                      :style="{ borderColor: title.color, color: title.color }">
                  {{ title.title }}
                </span>
              </div>
            </h1>
          </div>
          
          <div class="info-grid">
            <div class="info-item">
              <span class="label">分类</span>
              <span class="value">{{ getCategoryName(course.category_id) }}</span>
            </div>
            <div class="info-item">
              <span class="label">开课院系</span>
              <span class="value">{{ getCollegeName(course.college) }}</span>
            </div>
            <div class="info-item full-width">
              <span class="label">教师（团队）</span>
              <span class="value">{{ course.teachers }}</span>
            </div>
          </div>

          <div class="action-area">
            <button class="share-btn" @click="shareCourse(true)">
              <span class="icon">🔗</span> 复制短链接
            </button>
          </div>
        </div>

        <!-- 右侧：评分详情 -->
        <div class="rating-card card">
          <h3>课程评分</h3>
          <div class="rating-overview">
            <div class="total-score">
              <span class="score">{{ totalRating }}</span>
              <span class="count">({{ ratingCount }}人评分)</span>
            </div>
            <div class="user-rating-action">
              <p>您的评分</p>
              <div class="stars interactive" @mouseleave="resetStars">
                <span
                  v-for="n in 5"
                  :key="n"
                  :class="{ 'active': n <= (hoverRating || userRating) }"
                  @mouseover="highlightStars(n)"
                  @click="confirmRating(n)"
                >★</span>
              </div>
            </div>
          </div>

          <div class="rating-bars">
             <div class="bar-row">
               <span class="star-label">5星</span>
               <el-progress :percentage="fiveStarPercent" status="success" :show-text="false" :stroke-width="8"></el-progress>
               <span class="percent">{{ fiveStarPercent.toFixed(0) }}%</span>
             </div>
             <div class="bar-row">
               <span class="star-label">4星</span>
               <el-progress :percentage="fourStarPercent" status="success" :show-text="false" :stroke-width="8"></el-progress>
               <span class="percent">{{ fourStarPercent.toFixed(0) }}%</span>
             </div>
             <div class="bar-row">
               <span class="star-label">3星</span>
               <el-progress :percentage="threeStarPercent" status="warning" :show-text="false" :stroke-width="8"></el-progress>
               <span class="percent">{{ threeStarPercent.toFixed(0) }}%</span>
             </div>
             <div class="bar-row">
               <span class="star-label">2星</span>
               <el-progress :percentage="twoStarPercent" status="warning" :show-text="false" :stroke-width="8"></el-progress>
               <span class="percent">{{ twoStarPercent.toFixed(0) }}%</span>
             </div>
             <div class="bar-row">
               <span class="star-label">1星</span>
               <el-progress :percentage="oneStarPercent" status="exception" :show-text="false" :stroke-width="8"></el-progress>
               <span class="percent">{{ oneStarPercent.toFixed(0) }}%</span>
             </div>
          </div>
        </div>
      </div>

      <!-- 中部区域：AI 总结 -->
      <div class="ai-section card">
        <div class="section-header">
          <h2>
            <span class="icon">🤖</span> AI 课程总结
            <span class="beta-badge">Beta</span>
          </h2>
          <span class="ai-disclaimer">内容由 GPT-5 生成，仅供参考</span>
        </div>
        <div class="ai-content">
          <template v-if="displayedSummary">
            <div class="summary-text">
              {{ displayedSummary }}<span v-if="isTyping" class="cursor">|</span>
            </div>
          </template>
          <template v-else>
            <p class="empty-text">当前课程的评分和评论数据过少，暂不能生成AI总结。</p>
          </template>
        </div>
      </div>

      <!-- 底部区域：评论区 -->
      <div class="comments-section card">
        <div class="section-header">
          <h2>课程评论</h2>
          <div class="sort-tabs">
            <span :class="{ active: sortBy === 'like_count' }" @click="changeSort('like_count')">最热</span>
            <span class="divider">|</span>
            <span :class="{ active: sortBy === 'comment_time' }" @click="changeSort('comment_time')">最新</span>
          </div>
        </div>

        <!-- 发表评论 -->
        <div class="post-comment">
          <div class="input-group">
             <input v-model="nickname" placeholder="一句话概括您的评论" class="nickname-input" />
             <textarea v-model="commentContent" placeholder="分享您的课程体验、学习难度、考核方式等..." class="comment-textarea"></textarea>
          </div>
          <button @click="submitComment" class="submit-btn">提交评论</button>
        </div>

        <!-- 评论列表 -->
        <div v-if="filteredComments && filteredComments.length > 0" class="comments-list">
          <div v-for="comment in comments" :key="comment.comment_id" class="comment-item">
            <div class="comment-header">
              <span class="comment-author">
                {{ comment.nickname }}
                <span v-if="comment.daren" class="daren-tag">评论达人</span>
              </span>
              <span class="comment-date">{{ formatTime(comment.comment_time) }}</span>
            </div>
            
            <div class="comment-body">
              <span v-if="comment.top" class="premium-tag">优质</span>{{ comment.comment_content }}
            </div>

            <div class="comment-footer">
              <div class="footer-top">
                <div class="rating-tag">
                  评分: <span>{{ comment.rating }}</span>
                </div>
                
                <div class="actions">
                  <span class="like-btn" :class="{ liked: comment.is_liked }" @click="toggleLike(comment)">
                    ❤ {{ comment.like_count }}
                  </span>
                  
                  <button v-if="comment.deleteable" @click="deleteComment(comment.comment_id)" class="action-link delete">
                    删除
                  </button>
                  <template v-else>
                      <button @click="openQuestionModal(comment)" class="action-link question-btn">
                          发起追问
                      </button>
                      <!-- <span class="help-icon" @click="openHelp" title="了解追问功能">
                          ?
                      </span> -->
                  </template>
                </div>
              </div>

              <!-- 管理员操作区 -->
              <div v-if="isAdmin" class="admin-actions-row">
                 <span class="admin-label">管理员操作:</span>
                 <button @click="adminMarkTop(comment)" class="action-link admin-btn">
                   {{ comment.top ? '取消优质' : '设为优质' }}
                 </button>
                 <button @click="adminDeleteComment(comment.comment_id)" class="action-link admin-btn delete">
                   删除
                 </button>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="no-comments">
          <p>暂无评论，快来抢沙发吧！</p>
        </div>
      </div>
    </div>

    <!-- 模态框组件 (复用原有的逻辑) -->
    <!-- 分享成功提示 -->
    <transition name="fade">
      <div class="toast" v-if="showShareModal">
        链接复制成功，快去分享给其他小伙伴吧！
      </div>
    </transition>

    <!-- 错误提示 -->
    <transition name="fade">
      <div class="toast error" v-if="showErrorModal">
        获取数据失败，正在刷新页面...
      </div>
    </transition>

    <!-- 聊天模态框 -->
    <div v-if="isChatModalVisible" class="modal-overlay">
      <div class="modal-box">
        <span class="close-btn" @click="closeChatModal">×</span>
        <h3>发起聊天</h3>
        <textarea
          v-model="chatMessage"
          placeholder="请输入聊天内容（至少6个字符）"
          class="modal-textarea"
        ></textarea>
        <div class="modal-actions">
          <button @click="submitChat" :disabled="chatMessage.length < 6" class="primary-btn">发起</button>
        </div>
      </div>
    </div>

    <!-- 会话已存在模态框 -->
    <div v-if="isConversationExistsModalVisible" class="modal-overlay">
      <div class="modal-box">
        <span class="close-btn" @click="closeConversationExistsModal">×</span>
        <h3>提示</h3>
        <p>在此课程下，您与此用户已有会话！</p>
        <div class="modal-actions">
          <button @click="navigateToConversation(existingConversationId)" class="primary-btn">进入会话</button>
          <button @click="closeConversationExistsModal" class="secondary-btn">取消</button>
        </div>
      </div>
    </div>

    <!-- 追问模态框 -->
    <div v-if="showQuestionModal" class="modal-overlay" @click.self="closeQuestionModal">
      <div class="modal-box question-modal">
        <span class="close-btn" @click="closeQuestionModal">×</span>
        <h3>发起追问</h3>
        
        <div class="explanation-card">
           请先 <a href="/qa" target="_blank" class="help-link">点击此处</a> 了解追问功能的用法，友好交流~
        </div>

        <textarea
          v-model="questionContent"
          placeholder="请输入您的问题..."
          class="modal-textarea"
          style="resize: vertical; min-height: 100px;"
        ></textarea>
        
        <div class="modal-actions">
          <button @click="submitQuestion" :disabled="submittingQuestion || !questionContent.trim()" class="primary-btn">
            {{ submittingQuestion ? '提交中...' : '发起追问' }}
          </button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'CourseDetail',
  data() {
    return {
      courseId: null,
      loading: true,
      course: {},
      token: null,
      userRating: 0,
      hoverRating: 0,
      totalRating: 0,
      ratingCount: 0, // Add ratingCount to data
      fiveStarPercent: 0,
      fourStarPercent: 0,
      threeStarPercent: 0,
      twoStarPercent: 0,
      oneStarPercent: 0,
      comments: [],
      isAdmin: false,
      nickname: '',
      commentContent: '',
      sortBy: 'like_count',
      showShareModal: false,
      cachedEmail: null,
      isChatModalVisible: false,
      isConversationExistsModalVisible: false,
      chatMessage: '',
      currentCommentId: null,
      existingConversationId: null,
      showErrorModal: false,
      aiSummary: null,
      displayedSummary: '',
      isTyping: false,
      shouldStopTyping: false,
      showQuestionModal: false,
      questionContent: '',
      currentQuestionCommentId: null,
      submittingQuestion: false,
    };
  },
  computed: {
    filteredComments() {
      return this.comments.length > 0 ? this.comments : null;
    }
  },
  async created() {
    // 从路由获取 course_id
    this.courseId = this.$route.params.course_id;
    if (this.courseId) {
      await this.loadCourseData();
      if (this.course && this.course.course_name) {
        document.title = this.course.course_name + " (" + this.course.teachers + ") " + " - NEU小站课程评分系统";
      }
    } else {
      this.loading = false;
      // 处理没有 ID 的情况，跳转到 404 页面
      this.$router.replace('/404');
    }
  },
  beforeUnmount() {
      this.shouldStopTyping = true;
  },
  methods: {
    async loadCourseData() {
      this.loading = true;
      this.course = {};
      this.aiSummary = null;
      this.displayedSummary = '';
      this.isTyping = false;
      this.shouldStopTyping = false;

      try {
        // 0. 获取Token (提前获取，因为后续接口需要)
        this.getToken();

        // 1. 获取课程基础详情 (合并了 AI Summary)
        const response = await fetch(`https://coursesystem.xn--xhq44jb2fzpc.com/new/detail?course_id=${this.courseId}`, {
          headers: this.token ? { 'Authorization': this.token } : {}
        });
        
        if (response.status === 404) {
          this.$router.replace('/404');
          return;
        }

        if (!response.ok) throw new Error('Failed to fetch course detail');
        
        const data = await response.json();
        this.course = data;
        // 初始化 ratingCount
        this.ratingCount = data.rating_count || 0;

        // 如果有 ai_summary，保存它
        if (data.ai_summary) {
           this.aiSummary = data.ai_summary;
        }
        
        await Promise.all([
          this.fetchAndCacheEmail(),
          this.fetchRatingData(),
          this.fetchComments()
        ]);
        
      } catch (error) {
        console.error('Error loading course data:', error);
      } finally {
        this.loading = false;
        if (this.aiSummary) {
          this.$nextTick(() => {
            this.typewriterEffect(this.aiSummary);
          });
        } else {
           this.displayedSummary = '当前课程的评分和评论数据过少，暂不能生成AI总结。';
        }
      }
    },
    
    getToken() {
      const tokenCookie = document.cookie.split('; ').find(row => row.startsWith('token='));
      if (tokenCookie) {
        this.token = tokenCookie.split('=')[1];
      } else {
        this.token = null;
      }
    },

    changeSort(type) {
        if (this.sortBy !== type) {
            this.sortBy = type;
            this.fetchComments();
        }
    },

    getCategoryName(categoryId) {
      const categories = {
        1: '选修课-通识选修类',
        2: '选修课-人文选修类',
        3: '选修课-专业方向类',
        4: '选修课-体育类',
        5: '选修课-学科基础类',
        6: '选修课-暑期国际课',
        7: '选修课-数学与自然科学类',
        8: '选修课-重修专栏',
        9: '必修课-数学与自然科学类',
        10: '必修课-人文社会科学类',
        11: '必修课-学科基础类',
        12: '必修课-专业方向类',
        13: '必修课-实践类'
      };
      return categories[categoryId] || '未知分类';
    },

    getCollegeName(collegeId) {
        const collegeMap = {
            59: '未填写', 1: '材料科学与工程学院', 2: '创新创业学院', 3: '档案馆', 4: '党委宣传部', 5: '党委组织部',
            6: '发展规划与学科建设处', 7: '佛山研究生创新学院', 8: '工程训练中心', 9: '工会', 10: '工商管理学院',
            11: '国防教育学院', 12: '国际教育学院', 13: '后勤服务中心', 14: '后勤管理处', 15: '浑南管委会',
            16: '江河建筑学院', 17: '尖子班', 18: '教务处', 19: '基础学院', 20: '计划财经处',
            21: '机器人科学与工程学院', 22: '计算机科学与工程学院', 23: '计算中心', 24: '纪委',
            25: '机械工程与自动化学院', 26: '继续教育学院', 27: '科技产业集团', 28: '科学技术研究院',
            29: '理学院', 30: '马克思主义学院', 31: '民族教育学院', 33: '人事处', 34: '人文选修课群',
            35: '软件学院', 36: '生命科学与健康学院', 37: '体育部', 38: '体育场馆管理中心', 39: '团委',
            40: '图书馆', 41: '外国语学院', 42: '外联处', 43: '网络教育学院', 44: '未来技术学院',
            45: '文法学院', 46: '校长办公室', 47: '信息科学与工程学院', 48: '新知识课群', 49: '学生处',
            50: '学生创新中心', 51: '学生指导服务中心', 52: '研究生院', 53: '冶金学院', 54: '艺术学院',
            55: '医学与生物信息工程学院', 56: '医院', 57: '资产与实验室管理处', 58: '资源与土木工程学院'
        };
        return collegeMap[collegeId] || '未知院系';
    },

    async fetchRatingData() {
      if (!this.token) return;
      try {
        const response = await fetch(`https://coursesystem.xn--xhq44jb2fzpc.com/new/rating?course_id=${this.courseId}`, {
          headers: { 'Authorization': this.token }
        });
        if (response.ok) {
          const result = await response.json();
          this.totalRating = result.total_rating || 0;
          this.fiveStarPercent = result.five_stars * 100;
          this.fourStarPercent = result.four_stars * 100;
          this.threeStarPercent = result.three_stars * 100;
          this.twoStarPercent = result.two_stars * 100;
          this.oneStarPercent = result.one_star * 100;
          this.userRating = result.user_rating || 0;
          this.ratingCount = result.rating_count || 0;
        }
      } catch (error) {
        console.error('Fetch rating data failed:', error);
        this.totalRating = 0;
        this.fiveStarPercent = 0; this.fourStarPercent = 0; this.threeStarPercent = 0;
        this.twoStarPercent = 0; this.oneStarPercent = 0;
        this.userRating = 0;
      }
    },

    highlightStars(star) { this.hoverRating = star; },
    resetStars() { this.hoverRating = 0; },
    
    confirmRating(star) {
      if (confirm(`您确定要给课程 "${this.course.course_name}" 评分：${star}.0 吗？此评分将覆盖之前的评分。`)) {
        this.submitRating(star);
      }
    },
    
    async submitRating(rating) {
      const response = await fetch('https://coursesystem.xn--xhq44jb2fzpc.com/submit-rating', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': this.token },
        body: JSON.stringify({ course_id: this.courseId, rating: rating })
      });
      if (response.ok) {
        this.fetchRatingData();
      }
    },

    async typewriterEffect(text, speed = 10) {
      this.isTyping = true;
      this.displayedSummary = '';
      this.shouldStopTyping = false;
      for (let i = 0; i < text.length; i++) {
        if (this.shouldStopTyping) break;
        this.displayedSummary += text[i];
        await new Promise(resolve => setTimeout(resolve, speed));
      }
      this.isTyping = false;
    },

    async fetchAISummary() {
      // 已合并到 loadCourseData，此方法废弃但保留空壳防止报错（如果模板中有调用）
      // 实际上模板没有直接调用，只有 created 中调用。
      // 为了安全起见，留空。
    },

    async fetchComments() {
      try {
        if (!this.token) { /* Handle no token silently or prompt login if needed, but allow view */ }
        const response = await fetch(
          `https://coursesystem.xn--xhq44jb2fzpc.com/get-comments?course_id=${this.courseId}&sort_by=${this.sortBy}`,
          { headers: { 'Authorization': this.token } }
        );
        if (response.status === 404) { this.comments = []; return; }
        if (!response.ok) throw new Error('获取评论失败');
        const result = await response.json();
        this.comments = result.comments;
        this.isAdmin = result.is_admin || false;
      } catch (error) {
        console.error(error);
      }
    },

    async toggleLike(comment) {
      const url = comment.is_liked ? 'unlike-comment' : 'like-comment';
      await fetch(`https://coursesystem.xn--xhq44jb2fzpc.com/${url}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': this.token },
        body: JSON.stringify({ comment_id: comment.comment_id })
      });
      this.fetchComments();
    },

    async submitComment() {
      if (this.nickname.length < 2 || this.commentContent.length < 6) {
        alert('一句话概括请至少包含2个字符，评论请至少包含6个字符。');
        return;
      }
      await fetch('https://coursesystem.xn--xhq44jb2fzpc.com/submit-comment', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': this.token },
        body: JSON.stringify({ course_id: this.courseId, nickname: this.nickname, comment_content: this.commentContent })
      });
      this.fetchComments();
      this.nickname = '';
      this.commentContent = '';
    },

    async deleteComment(commentId) {
        if(!confirm("确定删除评论吗？")) return;
        const response = await fetch('https://coursesystem.xn--xhq44jb2fzpc.com/delete-comment', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Authorization': this.token },
            body: JSON.stringify({ comment_id: commentId })
        });
        if(response.ok) this.fetchComments();
    },

    async adminMarkTop(comment) {
        const action = comment.top ? '取消优质吗？' : '设为优质吗？优质评论将会被展示在评论列表顶部，并在搜索页优先作为每个课程的代表性评论。';
        if (!confirm(`确定要将此评论${action}`)) return;

        try {
            const response = await fetch('https://coursesystem.xn--xhq44jb2fzpc.com/comment_mng/mark_top', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Authorization': this.token },
                body: JSON.stringify({ comment_id: comment.comment_id })
            });
            
            if (response.ok) {
                this.fetchComments();
            } else {
                const result = await response.json();
                alert(result.error || '操作失败');
            }
        } catch (error) {
            console.error('Admin mark top error:', error);
            alert('操作失败，请稍后再试');
        }
    },

    async adminDeleteComment(commentId) {
        if (!confirm("管理员操作：确定要强制删除此评论吗？此操作不可恢复！")) return;
        
        try {
            const response = await fetch('https://coursesystem.xn--xhq44jb2fzpc.com/comment_mng/delete', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Authorization': this.token },
                body: JSON.stringify({ comment_id: commentId })
            });

            if (response.ok) {
                this.fetchComments();
            } else {
                const result = await response.json();
                alert(result.error || '删除失败');
            }
        } catch (error) {
            console.error('Admin delete error:', error);
            alert('删除失败，请稍后再试');
        }
    },

    formatTime(time) {
      const date = new Date(time);
      return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')} ${String(date.getHours()).padStart(2,'0')}:${String(date.getMinutes()).padStart(2,'0')}`;
    },

    async fetchAndCacheEmail() {
        if (this.cachedEmail || !this.token) return;
        try {
            const response = await fetch('https://userlogin.xn--xhq44jb2fzpc.com/verifyToken', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Authorization': this.token }
            });
            const result = await response.json();
            if (response.ok && result.email) this.cachedEmail = result.email;
        } catch(e) { console.error(e); }
    },

    base64Encode(value) { return btoa(value); },
    
    shareCourse(useShortLink = false) {
      let shareText;
      // 检查是否显式请求短链接（避免事件对象被误判）
      if (useShortLink === true) {
          // 将 courseId 转为 Base64 URL (RFC 4648)
          const base64Str = btoa(String(this.courseId));
          const base64Url = base64Str.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
          shareText = `https://s.ember.ac.cn/c/${base64Url}`;
      } else {
          shareText = `https://course.xn--xhq44jb2fzpc.com/detail/${this.courseId}`;
      }
      
      this.copyToClipboard(shareText);
      this.showShareModal = true;
      setTimeout(() => { this.showShareModal = false; }, 3000);
    },

    copyToClipboard(text) {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
    },

    openChatModal(commentId) {
      this.currentCommentId = commentId;
      this.chatMessage = '';
      this.isChatModalVisible = true;
    },
    closeChatModal() { this.isChatModalVisible = false; },
    closeConversationExistsModal() { this.isConversationExistsModalVisible = false; },
    
    async submitChat() {
        if (this.chatMessage.length < 6) { alert('聊天内容需至少6个字符'); return; }
        try {
            const response = await fetch('https://coursesystem.xn--xhq44jb2fzpc.com/chat/start-conversation', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', Authorization: this.token },
                body: JSON.stringify({ comment_id: this.currentCommentId, content: this.chatMessage })
            });
            const result = await response.json();
            if (response.ok && result.message === 'Conversation started successfully') {
                this.$router.push(`/chat?mid=${result.conversation_id}`);
            } else if (response.ok && result.message === 'Conversation already exists') {
                this.existingConversationId = result.conversation_id;
                this.isConversationExistsModalVisible = true;
            } else {
                alert(result.error || '发起会话失败');
            }
        } catch (error) {
            alert('发起会话失败，请稍后再试');
        } finally {
            this.closeChatModal();
        }
    },
    
    navigateToConversation(conversationId) {
        this.$router.push(`/chat?mid=${conversationId}`);
        this.closeConversationExistsModal();
    },

    openHelp() {
        window.open('/qa', '_blank');
    },
    openQuestionModal(comment) {
        this.currentQuestionCommentId = comment.comment_id;
        this.questionContent = '';
        this.showQuestionModal = true;
    },
    closeQuestionModal() {
        this.showQuestionModal = false;
        this.questionContent = '';
        this.currentQuestionCommentId = null;
    },
    async submitQuestion() {
        if (!this.questionContent.trim()) return;
        
        this.submittingQuestion = true;
        
        try {
            const response = await fetch('https://coursesystem.xn--xhq44jb2fzpc.com/qa/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': this.token
                },
                body: JSON.stringify({
                    comment_id: this.currentQuestionCommentId,
                    content: this.questionContent
                })
            });

            const data = await response.json();

            if (response.ok) {
                alert('追问发起成功！');
                this.closeQuestionModal();
            } else {
                alert(data.error || '发起追问失败');
            }
        } catch (error) {
            console.error('发起追问出错:', error);
            alert('网络错误，请稍后重试');
        } finally {
            this.submittingQuestion = false;
        }
    }
  }
};
</script>

<style scoped>
.course-detail-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 40px;
}

.premium-tag {
  display: inline-block;
  background-color: #e1f3d8;
  color: #67c23a;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
  font-weight: bold;
  vertical-align: middle;
}

.daren-tag {
  display: inline-block;
  background-color: #f56c6c;
  color: white;
  font-size: 0.7rem;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: normal;
  vertical-align: middle;
  line-height: 1.2;
}

.admin-actions-row {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #ebeef5;
  justify-content: flex-end;
}

.admin-label {
  font-size: 0.85rem;
  color: #909399;
  margin-right: 5px;
}

.admin-btn {
  color: #409eff;
  margin-left: 5px;
}

.admin-btn.delete {
  color: #f56c6c;
}

.admin-btn:hover {
  text-decoration: underline;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  color: #666;
}
.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #409eff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* 卡片通用样式 */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  padding: 24px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}
.card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* 顶部布局 */
.top-section {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
}

/* 课程信息卡片 */
.card-header {
  margin-bottom: 20px;
}
.course-name {
  font-size: 24px;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.tags {
  display: flex;
  gap: 8px;
}
.tag {
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 12px;
  white-space: nowrap;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.info-item {
  display: flex;
  flex-direction: column;
}
.info-item.full-width {
  grid-column: 1 / -1;
}
.label {
  font-size: 13px;
  color: #909399;
  margin-bottom: 4px;
}
.value {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

.share-btn {
  background-color: #ecf5ff;
  color: #409eff;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}
.share-btn:hover {
  background-color: #d9ecff;
}

/* 评分卡片 */
.rating-overview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.total-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.score {
  font-size: 48px;
  font-weight: bold;
  color: #409eff;
  line-height: 1;
}
.count {
  color: #909399;
  font-size: 14px;
}
.user-rating-action p {
  margin: 0 0 5px 0;
  font-size: 13px;
  color: #606266;
  text-align: center;
}
.stars {
  color: #ddd;
  font-size: 24px;
  cursor: pointer;
}
.stars.interactive span:hover,
.stars.interactive span.active {
  color: #f7ba2a;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
}
.star-label {
  width: 30px;
  color: #606266;
}
.el-progress {
  flex: 1;
}
.percent {
  width: 35px;
  text-align: right;
  color: #909399;
}

/* AI 总结 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}
.section-header h2 {
  font-size: 18px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.beta-badge {
  background: #f56c6c;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: top;
}
.ai-disclaimer {
  font-size: 12px;
  color: #909399;
}
.ai-content {
  line-height: 1.6;
  color: #303133;
  /* min-height: 80px; */
}
.summary-text {
  white-space: pre-wrap;
}
.cursor {
  animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* 评论区 */
.sort-tabs {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: #909399;
}
.sort-tabs span {
  cursor: pointer;
}
.sort-tabs span.active {
  color: #409eff;
  font-weight: bold;
}
.divider {
  color: #ebeef5;
  cursor: default !important;
}

.post-comment {
  background: #f9fafc;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}
.input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.nickname-input {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 200px;
}
.comment-textarea {
  padding: 10px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  min-height: 80px;
  resize: vertical;
}
.submit-btn {
  background: #409eff;
  color: white;
  border: none;
  padding: 8px 24px;
  border-radius: 4px;
  cursor: pointer;
  align-self: flex-end;
}

.comment-item {
  border-bottom: 1px solid #ebeef5;
  padding: 20px 0;
}
.comment-item:last-child {
  border-bottom: none;
}
.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.comment-author {
  font-weight: bold;
  color: #303133;
}
.comment-date {
  font-size: 12px;
  color: #909399;
}
.comment-body {
  font-size: 14px;
  color: #606266;
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.comment-footer {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  font-size: 0.9rem;
  color: #999;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.admin-actions-row {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #ebeef5;
  justify-content: flex-end;
}

.rating-tag span {
  color: #ff9900;
  font-weight: bold;
  margin-left: 4px;
}

.actions {
  display: flex;
  align-items: center;
  gap: 15px;
}
.like-btn {
  cursor: pointer;
  color: #909399;
}
.like-btn.liked {
  color: #f56c6c;
}
.action-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
}
.action-link.delete { color: #f56c6c; }
.action-link.chat { color: #409eff; }

/* Toast & Modal Styles */
.toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 2000;
}
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.modal-box {
  background: white;
  width: 90%;
  max-width: 400px;
  padding: 24px;
  border-radius: 8px;
  position: relative;
}
.close-btn {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 24px;
  cursor: pointer;
  color: #909399;
}
.modal-textarea {
  width: 90%;
  
  min-height: 100px;
  margin: 15px 0;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  resize: none;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.primary-btn {
  background: #409eff;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
}
.secondary-btn {
  background: white;
  border: 1px solid #dcdfe6;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .top-section {
    grid-template-columns: 1fr; /* 改为单列 */
    gap: 16px;
  }
  
  .info-grid {
    grid-template-columns: 1fr; /* 信息改为单列 */
  }
  
  .rating-overview {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .user-rating-action {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .score {
    font-size: 36px;
  }

  .nickname-input {
    width: 100%;
  }
}

.question-btn {
    color: #409EFF;
    margin-left: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
}
/* .question-btn:hover {
    text-decoration: underline;
} */
.help-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #909399;
    color: #909399;
    font-size: 12px;
    margin-left: 5px;
    cursor: pointer;
}
.help-icon:hover {
    color: #409EFF;
    border-color: #409EFF;
}
.question-modal .explanation-card {
    background-color: #f4f4f5;
    color: #909399;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 14px;
}
.question-modal .help-link {
    color: #409EFF;
    text-decoration: none;
    font-weight: bold;
}
/* .question-modal .help-link:hover {
    text-decoration: underline;
} */
</style>