<template>
  <view class="action-bar" :style="{ paddingBottom: safeAreaBottom + 'px' }">
    <!-- 钻石消耗确认弹窗 -->
    <DiamondConfirmModal
      :visible="confirmModal.visible"
      :itemLabel="confirmModal.itemLabel"
      :itemCost="confirmModal.itemCost"
      @confirm="handleModalConfirm"
      @cancel="handleModalCancel"
    />
    <!-- 主容器 -->
    <view class="bar-container">
      <view 
        v-for="item in items" 
        :key="item.type"
        class="action-item"
        @click="handleClick(item)"
      >
        <!-- 图标区域：添加白色背景和阴影 -->
        <view class="icon-wrapper">
          <image :src="item.icon" class="item-icon" mode="aspectFill" lazy-load />
        </view>
        
        <!-- 价格区域：钻石图标 + 数字 -->
        <view class="cost-wrapper">
          <image src="/static/icon/crystal.png" class="diamond-icon" mode="aspectFit" lazy-load />
          <text class="item-cost">{{ item.cost }}</text>
        </view>

        <!-- 每个道具独立的反馈动画 -->
        <view v-if="feedbackItem === item.type" class="feedback-layer">
          <view class="feedback-icon" :style="{ color: itemFeedbackColor(item.type) }">+1</view>
        </view>
      </view>
    </view>
    
    <!-- 重试按钮 (当有失败操作时显示) -->
    <view v-if="hasFailedActions" class="retry-banner" @click="retryFailedActions">
      <text class="retry-text">有操作失败，点击重试</text>
    </view>

    <!-- 自定义结果提示（替代系统 toast/modal，避免截断） -->
    <view v-show="resultToast.visible" class="result-toast" :class="{ 'result-toast--visible': resultToast.visible }">
      <text class="result-toast-icon">{{ resultToast.icon }}</text>
      <text class="result-toast-text">{{ resultToast.text }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { purchaseItem } from '@/utils/activity-config'
import DiamondConfirmModal from './DiamondConfirmModal.vue'

const props = defineProps({
  activityId: {
    type: String,
    required: true
  },
  actionItems: {
    type: Array,
    default: () => [
      { type: 'firework', label: '烟花', icon: '/static/rank/spark.png', cost: 1 },
      { type: 'megaphone', label: '喇叭', icon: '/static/icon/task.png', cost: 5 },
      { type: 'love', label: 'LOVE', icon: '/static/icon/castlove.png', cost: 10 }
    ]
  }
})

const emit = defineEmits(['contribute'])

// 动态响应父组件传入的道具配置
const items = computed(() => props.actionItems)

const safeAreaBottom = ref(0)
const feedbackItem = ref(null) // 当前触发反馈动画的道具 type

// 按索引分配颜色，不依赖后端 type 字符串
const FEEDBACK_COLORS = ['#FFD700', '#00CFFF', '#FF6B9D', '#A78BFA', '#34D399']

function itemFeedbackColor(type) {
  const idx = items.value.findIndex(i => i.type === type)
  return FEEDBACK_COLORS[idx >= 0 ? idx % FEEDBACK_COLORS.length : 0]
}
const pendingActions = ref([])
const hasFailedActions = ref(false)
const isOnline = ref(true)
const processingItems = new Set()  // 防止重复点击
const resultToast = ref({ visible: false, icon: '', text: '' })
let resultToastTimer = null

function showResultToast(icon, text) {
  if (resultToastTimer) clearTimeout(resultToastTimer)
  resultToast.value = { visible: true, icon, text }
  resultToastTimer = setTimeout(() => {
    resultToast.value.visible = false
  }, 3000)
}

// 自定义确认弹窗状态
const confirmModal = ref({ visible: false, itemLabel: '', itemCost: 0 })
let confirmResolve = null

function showConfirmModal(item) {
  confirmModal.value = { visible: true, itemLabel: item.label, itemCost: item.cost }
  return new Promise((resolve) => { confirmResolve = resolve })
}

function handleModalConfirm() {
  confirmModal.value.visible = false
  confirmResolve?.(true)
}

function handleModalCancel() {
  confirmModal.value.visible = false
  confirmResolve?.(false)
}

const userInfo = ref(null);

// 网络状态监听
let networkListener = null
let syncDebounceTimer = null

function debouncedSync() {
  if (syncDebounceTimer) clearTimeout(syncDebounceTimer)
  if (resultToastTimer) clearTimeout(resultToastTimer)
  syncDebounceTimer = setTimeout(() => {
    syncDebounceTimer = null
    syncPendingActions()
  }, 1000)
}

onMounted(() => {
  // 获取安全区域信息
  const systemInfo = uni.getSystemInfoSync()
  safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom || 0
  
  // 恢复离线队列
  loadPendingActions()
  
  // 监听网络状态
  networkListener = uni.onNetworkStatusChange((res) => {
    const wasOffline = !isOnline.value
    isOnline.value = res.isConnected
    
    // 如果从离线恢复到在线，自动同步（防抖避免网络抖动重复触发）
    if (wasOffline && isOnline.value && pendingActions.value.length > 0) {
      debouncedSync()
    }
  })
  
  // 检查当前网络状态
  uni.getNetworkType({
    success: (res) => {
      isOnline.value = res.networkType !== 'none'
    }
  })
})

onUnmounted(() => {
  if (networkListener) uni.offNetworkStatusChange(networkListener)
  if (syncDebounceTimer) clearTimeout(syncDebounceTimer)
  if (resultToastTimer) clearTimeout(resultToastTimer)
})

// 存储键前缀
const STORAGE_PREFIX = 'topfans_'

// 加载离线队列
async function loadPendingActions() {
  try {
    // 先检查 key 是否存在
    const info = uni.getStorageInfoSync()
    const key = `${STORAGE_PREFIX}pending_actions_${props.activityId}`
    
    if (!info.keys.includes(key)) {
      return // key 不存在，直接返回
    }

    const cached = await uni.getStorage({
      key: `${STORAGE_PREFIX}pending_actions_${props.activityId}`
    })
    
    if (cached && cached[1]?.data && Array.isArray(cached[1].data)) {
      pendingActions.value = cached[1].data
      hasFailedActions.value = cached[1].data.length > 0
      
      // 如果在线，尝试同步
      if (isOnline.value && cached[1].data.length > 0) {
        syncPendingActions()
      }
    }
  } catch (error) {
    console.error('加载离线队列失败:', error)
  }
}

// 保存离线队列
async function savePendingActions() {
  try {
    await uni.setStorage({
      key: `${STORAGE_PREFIX}pending_actions_${props.activityId}`,
      data: pendingActions.value
    })
    hasFailedActions.value = pendingActions.value.length > 0
  } catch (error) {
    console.error('保存离线队列失败:', error)
  }
}

// 处理道具点击
async function handleClick(item) {
  // 防止同一道具重复点击
  if (processingItems.has(item.type)) return
  processingItems.add(item.type)

  try {
    // 验证余额前给一个轻量反馈
    uni.showLoading({ title: '请稍候...', mask: true })
    const hasBalance = await validateBalance(item.cost)
    uni.hideLoading()
    
    if (!hasBalance) {
      showResultToast('', '余额不足')
      return
    }
    
    // 弹出确认框，提示消耗钻石数量
    const confirmed = await showConfirmModal(item)
    if (!confirmed) return
    
    // 调用贡献API
    await contributeItem(item)
  } finally {
    processingItems.delete(item.type)
  }
}

// 验证用户余额（优先用缓存，避免重复读取存储）
async function validateBalance(cost) {
  try {
    if (!userInfo.value) {
      const userStr = uni.getStorageSync('user')
      if (userStr) {
        userInfo.value = typeof userStr === 'string' ? JSON.parse(userStr) : { ...userStr }
      }
    }
    const balance = Number(userInfo.value?.crystal_balance) || 0
    return balance >= cost
  } catch (error) {
    console.error('验证余额失败:', error)
    return false
  }
}

// 贡献道具
async function contributeItem(item, isRetry = false) {
  try {
    // 使用 activity-config.js 中的 purchaseItem 函数
    const result = await purchaseItem(props.activityId, item.type, 1)

    // 检查购买结果
    if (!result.success) {
      showResultToast('', result.message || '活动不在进行中，无法购买')
      return false
    }

    // 成功：触发反馈动画（重试时静默，不触发）
    if (!isRetry) {
      feedbackItem.value = item.type
      setTimeout(() => { feedbackItem.value = null }, 800)
    }

    // 更新本地用户余额：非重试时直接用服务端余额；重试时由 syncPendingActions 统一处理
    if (!isRetry) {
      await updateLocalBalanceFromResult(result.remainingBalance)
    }

    // 通知父组件更新进度（使用返回的当前进度）
    emit('contribute', item.type, result.currentProgress)

    // 如果是重试成功，不单独弹 toast，由 syncPendingActions 统一汇总提示
    if (!isRetry) {
      showResultToast('✅', `贡献值 +${result.totalContribution}`)
    }

    // 重试时返回完整结果供 syncPendingActions 汇总；正常时返回 true
    return isRetry ? { contribution: result.totalContribution, remainingBalance: result.remainingBalance } : true
  } catch (error) {
    console.error('贡献失败:', error)

    // 如果不是重试操作，先乐观扣除本地余额再入队
    if (!isRetry) {
      deductLocalBalance(item.cost)
      const queued = addToPendingQueue(item)
      if (!queued) {
        // 队列已满，退还刚扣除的余额
        refundLocalBalance(item.cost)
        return false
      }
      showResultToast('', '网络异常，已加入队列')
    }

    return false
  }
}

// 添加到离线队列（上限 10 个）
const QUEUE_LIMIT = 10

function addToPendingQueue(item) {
  if (pendingActions.value.length >= QUEUE_LIMIT) {
    showResultToast('⚠️', '离线队列已满\n请联网后再操作')
    return false
  }
  const action = {
    type: item.type,
    cost: item.cost,
    label: item.label,
    icon: item.icon,
    timestamp: Date.now(),
    retryCount: 0
  }
  pendingActions.value.push(action)
  savePendingActions()
  return true
}

// 乐观扣除本地余额（离线入队时使用）
function deductLocalBalance(cost) {
  try {
    const userStr = uni.getStorageSync('user')
    if (userStr) {
      // 确保正确解析用户对象
      let user
      if (typeof userStr === 'string') {
        user = JSON.parse(userStr)
      } else {
        user = { ...userStr }
      }
      
      // 扣除余额，确保不为负数
      user.crystal_balance = Math.max(0, (Number(user.crystal_balance) || 0) - cost)
      
      // 保存回存储
      uni.setStorageSync('user', JSON.stringify(user))
      userInfo.value = user
      uni.$emit('balanceUpdated', { crystal_balance: user.crystal_balance })
    }
  } catch (error) {
    console.error('扣除本地余额失败:', error)
  }
}

// 退还本地余额（同步彻底失败时使用）
function refundLocalBalance(cost) {
  try {
    const userStr = uni.getStorageSync('user')
    if (userStr) {
      // 确保正确解析用户对象
      let user
      if (typeof userStr === 'string') {
        user = JSON.parse(userStr)
      } else {
        user = { ...userStr }
      }
      
      // 退还余额
      user.crystal_balance = (Number(user.crystal_balance) || 0) + cost
      
      // 保存回存储
      uni.setStorageSync('user', JSON.stringify(user))
      userInfo.value = user
      uni.$emit('balanceUpdated', { crystal_balance: user.crystal_balance })
    }
  } catch (error) {
    console.error('退还本地余额失败:', error)
  }
}
async function updateLocalBalanceFromResult(newBalance) {
  try {
    const userStr = uni.getStorageSync('user')
    if (userStr) {
      // 确保正确解析用户对象
      let user
      if (typeof userStr === 'string') {
        user = JSON.parse(userStr)
      } else {
        // 如果已经是对象，创建一个新副本避免引用问题
        user = { ...userStr }
      }
      
      // 更新余额，确保是数字类型
      user.crystal_balance = Number(newBalance) || 0
      
      // 保存回存储，确保是字符串格式
      uni.setStorageSync('user', JSON.stringify(user))
      userInfo.value = user
      uni.$emit('balanceUpdated', { crystal_balance: user.crystal_balance })
    }
  } catch (error) {
    console.error('更新本地余额失败:', error)
  }
}

// 同步离线队列
async function syncPendingActions() {
  if (pendingActions.value.length === 0) {
    return
  }
  
  uni.showLoading({
    title: '同步中...',
    mask: true
  })
  
  const actions = [...pendingActions.value]
  const failedActions = []
  const CONCURRENCY = 3
  let totalContribution = 0
  let minRemainingBalance = Infinity  // 并发时取最小余额，避免覆盖问题

  try {
    // 分批并发执行，每批最多 CONCURRENCY 个
    for (let i = 0; i < actions.length; i += CONCURRENCY) {
      const batch = actions.slice(i, i + CONCURRENCY)
      const results = await Promise.all(batch.map(async (action) => {
        if (action.retryCount >= 3) {
          // 重试超限，退还之前乐观扣除的余额
          refundLocalBalance(action.cost)
          return { action, contribution: 0, remainingBalance: null, success: false }
        }
        action.retryCount = (action.retryCount || 0) + 1
        const item = { type: action.type, cost: action.cost, label: action.label, icon: action.icon }
        const res = await contributeItem(item, true)
        const success = res !== false && res !== null
        return {
          action,
          contribution: success ? res.contribution : 0,
          remainingBalance: success ? res.remainingBalance : null,
          success
        }
      }))
      results.forEach(({ action, contribution, remainingBalance, success }) => {
        if (success) {
          totalContribution += contribution
          if (remainingBalance !== null && remainingBalance < minRemainingBalance) {
            minRemainingBalance = remainingBalance
          }
        } else {
          failedActions.push(action)
        }
      })
    }
  } finally {
    uni.hideLoading()
    // 批次全部完成后，用最小余额做一次写入，避免并发覆盖
    if (minRemainingBalance !== Infinity) {
      await updateLocalBalanceFromResult(minRemainingBalance)
    }
  }
  
  // 更新队列
  pendingActions.value = failedActions
  savePendingActions()
  
  // 显示结果（自定义 toast，完全控制尺寸避免系统截断）
  const successCount = actions.length - failedActions.length
  if (successCount > 0 && failedActions.length === 0) {
    showResultToast('✅', `贡献成功\n+${totalContribution} 贡献值已到账`)
  } else if (successCount > 0 && failedActions.length > 0) {
    showResultToast('⚠️', `成功 ${successCount} 个，+${totalContribution} 贡献值\n失败 ${failedActions.length} 个，可点击重试`)
  } else {
    showResultToast('❌', '贡献失败\n钻石已退还')
  }
}

// 手动重试失败操作
function retryFailedActions() {
  syncPendingActions()
}

// 暴露方法供父组件调用
defineExpose({
  syncPendingActions,
  getPendingActionsCount: () => pendingActions.value.length
})
</script>

<style scoped>
/* 整体定位 */
.action-bar {
  width: 100%;
  position: fixed;
  bottom: 0; /* 通常底部栏贴底，通过 padding 留出安全区 */
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
}

/* 核心容器：模仿图中的粉色渐变长条 */
.bar-container {
  min-width: 50%;
  background: linear-gradient(to bottom right, 
    #F0E4B1 0%,   /* 左：浅橙粉 */
	#F08399 50%,
    #B94E73 100%  /* 右：柔粉红 */
  );
  border-radius: 40rpx;
  padding: 20rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(255, 107, 157, 0.4);
  display: flex;
  gap: 24rpx;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 128rpx;
}

.action-item {
  width:120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: transform 0.1s;
  cursor: pointer;
}

.action-item:active {
  transform: scale(0.95);
}

/* 图标包装器：白色圆角背景 */
.icon-wrapper {
  width: 100rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16rpx;
  overflow: hidden;
}

.item-icon {
  width: 100%;
  height: 100%;
  transform: scale(2);
}

/* 价格包装器：横向排列钻石和数字 */
.cost-wrapper {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

/* 钻石图标样式 */
.diamond-icon {
  width: 56rpx;
  height: 56rpx;
}

.item-cost {
  font-size: 24rpx;
    color: #FFA500; /* 橙色，接近图中 LISA 的颜色 */
    text-shadow:
        0 3rpx 6rpx rgba(0, 0, 0, 0.4),
        0 1rpx 3rpx rgba(0, 0, 0, 0.3);
    font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
}

/* --- 以下保持原有逻辑样式 --- */

.feedback-layer {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 10;
}

.feedback-icon {
  font-size: 60rpx;
  color: #ff6b9d;
  font-weight: bold;
  animation: feedback-pop 1s ease-out;
}

.retry-banner {
  position: absolute;
  top: -80rpx; /* 调整位置以免遮挡渐变条 */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 107, 157, 0.9);
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
  cursor: pointer;
  white-space: nowrap;
}

.retry-text {
  font-size: 24rpx;
  color: #fff;
  font-weight: 500;
}

@keyframes feedback-pop {
  0% { opacity: 0; transform: scale(0.5) translateY(0); }
  50% { opacity: 1; transform: scale(1.2) translateY(-40rpx); }
  100% { opacity: 0; transform: scale(1) translateY(-80rpx); }
}

.result-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 20rpx;
  padding: 40rpx 48rpx;
  min-width: 320rpx;
  max-width: 560rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.result-toast--visible {
  opacity: 1;
  pointer-events: auto;
}

.result-toast-icon {
  font-size: 56rpx;
  line-height: 1;
}

.result-toast-text {
  font-size: 28rpx;
  color: #fff;
  text-align: center;
  line-height: 1.6;
  white-space: pre-line;
}
</style>