<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n'; // 添加这行
import { useRouterPush } from '@/hooks/common/router';
import { useAntdForm, useFormRules } from '@/hooks/common/form';
import { useCaptcha } from '@/hooks/business/captcha';
import { useWindowSize } from '@vueuse/core';
import { registerTerms } from '@/views/_builtin/login/modules/terms';

defineOptions({
  name: 'Register'
});

const { t } = useI18n();
const { toggleLoginModule } = useRouterPush();
const { formRef, validate } = useAntdForm();
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;
  age: number | undefined;
  gender: string;
  phone: string;
  email: string;
  address: string;
}

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

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

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

// 第一步表单验证规则
const basicRules = computed(() => {
  const { formRules } = useFormRules();
  return {
    username: formRules.username,
    phone: formRules.phone,
    email: formRules.email
  };
});

// 第三步表单验证规则
const securityRules = computed(() => {
  const { formRules, createConfirmPwdRule } = useFormRules();
  return {
    phone: formRules.phone,
    code: formRules.code,
    password: formRules.pwd,
    confirmPassword: createConfirmPwdRule(securityModel.password)
  };
});

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

// 步骤控制函数
async function nextStep() {
  if (currentStep.value === 0) {
    await validate();
    // 复制邮箱到第三步
    securityModel.email = basicModel.email;
  }
  if (currentStep.value === 1) {
    if (!agreeTerms.value) {
      window.$message?.error(t('page.login.register.agreeTermsFirst'));
      return;
    }
  }
  currentStep.value += 1;
}

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

async function handleSubmit() {
  await validate();
  // request to register
  $message?.success(t('page.login.common.validateSuccess'));
}

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

<template>
  <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-if="currentStep === 0">
      <AForm
        ref="formRef"
        :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="age" :label="t('page.login.register.age')">
              <AInputNumber v-model:value="basicModel.age" class="!w-full" />
            </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="male">{{ t('page.login.register.male') }}</ASelectOption>
                <ASelectOption value="female">{{ 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" />
            </AFormItem>
          </ACol>
          <ACol :lg="24" :span="24">
            <AFormItem name="email" :label="t('page.login.register.email')">
              <AInput v-model:value="basicModel.email" />
            </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-if="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-if="currentStep === 2">
      <AForm
        ref="formRef"
        :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="getCaptcha(securityModel.email)"
            >
              {{ 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>
</template>

<style scoped>
@media (max-width: 640px) {

  .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;
  }
}
</style>
