<template>
  <div class="live-activity-bar" :class="{ visible: isVisible }">
    <div class="live-activity-inner">
      <!-- 实时指示器 -->
      <div class="live-dot-wrap">
        <span class="live-dot"></span>
        <span class="live-label">实时动态</span>
      </div>
      <!-- 滚动消息 -->
      <div class="live-messages-wrap">
        <TransitionGroup name="activity-slide" tag="div" class="live-messages">
          <div v-if="currentActivity" :key="currentActivity.id" class="live-message">
            <span class="activity-avatar">{{ currentActivity.avatar }}</span>
            <span class="activity-text">
              <strong>{{ currentActivity.user }}</strong>
              {{ currentActivity.action }}
              <em>{{ currentActivity.target }}</em>
            </span>
            <span class="activity-time">{{ currentActivity.time }}</span>
          </div>
        </TransitionGroup>
      </div>
      <!-- 关闭按钮 -->
      <button class="live-close" @click="isVisible = false">×</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const isVisible = ref(false)
const currentActivity = ref(null)
let timer = null
let showTimer = null

const activities = [
  { id: 1, avatar: '👩', user: '张小雨', action: '刚刚使用了', target: 'AI 文章批量生产流水线', time: '刚刚' },
  { id: 2, avatar: '👨', user: 'Alex Chen', action: '收藏了', target: 'GPT-4 智能客服机器人', time: '1分钟前' },
  { id: 3, avatar: '🧑', user: '李明', action: '开始学习', target: 'n8n 从零到精通', time: '2分钟前' },
  { id: 4, avatar: '👩‍💼', user: 'Sarah Liu', action: '部署了', target: '企业知识库问答系统', time: '3分钟前' },
  { id: 5, avatar: '👨‍💻', user: 'Mike Wang', action: '刚刚运行了', target: '数据分析自动化工作流', time: '刚刚' },
  { id: 6, avatar: '🧑‍🎨', user: '王芳', action: '购买了课程', target: 'Dify RAG 知识库实战', time: '5分钟前' },
  { id: 7, avatar: '👨‍🔬', user: 'Jack Zhang', action: '分享了', target: '社交媒体内容矩阵工作流', time: '6分钟前' },
  { id: 8, avatar: '👩‍🏫', user: '陈老师', action: '推荐了', target: 'Coze 智能 Bot 开发课程', time: '8分钟前' },
]

let activityIndex = 0

function showNext() {
  currentActivity.value = { ...activities[activityIndex % activities.length] }
  activityIndex++
}

onMounted(() => {
  // 延迟 3 秒后显示
  showTimer = setTimeout(() => {
    isVisible.value = true
    showNext()
    timer = setInterval(() => {
      showNext()
    }, 4000)
  }, 3000)
})

onUnmounted(() => {
  clearTimeout(showTimer)
  clearInterval(timer)
})
</script>

<style scoped>
.live-activity-bar {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 999;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  pointer-events: none;
}
.live-activity-bar.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
.live-activity-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 50px;
  padding: 8px 16px 8px 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(139,92,246,0.1);
  min-width: 280px;
  max-width: 380px;
  backdrop-filter: blur(12px);
}
.live-dot-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.live-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse-dot 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
.live-label {
  font-size: 11px;
  font-weight: 700;
  color: #22c55e;
  white-space: nowrap;
}
.live-messages-wrap {
  flex: 1;
  overflow: hidden;
  height: 22px;
  position: relative;
}
.live-messages {
  position: relative;
}
.live-message {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #374151;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.activity-avatar {
  font-size: 14px;
  flex-shrink: 0;
}
.activity-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-text strong {
  color: #7c3aed;
  font-weight: 700;
}
.activity-text em {
  color: #6366f1;
  font-style: normal;
  font-weight: 600;
}
.activity-time {
  font-size: 11px;
  color: #9ca3af;
  flex-shrink: 0;
}
.live-close {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #9ca3af;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.live-close:hover {
  background: #e5e7eb;
  color: #374151;
}

/* 动画 */
.activity-slide-enter-active {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.activity-slide-leave-active {
  transition: all 0.3s ease;
  position: absolute;
}
.activity-slide-enter-from {
  opacity: 0;
  transform: translateY(100%);
}
.activity-slide-leave-to {
  opacity: 0;
  transform: translateY(-100%);
}

/* 移动端隐藏 */
@media (max-width: 480px) {
  .live-activity-bar {
    bottom: 16px;
    left: 12px;
    right: 12px;
  }
  .live-activity-inner {
    min-width: unset;
    max-width: unset;
  }
}
</style>
