<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" />

    <!-- <div class="mt-5 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> -->

    <!-- Main Content Card -->
    <div class="w-full px-6 mt-5 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">
          <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">
          <!-- Name Input -->
          <div>
            <label class="block text-white font-bold text-lg tracking-wide mb-2">姓名</label>
            <van-field
              v-model="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"
              clearable
            />
          </div>

          <!-- Phone Input -->
          <div>
            <label class="block text-white font-bold text-lg tracking-wide mb-2">手机号</label>
            <van-field
              v-model="phone"
              type="tel"
              maxlength="11"
              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
            />
          </div>

          <!-- ID Card Input -->
          <div>
            <label class="block text-white font-bold text-lg tracking-wide mb-2">身份证号</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
            />
          </div>

          <!-- 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 name = ref('')
const phone = ref('')
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 (!name.value) {
    showToast('请输入姓名')
    return
  }

  if (!phone.value) {
    showToast('请输入手机号')
    return
  }

  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    showToast('请输入正确的手机号')
    return
  }

  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>