<template>
  <view class="native-danmu-container">
    <!-- 弹幕显示区域 -->
    <view
      class="danmu-display-area"
      :style="{ height: containerHeight + 'rpx' }"
    >
      <!-- 弹幕轨道 -->
      <view
        v-for="(track, trackIndex) in tracks"
        :key="trackIndex"
        class="danmu-track"
        :style="{ top: trackIndex * trackHeight + 'rpx', height: trackHeight + 'rpx' }"
      >
        <!-- 轨道中的弹幕 -->
        <view
          v-for="danmu in track.danmus"
          :key="danmu.id"
          class="danmu-item"
          :style="getDanmuStyle(danmu, trackIndex)"
          @tap="handleDanmuClick(danmu)"
        >
          <!-- 弹幕内容 -->
          <view class="danmu-content">
            <!-- 头像 -->
            <view class="danmu-avatar-container">
              <image
                :src="danmu.data.avatar"
                class="danmu-avatar"
                mode="aspectFill"
              />
            </view>

            <!-- 信息区域 -->
            <view class="danmu-info">
              <!-- 标题行 -->
              <view class="danmu-title-row">
                <text class="family-name">{{ danmu.data.familyName }}</text>
              </view>

              <!-- 介绍 -->
              <text class="family-intro">{{ danmu.data.familyIntro }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
import Taro from '@tarojs/taro'
// 导入接口
import { getStepLeaderboardAPI } from '@/api/points'
// 默认头像
const defaultAvatar = 'https://cdn.ipadbiz.cn/lls_prog/images/%E5%85%A8%E5%AE%B6%E7%A6%8F3_%E5%89%AF%E6%9C%AC.jpg?imageMogr2/strip/quality/60'

// Props
const props = defineProps({
  // 弹幕容器高度
  containerHeight: {
    type: Number,
    default: 400
  },
  // 是否显示控制面板
  showControls: {
    type: Boolean,
    default: true
  },
  // 自定义弹幕数据
  customComments: {
    type: Array,
    default: () => []
  },
  // 弹幕速度 (rpx/s)
  danmuSpeed: {
    type: Number,
    default: 150  // 提高默认速度，让弹幕移动更流畅
  },
  // 轨道数量
  trackCount: {
    type: Number,
    default: 6  // 适当减少轨道数量，确保有足够间距
  }
})

// Emits
const emit = defineEmits(['danmu-click', 'danmu-hover'])

// 响应式数据
const isPlaying = ref(false)
const danmuId = ref(0)
const trackHeight = ref(110) // 适配最多3行文字显示，确保弹幕之间有足够间距
const animationTimers = ref(new Map()) // 存储动画定时器

// 轨道系统
const tracks = reactive(
  Array.from({ length: props.trackCount }, (_, index) => ({
    id: index,
    danmus: [],
    lastDanmuTime: 0
  }))
)

// 弹幕数据 - 从API获取
const familyDanmus = ref([])

// 获取弹幕数据
const fetchDanmuData = async () => {
  try {
    const { code, data } = await getStepLeaderboardAPI({ type: 'institution' })
    if (code && data?.bullet_families) {
      familyDanmus.value = data.bullet_families.map(family => ({
        id: family.id,
        familyName: family.name,
        familyIntro: family.note,
        avatar: family.avatar_url || defaultAvatar
      }))
    }
  } catch (error) {
    console.error('获取弹幕数据失败:', error)
  }
}

// 获取弹幕样式
const getDanmuStyle = (danmu, trackIndex) => {
  // 计算垂直位置，确保每个轨道有明确的垂直间距
  const topPosition = trackIndex * (trackHeight.value + 15) // 轨道间增加15rpx间距，适配3行文字

  return {
    transform: `translateX(${danmu.x}rpx)`,
    transition: danmu.isMoving ? `transform ${danmu.duration}ms linear` : 'none',
    opacity: danmu.opacity || 1,
    // 明确设置垂直位置
    position: 'absolute',
    left: 0,
    top: `${topPosition}rpx`,
    zIndex: 10,
    // 添加硬件加速
    willChange: 'transform'
  }
}

// 检查轨道中是否有足够空间放置新弹幕
const checkTrackSpace = (track, danmuWidth = 350) => {
  const now = Date.now()

  // 如果轨道为空，可以直接放置
  if (track.danmus.length === 0) {
    return true
  }

  // 清理已经完全移出屏幕的弹幕
  track.danmus = track.danmus.filter(danmu => {
    const elapsedTime = now - danmu.startTime
    const totalDistance = 750 + danmuWidth + 100
    const moveDistance = (elapsedTime / danmu.duration) * totalDistance
    const currentX = 750 - moveDistance

    // 如果弹幕已经完全移出屏幕左侧，则移除
    return currentX > -danmuWidth
  })

  // 重新检查轨道是否为空
  if (track.danmus.length === 0) {
    return true
  }

  // 检查所有弹幕的位置，确保新弹幕不会与任何现有弹幕重叠
  for (const existingDanmu of track.danmus) {
    const elapsedTime = now - existingDanmu.startTime
    const totalDistance = 750 + danmuWidth + 100
    const moveDistance = Math.min((elapsedTime / existingDanmu.duration) * totalDistance, totalDistance)
    const existingDanmuX = 750 - moveDistance

    // 计算弹幕的右边界位置
    const existingDanmuRightEdge = existingDanmuX + danmuWidth

    // 如果现有弹幕的右边界还在屏幕内或刚出屏幕，则需要更严格的间距检查
    const safeDistance = danmuWidth * 0.8 // 增加到80%的弹幕宽度作为安全距离
    if (existingDanmuRightEdge > (750 - safeDistance)) {
      return false
    }
  }

  // 检查最后一个弹幕的时间间隔 - 更严格的时间控制
  const timeSinceLastDanmu = now - track.lastDanmuTime
  const minTimeInterval = 2500 // 增加到2.5秒，确保足够的时间间隔

  return timeSinceLastDanmu >= minTimeInterval
}

// 找到可用的轨道 - 随机选择而非按顺序
const findAvailableTrack = () => {
  // 过滤出有足够空间的轨道
  const availableTracks = tracks.filter(track => checkTrackSpace(track))

  // 如果没有可用轨道，返回null
  if (availableTracks.length === 0) {
    return null
  }

  // 从可用轨道中随机选择一个
  const randomIndex = Math.floor(Math.random() * availableTracks.length)
  return availableTracks[randomIndex]
}

// 创建弹幕对象
const createDanmu = (data) => {
  const id = `danmu_${danmuId.value++}`
  const containerWidth = 750 // 小程序默认宽度
  const danmuWidth = 350 // 弹幕宽度
  const extraDistance = 100 // 额外移动距离，确保完全消失

  return {
    id,
    data,
    x: containerWidth, // 从右侧开始
    isMoving: false,
    opacity: 1,
    duration: ((containerWidth + danmuWidth + extraDistance) / (props.danmuSpeed * 0.6)) * 1000, // 减慢速度，让弹幕在屏幕上停留更久
    startTime: Date.now()
  }
}

// 添加弹幕到轨道
const addDanmuToTrack = (danmu) => {
  const track = findAvailableTrack()
  if (!track) return false

  // 更严格的最终检查 - 确保轨道真的有足够空间
  if (!checkTrackSpace(track)) {
    return false
  }

  track.danmus.push(danmu)
  track.lastDanmuTime = Date.now()

  // 启动弹幕动画
  nextTick(() => {
    startDanmuAnimation(danmu, track)
  })

  return true
}

// 启动弹幕动画
const startDanmuAnimation = (danmu, track) => {
  if (!isPlaying.value) return

  // 清除之前的定时器（如果存在）
  if (animationTimers.value.has(danmu.id)) {
    clearTimeout(animationTimers.value.get(danmu.id))
    animationTimers.value.delete(danmu.id)
  }

  // 设置动画 - 从右侧移动到左侧屏幕外
  danmu.isMoving = true

  // 计算当前弹幕应该在的位置（基于已经运行的时间）
  const now = Date.now()
  const elapsedTime = now - danmu.startTime
  const totalDistance = 750 + 350 + 100 // 总移动距离

  // 如果弹幕已经运行超过预定时间，直接重置
  if (elapsedTime >= danmu.duration) {
    resetDanmuForLoop(danmu, track)
    return
  }

  const currentProgress = elapsedTime / danmu.duration
  const currentPosition = 750 - (currentProgress * totalDistance)

  // 设置当前位置
  danmu.x = currentPosition

  // 使用 nextTick 确保 DOM 更新后再启动动画
  nextTick(() => {
    // 移动到左侧屏幕外，确保弹幕完全消失
    danmu.x = -(450) // 移动距离 = 弹幕宽度(350) + 额外距离(100)
  })

  // 计算剩余动画时间
  const remainingTime = danmu.duration - elapsedTime

  // 监听动画结束事件，实现循环
  const timer = setTimeout(() => {
    // 动画结束后，重置弹幕位置到右侧，开始新的循环
    resetDanmuForLoop(danmu, track)
  }, remainingTime)

  animationTimers.value.set(danmu.id, timer)
}

// 重置弹幕位置实现循环
const resetDanmuForLoop = (danmu, track) => {
  if (!isPlaying.value) return

  // 立即停止当前动画
  danmu.isMoving = false

  // 从轨道中移除这个弹幕，避免重叠检查时的干扰
  removeDanmuFromTrack(danmu, track)

  // 使用 nextTick 确保 DOM 更新
  nextTick(() => {
    // 重新创建弹幕数据，避免状态污染
    const newDanmuData = { ...danmu.data }
    const newDanmu = createDanmu(newDanmuData)

    // 延迟重新添加，确保轨道空间检查正确
    setTimeout(() => {
      if (isPlaying.value) {
        addDanmuToTrack(newDanmu)
      }
    }, 100 + Math.random() * 200) // 随机延迟100-300ms，避免同时重置造成的重叠
  })
}

// 从轨道移除弹幕
const removeDanmuFromTrack = (danmu, track) => {
  const index = track.danmus.findIndex(d => d.id === danmu.id)
  if (index > -1) {
    track.danmus.splice(index, 1)
  }
}

// 发送弹幕
const sendDanmu = (data) => {
  if (!isPlaying.value) return

  const danmu = createDanmu(data)
  addDanmuToTrack(danmu)
}

// 初始化满屏弹幕显示
const initFullScreenDanmus = () => {
  if (!isPlaying.value) return

  const screenWidth = 750 // 屏幕宽度
  const danmuWidth = 350 // 弹幕宽度

  // 为每个轨道创建初始弹幕，确保轨道间距合理
  tracks.forEach((track, trackIndex) => {
    // 每个轨道放置2个弹幕，避免过度拥挤
    const danmusPerTrack = 2

    for (let i = 0; i < danmusPerTrack; i++) {
      const danmuData = familyDanmus.value[currentDanmuIndex % familyDanmus.value.length]
      currentDanmuIndex++

      // 计算弹幕持续时间
      const duration = (screenWidth + danmuWidth + 100) / (props.danmuSpeed / 1000)

      // 计算已经运行的时间，确保弹幕间有足够间距
      // 第一个弹幕运行时间较长，第二个弹幕运行时间较短，形成间距
      const baseRunTime = i * (duration * 0.4) // 每个弹幕间隔40%的动画时长
      const randomOffset = Math.random() * (duration * 0.2) // 添加20%的随机偏移
      const randomRunTime = baseRunTime + randomOffset
      const startTime = Date.now() - randomRunTime

      // 计算初始位置，基于已经运行的时间
      const totalDistance = screenWidth + danmuWidth + 100
      const progress = Math.min(randomRunTime / duration, 0.9) // 最多运行90%，确保弹幕可见
      const initialX = screenWidth - (progress * totalDistance)

      const danmu = {
        id: `init-${trackIndex}-${i}-${Date.now()}-${Math.random()}`,
        data: danmuData,
        x: initialX,
        duration: duration,
        isMoving: true, // 立即开始移动
        opacity: 1,
        startTime: startTime // 使用计算出的开始时间
      }

      track.danmus.push(danmu)
      // 更新轨道的最后弹幕时间，确保后续弹幕有合理间隔
      track.lastDanmuTime = Date.now() - (danmusPerTrack - i - 1) * 1500 // 每个弹幕间隔1.5秒

      // 立即启动动画，不延迟
      nextTick(() => {
        startDanmuAnimation(danmu, track)
      })
    }
  })
}

// 当前弹幕索引，用于顺序显示
let currentDanmuIndex = 0

// 发送顺序弹幕 - 根据可用轨道数量同时填充弹幕
const sendSequentialDanmu = () => {
  // 获取所有可用的轨道
  const availableTracks = tracks.filter(track => checkTrackSpace(track))
  
  if (availableTracks.length === 0) {
    return // 没有可用轨道，直接返回
  }

  // 为每个可用轨道同时发送一个弹幕
  availableTracks.forEach(track => {
    // 按顺序获取弹幕数据
    const danmuData = familyDanmus.value[currentDanmuIndex % familyDanmus.value.length]
    
    // 发送弹幕到指定轨道
    sendDanmuToTrack(danmuData, track)
    
    // 更新索引，循环使用
    currentDanmuIndex++
  })
}

// 发送弹幕到指定轨道
const sendDanmuToTrack = (danmuData, track) => {
  const danmu = {
    id: `danmu-${++danmuId.value}-${Date.now()}-${Math.random()}`,
    data: danmuData,
    x: 750, // 从右侧开始
    duration: 0,
    isMoving: false,
    opacity: 1,
    startTime: Date.now()
  }

  // 添加到轨道
  track.danmus.push(danmu)
  track.lastDanmuTime = Date.now()

  // 启动动画
  nextTick(() => {
    startDanmuAnimation(danmu, track)
  })
}

// 自动发送弹幕
let autoSendTimer = null
const startAutoSend = () => {
  if (autoSendTimer) return

  const sendNext = () => {
    if (isPlaying.value) {
      // 智能发送弹幕，避免过度拥挤
      const availableTrackCount = tracks.filter(track => checkTrackSpace(track)).length

      // 只有当有足够可用轨道时才发送弹幕
      if (availableTrackCount > 0) {
        sendSequentialDanmu()
      }
    }

    // 动态调整发送间隔，根据可用轨道数量
    const availableTrackCount = tracks.filter(track => checkTrackSpace(track)).length
    const baseInterval = 1200 // 基础间隔1.2秒
    const intervalMultiplier = Math.max(1, (6 - availableTrackCount) * 0.3) // 可用轨道越少，间隔越长
    const dynamicInterval = baseInterval * intervalMultiplier + Math.random() * 400

    autoSendTimer = setTimeout(sendNext, dynamicInterval)
  }

  sendNext()
}

const stopAutoSend = () => {
  if (autoSendTimer) {
    clearTimeout(autoSendTimer)
    autoSendTimer = null
  }
}

// 暂停/播放弹幕
const toggleDanmu = () => {
  isPlaying.value = !isPlaying.value

  if (isPlaying.value) {
    // 恢复播放时，重新启动所有弹幕的动画
    tracks.forEach(track => {
      track.danmus.forEach(danmu => {
        if (!danmu.isMoving) {
          startDanmuAnimation(danmu, track)
        }
      })
    })
    startAutoSend()
  } else {
    // 暂停时，停止自动发送但保持弹幕在当前位置
    stopAutoSend()
  }
}

// 清空所有弹幕
const clearDanmu = () => {
  // 清除所有动画定时器
  animationTimers.value.forEach(timer => clearTimeout(timer))
  animationTimers.value.clear()

  // 清空所有轨道的弹幕
  tracks.forEach(track => {
    track.danmus = []
    track.lastDanmuTime = 0
  })
}

// 处理弹幕点击
const handleDanmuClick = (danmu) => {
  emit('danmu-click', danmu.data)

  // Taro.showToast({
  //   title: `点击了${danmu.data.familyName}`,
  //   icon: 'none',
  //   duration: 2000
  // })
}

// 暴露方法给父组件
defineExpose({
  toggleDanmu,
  clearDanmu,
  sendCustomDanmu: sendDanmu
})

// 生命周期
onMounted(async () => {
  // 首先获取弹幕数据
  await fetchDanmuData()

  // 自动开始播放
  isPlaying.value = true

  // 使用nextTick确保DOM完全渲染后再初始化弹幕
  nextTick(() => {
    // 立即初始化满屏弹幕，避免白屏状态
    initFullScreenDanmus()

    // 稍微延迟启动自动发送，让初始弹幕先稳定显示
    setTimeout(() => {
      startAutoSend()
    }, 1000) // 1秒后开始自动发送新弹幕
  })
})

onUnmounted(() => {
  stopAutoSend()
  clearDanmu()
})
</script>

<style >
.native-danmu-container {
  width: 100%;
  position: relative;
}

.danmu-display-area {
  width: 100%;
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  /* border-radius: 20rpx; */
  position: relative;
  overflow: hidden;
  /* box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1); */
}

.danmu-track {
  position: absolute;
  width: 100%;
  left: 0;
  pointer-events: none;
}

.danmu-item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  z-index: 10;
  right: 0; /* 从右侧开始 */
}

.danmu-content {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 30rpx;
  padding: 16rpx 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12rpx);
  border: 2rpx solid rgba(255, 255, 255, 0.4);
  max-width: 400rpx;
  min-width: 350rpx;
  margin: 8rpx 0;
  transition: all 0.3s ease;
}

.danmu-avatar-container {
  flex-shrink: 0;
  margin-right: 16rpx;
  position: relative;
}

.danmu-avatar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  border: 3rpx solid #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
}

.danmu-avatar-container::after {
  content: '';
  position: absolute;
  top: -2rpx;
  left: -2rpx;
  right: -2rpx;
  bottom: -2rpx;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
  z-index: -1;
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.danmu-info {
  flex: 1;
  min-width: 0;
}

.danmu-title-row {
  display: flex;
  align-items: center;
  margin-bottom: 6rpx;
}

.family-name {
  font-weight: 700;
  color: #1a202c;
  font-size: 28rpx;
  margin-right: 12rpx;
  flex-shrink: 0;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}

.member-badge {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  padding: 4rpx 12rpx;
  border-radius: 16rpx;
  font-size: 20rpx;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
}

.family-intro {
  color: #4a5568;
  font-size: 24rpx;
  display: -webkit-box;
  margin-bottom: 6rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  font-weight: 500;
}

.danmu-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.family-motto {
  color: #2d3748;
  font-size: 22rpx;
  font-style: italic;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 12rpx;
  opacity: 0.8;
}

.steps-badge {
  background: linear-gradient(45deg, #48bb78, #38a169);
  color: white;
  padding: 4rpx 12rpx;
  border-radius: 14rpx;
  font-size: 20rpx;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 2rpx 8rpx rgba(72, 187, 120, 0.3);
}

.danmu-controls {
  display: flex;
  justify-content: center;
  gap: 20rpx;
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.control-btn {
  flex: 1;
  max-width: 200rpx;
  height: 60rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
}

/* 弹幕动画效果 */
.danmu-moving {
  transition-timing-function: linear;
  transition-property: transform;
}

/* 弹幕项基础样式 */
.danmu-item {
  position: absolute;
  z-index: 10;
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
}

/* 悬停效果 */
.danmu-item:active .danmu-content {
  transform: scale(0.98);
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.18);
  transition: all 0.2s ease;
}

.danmu-content:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.16);
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .danmu-content {
    max-width: 300rpx;
    min-width: 240rpx;
    padding: 10rpx 16rpx;
  }

  .danmu-avatar {
    width: 40rpx;
    height: 40rpx;
    margin-right: 12rpx;
  }

  .family-name {
    font-size: 24rpx;
  }

  .family-intro {
    font-size: 20rpx;
  }
}
</style>