<script setup>
import { computed, onUnmounted, ref } from 'vue'
import { useDialogStore } from '@/stores/dialogStore'

const router = useRouter()
const dialogStore = useDialogStore()
const agentStore = useAgentStore()
const userStore = useUserStore()
// 表单数据
const realName = ref('')
const idCard = ref('')
const phoneNumber = ref('')
const verificationCode = ref('')
const isAgreed = ref(false)

// 倒计时相关
const isCountingDown = ref(false)
const countdown = ref(60)
let timer = null
function showToast(options) {
  const message = typeof options === 'string' ? options : (options?.message || options?.title || '')
  if (!message)
    return
  uni.showToast({
    title: message,
    icon: options?.type === 'success' ? 'success' : 'none',
  })
}

// 表单验证
const isPhoneNumberValid = computed(() => {
  return /^1[3-9]\d{9}$/.test(phoneNumber.value)
})

const isIdCardValid = computed(() => {
  return /^(?:\d{15}|\d{17}[\dXx])$/.test(idCard.value)
})

const isRealNameValid = computed(() => {
  return /^[\u4E00-\u9FA5]{2,}$/.test(realName.value)
})

const canSubmit = computed(() => {
  return (
    isPhoneNumberValid.value
    && isIdCardValid.value
    && isRealNameValid.value
    && verificationCode.value.length === 6
    && isAgreed.value
  )
})

// 发送验证码
async function sendVerificationCode() {
  if (isCountingDown.value || !isPhoneNumberValid.value)
    return
  if (!isPhoneNumberValid.value) {
    showToast({ message: '请输入有效的手机号' })
    return
  }
  const { data, error } = await useApiFetch('auth/sendSms')
    .post({ mobile: phoneNumber.value, actionType: 'realName', captchaVerifyParam: '' })
    .json()
  if (!error.value && data.value?.code === 200) {
    showToast({ message: '获取成功' })
    startCountdown()
  }
  else {
    showToast(data.value?.msg || '发送失败')
  }
}

function startCountdown() {
  isCountingDown.value = true
  countdown.value = 60
  timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--
    }
    else {
      clearInterval(timer)
      isCountingDown.value = false
    }
  }, 1000)
}

// 提交实名认证
async function handleSubmit() {
  if (!isRealNameValid.value) {
    showToast({ message: '请输入有效的姓名' })
    return
  }
  if (!isIdCardValid.value) {
    showToast({ message: '请输入有效的身份证号' })
    return
  }
  if (!isPhoneNumberValid.value) {
    showToast({ message: '请输入有效的手机号' })
    return
  }
  if (verificationCode.value.length !== 6) {
    showToast({ message: '请输入有效的验证码' })
    return
  }
  if (!isAgreed.value) {
    showToast({ message: '请先同意用户协议' })
    return
  }

  const { data, error } = await useApiFetch('/agent/real_name')
    .post({
      name: realName.value,
      id_card: idCard.value,
      mobile: phoneNumber.value,
      code: verificationCode.value,
    })
    .json()

  if (data.value && !error.value) {
    if (data.value.code === 200) {
      showToast({ message: '认证成功' })
      agentStore.isRealName = true
      await agentStore.fetchAgentStatus()
      await userStore.fetchUserInfo()
      closeDialog()
    }
    else {
      showToast(data.value.msg)
    }
  }
}

function closeDialog() {
  dialogStore.closeRealNameAuth()
  realName.value = ''
  idCard.value = ''
  phoneNumber.value = ''
  verificationCode.value = ''
  isAgreed.value = false
  if (timer) {
    clearInterval(timer)
    timer = null
  }
  isCountingDown.value = false
}

function toUserAgreement() {
  closeDialog()
  router.push(`/userAgreement`)
}

function toPrivacyPolicy() {
  closeDialog()
  router.push(`/privacyPolicy`)
}

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<template>
  <view v-if="dialogStore.showRealNameAuth" class="real-name-auth-dialog-box">
    <wd-popup
      v-model="dialogStore.showRealNameAuth"
      round
      position="bottom"
      :style="{ maxHeight: '90vh' }"
      @close="closeDialog"
    >
      <view
        class="real-name-auth-dialog"
        style="background: linear-gradient(135deg, var(--van-theme-primary-light), rgba(255,255,255,0.9));"
      >
        <view class="title-bar">
          <view class="text-base font-bold sm:text-lg" style="color: var(--van-text-color);">
            实名认证
          </view>
          <wd-icon name="cross" class="close-icon" style="color: var(--van-text-color-2);" @click="closeDialog" />
        </view>
        <view class="dialog-content">
          <view class="dialog-inner px-4 pb-4 pt-2">
            <view
              class="auth-notice mb-4 rounded-xl p-3 sm:p-4"
              style="background-color: var(--van-theme-primary-light); border: 1px solid rgba(162, 37, 37, 0.2);"
            >
              <view class="text-xs space-y-1.5 sm:text-sm sm:space-y-2" style="color: var(--van-text-color);">
                <text class="font-medium" style="color: var(--van-theme-primary);">
                  实名认证说明：
                </text>
                <text>1. 实名认证是提现的必要条件</text>
                <text>2. 提现金额将转入您实名认证的银行卡账户</text>
                <text>3. 请确保填写的信息真实有效，否则将影响提现功能的使用</text>
                <text>4. 认证信息提交后将无法修改，请仔细核对</text>
              </view>
            </view>

            <view class="real-name-form">
              <view class="form-item">
                <text class="form-label">
                  姓名
                </text>
                <wd-input
                  v-model="realName"
                  class="field-wd-input"
                  type="text"
                  placeholder="请输入真实姓名"
                  no-border
                  clearable
                />
              </view>

              <view class="form-item">
                <text class="form-label">
                  身份证
                </text>
                <wd-input
                  v-model="idCard"
                  class="field-wd-input"
                  type="text"
                  placeholder="请输入身份证号"
                  maxlength="18"
                  no-border
                  clearable
                />
              </view>

              <view class="form-item">
                <text class="form-label">
                  手机号
                </text>
                <wd-input
                  v-model="phoneNumber"
                  class="field-wd-input"
                  type="number"
                  placeholder="请输入手机号"
                  maxlength="11"
                  no-border
                  clearable
                />
              </view>

              <view class="form-item">
                <text class="form-label">
                  验证码
                </text>
                <view class="verification-input-wrapper">
                  <wd-input
                    v-model="verificationCode"
                    class="verification-wd-input"
                    placeholder="请输入验证码"
                    maxlength="6"
                    no-border
                    clearable
                  >
                    <template #suffix>
                      <wd-button
                        size="small"
                        type="primary"
                        plain
                        :disabled="isCountingDown || !isPhoneNumberValid"
                        @click="sendVerificationCode"
                      >
                        {{ isCountingDown ? `${countdown}s` : '获取验证码' }}
                      </wd-button>
                    </template>
                  </wd-input>
                </view>
              </view>

              <view class="agreement-wrapper">
                <wd-checkbox v-model="isAgreed" shape="square" size="18px" />
                <text class="agreement-text">
                  我已阅读并同意
                  <text class="agreement-link" @click="toUserAgreement">
                    《用户协议》
                  </text>
                  和
                  <text class="agreement-link" @click="toPrivacyPolicy">
                    《隐私政策》
                  </text>
                  ，并确认以上信息真实有效，将用于提现等资金操作
                </text>
              </view>

              <wd-button
                class="submit-wd-btn"
                block
                type="primary"
                :disabled="!canSubmit"
                @click="handleSubmit"
              >
                确认认证
              </wd-button>
            </view>
          </view>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<style scoped>
.real-name-auth-dialog {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.dialog-content {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--van-border-color);
  flex-shrink: 0;
}

.close-icon {
  font-size: 18px;
  cursor: pointer;
}

@media (min-width: 640px) {
  .close-icon {
    font-size: 20px;
  }
}

/* 与登录页 login.vue 表单卡片一致 */
.real-name-form {
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 28px rgba(63, 63, 63, 0.08);
  padding: 1.25rem 1rem 1.5rem;
  backdrop-filter: blur(4px);
}

.form-item {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  border-radius: 12px;
  background-color: #fff;
  padding: 0 0.75rem;
  min-height: 48px;
}

.form-label {
  font-size: 0.9375rem;
  color: #111827;
  margin-right: 0.75rem;
  font-weight: 500;
  min-width: 3.25rem;
  flex-shrink: 0;
}

.field-wd-input {
  flex: 1;
}

.verification-input-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.verification-wd-input {
  width: 100%;
}

.agreement-wrapper {
  display: flex;
  align-items: flex-start;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.agreement-text {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.5;
  margin-left: 0.5rem;
  flex: 1;
}

.agreement-link {
  color: #2563eb;
  cursor: pointer;
}

.submit-wd-btn {
  margin-top: 0.25rem;
}

.real-name-auth-dialog-box {
  position: relative;
}
</style>
