<template>
  <view class="poster-checkin-page bg-gray-50 h-screen flex flex-col">
    <!-- 活动信息区域 -->
    <view v-if="pageState === 'normal' || pageState === 'no-checkin'" class="bg-white mx-4 mt-4 mb-2 rounded-lg shadow-sm p-4">
      <!-- 活动主题 -->
      <view class="text-lg font-bold text-gray-800 mb-2">
        {{ activityInfo.title }}
      </view>

      <!-- 打卡进度 -->
      <view class="flex items-center mb-2">
        <view class="flex items-center">
          <view
            v-for="(point, index) in activityInfo.checkPoints"
            :key="index"
            class="w-2 h-2 rounded-full mr-2 flex items-center justify-center"
            :class="point.completed ? 'bg-orange-400' : 'bg-gray-300'"
          >
          </view>
        </view>
        <text class="text-xs text-gray-600">{{ activityInfo.completedCount }}/{{ activityInfo.totalCount }}</text>
      </view>

      <!-- 活动截止日期 -->
      <view class="text-sm text-gray-500">
        活动截止日期：{{ activityInfo.endDate }}
      </view>
    </view>

    <!-- 海报预览区域 - 正常状态 -->
    <view v-if="pageState === 'normal'" class="flex-1 mx-4 mb-2 bg-white rounded-lg relative" style="overflow: visible;">
      <view class="h-full relative flex items-center justify-center">
        <view v-if="currentPoster.path" class="w-full h-full relative">
          <image
            :src="currentPoster.path"
            mode="widthFix"
            class="w-full h-full"
          />
          <!-- 打卡点标题 -->
          <!-- <view class="absolute bottom-2 left-2 bg-blue-500 text-white text-xs px-2 py-1 rounded">
            {{ posterList[currentPosterIndex]?.title || '海报生成中' }}
          </view> -->
          <!-- 点击预览提示 -->
          <!-- <view @tap="previewPoster" class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">
            点击预览
          </view> -->
        </view>
      </view>

      <!-- 左箭头按钮 -->
      <view
        class="absolute top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center transition-all duration-200 z-10"
        :class="currentPosterIndex > 0 ? 'bg-orange-400 text-white shadow-lg' : 'bg-gray-300 text-gray-500'"
        style="left: -20rpx;"
        @tap="previousPoster"
      >
        <Left size="16"></Left>
      </view>

      <!-- 右箭头按钮 -->
      <view
        class="absolute top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center transition-all duration-200 z-10"
        :class="currentPosterIndex < posterList.length - 1 ? 'bg-orange-400 text-white shadow-lg' : 'bg-gray-300 text-gray-500'"
        style="right: -20rpx;"
        @tap="nextPoster"
      >
        <Right size="16"></Right>
      </view>
    </view>

    <!-- 没有打卡信息的空状态 -->
    <view v-if="pageState === 'no-checkin'" class="flex-1 mx-4 mb-2 flex justify-center">
      <view class="bg-white rounded-lg shadow-sm p-8 text-center max-w-sm">
        <view class="text-6xl mb-4">📸</view>
        <view class="text-lg font-bold text-gray-800 mb-2">打卡信息为空</view>
        <view class="text-sm text-gray-500 mb-4">您还没有打卡记录，请先参加活动打卡后再来生成海报</view>
        <view class="text-xs text-orange-500">完成打卡后即可生成专属海报</view>
      </view>
    </view>

    <!-- 底部操作按钮 - 仅在正常状态显示 -->
    <view v-if="pageState === 'normal'" class="bg-white border-t border-gray-200 p-4 safe-area-bottom">
      <view class="flex gap-4">
        <view
          class="flex-1 bg-gradient-to-r from-orange-400 to-orange-500 text-white py-3 px-6 rounded-lg font-medium shadow-lg active:scale-95 transition-transform duration-150 flex items-center justify-center gap-2"
          @click="chooseBackgroundImage"
        >
          <text>{{ currentPosterHasCustomBackground ? '更改照片' : '上传照片' }}</text>
        </view>
        <view
          class="flex-1 text-white py-3 px-6 rounded-lg font-medium shadow-lg active:scale-95 transition-transform duration-150 flex items-center justify-center gap-2"
          :class="posterPath ? 'bg-gradient-to-r from-green-400 to-green-500' : (posterGenerateFailed ? 'bg-gradient-to-r from-orange-400 to-orange-500' : 'bg-gray-400')"
          @click="handlePosterAction"
          :disabled="!posterPath && !posterGenerateFailed"
        >
          <text>{{ posterPath ? '保存海报' : (posterGenerateFailed ? '重新生成' : '生成中...') }}</text>
        </view>
      </view>
    </view>

    <!-- 海报生成组件 - 仅在正常状态显示 -->
    <PosterBuilder
      v-if="shouldGeneratePoster && pageState === 'normal'"
      :config="posterConfig"
      :show-loading="true"
      @success="onPosterSuccess"
      @fail="onPosterFail"
    />

    <!-- 图片预览 -->
    <nut-image-preview
      v-model:show="previewVisible"
      :images="previewImages"
      :init-no="0"
      :show-index="false"
      @close="closePreview"
    />


  </view>
</template>

<style scoped>
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

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

.animate-spin {
  animation: spin 1s linear infinite;
}
</style>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import Taro from '@tarojs/taro'
import { Left, Right } from '@nutui/icons-vue-taro'
import PosterBuilder from '@/components/PosterBuilder/index.vue'
import BASE_URL from '@/utils/config'

// 默认背景图
const defaultBackground = 'https://cdn.ipadbiz.cn/lls_prog/images/%E6%B5%B7%E6%8A%A5%E9%BB%98%E8%AE%A4%E8%83%8C%E6%99%AF%E5%9B%BE1.png'

// 页面状态
const posterPath = ref('') // 生成的海报路径
const backgroundImages = ref({}) // 每个海报的用户上传背景图 {posterIndex: imageUrl}
const shouldGeneratePoster = ref(false) // 是否应该生成海报
const currentPosterIndex = ref(0) // 当前显示的海报索引
const posterGenerateFailed = ref(false) // 海报生成是否失败
const posterGeneratedFlags = ref({}) // 每个海报的生成状态 {posterIndex: boolean}
const posterConfigHashes = ref({}) // 每个海报的配置哈希值，用于检测配置变化

// 页面参数
const pageParams = ref({
  from: '',
  id: '',
})

// TODO: 有真实数据的时候, 通过ID获取具体地点的海报信息, 赋值currentPosterIndex获取特定的海报

// 图片预览相关
const previewVisible = ref(false)
const previewImages = ref([])

// 活动信息数据 - 模拟不同状态，实际使用时从API获取
const activityInfo = ref({
  title: '南京路乐龄时尚消费主题路线',
  checkPoints: [
    { id: 1, name: '起点签到', completed: true },
    { id: 2, name: '商圈探索', completed: true },
    { id: 3, name: '文化体验', completed: true },
    { id: 4, name: '美食品鉴', completed: false },
    { id: 5, name: '终点打卡', completed: false }
  ],
  completedCount: 3,
  totalCount: 5,
  endDate: '2025年9月7日'
})

// activityInfo.value = {};

// 海报数据列表 - 合并海报基础信息和内容数据，实际使用时从API获取
const posterList = ref([
  {
    id: 1,
    title: '起点签到',
    path: '',
    checkPointId: 1,
    backgroundImage: 'https://cdn.ipadbiz.cn/lls_prog/images/%E6%B5%B7%E6%8A%A5%E9%BB%98%E8%AE%A4%E8%83%8C%E6%99%AF%E5%9B%BE1.png',
    // 海报内容数据
    user: {
      avatar: 'https://cdn.ipadbiz.cn/icon/tou@2x.png',
      nickname: '张大爷'
    },
    family: {
      name: '幸福之家',
      description: '一家人整整齐齐最重要'
    },
    activity: {
      logo: 'https://cdn.ipadbiz.cn/lls_prog/images/%E6%B5%B7%E6%8A%A5%E5%B7%A6%E4%B8%8A%E8%A7%92logo.png',
      name: '南京路时尚citywalk'
    },
    level: {
      logo: 'https://cdn.ipadbiz.cn/lls_prog/images/%E6%B5%B7%E6%8A%A5%E5%8F%B3%E4%B8%8B%E8%A7%92icon.png',
      name: '卡点: 上海市第一百货商店'
    },
    qrcode: 'https://cdn.ipadbiz.cn/space/068a790496c87cb8d2ed6e551401c544.png',
    qrcodeDesc: '长按识别，来，我们一起打卡！'
  },
  {
    id: 2,
    title: '商圈探索',
    path: '',
    checkPointId: 2,
    backgroundImage: 'https://cdn.ipadbiz.cn/lls_prog/images/%E5%85%B3%E5%8D%A12-%E5%9B%BE%E5%B1%82%201.png',
    // 海报内容数据
    user: {
      avatar: 'https://cdn.ipadbiz.cn/icon/tou@2x.png',
      nickname: '李奶奶'
    },
    family: {
      name: '温馨小家',
      description: '健康快乐每一天'
    },
    activity: {
      logo: 'https://cdn.ipadbiz.cn/lls_prog/images/%E6%B5%B7%E6%8A%A5%E5%B7%A6%E4%B8%8A%E8%A7%92logo.png',
      name: '南京路时尚citywalk'
    },
    level: {
      logo: 'https://cdn.ipadbiz.cn/lls_prog/images/%E5%85%B3%E5%8D%A12-%E4%BB%8A%E6%9C%9D%E8%B7%9F%E6%97%81%E5%8F%8B%20%E4%B8%80%E9%81%93%E6%9D%A5%E4%B9%B0%E4%B9%B0%E4%B9%B0_1.png',
      name: '第二关卡'
    },
    qrcode: 'https://cdn.ipadbiz.cn/space/068a790496c87cb8d2ed6e551401c544.png',
    qrcodeDesc: '长按识别，来，我们一起打卡！'
  },
])

// posterList.value = []

// 数据状态检查
const hasActivityInfo = computed(() => {
  return activityInfo.value && activityInfo.value.title && activityInfo.value.checkPoints && activityInfo.value.checkPoints.length > 0
})

const hasCheckinInfo = computed(() => {
  return posterList.value && posterList.value.length > 0
})

// 页面显示状态
const pageState = computed(() => {
  if (!hasActivityInfo.value) {
    return 'no-activity' // 没有活动信息
  }
  if (!hasCheckinInfo.value) {
    return 'no-checkin' // 有活动信息但没有打卡信息
  }
  return 'normal' // 正常状态
})



// 当前海报
const currentPoster = computed(() => {
  return posterList.value[currentPosterIndex.value] || { path: '', title: '' }
})

// 当前海报的内容数据
const currentMockData = computed(() => {
  const currentPoster = posterList.value[currentPosterIndex.value]
  if (!currentPoster) return null

  return {
    user: currentPoster.user,
    family: currentPoster.family,
    activity: currentPoster.activity,
    level: currentPoster.level,
    qrcode: currentPoster.qrcode,
    qrcodeDesc: currentPoster.qrcodeDesc
  }
})

// 当前海报是否有用户上传的背景图
const currentPosterHasCustomBackground = computed(() => {
  return !!backgroundImages.value[currentPosterIndex.value]
})

// 海报配置
const posterConfig = computed(() => {
  const currentPosterData = posterList.value[currentPosterIndex.value]
  const bgImage = backgroundImages.value[currentPosterIndex.value] || currentPosterData?.backgroundImage || defaultBackground

  return {
    width: 750,
    height: 1334,
    backgroundColor: '#f5f5f5',
    debug: false,
    borderRadius: 15,
    images: [
      // 背景图
      {
        x: 0,
        y: 0,
        width: 750,
        height: 1100,
        url: bgImage,
        zIndex: 0
      },
      // 用户头像
      {
        x: 40,
        y: 40,
        width: 130,
        height: 130,
        url: currentMockData.value.user.avatar,
        borderRadius: 65,
        zIndex: 2
      },
      // 活动logo
      {
        x: 500,
        y: 40,
        width: 200,
        height: 80,
        url: currentMockData.value.activity.logo,
        zIndex: 2
      },
      // 关卡徽章
      {
        x: 0,
        y: 880,
        width: 380,
        height: 100,
        url: currentMockData.value.level.logo,
        zIndex: 2
      },
      // 小程序码
      {
        x: 50,
        y: 1100,
        width: 180,
        height: 180,
        url: currentMockData.value.qrcode,
        zIndex: 1
      }
    ],
    texts: [
      // 家庭名称
      {
        x: 40,
        y: 190,
        text: currentMockData.value.family.name,
        fontSize: 36,
        color: '#ffffff',
        fontWeight: 'bold',
        textAlign: 'left',
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowOffsetX: 2,
        shadowOffsetY: 2,
        shadowBlur: 4,
        zIndex: 2
      },
      // 家庭描述
      // {
      //   x: 40,
      //   y: 250,
      //   text: currentMockData.value.family.description,
      //   fontSize: 28,
      //   color: '#ffffff',
      //   textAlign: 'left',
      //   shadowColor: 'rgba(0, 0, 0, 0.6)',
      //   shadowOffsetX: 2,
      //   shadowOffsetY: 2,
      //   shadowBlur: 4,
      //   zIndex: 2
      // },
      // 小程序码描述
      {
        x: 280,
        y: 1125,
        text: currentMockData.value.qrcodeDesc,
        fontSize: 28,
        color: '#333333',
        lineHeight: 40,
        lineNum: 2,
        width: 400,
        textAlign: 'left',
        zIndex: 1
      },
      // 关卡描述
      {
        x: 280,
        y: 1180,
        text: currentMockData.value.level.name,
        fontSize: 32,
        color: '#333333',
        lineHeight: 40,
        lineNum: 2,
        width: 400,
        textAlign: 'left',
        zIndex: 1
      },
    ],
    blocks: [
      // 下半部分白色背景
      {
        x: 0,
        y: 1050,
        width: 750,
        height: 534,
        backgroundColor: '#ffffff',
        zIndex: 0
      },
      // 用户信息背景遮罩
      // {
      //   x: 30,
      //   y: 180,
      //   width: 450,
      //   height: 140,
      //   backgroundColor: 'rgba(0,0,0,0.3)',
      //   borderRadius: 10,
      //   zIndex: 1
      // }
    ]
  }
})

/**
 * 页面加载时初始化
 */
onMounted(() => {
  Taro.setNavigationBarTitle({ title: '海报打卡' })

  // 获取页面参数
  const instance = Taro.getCurrentInstance()
  const params = instance.router?.params || {}

  pageParams.value = {
    id: params.id || '',
  }

  console.log('海报打卡页面接收到的参数:', pageParams.value)

  // 页面加载时检查是否需要生成当前海报
  generateCurrentPosterIfNeeded()
})

/**
 * 监听背景图变化，重新生成海报
 */
watch(backgroundImages, (newVal, oldVal) => {
  // 只有当前海报的背景图发生变化时才重新生成
  const currentIndex = currentPosterIndex.value
  const newBgImage = newVal[currentIndex]
  const oldBgImage = oldVal?.[currentIndex]

  if (newBgImage !== oldBgImage) {
    console.log('背景图发生变化:', { currentIndex, newBgImage, oldBgImage })

    // 标记当前海报需要重新生成
    posterGeneratedFlags.value[currentIndex] = false
    delete posterConfigHashes.value[currentIndex]

    // 清除当前海报路径
    posterPath.value = ''

    // 重新生成海报
    generateCurrentPoster()
  }
}, { deep: true })

/**
 * 监听当前海报索引变化，切换海报
 */
watch(currentPosterIndex, (newIndex, oldIndex) => {
  // 切换海报时，检查新海报是否已生成
  if (newIndex !== oldIndex) {
    generateCurrentPosterIfNeeded()
  }
})

/**
 * 生成当前海报配置的哈希值
 */
const generateConfigHash = (config) => {
  const configStr = JSON.stringify({
    backgroundImage: backgroundImages.value[currentPosterIndex.value],
    posterIndex: currentPosterIndex.value,
    mockData: currentMockData.value
  })
  // 简单哈希函数
  let hash = 0
  for (let i = 0; i < configStr.length; i++) {
    const char = configStr.charCodeAt(i)
    hash = ((hash << 5) - hash) + char
    hash = hash & hash // 转换为32位整数
  }
  return hash.toString()
}

/**
 * 检查是否需要生成当前海报
 */
const generateCurrentPosterIfNeeded = () => {
  const currentIndex = currentPosterIndex.value
  const currentHash = generateConfigHash()
  const isGenerated = posterGeneratedFlags.value[currentIndex]
  const lastHash = posterConfigHashes.value[currentIndex]
  const hasCustomBackground = !!backgroundImages.value[currentIndex]

  console.log('检查是否需要生成海报:', {
    currentIndex,
    isGenerated,
    hasCustomBackground,
    currentHash,
    lastHash,
    hashChanged: lastHash !== currentHash
  })

  // 如果海报未生成过，或者配置发生了变化，则需要重新生成
  if (!isGenerated || lastHash !== currentHash) {
    console.log('需要重新生成海报')
    posterConfigHashes.value[currentIndex] = currentHash
    generateCurrentPoster()
  } else {
    // 海报已存在且配置未变化，直接使用缓存的海报
    const cachedPoster = posterList.value[currentIndex]
    if (cachedPoster && cachedPoster.path) {
      console.log('使用缓存的海报:', cachedPoster.path)
      posterPath.value = cachedPoster.path
      posterGenerateFailed.value = false
    } else {
      console.log('缓存的海报路径不存在，重新生成')
      generateCurrentPoster()
    }
  }
}

/**
 * 生成当前海报
 */
const generateCurrentPoster = () => {
  posterPath.value = ''
  posterGenerateFailed.value = false
  shouldGeneratePoster.value = false

  // 延迟触发生成，确保配置更新
  setTimeout(() => {
    shouldGeneratePoster.value = true
  }, 100)
}

/**
 * 切换海报
 */
const switchPoster = (index) => {
  if (index >= 0 && index < posterList.value.length) {
    currentPosterIndex.value = index
  }
}

/**
 * 切换到上一张海报
 */
const previousPoster = () => {
  if (currentPosterIndex.value > 0) {
    currentPosterIndex.value = currentPosterIndex.value - 1
  }
}

/**
 * 切换到下一张海报
 */
const nextPoster = () => {
  if (currentPosterIndex.value < posterList.value.length - 1) {
    currentPosterIndex.value = currentPosterIndex.value + 1
  }
}

/**
 * 选择背景图片
 */
const chooseBackgroundImage = () => {
  Taro.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFile = res.tempFiles[0]
      if (tempFile.size > 5 * 1024 * 1024) {
        Taro.showToast({
          title: '图片大小不能超过5MB',
          icon: 'none'
        })
        return
      }

      uploadBackgroundImage(tempFile.path)
    },
    fail: () => {
      Taro.showToast({
        title: '选择图片失败',
        icon: 'none'
      })
    }
  })
}

/**
 * 上传背景图片
 */
const uploadBackgroundImage = (filePath) => {
  Taro.showLoading({ title: '上传中...' })

  Taro.uploadFile({
    url: BASE_URL + '/admin/?m=srv&a=upload',
    filePath,
    name: 'file',
    success: (uploadRes) => {
      Taro.hideLoading()
      const data = JSON.parse(uploadRes.data)
      if (data.code === 0 && data.data) {
        const currentIndex = currentPosterIndex.value

        // 为当前海报设置背景图
        backgroundImages.value[currentIndex] = data.data.src

        // 强制标记当前海报需要重新生成
        posterGeneratedFlags.value[currentIndex] = false
        delete posterConfigHashes.value[currentIndex]

        // 清除当前海报路径，强制重新生成
        posterPath.value = ''

        // 立即重新生成海报
        generateCurrentPoster()

        Taro.showToast({ title: '上传成功', icon: 'success' })
      } else {
        Taro.showToast({ title: data.msg || '上传失败', icon: 'none' })
      }
    },
    fail: () => {
      Taro.hideLoading()
      Taro.showToast({ title: '上传失败，请稍后重试', icon: 'none' })
    }
  })
}

/**
 * 海报生成成功
 */
const onPosterSuccess = (result) => {
  const currentIndex = currentPosterIndex.value
  posterPath.value = result.tempFilePath
  posterGenerateFailed.value = false

  // 更新当前海报的路径和生成状态
  if (posterList.value[currentIndex]) {
    posterList.value[currentIndex].path = result.tempFilePath
  }
  posterGeneratedFlags.value[currentIndex] = true

  // 保存当前配置的哈希值
  posterConfigHashes.value[currentIndex] = generateConfigHash()

  shouldGeneratePoster.value = false

  console.log('海报生成成功:', {
    currentIndex,
    posterPath: result.tempFilePath,
    hasCustomBackground: !!backgroundImages.value[currentIndex]
  })

  Taro.showToast({ title: '海报生成成功', icon: 'success' })
}

/**
 * 海报生成失败
 */
const onPosterFail = (error) => {
  const currentIndex = currentPosterIndex.value
  shouldGeneratePoster.value = false
  posterGenerateFailed.value = true
  posterPath.value = ''

  // 标记当前海报生成失败，下次仍需重新生成
  posterGeneratedFlags.value[currentIndex] = false

  Taro.showToast({ title: '海报生成失败', icon: 'none' })
  console.error('海报生成失败:', error)
}

/**
 * 预览海报
 */
const previewPoster = () => {
  const currentPath = currentPoster.value.path
  console.warn('预览海报', currentPath)
  if (!currentPath) return

  previewImages.value = [{ src: currentPath }]
  previewVisible.value = true
}

/**
 * 关闭预览
 */
const closePreview = () => {
  previewVisible.value = false
}

/**
 * 处理海报按钮点击事件
 */
const handlePosterAction = () => {
  if (posterPath.value) {
    // 如果海报已生成，执行保存操作
    savePoster()
  } else if (posterGenerateFailed.value) {
    // 如果生成失败，重新生成海报
    generateCurrentPoster()
  }
}

/**
 * 保存海报到相册
 */
const savePoster = () => {
  const currentPath = currentPoster.value.path
  if (!currentPath) {
    Taro.showToast({ title: '请等待海报生成完成', icon: 'none' })
    return
  }

  Taro.saveImageToPhotosAlbum({
    filePath: currentPath,
    success: () => {
      Taro.showToast({ title: '保存成功', icon: 'success' })
    },
    fail: (err) => {
      if (err.errMsg.includes('auth deny')) {
        Taro.showModal({
          title: '提示',
          content: '需要您授权保存图片到相册',
          showCancel: false,
          confirmText: '去设置',
          success: () => {
            Taro.openSetting()
          }
        })
      } else {
        Taro.showToast({ title: '保存失败', icon: 'none' })
      }
    }
  })
}

/**
 * 显示没有活动信息的确认对话框
 */
const showNoActivityConfirm = () => {
  Taro.showModal({
    title: '温馨提示',
    content: '您还没有参加过活动，请先参加活动后再来生成海报',
    showCancel: false,
    confirmText: '知道了',
    success: (res) => {
      if (res.confirm) {
        // 返回上一页
        Taro.navigateBack({
          delta: 1
        })
      }
    }
  })
}

/**
 * 页面初始化
 */
onMounted(() => {
  // 获取页面参数
  const instance = Taro.getCurrentInstance()
  if (instance.router && instance.router.params) {
    pageParams.value = instance.router.params
  }

  // 检查页面状态
  if (pageState.value === 'no-activity') {
    // 没有活动信息，显示确认对话框
    showNoActivityConfirm()
  }
})
</script>

<style lang="less">
.poster-checkin-page {
  .aspect-\[3\/4\] {
    aspect-ratio: 3/4;
  }
}
</style>