<template>
  <div class="music-detail-page">
    <el-skeleton :loading="loading" animated>
      <template #template>
        <div class="skeleton-container">
          <el-skeleton-item variant="image" style="width: 240px; height: 240px; border-radius: 8px;" />
          <div class="skeleton-content">
            <el-skeleton-item variant="h1" style="width: 50%;" />
            <el-skeleton-item variant="text" style="width: 30%; margin-top: 16px;" />
            <el-skeleton-item variant="text" style="width: 40%; margin-top: 16px;" />
            <el-skeleton-item variant="text" style="width: 60%; margin-top: 16px;" />
          </div>
        </div>
      </template>

      <template #default>
        <div v-if="music" class="music-info">
          <div class="music-cover">
            <img :src="music.cover || '/default-cover.jpg'" alt="封面">
          </div>

          <div class="music-content">
            <h1 class="music-name">{{ music.name }}</h1>

            <div class="music-meta">
              <div class="meta-item">
                <span class="label">歌手：</span>
                <span class="value">
                  <template v-if="music.singerNames && music.singerNames.length">
                    <span v-for="(singer, idx) in music.singerNames" :key="idx">
                      {{ singer }}{{ idx < music.singerNames.length - 1 ? '、' : '' }}
                    </span>
                  </template>
                  <span v-else>{{ music.singer || '未知歌手' }}</span>
                </span>
              </div>

              <div class="meta-item">
                <span class="label">专辑：</span>
                <span class="value">{{ music.album || '-' }}</span>
              </div>

              <div class="meta-item">
                <span class="label">类型：</span>
                <span class="value">{{ music.typeName || '-' }}</span>
              </div>

              <div class="meta-item">
                <span class="label">时长：</span>
                <span class="value">{{ formatDuration(music.duration) }}</span>
              </div>

              <div class="meta-item">
                <span class="label">发行日期：</span>
                <span class="value">{{ music.releaseDate || '-' }}</span>
              </div>

              <div class="meta-item">
                <span class="label">点赞数：</span>
                <span class="value">{{ music.likeCount ?? 0 }}</span>
              </div>

              <div class="meta-item">
                <span class="label">收藏数：</span>
                <span class="value">{{ music.collectCount ?? 0 }}</span>
              </div>
            </div>

            <div class="music-actions">
              <el-button
                type="primary"
                @click="playMusic"
                :icon="isPlaying ? 'VideoPause' : 'VideoPlay'"
              >
                {{ isPlaying ? '暂停' : '播放' }}
              </el-button>

              <el-button
                :type="music.collected ? 'danger' : 'default'"
                @click="toggleCollect"
                :icon="music.collected ? 'Star' : 'StarFilled'"
              >
                {{ music.collected ? '已收藏' : '收藏' }}
              </el-button>

              <el-button
                :type="music.liked ? 'success' : 'default'"
                @click="toggleLike"
              >
                <el-icon><component :is="music.liked ? 'Check' : 'Pointer'" /></el-icon>
                {{ music.liked ? '已点赞' : '点赞' }} 
              </el-button>

              <el-button
                @click="addToPlaylist"
                icon="Plus"
              >
                添加到播放列表
              </el-button>
            </div>
          </div>
        </div>

        <div v-if="music && music.description" class="music-description">
          <h2>歌曲简介</h2>
          <p>{{ music.description }}</p>
        </div>

        <div class="content-toggle">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="歌词" name="lyric"></el-tab-pane>
            <el-tab-pane label="评论" name="comment"></el-tab-pane>
          </el-tabs>
        </div>

        <div v-if="activeTab === 'lyric'">
          <div v-if="music && music.lyric" class="music-lyric">
            <h2>歌词</h2>
            <pre>{{ displayedLyric }}</pre>
            <div v-if="isLyricTooLong" class="lyric-toggle-button" @click="toggleLyricExpansion">
              {{ isLyricExpanded ? '收起歌词' : '查看更多歌词' }}
            </div>
          </div>
          <el-empty v-else description="暂无歌词" />
        </div>

        <div v-if="activeTab === 'comment'" class="comment-section">
          <div class="comment-input">
            <el-input
              v-model="commentContent"
              type="textarea"
              :rows="3"
              placeholder="发表你的评论..."
            />
            <div class="comment-submit-actions">
              <el-button type="primary" @click="submitComment(false)">发表评论</el-button>
            </div>
          </div>

          <div class="comment-list">
            <div v-for="comment in comments" :key="comment.id" class="comment-item">
              <!-- 一级评论 -->
              <div class="comment-avatar">
                <el-avatar :src="processImageUrl(comment.user.avatar)" :size="40" />
              </div>
              <div class="comment-content">
                <div class="comment-header">
                  <div class="comment-user">{{ comment.user.username }}</div>
                  <div class="comment-actions">
                    <el-button type="text" size="small" @click="setReplyTo(comment)">回复</el-button>
                    <el-button
                      v-if="userStore.isAdmin || comment.user.id === userStore.user?.id"
                      type="danger"
                      size="small"
                      @click="deleteComment(comment.id)"
                    >
                      删除
                    </el-button>
                  </div>
                </div>
                <div class="comment-text">{{ comment.content }}</div>
                <div class="comment-footer">
                  <div class="comment-time">{{ comment.createTime }}</div>
                  <el-button type="text" size="small" @click="toggleReplies(comment)">
                    {{ expandedComments.includes(comment.id) ? '收起回复' : `查看回复 (${comment.children ? comment.children.length : 0})` }}
                  </el-button>
                </div>

                <!-- 回复输入框 -->
                <div v-if="replyingTo === comment.id" class="comment-input child-comment-input">
                  <el-input
                    v-model="replyContent"
                    type="textarea"
                    :rows="2"
                    :placeholder="`回复 @${replyTo.user.username}`"
                  />
                  <div class="comment-submit-actions">
                    <el-button type="primary" size="small" @click="submitComment(true)">回复</el-button>
                    <el-button size="small" @click="cancelReply">取消</el-button>
                  </div>
                </div>

                <!-- 二级评论 -->
                <div v-if="expandedComments.includes(comment.id) && comment.children && comment.children.length > 0" class="child-comments">
                  <div v-for="child in comment.children" :key="child.id" class="comment-item">
                    <div class="comment-avatar">
                      <el-avatar :src="processImageUrl(child.user.avatar)" :size="32" />
                    </div>
                    <div class="comment-content">
                      <div class="comment-header">
                        <div class="comment-user">{{ child.user.username }}</div>
                        <div class="comment-actions">
                          <el-button type="text" size="small" @click="setReplyTo(child)">回复</el-button>
                          <el-button
                            v-if="userStore.isAdmin || child.user.id === userStore.user?.id"
                            type="danger"
                            size="small"
                            @click="deleteComment(child.id)"
                          >
                            删除
                          </el-button>
                        </div>
                      </div>
                      <div class="comment-text">
                        <span v-if="child.parentCommentUser" class="reply-to">@{{ child.parentCommentUser.username }}</span>
                        {{ child.content }}
                      </div>
                      <div class="comment-footer">
                        <div class="comment-time">{{ child.createTime }}</div>
                      </div>
                      <!-- 二级回复输入框 -->
                      <div v-if="replyingTo === child.id" class="comment-input child-comment-input">
                        <el-input
                          v-model="replyContent"
                          type="textarea"
                          :rows="2"
                          :placeholder="`回复 @${replyTo.user.username}`"
                        />
                        <div class="comment-submit-actions">
                          <el-button type="primary" size="small" @click="submitComment(true, child.id)">回复</el-button>
                          <el-button size="small" @click="cancelReply">取消</el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <el-empty v-if="!comments.length" description="还没有评论，快来抢沙发吧！" />
          </div>
        </div>

        <div v-if="relatedMusic.length > 0 && activeTab === 'lyric'" class="related-music">
          <h2>热门推荐</h2>
          <el-row :gutter="20">
            <el-col
              v-for="item in relatedMusic"
              :key="item.id"
              :xs="12"
              :sm="8"
              :md="6"
              :lg="4"
            >
              <div class="music-card" @click="goToMusic(item.id)">
                <div class="card-cover">
                  <img :src="item.cover || item.singerAvatar || '/default-cover.jpg'" alt="封面">
                  <div class="play-icon" @click.stop="playRelatedMusic(item)">
                    <el-icon><VideoPlay /></el-icon>
                  </div>
                </div>
                <div class="card-info">
                  <div class="card-name">{{ item.name }}</div>
                  <div class="card-singer">{{ getSingerNames(item) }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-skeleton>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { usePlayerStore } from '../stores/player'
import { useUserStore } from '../stores/user'
import { getMusicById, toggleCollectMusic, getHotMusic, toggleLikeMusic, getMusicStatus } from '../api/music'
import { getCommentList, addComment, deleteComment as apiDeleteComment } from '../api/comment'
import { connect, subscribe, unsubscribe, disconnect } from '../utils/websocket'
import { ElMessage, ElMessageBox } from 'element-plus'
import { VideoPlay, VideoPause, Star, StarFilled, Plus } from '@element-plus/icons-vue'
import { processImageUrl } from '../utils/imageUtils'

const route = useRoute()
const router = useRouter()
const playerStore = usePlayerStore()
const userStore = useUserStore()

const music = ref(null)
const loading = ref(true)
const relatedMusic = ref([])

// 评论区相关状态
const activeTab = ref('lyric') // 'lyric' or 'comment'
const comments = ref([])
const commentContent = ref('')
const replyContent = ref('')
const replyingTo = ref(null)
const replyTo = ref(null)
const expandedComments = ref([])
let commentSubscription = null;

const isLyricExpanded = ref(false)
const LYRIC_PREVIEW_LINES = 10

const isLyricTooLong = computed(() => {
  if (!music.value || !music.value.lyric) return false
  return music.value.lyric.split('\n').length > LYRIC_PREVIEW_LINES
})

const displayedLyric = computed(() => {
  if (!music.value || !music.value.lyric) return ''
  if (isLyricExpanded.value || !isLyricTooLong.value) {
    return music.value.lyric
  }
  return music.value.lyric.split('\n').slice(0, LYRIC_PREVIEW_LINES).join('\n')
})

const toggleLyricExpansion = () => {
  isLyricExpanded.value = !isLyricExpanded.value
}

// 计算属性
const isPlaying = computed(() => {
  return playerStore.getCurrentMusic?.id === music.value?.id && playerStore.getIsPlaying
})

// 获取音乐详情
const fetchMusicDetail = async () => {
  loading.value = true
  try {
    const id = route.params.id
    if (!id) {
      ElMessage.error('无效的音乐ID')
      router.push('/music')
      return
    }

    const res = await getMusicById(id)
    if (res.code === 200) {
      if (res.data) {
        music.value = {
          ...res.data,
          likeCount: res.data.likeCount ?? 0,
          collectCount: res.data.collectCount ?? 0
        }
        // 获取音乐状态
        fetchMusicStatus()
      } else {
        // 如果音乐不存在，显示提示并返回音乐列表页
        ElMessage.warning('音乐不存在或已被删除')
        router.push('/music')
      }
    } else {
      ElMessage.error(res.message || '获取音乐详情失败')
      router.push('/music')
    }
  } catch (error) {
    console.error('获取音乐详情失败:', error)
    ElMessage.error('获取音乐详情失败，请稍后重试')
    router.push('/music')
  } finally {
    loading.value = false
  }
}

// 获取音乐状态
const fetchMusicStatus = async () => {
  if (!music.value || !userStore.isLoggedIn) {
    return
  }
  try {
    const res = await getMusicStatus(music.value.id)
    if (res.code === 200 && res.data) {
      music.value.collected = res.data.collected
      music.value.liked = res.data.liked
    }
  } catch (error) {
    console.error('获取音乐状态失败:', error)
  }
}

// 获取相关音乐
const fetchRelatedMusic = async () => {
  try {
    const res = await getHotMusic(6)
    if (res.code === 200) {
      // 过滤掉当前音乐
      relatedMusic.value = (res.data || []).filter(item => item.id !== music.value?.id)
      console.log('相关音乐:', relatedMusic.value)
    }
  } catch (error) {
    console.error('获取相关音乐失败:', error)
  }
}

// 获取评论列表
const fetchComments = async () => {
  if (!music.value) return;
  try {
    const res = await getCommentList(music.value.id, 1, 1, 100); // targetType 1 表示音乐
    if (res.code === 200) {
      comments.value = res.data.list || res.data.records || [];
    }
  } catch (error) {
    console.error('获取评论列表失败:', error);
  }
};

// 提交评论
const submitComment = async (isReply = false) => {
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录');
    router.push('/login');
    return;
  }

  const content = isReply ? replyContent.value : commentContent.value;
  if (!content.trim()) {
    ElMessage.warning('评论内容不能为空');
    return;
  }

  try {
    const res = await addComment({
      targetId: music.value.id,
      targetType: 1, // 1表示音乐
      content: content,
      parentId: isReply ? replyingTo.value : null,
    });

    if (res.code === 200) {
      if (isReply) {
        replyContent.value = '';
        replyingTo.value = null;
      } else {
        commentContent.value = '';
      }
      ElMessage.success('评论已发送');
    } else {
      ElMessage.error(res.message || '评论失败');
    }
  } catch (error) {
    console.error('提交评论失败:', error);
    ElMessage.error('评论失败，请稍后重试');
  }
};

// 删除评论
const deleteComment = async (commentId) => {
  try {
    await ElMessageBox.confirm('确定要删除这条评论吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });

    const res = await apiDeleteComment(commentId);
    if (res.code === 200) {
      // 重新获取评论以刷新列表
      fetchComments();
      ElMessage.success('评论已删除');
    } else {
      ElMessage.error(res.message || '删除失败');
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除评论失败:', error);
      ElMessage.error('删除失败，请稍后重试');
    }
  }
};

// 设置回复对象
const setReplyTo = (comment) => {
  replyingTo.value = comment.id;
  replyTo.value = comment;
  if (!expandedComments.value.includes(comment.id)) {
    expandedComments.value.push(comment.id);
  }
};

// 取消回复
const cancelReply = () => {
  replyingTo.value = null;
  replyTo.value = null;
  replyContent.value = '';
};

// 切换回复可见性
const toggleReplies = (comment) => {
  const commentId = comment.id;
  const index = expandedComments.value.indexOf(commentId);
  if (index > -1) {
    expandedComments.value.splice(index, 1);
    if (replyingTo.value === commentId) {
      cancelReply();
    }
  } else {
    expandedComments.value.push(commentId);
  }
};

// WebSocket 订阅
const setupWebSocket = () => {
  if (!music.value) return;
  connect(() => {
    const destination = `/topic/comments/1/${music.value.id}`; // 1 代表音乐类型
    commentSubscription = subscribe(destination, (newComment) => {
      if (newComment && newComment.id) {
        if (newComment.user && newComment.user.avatar) {
          newComment.user.avatar = processImageUrl(newComment.user.avatar);
        }

        if (newComment.parentId) {
          const parentComment = comments.value.find(c => c.id === newComment.parentId);
          if (parentComment) {
            if (!parentComment.children) {
              parentComment.children = [];
            }
            parentComment.children.push(newComment);
          }
        } else {
          if (!comments.value.some(c => c.id === newComment.id)) {
            comments.value.unshift(newComment);
          }
        }
      } else {
        console.warn("Received invalid comment data via WebSocket:", newComment);
      }
    });
  }, (error) => {
      console.error("WebSocket connection error:", error);
      // ElMessage.error('评论服务连接失败，实时更新不可用');
  });
};

// 断开 WebSocket
const teardownWebSocket = () => {
  if (commentSubscription) {
    unsubscribe(commentSubscription);
    commentSubscription = null;
  }
  disconnect();
};

// 播放音乐
const playMusic = () => {
  if (isPlaying.value) {
    playerStore.togglePlay()
  } else {
    playerStore.setCurrentMusic(music.value)
  }
}

// 播放相关音乐
const playRelatedMusic = (item) => {
  playerStore.setCurrentMusic(item)
}

// 切换收藏状态
const toggleCollect = async () => {
  try {
    const res = await toggleCollectMusic(music.value.id)
    if (res.code === 200) {
      // 后端直接返回了最新的收藏状态 (true/false)，直接赋值即可
      music.value.collected = res.data
      // 仅在操作成功时同步更新本地收藏数
      if (music.value.collected) {
        music.value.collectCount = (music.value.collectCount || 0) + 1
      } else {
        music.value.collectCount = Math.max(0, (music.value.collectCount || 0) - 1)
      }
      ElMessage.success(res.message || (music.value.collected ? '收藏成功' : '已取消收藏'))
    } else {
      ElMessage.error(res.message || '操作失败')
    }
  } catch (error) {
    console.error('收藏操作失败:', error)
    ElMessage.error('操作失败，请稍后重试')
  }
}

// 切换点赞状态
const toggleLike = async () => {
  try {
    const res = await toggleLikeMusic(music.value.id);
    if (res.code === 200) {
      // 后端直接返回了最新的点赞状态 (true/false)，直接赋值
      music.value.liked = res.data;
      // 更新点赞数
      if (music.value.liked) {
        music.value.likeCount = (music.value.likeCount || 0) + 1;
      } else {
        music.value.likeCount = Math.max(0, (music.value.likeCount || 0) - 1);
      }
      ElMessage.success(res.message || (music.value.liked ? '点赞成功' : '已取消点赞'));
    } else {
      ElMessage.error(res.message || '操作失败');
    }
  } catch (error) {
    console.error('点赞操作失败:', error);
    ElMessage.error('操作失败，请稍后重试');
  }
};

// 添加到播放列表
const addToPlaylist = () => {
  playerStore.addToPlaylist(music.value)
  ElMessage.success('已添加到播放列表')
}

// 跳转到音乐详情
const goToMusic = (id) => {
  router.push(`/music/${id}`)
}

// 获取歌手名称
const getSingerNames = (item) => {
  if (!item) return ''

  if (item.singerNames && item.singerNames.length > 0) {
    return item.singerNames.join('、')
  }

  return item.singer || '未知歌手'
}

// 格式化时长
const formatDuration = (seconds) => {
  if (!seconds) return '00:00'

  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

// 监听路由变化，重新获取音乐详情
watch(() => route.params.id, (newId, oldId) => {
  if (newId !== oldId) {
    teardownWebSocket();
    fetchMusicDetail().then(() => {
      fetchComments();
      setupWebSocket();
    });
    fetchRelatedMusic();
  }
})

onMounted(() => {
  fetchMusicDetail().then(() => {
    fetchComments();
    setupWebSocket();
  });
  fetchRelatedMusic();
})

onUnmounted(() => {
  teardownWebSocket();
})
</script>

<style scoped>
.lyric-toggle-button {
  cursor: pointer;
  color: var(--el-color-primary);
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
}

.lyric-toggle-button:hover {
  color: var(--el-color-primary-light-3);
}
.music-detail-page {
  padding: 20px;
}

.skeleton-container {
  display: flex;
  gap: 30px;
}

.skeleton-content {
  flex: 1;
}

.music-info {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.music-cover {
  width: 240px;
  height: 240px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.music-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-content {
  flex: 1;
}

.music-name {
  font-size: 28px;
  margin: 0 0 20px 0;
  color: #303133;
}

.music-meta {
  margin-bottom: 30px;
}

.meta-item {
  margin-bottom: 10px;
  font-size: 16px;
  color: #606266;
}

.label {
  font-weight: bold;
  margin-right: 5px;
}

.music-actions {
  display: flex;
  gap: 15px;
}

.music-description {
  margin-bottom: 30px;
}

.content-toggle {
  margin-bottom: 20px;
}

.comment-section {
  margin-top: 20px;
}

.comment-input {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment-submit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.comment-list {
  margin-top: 20px;
}

.comment-item {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.comment-avatar {
  margin-right: 15px;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.comment-user {
  font-weight: bold;
}

.child-comment-input {
  margin-top: 10px;
}

.comment-text {
  margin-bottom: 5px;
  color: #333;
  line-height: 1.5;
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #999;
}

.music-description h2, .music-lyric h2, .related-music h2 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #303133;
}

.music-description p {
  line-height: 1.6;
  color: #606266;
}

.music-lyric pre {
  white-space: pre-wrap;
  line-height: 1.8;
  color: #606266;
  font-family: inherit;
}

.related-music {
  margin-top: 30px;
}

.music-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 20px;
}

.music-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.1);
}

.card-cover {
  position: relative;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}

.card-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.play-icon .el-icon {
  font-size: 24px;
  color: #fff;
}

.card-cover:hover .play-icon {
  opacity: 1;
}

.card-info {
  padding: 10px;
}

.card-name {
  font-weight: bold;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-singer {
  font-size: 12px;
  color: #909399;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .music-info {
    flex-direction: column;
  }

  .music-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-width: 240px;
    margin: 0 auto 20px;
  }
}
</style>
