<template>
  <view class="verify-page">
    <!-- 头部说明 -->
    <view class="header-section">
      <view class="icon-wrapper">
        <u-icon name="shield-checkmark" :size="80" color="#667eea" />
      </view>
      <text class="header-title">实名认证</text>
      <text class="header-desc">为了保障您的账户安全，请完成实名认证</text>
    </view>

    <!-- 认证状态显示 -->
    <view v-if="verifyStatus.isVerified" class="verified-card">
      <view class="verified-icon">
        <u-icon name="checkmark-circle-fill" :size="60" color="#52c41a" />
      </view>
      <text class="verified-title">已完成实名认证</text>
      <view class="verified-info">
        <text class="verified-name">{{ maskName(verifyStatus.realName) }}</text>
        <text class="verified-time">认证时间：{{ formatDate(verifyStatus.verifiedAt) }}</text>
      </view>
    </view>

    <!-- 认证表单 -->
    <view v-else class="form-section">
      <view class="form-card">
        <view class="form-item">
          <view class="form-label-row">
            <text class="form-label">真实姓名</text>
            <text class="form-required">*</text>
          </view>
          <input
            class="form-input"
            v-model="formData.realName"
            placeholder="请输入真实姓名"
            placeholder-class="input-placeholder"
            maxlength="50"
          />
        </view>

        <view class="form-item">
          <view class="form-label-row">
            <text class="form-label">身份证号</text>
            <text class="form-required">*</text>
          </view>
          <input
            class="form-input"
            v-model="formData.idCard"
            placeholder="请输入身份证号"
            placeholder-class="input-placeholder"
            maxlength="18"
          />
        </view>
      </view>

      <!-- 提示信息 -->
      <view class="tips-card">
        <view class="tips-header">
          <u-icon name="info-circle-fill" :size="20" color="#1890ff" />
          <text class="tips-title">温馨提示</text>
        </view>
        <view class="tips-content">
          <text class="tips-item">• 请确保填写的信息真实有效</text>
          <text class="tips-item">• 实名信息仅用于身份验证，我们会严格保护您的隐私</text>
          <text class="tips-item">• 完成实名认证后，部分功能将更加便捷</text>
          <text class="tips-item">• 实名认证后无法修改，请仔细核对</text>
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="submit-btn" @tap="handleSubmit" :class="{ disabled: submitting }">
        <text class="submit-text">{{ submitting ? '认证中...' : '提交认证' }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { verifyIdentity, getVerifyStatus } from '@/api/user/auth';

const verifyStatus = ref<any>({
  isVerified: false,
  realName: '',
  verifiedAt: null,
});

const formData = ref({
  realName: '',
  idCard: '',
});

const submitting = ref(false);

onMounted(() => {
  fetchVerifyStatus();
});

async function fetchVerifyStatus() {
  try {
    const res = await getVerifyStatus();
    verifyStatus.value = res.data || {};
  } catch (e: any) {
    console.error(e);
  }
}

async function handleSubmit() {
  if (submitting.value) return;

  if (!formData.value.realName) {
    uni.showToast({ title: '请输入真实姓名', icon: 'none' });
    return;
  }

  if (!formData.value.idCard) {
    uni.showToast({ title: '请输入身份证号', icon: 'none' });
    return;
  }

  // 身份证号格式验证
  const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
  if (!idCardRegex.test(formData.value.idCard)) {
    uni.showToast({ title: '身份证号格式不正确', icon: 'none' });
    return;
  }

  submitting.value = true;

  try {
    await verifyIdentity({
      realName: formData.value.realName,
      idCard: formData.value.idCard,
    });

    uni.showToast({ title: '实名认证成功', icon: 'success' });

    // 刷新认证状态
    setTimeout(() => {
      fetchVerifyStatus();
    }, 1000);
  } catch (e: any) {
    uni.showToast({ title: e.message || '认证失败', icon: 'none' });
  } finally {
    submitting.value = false;
  }
}

function maskName(name: string) {
  if (!name || name.length < 2) return name;
  return name[0] + '*'.repeat(name.length - 1);
}

function formatDate(date: string | null) {
  if (!date) return '';
  const d = new Date(date);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/common.scss';

.verify-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  padding: 24rpx;
}

// 头部说明
.header-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 24rpx 40rpx;
}

.icon-wrapper {
  width: 160rpx;
  height: 160rpx;
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.2);
}

.header-title {
  font-size: 40rpx;
  font-weight: 700;
  color: $text-primary;
  margin-bottom: 16rpx;
}

.header-desc {
  font-size: 26rpx;
  color: $text-secondary;
  text-align: center;
  line-height: 1.6;
}

// 已认证卡片
.verified-card {
  background: linear-gradient(135deg, #f6ffed 0%, #e6fffb 100%);
  border-radius: 24rpx;
  padding: 48rpx 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2rpx solid #b7eb8f;
  margin-bottom: 24rpx;
}

.verified-icon {
  margin-bottom: 24rpx;
}

.verified-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #52c41a;
  margin-bottom: 24rpx;
}

.verified-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}

.verified-name {
  font-size: 28rpx;
  color: $text-primary;
  font-weight: 600;
}

.verified-time {
  font-size: 24rpx;
  color: $text-tertiary;
}

// 表单区域
.form-section {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.form-card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
}

.form-item {
  margin-bottom: 32rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.form-label-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.form-label {
  font-size: 28rpx;
  font-weight: 600;
  color: $text-primary;
}

.form-required {
  font-size: 28rpx;
  color: #ff4d4f;
  margin-left: 4rpx;
}

.form-input {
  height: 88rpx;
  background: #f8f9fa;
  border: 2rpx solid #e8e8e8;
  border-radius: 16rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: $text-primary;
  transition: all 0.3s ease;

  &:focus {
    background: #ffffff;
    border-color: $primary-color;
    box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
  }
}

.input-placeholder {
  color: #bfbfbf;
}

// 提示卡片
.tips-card {
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
  border-radius: 20rpx;
  padding: 24rpx;
  border-left: 6rpx solid #1890ff;
}

.tips-header {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 16rpx;
}

.tips-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #1890ff;
}

.tips-content {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.tips-item {
  font-size: 24rpx;
  color: #595959;
  line-height: 1.6;
}

// 提交按钮
.submit-btn {
  background: linear-gradient(135deg, $primary-color 0%, #ff6b9d 100%);
  border-radius: 48rpx;
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
  }

  &.disabled {
    opacity: 0.6;
    transform: none;
  }
}

.submit-text {
  font-size: 32rpx;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2rpx;
}
</style>
