<template>
  <view class="poster-checkin-page bg-gray-50 h-screen flex flex-col">
    <!-- 活动信息区域 -->
    <view 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 class="flex-1 mx-4 mb-2 bg-white rounded-lg shadow-sm relative" style="overflow: visible;">
      <view class="h-full relative bg-gray-100 flex items-center justify-center">
        <view v-if="currentPoster.path" class="w-full h-full relative">
          <image
            :src="currentPoster.path"
            mode="aspectFit"
            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 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>{{ backgroundImage ? '更改照片' : '上传照片' }}</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"
      :config="posterConfig"
      :show-loading="true"
      @success="onPosterSuccess"
      @fail="onPosterFail"
    />

    <!-- 图片预览 -->
    <nut-image-preview
      v-model:show="previewVisible"
      :images="previewImages"
      :init-no="0"
      @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 posterPath = ref('') // 生成的海报路径
const backgroundImage = ref('') // 用户上传的背景图
const shouldGeneratePoster = ref(false) // 是否应该生成海报
const currentPosterIndex = ref(0) // 当前显示的海报索引
const posterGenerateFailed = ref(false) // 海报生成是否失败

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

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

// 活动信息数据
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日'
})

// 海报列表数据
const posterList = ref([
  {
    id: 1,
    title: '起点签到',
    path: '',
    checkPointId: 1,
    backgroundImage: 'https://cdn.ipadbiz.cn/lls_prog/images/welcome_1.png'
  },
  {
    id: 2,
    title: '商圈探索',
    path: '',
    checkPointId: 2,
    backgroundImage: 'https://cdn.ipadbiz.cn/lls_prog/images/welcome_1.png'
  },
  {
    id: 3,
    title: '文化体验',
    path: '',
    checkPointId: 3,
    backgroundImage: 'https://cdn.ipadbiz.cn/lls_prog/images/welcome_1.png'
  }
])

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

// Mock数据
const mockData = ref({
  user: {
    avatar: 'https://cdn.ipadbiz.cn/icon/tou@2x.png',
    nickname: '张大爷'
  },
  family: {
    name: '幸福之家',
    description: '一家人整整齐齐最重要'
  },
  activity: {
    logo: 'https://cdn.ipadbiz.cn/lls_prog/images/activity-logo.png',
    name: '南京路时尚citywalk'
  },
  level: {
    logo: 'https://cdn.ipadbiz.cn/lls_prog/images/level-badge.png',
    name: '第一关卡'
  },
  qrcode: 'https://cdn.ipadbiz.cn/space/068a790496c87cb8d2ed6e551401c544.png',
  qrcodeDesc: '长按识别小程序码\n送我一朵小红花为我助力吧～'
})

// 默认背景图
const defaultBackground = 'https://cdn.ipadbiz.cn/lls_prog/images/welcome_1.png'

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

  return {
    width: 750,
    height: 1334,
    backgroundColor: '#f5f5f5',
    debug: false,
    images: [
      // 背景图
      {
        x: 0,
        y: 0,
        width: 750,
        height: 1100,
        url: bgImage,
        zIndex: 0
      },
      // 用户头像
      {
        x: 40,
        y: 40,
        width: 80,
        height: 80,
        url: mockData.value.user.avatar,
        borderRadius: 40,
        zIndex: 2
      },
      // 活动logo
      {
        x: 580,
        y: 40,
        width: 120,
        height: 80,
        url: mockData.value.activity.logo,
        zIndex: 2
      },
      // 关卡徽章
      {
        x: 80,
        y: 750,
        width: 240,
        height: 240,
        url: mockData.value.level.logo,
        zIndex: 2
      },
      // 小程序码
      {
        x: 50,
        y: 1100,
        width: 200,
        height: 200,
        url: mockData.value.qrcode,
        zIndex: 1
      }
    ],
    texts: [
      // 家庭名称
      {
        x: 140,
        y: 50,
        text: mockData.value.family.name,
        fontSize: 36,
        color: '#ffffff',
        fontWeight: 'bold',
        textAlign: 'left',
        zIndex: 2
      },
      // 家庭描述
      {
        x: 140,
        y: 100,
        text: mockData.value.family.description,
        fontSize: 26,
        color: '#ffffff',
        textAlign: 'left',
        zIndex: 2
      },
      // 小程序码描述
      {
        x: 280,
        y: 1150,
        text: mockData.value.qrcodeDesc,
        fontSize: 28,
        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: 30,
        width: 520,
        height: 120,
        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)

  // 页面加载时生成当前海报
  generateCurrentPoster()
})

/**
 * 监听背景图变化，重新生成海报
 */
watch(backgroundImage, () => {
  if (backgroundImage.value) {
    generateCurrentPoster()
  }
})

/**
 * 监听当前海报索引变化，切换海报
 */
watch(currentPosterIndex, () => {
  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&image_audit=1',
    filePath,
    name: 'file',
    success: (uploadRes) => {
      Taro.hideLoading()
      const data = JSON.parse(uploadRes.data)
      if (data.code === 0 && data.data) {
        backgroundImage.value = data.data.src
        Taro.showToast({ title: '上传成功', icon: 'success' })
      } else {
        // 检查是否为审核不通过
        if (data.code === 0 && !data.data && data.msg && data.msg.includes('审核不通过')) {
          Taro.showModal({
            title: '温馨提示',
            content: '您上传的内容未通过审核',
            showCancel: false
          }).then(res => {
            if (res.confirm) {
              // 点击了确认按钮
            }
          })
        } else {
          Taro.showToast({ title: data.msg || '上传失败', icon: 'none' })
        }
      }
    },
    fail: () => {
      Taro.hideLoading()
      Taro.showToast({ title: '上传失败，请稍后重试', icon: 'none' })
    }
  })
}

/**
 * 海报生成成功
 */
const onPosterSuccess = (result) => {
  posterPath.value = result.tempFilePath
  posterGenerateFailed.value = false
  // 更新当前海报的路径
  if (posterList.value[currentPosterIndex.value]) {
    posterList.value[currentPosterIndex.value].path = result.tempFilePath
  }
  shouldGeneratePoster.value = false
  Taro.showToast({ title: '海报生成成功', icon: 'success' })
}

/**
 * 海报生成失败
 */
const onPosterFail = (error) => {
  shouldGeneratePoster.value = false
  posterGenerateFailed.value = true
  posterPath.value = ''
  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' })
      }
    }
  })
}
</script>

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