<template>
  <div class="id-query-page w-full min-h-screen relative overflow-hidden flex flex-col items-center">
    <!-- Starry Background -->
    <StarryBackground :bg-image="bgImg" />

    <!-- Main Content Card -->
    <div class="w-full px-6 mt-10 z-10">
      <FrostedGlass class="p-6 !rounded-2xl !border-white/20 !shadow-none" :bg-opacity="10" blur-level="md">
        <!-- Illustration -->
        <div class="flex justify-center mb-2">
          <!-- Placeholder for the illustration -->
          <img :src="emptyStateImg" class="w-32 h-32 object-contain" alt="No Data" />
        </div>

        <!-- Description Text -->
        <p class="text-[#FFDD01] text-center text-sm mb-6 leading-relaxed tracking-wide">
          时光机没有找到您的历史活动信息，<br />
          试试输入活动报名时登记的身份证号吧~
        </p>

        <!-- Dashed Separator -->
        <div class="w-full h-[1px] border-t border-dashed border-white/30 my-8"></div>

        <!-- ID Card Input Section -->
        <div class="space-y-4">
          <label class="block text-white font-bold text-lg tracking-wide">身份证号</label>
          <van-field
            v-model="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"
            clearable
          />

          <!-- Notes -->
          <div class="space-y-4" style="margin-top: 2rem;">
            <!-- Note 1 -->
            <div class="flex items-start gap-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>
            <!-- Note 2 -->
            <div class="flex items-start gap-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>
        </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 } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTitle } from '@vueuse/core'
import { showToast } from 'vant'

// Assets
const bgImg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/bg01@2x.png'
const starImg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/xing@2x.png'
const emptyStateImg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/no@2x.png'

const route = useRoute()
const router = useRouter()
useTitle('身份证号查询')

const idCard = ref('44030619900101001X')

// ID Card Validation
const validateIdCard = (id) => {
  // 15 or 18 digit validation
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  return reg.test(id)
}

const handleConfirm = () => {
  if (!idCard.value) {
    showToast('请输入身份证号')
    return
  }

  if (!validateIdCard(idCard.value)) {
    showToast('请输入正确的身份证号')
    return
  }

  // TODO: Submit logic
  // showToast('验证通过')
  // TODO: 如果能查到数据, 则跳转到timeline, 否则弹出提示
  const flag = true;
  if (flag) {
    router.push('/recall/timeline')
    return
  }
  showToast('时光机没有找到您的历史活动信息')
}
</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);
  }
}

.custom-input {
  ::v-deep(.van-field__control) {
    color: #fff;
    &::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }
  }
}
</style>