<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useAuthStore } from '@/stores/auth'
import { useToast } from '@/composables/useToast'
import { useI18n } from 'vue-i18n'
import { LOGIN_PASSWORD_FIELD_PLACEHOLDER, validateLoginPasswordRule } from '@/utils/passwordRules'
import AuthLayout from '@/components/auth/AuthLayout.vue'
import AppInput from '@/components/common/AppInput.vue'
import AppButton from '@/components/common/AppButton.vue'

const { t } = useI18n()
const router = useRouter()
const authStore = useAuthStore()
const toast = useToast()
const { loading } = storeToRefs(authStore)

if (!authStore.resetMode && !authStore.pendingEmail) {
  router.replace('/register')
} else if (authStore.resetMode && !authStore.resetEmail) {
  router.replace('/forgot-password')
}

const password = ref('')
const confirm = ref('')
const passwordError = ref('')
const confirmError = ref('')

function validate() {
  passwordError.value = ''
  confirmError.value = ''
  let ok = true
  if (!password.value) {
    passwordError.value = t('error.passwordRequired')
    ok = false
  } else {
    const pwdErr = validateLoginPasswordRule(password.value)
    if (pwdErr) {
      passwordError.value = pwdErr
      ok = false
    }
  }
  if (!confirm.value) {
    confirmError.value = t('error.confirmPasswordRequired')
    ok = false
  } else if (confirm.value !== password.value) {
    confirmError.value = t('error.passwordMismatch')
    ok = false
  }
  return ok
}

async function handleSubmit() {
  if (!validate()) return
  authStore.clearError()
  const isReset = authStore.resetMode
  await authStore.createPassword(password.value)
  if (!authStore.error) {
    if (isReset) {
      toast.success(t('auth.resetSuccess'))
      router.push('/login')
    } else {
      router.push('/register/success')
    }
  } else {
    toast.error(authStore.error)
  }
}

/** 返回上一步修改邮箱验证码 / 找回密码验证码 */
function goBack() {
  authStore.clearError()
  if (authStore.resetMode) {
    authStore.resetCode = ''
    router.push('/forgot-password')
  } else {
    authStore.pendingCode = ''
    router.push('/register/verify')
  }
}
</script>

<template>
  <AuthLayout>
    <div class="auth-head">
      <button type="button" class="back-btn" @click="goBack">{{ t('auth.backBtn') }}</button>
    </div>
    <h1 class="auth-title">{{ t('auth.passwordTitle') }}</h1>
    <div class="form">
      <AppInput
          v-model="password"
          type="password"
          :label="t('auth.inputPasswordLabel')"
          :placeholder="LOGIN_PASSWORD_FIELD_PLACEHOLDER"
          :error="passwordError"
          @keyup.enter="handleSubmit"
        />
      <AppInput v-model="confirm" type="password" :label="t('auth.confirmPasswordLabel')" :placeholder="t('auth.confirmPasswordPlaceholder')" :error="confirmError" @keyup.enter="handleSubmit" />
    </div>
    <AppButton pill block size="lg" :loading="loading" class="submit-btn" @click="handleSubmit">{{ t('auth.doneBtn') }}</AppButton>
    <p class="foot-tip">{{ t('auth.hasAccount') }}<RouterLink to="/login" class="link">{{ t('auth.loginNow') }}</RouterLink></p>
  </AuthLayout>
</template>

<style scoped>
.auth-head {
  margin-bottom: 12px;
}
.back-btn {
  padding: 0;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: opacity 0.2s;
}
.back-btn:hover {
  opacity: 0.85;
}
.auth-title { font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 32px; }
.form { display: flex; flex-direction: column; gap: 20px; }
.submit-btn { margin-top: 32px; }
.foot-tip { margin-top: 20px; text-align: center; font-size: 13px; color: #666; }
.link { color: var(--color-primary); }
.link:hover { opacity: 0.8; }
</style>
