<!--
 * @Date: 2025-12-23 13:44:58
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-01-26 09:51:02
 * @FilePath: /mlaj/src/views/recall/CompleteInfoPage.vue
 * @Description: 完善信息页面
-->
<template>
  <div class="complete-info-page w-full min-h-screen relative overflow-hidden flex flex-col items-center">
    <!-- Starry Background Effect -->
    <StarryBackground />

    <!-- Header Section -->
    <div class="mt-16 flex flex-col items-center z-10 w-full px-8 text-center">
      <h1 class="text-white text-3xl font-bold tracking-wider mb-3 drop-shadow-lg">完善信息</h1>
      <p class="text-white/80 text-sm tracking-wide font-medium">请确认和补全您的个人信息</p>
    </div>

    <!-- Form Card -->
    <div class="w-full px-6 m-10 z-10">
      <FrostedGlass class="p-6 !rounded-2xl !border-white/20 !shadow-none" :bg-opacity="10" blur-level="md">
        <div class="space-y-6">
          <!-- Name Input -->
          <div class="form-item">
            <label class="block text-white font-bold text-base mb-2 tracking-wide">姓名</label>
            <van-field
              v-model="form.name"
              placeholder="请输入姓名"
              class="custom-input rounded-lg !bg-white/10 !text-white !border-[1px] !border-solid !border-[rgba(255,255,255,0.57)] !p-3"
              :border="false"
            />
          </div>

          <!-- Phone Input -->
          <div class="form-item">
            <label class="block text-white font-bold text-base mb-2 tracking-wide">手机号</label>
            <van-field
              v-model="form.phone"
              placeholder="请输入手机号"
              class="custom-input rounded-lg !bg-white/10 !text-white !border-[1px] !border-solid !border-[rgba(255,255,255,0.57)] !p-3"
              :border="false"
              type="tel"
              maxlength="11"
            />
          </div>

          <!-- ID Card Input -->
          <div class="form-item">
            <label class="block text-white font-bold text-base mb-2 tracking-wide">身份证号</label>
            <van-field
              v-model="form.idCard"
              placeholder="请输入您的身份证号"
              class="custom-input rounded-lg !bg-white/10 !text-white !border-[1px] !border-solid !border-[rgba(255,255,255,0.57)] !p-3"
              :border="false"
            />
          </div>

          <!-- Note -->
          <div class="flex items-start gap-2 mt-2">
            <img :src="starImg" class="w-3 h-3 mt-0.5 shrink-0" alt="star" />
            <p class="text-xs text-white/90 leading-relaxed tracking-wide text-justify">
              时光机为每个身份证号找到的历史数据，只能参与一次（即一个账号的）星球币累积
            </p>
          </div>
        </div>
      </FrostedGlass>
    </div>

    <!-- Confirm Button -->
    <div class="w-full px-6 mt-auto z-10 mb-8">
      <van-button block
        class="submit-btn !rounded-lg !bg-transparent !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px]"
        @click="handleConfirm">
        确认
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTitle } from '@vueuse/core'
import { showToast } from 'vant'
import { updateUserInfoAPI } from '@/api/users'
import { searchOldActivityAPI, trackingAPI } from '@/api/recall_users'

const starImg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/xing@2x.png'

// Route
const route = useRoute()
const router = useRouter()
useTitle(route.meta.title || '完善信息')

// Form Data
const form = reactive({
  name: '',
  phone: '',
  idCard: ''
})

// Actions
const handleConfirm = async () => {
  if (!form.name) {
    showToast('请输入姓名')
    return
  }
  if (!form.phone) {
    showToast('请输入手机号')
    return
  }
  if (!form.idCard) {
    showToast('请输入身份证号')
    return
  }

  // TODO: 临时屏蔽
  // 身份证号正则校验 (15位或18位)
  // const idCardRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  // if (!idCardRegex.test(form.idCard)) {
  //   showToast('请输入正确的身份证号')
  //   return
  // }

  const res = await updateUserInfoAPI({
    name: form.name,
    // mobile: form.phone,
    idcard: form.idCard
  })
  if (res.code === 1) {
    // 埋点
    trackingAPI({
      event_type: 'edit_user'
    })
    const activityRes = await searchOldActivityAPI({
      name: form.name,
      mobile: form.phone,
      idcard: form.idCard
    })
    if (activityRes.code === 1) {
      // 更新司总缓存user_info键里面的user_name的值改成新的用户名
      localStorage.setItem('user_info', JSON.stringify({
        ...JSON.parse(localStorage.getItem('user_info') || '{}'),
        user_name: form.name
      }));
      // 获取历史列表数据
      const campaign_info = activityRes.data?.campaign_info || []
      if (campaign_info.length) {
        // 有历史数据, 保存用户信息到缓存
        localStorage.setItem('cached_user_info', JSON.stringify({
          name: form.name,
          phone: form.phone,
          idCard: form.idCard
        }));

        // 有历史数据, 跳转到timeline
        router.push('/recall/timeline')
        return
      } else {
        // 没有历史数据, 跳转到id-query, 继续查数据
        router.push('/recall/id-query')
        return
      }
    }
  }
}
</script>

<style lang="less" scoped>
.submit-btn {
  background: linear-gradient(180deg, rgba(249, 243, 157, 0.19) 0%, rgba(219, 243, 48, 0.3) 100%) !important;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);

  &:active {
    transform: scale(0.99);
  }
}

:deep(.van-field__control) {
  color: white !important;
  &::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
  }
}
</style>