<template>
  <div class="moments-container" @wheel="handleWheel" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
    <!-- 顶部背景图区域 -->
    <div class="moments-cover">
      <!-- 下拉刷新指示器，使用v-if而不是v-show确保DOM完全移除 -->
      <div class="refresh-indicator" v-if="refreshState !== 'none'">
        <div class="pull-arrow" v-if="refreshState === 'pulling'">
          <i class="el-icon-arrow-down" :style="{ transform: `rotate(${refreshHeight/3}deg)` }"></i>
        </div>
        <div class="refresh-icon" :class="{ 'rotating': refreshState === 'loading', 'ready-pulse': refreshState === 'ready' }">
          <i class="el-icon-refresh"></i>
        </div>
        <div class="refresh-text">{{ refreshText }}</div>
      </div>

      <!-- 发布按钮移到右上角 -->
      <div class="publish-btn top-right" @click="showPublishDialog">
        <i class="el-icon-plus"></i>
      </div>

      <img :src="coverImage" alt="封面图" class="cover-image">
      <div class="user-profile">
        <span class="user-name">{{ currentUser.name }}</span>
        <el-avatar :size="70" :src="currentUser.avatar" class="user-avatar"></el-avatar>
      </div>
    </div>

    <!-- 朋友圈内容区域 -->
    <div class="moments-content">
      <div v-for="post in posts" :key="post.id" class="moment-item">
        <!-- 用户信息 -->
        <div class="post-user-info">
          <el-avatar :size="40" :src="post.avatar" class="post-avatar"></el-avatar>
          <span class="post-username">{{ post.userName }}</span>
        </div>
        <div class="post-content">
          <div class="post-text">{{ post.content }}</div>
          <div class="post-images" v-if="post.images && post.images.length">
            <template v-if="post.images.length === 1">
              <el-image
                :src="post.images[0]"
                :preview-src-list="post.images"
                fit="cover"
                class="single-image"
              ></el-image>
            </template>
            <template v-else>
              <el-image
                v-for="(img, index) in post.images"
                :key="index"
                :src="img"
                :preview-src-list="post.images"
                fit="cover"
                class="grid-image"
              ></el-image>
            </template>
          </div>

          <!-- 底部信息 -->
          <div class="post-footer">
            <span class="post-time">{{ post.time }}</span>
            <div class="footer-right">
              <div class="actions-menu" v-if="post.showActions">
                <div class="action-btn" @click="handleLike(post)">
                  <i class="el-icon-star-on" :class="{ 'liked': post.isLiked }"></i>
                  <span class="action-text">{{ post.isLiked ? '取消' : '赞' }}</span>
                </div>
                <div class="action-btn" @click="handleComment(post)">
                  <i class="el-icon-chat-line-round"></i>
                  <span class="action-text">评论</span>
                </div>
              </div>
              <div class="more-actions" @click="showActionsMenu(post, $event)">
                <i class="el-icon-more"></i>
              </div>
            </div>
          </div>

          <!-- 点赞和评论区域 -->
          <div class="interaction-area" v-if="post.likes > 0 || post.comments.length > 0">
            <div class="likes-section" v-if="post.likes > 0">
              <i class="el-icon-star-on"></i>
              <div class="like-users">
                <span v-for="(user, index) in post.likeUsers" :key="index">
                  {{ user }}<span v-if="index < post.likeUsers.length - 1">、</span>
                </span>
              </div>
            </div>
            <div class="comments-section" v-if="post.comments.length > 0">
              <div v-for="(comment, index) in post.comments" :key="index" class="comment-item">
                <span class="comment-user">{{ comment.userName }}：</span>
                <span class="comment-content">{{ comment.content }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 操作按钮 - 浮动在动态内容上方 -->
        <div class="floating-actions">
        </div>
      </div>
    </div>

    <!-- 发布对话框 -->
    <el-dialog
      title="发布动态"
      v-model="publishDialogVisible"
      width="90%"
      custom-class="publish-dialog"
    >
      <el-input
        v-model="newPost"
        type="textarea"
        :rows="4"
        placeholder="分享新鲜事..."
      ></el-input>
      <div class="image-upload">
        <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :on-change="handleImageChange"
          :limit="9"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="publishDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitPost">发布</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentUser: {
        name: 'Infinity',
        avatar: require('@/assets/user/1.jpg')
      },
      coverImage: require('@/assets/user/1.jpg'),
      publishDialogVisible: false,
      newPost: '',
      selectedImages: [],
      refreshState: 'none',
      refreshHeight: 0,
      touchStartY: 0,
      lastScrollTop: 0,
      isRefreshing: false,
      posts: [
        {
          id: 1,
          userName: '用户1',
          avatar: require('@/assets/user/1.jpg'),
          content: '春天来了，校园里的樱花开得真美！',
          time: '44分钟前',
          images: [
            require('@/assets/user/1.jpg')
          ],
          likes: 3,
          isLiked: false,
          likeUsers: ['张三', '李四', '王五'],
          comments: [
            {
              userName: '张三',
              content: '确实很美，我也拍了好多照片！'
            },
            {
              userName: '李四',
              content: '今年的樱花开得特别早呢'
            },
            {
              userName: '王五',
              content: '周末一起去赏花吧？'
            }
          ],
          showActions: false
        },
        {
          id: 2,
          userName: '用户2',
          avatar: require('@/assets/user/1.jpg'),
          content: '今天天气真好，适合出去玩',
          time: '1小时前',
          images: [
            require('@/assets/user/1.jpg')
          ],
          likes: 2,
          isLiked: false,
          likeUsers: ['小明', '小红'],
          comments: [
            {
              userName: '小明',
              content: '是啊，阳光正好'
            },
            {
              userName: '小红',
              content: '我们去哪里玩呢？'
            }
          ],
          showActions: false
        },
        {
          id: 3,
          userName: '小王',
          avatar: require('@/assets/user/1.jpg'),
          content: '新买的相机终于到了，迫不及待想要出去拍照了！分享一下开箱照片',
          time: '2小时前',
          images: [
            require('@/assets/user/1.jpg'),
            require('@/assets/user/1.jpg'),
            require('@/assets/user/1.jpg')
          ],
          likes: 8,
          isLiked: true,
          likeUsers: ['小张', '小李', '小陈', '小林', '阿华', '小美', '大卫', '杰克'],
          comments: [
            {
              userName: '小张',
              content: '这个机型不错，我也在用'
            },
            {
              userName: '小李',
              content: '期待你的作品！'
            },
            {
              userName: '小陈',
              content: '求拍照教程'
            }
          ],
          showActions: false
        },
        {
          id: 4,
          userName: '咖啡控',
          avatar: require('@/assets/user/1.jpg'),
          content: '发现了一家很棒的咖啡店，环境超赞，咖啡也很香！推荐大家来尝尝~',
          time: '3小时前',
          images: [
            require('@/assets/user/1.jpg'),
            require('@/assets/user/1.jpg')
          ],
          likes: 5,
          isLiked: false,
          likeUsers: ['奶茶控', '美食家', '探店达人', '小饭', '老王'],
          comments: [
            {
              userName: '奶茶控',
              content: '下次一起去！'
            },
            {
              userName: '美食家',
              content: '这家店我也去过，他们家的提拉米苏也很好吃'
            },
            {
              userName: '探店达人',
              content: '求具体位置'
            },
            {
              userName: '咖啡控',
              content: '在市中心新开的购物中心三楼，店名叫"啡时光"'
            }
          ],
          showActions: false
        },
        {
          id: 5,
          userName: '运动达人',
          avatar: require('@/assets/user/1.jpg'),
          content: '今天完成了半程马拉松训练，为下个月的比赛做准备！',
          time: '5小时前',
          images: [
            require('@/assets/user/1.jpg')
          ],
          likes: 12,
          isLiked: false,
          likeUsers: ['跑步爱好者', '健身教练', '马拉松', '小跑', '老李', '小王'],
          comments: [
            {
              userName: '跑步爱好者',
              content: '加油！看好你'
            },
            {
              userName: '健身教练',
              content: '记得做好赛前准备和恢复'
            }
          ],
          showActions: false
        }
      ]
    }
  },
  computed: {
    refreshText () {
      const texts = {
        none: '',
        pulling: '下拉刷新',
        ready: '释放立即刷新',
        loading: '刷新中...'
      }
      return texts[this.refreshState]
    }
  },
  methods: {
    showPublishDialog () {
      this.publishDialogVisible = true
    },
    handleImageChange (file) {
      this.selectedImages.push(file.raw)
    },
    handleCommand (command, post) {
      // 兼容旧的下拉菜单方式
    },
    handleLike (post) {
      // 处理点赞逻辑
      post.isLiked = !post.isLiked

      if (post.isLiked) {
        // 增加点赞数
        post.likes++
        // 添加当前用户到点赞列表
        post.likeUsers.push(this.currentUser.name)

        // 显示点赞成功消息
        this.$message({
          message: '点赞成功',
          type: 'success',
          duration: 1000
        })
      } else {
        // 减少点赞数
        post.likes--
        // 从点赞列表中移除当前用户
        const index = post.likeUsers.indexOf(this.currentUser.name)
        if (index !== -1) {
          post.likeUsers.splice(index, 1)
        }
      }

      // 点赞后关闭操作菜单
      post.showActions = false
    },
    handleComment (post) {
      // 首先关闭操作菜单
      post.showActions = false

      // 弹出评论输入框
      this.$prompt('请输入评论内容', '发表评论', {
        confirmButtonText: '发表',
        cancelButtonText: '取消',
        inputPlaceholder: '说点什么吧...'
      }).then(({ value }) => {
        if (value.trim()) {
          // 添加新评论
          post.comments.push({
            userName: this.currentUser.name,
            content: value.trim()
          })

          // 显示评论成功消息
          this.$message({
            message: '评论成功',
            type: 'success',
            duration: 1000
          })
        }
      }).catch(() => {
        // 用户取消评论，不做处理
      })
    },
    submitPost () {
      if (this.newPost || this.selectedImages.length) {
        const newPost = {
          id: Date.now(),
          userName: this.currentUser.name,
          avatar: this.currentUser.avatar,
          content: this.newPost,
          time: '刚刚',
          images: this.selectedImages.map(img => URL.createObjectURL(img)),
          likes: 0,
          isLiked: false,
          likeUsers: [],
          comments: [],
          showActions: false
        }
        this.posts.unshift(newPost)
        this.newPost = ''
        this.selectedImages = []
        this.publishDialogVisible = false
      }
    },
    handleWheel (e) {
      // 如果正在刷新中或已经触发刷新但尚未完成，阻止滚轮事件处理
      if (this.refreshState === 'loading' || this.isRefreshing) {
        e.preventDefault()
        return
      }

      const scrollTop = window.pageYOffset || document.documentElement.scrollTop

      // 判断页面是否在顶部
      if (scrollTop <= 5) {
        // 向上滚动鼠标滚轮（deltaY为负值）
        if (e.deltaY < 0) {
          e.preventDefault() // 阻止默认滚动行为

          // 计算拉动距离，取绝对值并缩放以使操作更平滑
          const pullDistance = Math.abs(e.deltaY) * 2 // 增大倍数，使效果更明显

          // 设置拉动阈值，超过此值直接触发刷新
          const threshold = 60 // 降低阈值，让刷新更容易触发

          if (pullDistance >= threshold) {
            // 显示刷新指示并直接刷新
            this.refreshState = 'ready'
            this.refreshHeight = threshold

            // 更新内容区域位置
            const content = document.querySelector('.moments-content')
            if (content) {
              content.style.transform = `translateY(${this.refreshHeight}px)`
            }

            // 标记当前已触发刷新，防止重复触发
            this.isRefreshing = true

            // 直接触发刷新
            setTimeout(() => {
              this.refreshData()
            }, 200)
          } else {
            // 轻微拉动时只显示拉动效果
            this.handlePull(pullDistance)
          }
        }
      }

      this.lastScrollTop = scrollTop
    },
    handleTouchMove (e) {
      // 如果正在加载中或已经触发刷新但尚未完成，阻止触摸移动事件
      if (this.refreshState === 'loading' || this.isRefreshing) {
        e.preventDefault()
        return
      }

      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
      const touch = e.touches[0]

      if (this.touchStartY === 0) {
        this.touchStartY = touch.clientY
      }

      if (scrollTop <= 5) {
        const moveY = touch.clientY - this.touchStartY
        if (moveY > 0) {
          e.preventDefault()
          this.handlePull(moveY / 1.2)
        }
      }
    },
    handleTouchEnd (e) {
      // 如果正在加载中或已经触发刷新但尚未完成，阻止触摸结束事件
      if (this.refreshState === 'loading' || this.isRefreshing) {
        e.preventDefault()
        return
      }

      if (this.refreshState === 'ready') {
        // 标记当前已触发刷新，防止重复触发
        this.isRefreshing = true
        this.refreshData()
      } else if (this.refreshState === 'pulling') {
        this.resetRefresh()
      }

      this.touchStartY = 0
    },
    handlePull (distance) {
      // 如果已经在加载状态或已经触发刷新但尚未完成，不再处理拉动
      if (this.refreshState === 'loading' || this.isRefreshing) return

      // 设置最大拉动距离
      const maxDistance = 200
      const threshold = maxDistance * 0.6 // 触发刷新的阈值

      // 限制拉动距离
      this.refreshHeight = Math.min(distance, maxDistance)

      // 更新界面显示
      const content = document.querySelector('.moments-content')
      if (content) {
        content.style.transform = `translateY(${this.refreshHeight}px)`
      }

      // 根据拉动距离决定刷新状态
      if (this.refreshHeight >= threshold) {
        this.refreshState = 'ready'
      } else {
        this.refreshState = 'pulling'
      }
    },
    resetRefresh () {
      console.log('重置刷新状态和UI')

      // 重置所有状态变量
      this.refreshState = 'none'
      this.refreshHeight = 0
      this.touchStartY = 0
      this.isRefreshing = false // 重置刷新标记

      // 强制刷新DOM
      const content = document.querySelector('.moments-content')
      if (content) {
        // 确保内容区域回到原位
        content.style.transform = 'translateY(0)'
        // 强制浏览器重新计算样式 - 使用读取属性来触发重排
        // eslint-disable-next-line no-unused-expressions
        content.offsetHeight
      }

      // 确保指示器被完全移除
      // Vue的v-if会处理DOM的移除，所以这里不需要额外的DOM操作
    },
    refreshData () {
      // 清楚标记当前正在刷新，阻止其他刷新操作
      console.log('开始刷新，refreshState设置为loading')
      this.refreshState = 'loading'
      this.isRefreshing = true // 确保刷新标记被设置

      // 模拟数据库查询延迟
      setTimeout(() => {
        try {
          // 模拟数据获取
          console.log('正在从服务器获取数据...')

          // 模拟新数据
          const newPost = {
            id: Date.now(),
            userName: '新朋友',
            avatar: require('@/assets/user/1.jpg'),
            content: '刚刚发布的新内容，下拉刷新测试！',
            time: '刚刚',
            images: [require('@/assets/user/1.jpg')],
            likes: 0,
            isLiked: false,
            likeUsers: [],
            comments: [],
            showActions: false
          }

          // 添加新数据到列表顶部
          this.posts.unshift(newPost)

          // 显示成功消息
          this.$message({
            message: '刷新成功，新增1条朋友圈',
            type: 'success'
          })

          console.log('刷新完成，数据已更新')
        } catch (error) {
          console.error('更新数据失败:', error)
          this.$message({
            message: '刷新失败，请稍后再试',
            type: 'error'
          })
        } finally {
          console.log('刷新状态重置')
          // 先重置刷新状态
          this.refreshState = 'none'

          // 然后重置UI
          setTimeout(() => {
            this.resetRefresh() // 这将同时重置isRefreshing标记
          }, 100)
        }
      }, 1500) // 模拟1.5秒的加载时间
    },
    handleScroll () {
      if (this.refreshState !== 'loading' && window.pageYOffset > 10) {
        this.resetRefresh()
      }
    },
    handleVisibilityChange () {
      if (document.visibilityState === 'visible') {
        // 页面重新可见时，如果不是加载状态，则重置刷新
        if (this.refreshState !== 'loading') {
          this.resetRefresh()
        }
      }
    },
    handleDocumentClick (event) {
      // 检查点击的元素是否在操作菜单内或是三点菜单按钮
      const isActionMenu = event.target.closest('.actions-menu')
      const isMoreButton = event.target.closest('.more-actions')

      // 如果点击的既不是操作菜单也不是三点菜单按钮，则关闭所有操作菜单
      if (!isActionMenu && !isMoreButton) {
        this.closeAllActionMenus()
      }
    },
    showActionsMenu (post, event) {
      // 阻止事件传播到document，避免立即触发关闭
      event.stopPropagation()

      // 关闭其他所有帖子的操作菜单
      this.posts.forEach(item => {
        if (item.id !== post.id) {
          item.showActions = false
        }
      })
      // 切换当前帖子的操作菜单显示状态
      post.showActions = !post.showActions
    },
    closeAllActionMenus () {
      this.posts.forEach(post => {
        post.showActions = false
      })
    }
  },
  mounted () {
    // 初始化刷新状态
    this.refreshState = 'none'
    this.refreshHeight = 0
    this.touchStartY = 0

    // 添加滚动事件监听器
    window.addEventListener('scroll', this.handleScroll)

    // 添加页面可见性变化事件监听器，确保页面重新可见时重置刷新状态
    document.addEventListener('visibilitychange', this.handleVisibilityChange)

    // 添加document点击事件监听器，用于点击页面其他区域时关闭操作菜单
    document.addEventListener('click', this.handleDocumentClick)
  },
  beforeUnmount () {
    // 移除所有事件监听器
    window.removeEventListener('scroll', this.handleScroll)
    document.removeEventListener('visibilitychange', this.handleVisibilityChange)
    document.removeEventListener('click', this.handleDocumentClick)
  }
}
</script>

<style scoped>
.moments-container {
  min-height: 100vh;
  background-color: #f7f7f7;
  width: 100%;
}

.moments-cover {
  position: relative;
  height: 90vh;
  min-height: 800px;
  max-height: 1200px;
  overflow: hidden;
  background-color: #000;
  width: 100%;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.user-profile {
  position: absolute;
  right: 5%;
  bottom: 200px;
  display: flex;
  align-items: center;
  color: #fff;
  z-index: 2;
  gap: 20px;
}

.user-name {
  font-size: 24px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  margin-right: 0;
}

.user-avatar {
  border: 4px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  width: 120px;
  height: 120px;
}

.moments-content {
  padding: 30px 0;
  width: 100%;
  margin: 0 auto;
  margin-top: -300px;
  position: relative;
  z-index: 1;
  background-color: transparent;
  transition: transform 0.3s ease;
}

.moment-item {
  background-color: #fff;
  padding: 25px 15% 25px 15%;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
}

.post-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.post-avatar {
  flex-shrink: 0;
}

.post-username {
  font-weight: 500;
  color: #576b95;
  font-size: 16px;
}

.post-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.post-text {
  line-height: 1.6;
  font-size: 15px;
  color: #333;
  margin-bottom: 12px;
  text-align: left;
  width: 100%;
  white-space: normal;
  word-break: break-word;
}

.post-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 15px;
}

.single-image {
  max-width: 300px;
  max-height: 300px;
  border-radius: 8px;
  overflow: hidden;
}

.grid-image {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.grid-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #999;
  font-size: 14px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
  position: relative;
}

.footer-right {
  display: flex;
  align-items: center;
  position: relative;
}

.floating-actions {
  display: none; /* 不再使用浮动操作按钮 */
}

.more-actions {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  background-color: #666;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 21;
}

.more-actions i {
  font-size: 16px;
}

.actions-menu {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #555;
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  z-index: 22;
  padding: 0;
  overflow: hidden;
  height: 30px;
  white-space: nowrap;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 20px;
  cursor: pointer;
  transition: background-color 0.2s;
  height: 100%;
}

.action-btn:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.action-btn:hover {
  background-color: #777;
}

.action-text {
  font-size: 15px;
  color: #fff;
  font-weight: 400;
}

.action-btn i {
  color: #fff;
  font-size: 18px;
  margin-right: 3px;
}

.action-btn .liked {
  color: #ff6b6b;
}

.interaction-area {
  margin-top: 12px;
  background-color: #f7f7f7;
  border-radius: 4px;
  padding: 12px;
  text-align: left;
}

.likes-section {
  display: flex;
  align-items: center;
  color: #576b95;
  margin-bottom: 8px;
  font-size: 14px;
  justify-content: flex-start;
}

.likes-section i {
  margin-right: 8px;
  flex-shrink: 0;
}

.like-users {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
}

.comments-section {
  border-top: 1px solid #eee;
  padding-top: 8px;
  margin-top: 8px;
  text-align: left;
}

.comment-item {
  margin-bottom: 6px;
  line-height: 1.5;
  font-size: 14px;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-user {
  color: #576b95;
  font-weight: 500;
  white-space: nowrap;
}

.comment-content {
  color: #333;
  flex: 1;
}

.publish-btn {
  width: 50px;
  height: 50px;
  background-color: #07c160;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  position: absolute;
  z-index: 5;
}

.top-right {
  top: 20px;
  right: 20px;
}

.publish-dialog {
  border-radius: 8px;
}

.image-upload {
  margin-top: 15px;
}

.liked {
  color: #ff6b6b;
}

.el-dropdown-link {
  cursor: pointer;
  padding: 5px 10px;
}

.el-dropdown-menu {
  min-width: 100px;
}

@media screen and (max-width: 768px) {
  .moments-content {
    padding: 20px 0;
    margin-top: -150px;
  }
  .moment-item {
    padding: 15px 5%;
  }
  .post-content {
    padding-right: 10px;
  }
  .user-profile {
    right: 3%;
    bottom: 150px;
  }
  .single-image {
    max-width: 100%;
  }
  .top-right {
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .actions-menu {
    width: 200px;
  }
}

.refresh-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 4;
  transition: opacity 0.3s ease, transform 0.3s ease;
  color: #fff;
  text-align: center;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  opacity: 1;
}

.refresh-icon {
  font-size: 28px;
  color: #fff;
  margin-bottom: 5px;
}

.pull-arrow {
  font-size: 32px;
  color: #fff;
  transition: transform 0.2s ease;
}

.refresh-text {
  font-size: 16px;
  color: #fff;
  font-weight: 500;
  margin-top: 5px;
}

.rotating {
  animation: rotate 1s linear infinite;
}

.ready-pulse {
  animation: pulse 0.8s ease-in-out infinite alternate;
}

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

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 5px;
}
</style>
