<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useAuthStore } from '@/store/modules/auth';
import { useRouterPush } from '@/hooks/common/router';
import { useFormRules } from '@/hooks/common/form';
import { useCaptcha } from '@/hooks/business/captcha';
import { useWindowSize } from '@vueuse/core';
import { registerTerms } from '@/views/_builtin/login/modules/terms';
import dayjs from 'dayjs';
import type { Rule } from 'ant-design-vue/es/form';

const { t } = useI18n();
const authStore = useAuthStore();
// 添加两个表单引用
const basicFormRef = ref();
const securityFormRef = ref();

defineOptions({
  name: 'Register'
});

const { toggleLoginModule } = useRouterPush();
const { label, isCounting, loading, getCaptcha } = useCaptcha();

const { width } = useWindowSize();
const isMobile = computed(() => width.value <= 640);

// 当前步骤
const currentStep = ref(0);

// 是否同意协议
const agreeTerms = ref(false);

// 第一步表单数据
interface BasicFormModel {
  username: string;
  fullName: string;
  birthDate: string;
  gender: string;
  phone: string;
  address: string;
}

const basicModel = reactive<BasicFormModel>({
  username: '',
  fullName: '',
  birthDate: '',
  gender: '',
  phone: '',
  address: ''
});

// 第三表单数据
interface SecurityFormModel {
  email: string;
  code: string;
  uuid: string;
  password: string;
  confirmPassword: string;
}

const securityModel = reactive<SecurityFormModel>({
  email: '',
  code: '',
  uuid: '',
  password: '',
  confirmPassword: ''
});

// 第一步表单验证规则
const basicRules = computed<Record<string, Rule | Rule[]>>(() => {
  const validateUsername = async (_rule: Rule, value: string) => {
    // 空值检查
    if (!value) {
      return Promise.reject(t('page.login.register.usernameRequired'));
    }

    // 长度检查 (3-20字符)
    if (value.length < 3 || value.length > 20) {
      return Promise.reject(t('page.login.register.usernameLengthLimit'));
    }

    // 格式检查 (只允许字母、数字、下划线)
    const usernamePattern = /^[a-zA-Z0-9_]+$/;
    if (!usernamePattern.test(value)) {
      return Promise.reject(t('page.login.register.usernameFormatError'));
    }

    // 首字符必须是字母
    if (!/^[a-zA-Z]/.test(value)) {
      return Promise.reject(t('page.login.register.usernameStartWithLetter'));
    }

    // 重复性检查
    try {
      const { exists } = await authStore.checkUserRepeat({ username: value, authType: 'u' });
      if (exists) {
        return Promise.reject(t('page.login.register.usernameExists'));
      }
    } catch (error) {
      console.error('Username validation error:', error);
      return Promise.reject(t('page.login.register.validationError'));
    }

    return Promise.resolve();
  };

  const validatePhone = async (_rule: Rule, value: string) => {
    if (!value) {
      return Promise.resolve();
    }

    // 去除所有空格后再验证
    const trimmedValue = value.replace(/\s/g, '');
    if (!trimmedValue) {
      return Promise.resolve();
    }

    // 基本格式验证 - 至少3个字符
    const phonePattern = /^.{3,}$/;
    if (!phonePattern.test(trimmedValue)) {
      return Promise.reject(t('page.login.register.phoneInvalid'));
    }

    // 手机号重复性验证 - 使用去除空格后的值
    try {
      const { exists } = await authStore.checkUserRepeat({ phonenumber: trimmedValue, authType: 'u' });
      if (exists) {
        return Promise.reject(t('page.login.register.phoneExists'));
      }
      return Promise.resolve();
    } catch (error) {
      console.error('Phone validation error:', error);
      return Promise.reject(t('page.login.register.validationError'));
    }
  };

  return {
    username: [
      { required: true, message: t('page.login.register.usernameRequired'), trigger: 'change' },
      { validator: validateUsername, trigger: 'blur' }
    ],
    phone: [
      { validator: validatePhone, trigger: 'blur' }
    ],
    birthDate: [{ required: true, message: t('page.login.register.birthDateRequired') }],
    fullName: []
  };
});

// 第三步表单验证规则
const securityRules = computed<Record<string, Rule | Rule[]>>(() => {
  const { createConfirmPwdRule } = useFormRules();

  const validateEmail = async (_rule: Rule, value: string) => {
    if (!value) {
      return Promise.reject(t('page.login.register.emailRequired'));
    }

    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

    if (!emailPattern.test(value)) {
      return Promise.reject(t('page.login.register.emailInvalid'));
    }

    const { exists } = await authStore.checkUserRepeat({ email: value, authType: 'u' });
    if (exists) {
      return Promise.reject(t('page.login.register.emailExists'));
    }
    return Promise.resolve();
  };

  return {
    email: [
      { required: true, message: t('page.login.register.emailRequired'), trigger: 'change' },
      { validator: validateEmail, trigger: 'blur' }
    ],
    code: [{ required: true, message: t('page.login.register.codeRequired') }],
    password: [
      { required: true, message: t('page.login.register.passwordRequired') },
      { min: 6, message: t('page.login.register.passwordLength') }
    ],
    confirmPassword: createConfirmPwdRule(securityModel.password)
  };
});

// 协议内容
const terms = computed(() => {
  const locale = useI18n().locale.value;
  return registerTerms[locale === 'zh-CN' ? 'zh-CN' : 'en-US'];
});

// 步骤控制函数
async function nextStep() {
  try {
    if (currentStep.value === 0) {
      // 验证第一步表单
      await basicFormRef.value?.validate();
    }
    if (currentStep.value === 1) {
      if (!agreeTerms.value) {
        window.$message?.error(t('page.login.register.agreeTermsFirst'));
        return;
      }
    }
    // 验证通过后增加步骤
    currentStep.value += 1;
  } catch (error) {
    // 验证失败时不增加步骤
    console.error('Validation failed:', error);
  }
}

// 返回
function prevStep() {
  currentStep.value -= 1;
}

async function handleCaptcha() {
  const res = await getCaptcha(securityModel.email);
  if (res) {
    securityModel.uuid = res.data.uuid;
    if (res.data?.text) {
      securityModel.code = res.data.text;
    }
  }
}

// 注册按钮
async function handleSubmit() {
  try {
    await securityFormRef.value?.validate();

    // 整合表单数据
    const baseData = {
      username: basicModel.username,
      password: securityModel.password,
      email: securityModel.email,
      fullName: basicModel.fullName,
      gender: basicModel.gender,
      address: basicModel.address,
      code: securityModel.code,
      uuid: securityModel.uuid,
      age: dayjs().diff(dayjs(basicModel.birthDate), 'year'),
      sex: basicModel.gender,
      authType: 'u'
    };

    // 创建最终的提交数据，只在有手机号时添加
    const submitData = {
      ...baseData,
      ...(basicModel.phone ? { phonenumber: basicModel.phone } : {})
    };

    const success = await authStore.register(submitData);

    if (success) {
      window.$message?.success(t('page.login.register.registerSuccess'));
      toggleLoginModule('pwd-login');
    }
  } catch (error) {
    console.error('Form validation failed:', error);
  }
}

// 处理手机号输入
const handlePhoneInput = (e: Event) => {
  const input = e.target as HTMLInputElement;
  let value = input.value;

  // 去除所有空格
  value = value.replace(/\s/g, '');

  // 处理加号：只保留第一个加号，去除其他加号
  if (value.includes('+')) {
    const parts = value.split('+');
    value = '+' + parts.slice(1).join('').replace(/\+/g, '');
  }

  // 去除非数字和加号以外的字符
  value = value.replace(/[^\d+]/g, '');

  // 如果只有加号，清空值
  if (value === '+') {
    value = '';
  }

  // 限制长度
  if (value.length > 20) {
    value = value.slice(0, 20);
  }

  // 格式化手机号
  if (value.startsWith('+')) {
    // 如果以+开头
    if (value.startsWith('+86')) {
      // 中国区号格式：+86 185 1234 5678
      const restNumber = value.slice(3); // 去掉+86
      if (restNumber) {
        value = `+86 ${restNumber.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3')}`;
      }
    } else {
      // 其他国际号码格式：+xx xxxx xxxx xxxx
      const countryCode = value.match(/^\+\d{1,3}/)?.[0] || '';
      const restNumber = value.slice(countryCode.length);
      const formattedRest = restNumber.replace(/(\d{4})/g, '$1 ').trim();
      value = countryCode ? `${countryCode} ${formattedRest}` : formattedRest;
    }
  } else if (value.startsWith('1') && value.length <= 11) {
    // 如果是国内手机号（以1开头且长度不超过11位）：185 1234 5678
    value = value.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
  } else {
    // 其他情况（可能是直接输入的国外号码）：xxxx xxxx xxxx
    value = value.replace(/(\d{4})/g, '$1 ').trim();
  }

  basicModel.phone = value;
};

// 在script setup部分添加一个新的计算属性
const showSteps = computed(() => !isMobile.value);
</script>

<template>
  <div class="register-container">
    <ASteps
      v-if="showSteps"
      :current="currentStep"
      size="small"
      class="max-w-full mb-16px"
      direction="horizontal"
      :responsive="false"
    >
      <AStep :title="t('page.login.register.basicInfo')" />
      <AStep :title="t('page.login.register.terms')" />
      <AStep :title="t('page.login.register.security')" />
    </ASteps>

    <div v-else class="mobile-step-indicator mb-16px text-center">
      {{ currentStep + 1 }}/3: {{
        currentStep === 0
          ? t('page.login.register.basicInfo')
          : currentStep === 1
            ? t('page.login.register.terms')
            : t('page.login.register.security')
      }}
    </div>

    <div class="step-content">
      <!-- 第一步：基本信息 -->
      <div v-show="currentStep === 0">
        <AForm
          ref="basicFormRef"
          :model="basicModel"
          :rules="basicRules"
          :label-wrap="true"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
        >
          <ARow :gutter="[8,2]">
            <ACol :span="24" :lg="24">
              <AFormItem name="username" :label="t('page.login.register.username')">
                <AInput v-model:value="basicModel.username" />
              </AFormItem>
            </ACol>
            <ACol :span="24" :lg="24">
              <AFormItem name="fullName" :label="t('page.login.register.fullName')">
                <AInput v-model:value="basicModel.fullName" />
              </AFormItem>
            </ACol>
            <ACol :xs="12" :sm="12" :lg="24">
              <AFormItem name="birthDate" :label="t('page.login.register.birthDate')">
                <ADatePicker
                  v-model:value="basicModel.birthDate"
                  class="!w-full birth-date-picker"
                  :placeholder="t('page.login.register.birthDatePlaceholder')"
                  :disabled-date="(current: dayjs.Dayjs) => current && current.isAfter(dayjs())"
                />
              </AFormItem>
            </ACol>
            <ACol :xs="12" :sm="12" :lg="24">
              <AFormItem name="gender" :label="t('page.login.register.gender')">
                <ASelect v-model:value="basicModel.gender">
                  <ASelectOption value="0">{{ t('page.login.register.male') }}</ASelectOption>
                  <ASelectOption value="1">{{ t('page.login.register.female') }}</ASelectOption>
                </ASelect>
              </AFormItem>
            </ACol>
            <ACol :lg="24" :span="24">
              <AFormItem name="phone" :label="t('page.login.register.phone')">
                <AInput
                  v-model:value="basicModel.phone"
                  :placeholder="t('page.login.common.phonePlaceholder')"
                  @input="handlePhoneInput"
                  :maxLength="20"
                  allow-clear
                />
              </AFormItem>
            </ACol>
            <ACol :lg="24" :span="24">
              <AFormItem name="address" :label="t('page.login.register.address')">
                <ATextarea v-model:value="basicModel.address" :rows="2" />
              </AFormItem>
            </ACol>
            <ACol :lg="24" :span="24">
              <ASpace direction="vertical" size="small" class="w-full">
                <AButton type="primary" block size="small" @click="nextStep">
                  {{ t('page.login.register.next') }}
                </AButton>
                <AButton block size="small" @click="toggleLoginModule('pwd-login')">
                  {{ t('page.login.common.back') }}
                </AButton>
              </ASpace>
            </ACol>
          </ARow>
        </AForm>
      </div>

      <!-- 第二步：协议 -->
      <div v-show="currentStep === 1">
        <ATextarea
          :value="terms"
          :rows="12"
          readonly
          class="mb-16px"
          size="small"
          :style="{ fontSize: '14px', lineHeight: '1.6' }"
        />
        <div class="mb-16px">
          <ACheckbox
            v-model:checked="agreeTerms"
            class="terms-checkbox"
          >
            {{ t('page.login.register.agreeTerms') }}
          </ACheckbox>
        </div>
        <ASpace direction="vertical" size="small" class="w-full">
          <AButton type="primary" block size="small" :disabled="!agreeTerms" @click="nextStep">
            {{ t('page.login.register.next') }}
          </AButton>
          <AButton block size="small" @click="prevStep">
            {{ t('page.login.register.prev') }}
          </AButton>
        </ASpace>
      </div>

      <!-- 第三步：安全信息 -->
      <div v-show="currentStep === 2">
        <AForm
          ref="securityFormRef"
          :model="securityModel"
          :rules="securityRules"
          :label-wrap="true"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          class="compact-form"
        >
          <AFormItem name="email" :label="t('page.login.register.email')">
            <AInput
              v-model:value="securityModel.email"
              :placeholder="t('page.login.common.emailPlaceholder')"
            />
          </AFormItem>
          <AFormItem name="code" :label="t('page.login.register.code')">
            <div class="w-full flex-y-center gap-8px">
              <AInput
                v-model:value="securityModel.code"
                :placeholder="t('page.login.common.codePlaceholder')"
              />
              <AButton
                size="small"
                :disabled="isCounting"
                :loading="loading"
                @click="handleCaptcha()"
              >
                {{ label }}
              </AButton>
            </div>
          </AFormItem>
          <AFormItem name="password" :label="t('page.login.register.password')">
            <AInputPassword
              v-model:value="securityModel.password"
              :placeholder="t('page.login.common.passwordPlaceholder')"
            />
          </AFormItem>
          <AFormItem name="confirmPassword" :label="t('page.login.register.confirmPassword')">
            <AInputPassword
              v-model:value="securityModel.confirmPassword"
              :placeholder="t('page.login.common.confirmPasswordPlaceholder')"
            />
          </AFormItem>
          <AFormItem :wrapper-col="{ xs: { span: 24 }, sm: { span: 24 } }">
            <ASpace direction="vertical" size="small" class="w-full">
              <AButton type="primary" block size="small" @click="handleSubmit">
                {{ t('common.confirm') }}
              </AButton>
              <AButton block size="small" @click="prevStep">
                {{ t('page.login.register.prev') }}
              </AButton>
            </ASpace>
          </AFormItem>
        </AForm>
      </div>
    </div>
  </div>
</template>

<style scoped>
.register-container {
  width: 100%;
}

.step-content {
  position: relative;
}

.step-form {
  width: 100%;
}

@media (max-width: 640px) {
  :deep(.ant-form) {
    .ant-form-item {
      margin-bottom: 4px !important;
    }

    .ant-form-item-label {
      padding: 0 !important;
      line-height: 28px !important;

      > label {
        font-size: 13px !important;
        height: 28px !important;
        padding-bottom: 0 !important;
      }
    }

    .ant-input,
    .ant-input-password,
    .ant-select,
    .ant-input-number,
    .ant-btn {
      font-size: 13px !important;
      height: 28px !important;
      line-height: 28px !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    .ant-select-selector {
      height: 28px !important;
      padding: 0 8px !important;

      .ant-select-selection-item {
        line-height: 26px !important;
      }
    }

    .ant-input-number {
      height: 32px !important;

      input {
        height: 30px !important;
        padding: 0 8px !important;
      }
    }
  }

  .mobile-step-indicator {
    font-size: 13px;
    padding: 4px 8px;
    margin-bottom: 8px;
    text-align: center;
    width: 100%;
    border-radius: 4px;
  }

  :deep(.ant-space) {
    gap: 4px !important;
  }
}

:deep(.terms-checkbox) {
  .ant-checkbox + span {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
  }
}

:deep(.ant-input[readonly]) {
  background-color: #f5f5f5;
  cursor: default;
}

:deep(.ant-form-item-label) {
  white-space: normal;
  text-align: left;

  > label {
    height: auto !important;
    padding-bottom: 4px;
  }
}

.birth-date-picker {
  margin-top: 2px !important;
}

.phone-input {
  width: 100%;
}
</style>
