<template>
  <view class="quick-entry">
    <view
      v-for="(item, index) in entries"
      :key="index"
      class="entry-item"
	  @tap="handleEntryClick(item)"
    >
      <view :class="['entry-icon', { accent: item.accent }]">
        <image :src="item.icon" mode="aspectFit" class="icon-img" />
        <view v-if="item.title === '消息' && hasUnread" class="badge-dot"></view>
      </view>
      <text class="entry-title">{{ item.title }}</text>
      <text class="entry-desc">{{ item.desc }}</text>
    </view>

    <view v-if="showCheckInMenu" class="checkin-menu-overlay" @tap="showCheckInMenu = false">
      <view class="checkin-menu" @tap.stop>
        <view class="menu-item" @tap="handleStoreCheckIn">
          <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/checkIn.png" mode="aspectFit" class="menu-icon" />
          <text class="menu-text">到店签到</text>
        </view>
        <view class="menu-item" @tap="handleGroupCourseCheckIn">
          <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png" mode="aspectFit" class="menu-icon" />
          <text class="menu-text">团课签到</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { getUnreadMessageCount } from '@/api/main.js'

const unreadCount = ref(0)
const showCheckInMenu = ref(false)
const TEST_MODE = false

// 是否有未读消息（用于显示红点）
const hasUnread = computed(() => unreadCount.value > 0)

const loadUnreadCount = async () => {
  if (TEST_MODE) {
    unreadCount.value = 3
    return
  }

  const token = uni.getStorageSync('token')
  if (!token) {
    console.log('[QuickEntry] token 不存在，跳过请求')
    unreadCount.value = 0
    return
  }

  try {
    const userId = uni.getStorageSync('userId') || 1
    console.log('[QuickEntry] 请求未读消息数量, userId:', userId)
    const res = await getUnreadMessageCount(userId)
    console.log('[QuickEntry] 未读消息数量响应数据:', res)
    console.log('[QuickEntry] 响应完整类型:', typeof res, Object.prototype.toString.call(res))
    
    let count = 0
    // 兼容多种响应格式
    if (typeof res === 'number') {
      count = res
      console.log('[QuickEntry] 使用直接数字格式')
    } else if (typeof res === 'string' && res.trim() !== '') {
      // 处理字符串数字，如 "20"
      count = parseInt(res, 10)
      console.log('[QuickEntry] 使用字符串转数字格式:', count)
    } else if (res !== null && typeof res === 'object') {
      if (typeof res.count === 'number') {
        count = res.count
        console.log('[QuickEntry] 使用 res.count')
      } else if (res.data !== undefined) {
        if (typeof res.data === 'number') {
          count = res.data
          console.log('[QuickEntry] 使用 res.data')
        } else if (typeof res.data?.count === 'number') {
          count = res.data.count
          console.log('[QuickEntry] 使用 res.data.count')
        } else if (Array.isArray(res.data?.content)) {
          count = res.data.content.length
          console.log('[QuickEntry] 使用 res.data.content.length')
        } else if (Array.isArray(res.content)) {
          count = res.content.length
          console.log('[QuickEntry] 使用 res.content.length')
        } else if (typeof res.data?.total === 'number') {
          count = res.data.total
          console.log('[QuickEntry] 使用 res.data.total')
        } else if (typeof res.total === 'number') {
          count = res.total
          console.log('[QuickEntry] 使用 res.total')
        }
      } else if (Array.isArray(res.content)) {
        count = res.content.length
        console.log('[QuickEntry] 使用 res.content.length')
      } else if (typeof res.total === 'number') {
        count = res.total
        console.log('[QuickEntry] 使用 res.total')
      }
    } else {
      console.log('[QuickEntry] 无法解析响应格式，res:', res)
    }
    
    unreadCount.value = count
    uni.setStorageSync('unreadMessageCount', count)
    console.log('[QuickEntry] 最终未读数量:', count, 'hasUnread:', hasUnread.value)
  } catch (e) {
    console.error('[QuickEntry] 获取未读消息数失败:', e)
    try {
      const count = uni.getStorageSync('unreadMessageCount')
      unreadCount.value = count || 0
    } catch (e2) {
      unreadCount.value = 0
    }
  }
}

const handleEntryClick = (item) => {
  if (item.title === '消息' || item.title === '健身数据') {
    if (TEST_MODE) {
      uni.showLoading({
        title: '加载中...',
        mask: true
      })
      setTimeout(() => {
        uni.hideLoading()
        if (item.isTabBar) {
          uni.switchTab({ url: item.path })
        } else {
          uni.navigateTo({ url: item.path })
        }
      }, 300)
      return
    }

    const token = uni.getStorageSync('token')
    if (!token) {
      uni.showModal({
        title: '请登录',
        content: '是否跳转到登录页面？',
        confirmText: '确定',
        cancelText: '取消',
        confirmColor: '#FF6B35',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/login/login'
            })
          }
        }
      })
      return
    }
    
    uni.showLoading({
      title: '加载中...',
      mask: true
    })
    setTimeout(() => {
      uni.hideLoading()
      if (item.title === '消息') {
        uni.navigateTo({
          url: `${item.path}?unreadCount=${unreadCount.value}`
        })
      } else if (item.isTabBar) {
        uni.switchTab({ url: item.path })
      } else {
        uni.navigateTo({ url: item.path })
      }
    }, 300)
  } else if (item.title === '签到') {
    const token = uni.getStorageSync('token')
    if (!token) {
      uni.showModal({
        title: '请登录',
        content: '是否跳转到登录页面？',
        confirmText: '确定',
        cancelText: '取消',
        confirmColor: '#FF6B35',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/login/login'
            })
          }
        }
      })
      return
    }
    showCheckInMenu.value = !showCheckInMenu.value
  } else if (item.path) {
    // tabbar 页面使用 switchTab
    if (item.isTabBar) {
      uni.switchTab({
        url: item.path
      })
    } else {
      uni.navigateTo({
        url: item.path
      })
    }
  }
}

const handleStoreCheckIn = () => {
  showCheckInMenu.value = false
  uni.navigateTo({
    url: '/pages/checkIn/checkIn'
  })
}

const handleGroupCourseCheckIn = () => {
  showCheckInMenu.value = false
  uni.scanCode({
    onlyFromCamera: true,
    success: (res) => {
      console.log('扫码结果:', res)
      uni.showToast({
        title: '扫码成功',
        icon: 'success'
      })
    },
    fail: (err) => {
      console.error('扫码失败:', err)
      uni.showToast({
        title: '扫码失败',
        icon: 'none'
      })
    }
  })
}

onMounted(() => {
  loadUnreadCount()
})

uni.$on('pageShow', () => {
  loadUnreadCount()
})

const entries = [
		{ 
		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png',
		   title: '找课程',
		   desc: '精品课程',
		   accent: false,
		   path: "/pages/searchCourse/searchCourse"
	   },
	  { 
		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/plan.png',
		  title: '训练计划',
		  desc: '个性定制',
		  accent: true,
		  path: "/pages/train/index",
		  isTabBar: true
	  },
	  {
		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/data.png',
		  title: '健身数据',
		  desc: '记录分析',
		  accent: false,
		  path: "/pages/memberInfo/bodyTestTrend"
	  },
	  {
		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/message.png',
		  title: '消息',
		  desc: '通知消息',
		  accent: true,
		  path: "/pages/message/index"
	  },
	  {
		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/checkIn.png',
		  title: '签到',
		  desc: '打卡签到',
		  accent: false,
		  path: "/pages/checkIn/checkIn"
	  }
]
</script>

<style lang="scss" scoped>
.quick-entry {
  display: flex;
  justify-content: space-between;
  padding: 32rpx 24rpx;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  margin: 24rpx;
  border-radius: 28rpx;
  box-shadow: 0 8rpx 32rpx var(--shadow-blue-light);
  border: 1rpx solid rgba(255, 255, 255, 0.7);
  position: relative;
  z-index: 3;
}

.entry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.entry-icon {
  width: 104rpx;
  height: 104rpx;
  border-radius: 24rpx;
  background: rgba(130, 220, 130, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  box-shadow: 0 6rpx 20rpx rgba(130, 220, 130, 0.35);
  position: relative;
}

.badge-dot {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  width: 16rpx;
  height: 16rpx;
  background: linear-gradient(135deg, #FF4757, #FF2D55);
  border-radius: 50%;
  box-shadow: 0 2rpx 8rpx rgba(255, 71, 87, 0.5);
  z-index: 99;
  animation: pulse 2s infinite;
}

.icon-img {
  width: 52rpx;
  height: 52rpx;
}

.entry-icon.accent {
  background: rgba(130, 220, 130, 0.9);
}

.entry-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #2D4A5A;
  margin-bottom: 4rpx;
}

.entry-desc {
  font-size: 22rpx;
  color: var(--tabbar-text-inactive);
}

.checkin-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 280rpx;
  padding-right: 60rpx;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.checkin-menu {
  position: absolute;
  right: 0;
  top: 140rpx;
  background: white;
  border-radius: 24rpx;
  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
  padding: 16rpx;
  min-width: 320rpx;
  animation: slideDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  
  &::before {
    content: '';
    position: absolute;
    top: -24rpx;
    right: 60rpx;
    width: 0;
    height: 0;
    border-left: 24rpx solid transparent;
    border-right: 24rpx solid transparent;
    border-bottom: 24rpx solid white;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-40rpx) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  border-radius: 16rpx;
  transition: all 0.2s ease;
  
  &:active {
    background: rgba(0, 0, 0, 0.04);
    transform: scale(0.98);
  }
  
  & + .menu-item {
    margin-top: 8rpx;
  }
}

.menu-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
}

.menu-text {
  font-size: 30rpx;
  font-weight: 600;
  color: #2D4A5A;
}
</style>