<template>
  <view class="poster-checkin-page bg-gray-50 min-h-screen pb-20">
    <!-- 海报预览区域 -->
    <view class="mx-4 mt-4 bg-white rounded-lg shadow-sm overflow-hidden">
      <view class="aspect-[3/4] relative bg-gray-100 flex items-center justify-center">
        <view v-if="posterPath" class="w-full h-full relative">
          <image
            :src="posterPath"
            mode="aspectFit"
            class="w-full h-full"
            @click="previewPoster"
          />
          <!-- 点击预览提示 -->
          <view class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">
            点击预览
          </view>
        </view>
        <view v-else class="text-center text-gray-500">
          <view class="text-4xl mb-2">🎨</view>
          <text class="text-sm">海报生成中...</text>
          <view class="mt-2">
            <view class="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 safe-area-bottom">
      <view class="flex gap-4">
        <button
          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 class="text-lg">📷</text>
          <text>{{ backgroundImage ? '更改照片' : '上传照片' }}</text>
        </button>
        <button
          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' : 'bg-gray-400'"
          @click="savePoster"
          :disabled="!posterPath"
        >
          <text class="text-lg">💾</text>
          <text>保存海报</text>
        </button>
      </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 } 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 previewVisible = ref(false)
const previewImages = ref([])

// 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 bgImage = backgroundImage.value || defaultBackground

  return {
    width: 750,
    height: 1334,
    backgroundColor: '#f5f5f5',
    debug: false,
    images: [
      // 背景图
      {
        x: 0,
        y: 0,
        width: 750,
        height: 800,
        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: 580,
        y: 680,
        width: 120,
        height: 80,
        url: mockData.value.level.logo,
        zIndex: 2
      },
      // 小程序码
      {
        x: 50,
        y: 850,
        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: 900,
        text: mockData.value.qrcodeDesc,
        fontSize: 28,
        color: '#333333',
        lineHeight: 40,
        lineNum: 2,
        width: 400,
        textAlign: 'left',
        zIndex: 1
      }
    ],
    blocks: [
      // 下半部分白色背景
      {
        x: 0,
        y: 800,
        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: '海报打卡' })
  // 页面加载时生成海报
  generatePoster()
})

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

/**
 * 返回上一页
 */
const goBack = () => {
  Taro.navigateBack()
}

/**
 * 生成海报
 */
const generatePoster = () => {
  posterPath.value = ''
  shouldGeneratePoster.value = false

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

/**
 * 选择背景图片
 */
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) {
        backgroundImage.value = data.data.src
        Taro.showToast({ title: '上传成功', icon: 'success' })
      } else {
        Taro.showToast({ title: data.msg || '上传失败', icon: 'none' })
      }
    },
    fail: () => {
      Taro.hideLoading()
      Taro.showToast({ title: '上传失败，请稍后重试', icon: 'none' })
    }
  })
}

/**
 * 海报生成成功
 */
const onPosterSuccess = (result) => {
  posterPath.value = result.tempFilePath
  shouldGeneratePoster.value = false
  Taro.showToast({ title: '海报生成成功', icon: 'success' })
}

/**
 * 海报生成失败
 */
const onPosterFail = (error) => {
  shouldGeneratePoster.value = false
  Taro.showToast({ title: '海报生成失败', icon: 'none' })
  console.error('海报生成失败:', error)
}

/**
 * 预览海报
 */
const previewPoster = () => {
  if (!posterPath.value) return

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

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

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

  Taro.saveImageToPhotosAlbum({
    filePath: posterPath.value,
    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" scoped>
.poster-checkin-page {
  .aspect-\[3\/4\] {
    aspect-ratio: 3/4;
  }
}
</style>