<script setup lang="ts">
import {useMessage} from "wot-design-uni";
import {useConfigStore, useUserStore} from "@/store";
import ChooseLanguage from "./components/choose-language/choose-language.vue";
import Logout from "./components/log-out/log-out.vue";
import PasswordDialogs from "./components/password-dialogs/password-dialogs.vue";
import Config from "@/config";
import {appUserLogOffPost, appUserEditLoginPwdPost, appUserForgetPwdPost} from "@/service";
import { setPayPwd, editPayPwd, forgetPayPwd } from "@/pages-user/service";
import { SmsType } from "@/constant/enums";
import { z } from "zod";
import useGetMsgCode from "@/hooks/useGetMsgCode";

const {t} = useI18n();
const {locale} = useI18n();
const userStore = useUserStore();
const configStore = useConfigStore()
const message = useMessage();
const chooseLanguageRef = ref<InstanceType<typeof ChooseLanguage>>()
const logoutRef = ref<InstanceType<typeof Logout>>()
const currentLanguageLabel = computed(() => (locale.value === 'en' ? 'English' : '中文'))
const { isSend, getMsgCode } = useGetMsgCode()

const showLoginPwdPopup = ref(false)
const showLoginPwdForgetPopup = ref(false)
const showPayPwdPopup = ref(false)
const showPayPwdForgetPopup = ref(false)
const payPwdMode = ref<'set' | 'change'>('set')

const loginPwdForm = ref({
  oldLoginPwd: '',
  newLoginPwd: '',
  confirmPwd: '',
})

const loginPwdSchema = computed(() =>
  z
    .object({
      oldLoginPwd: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-old-password') }),
      newLoginPwd: z
        .string()
        .min(8, { message: t('pages-user.pay-password.password-length-limit') })
        .max(16, { message: t('pages-user.pay-password.password-length-limit') }),
      confirmPwd: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password-again') }),
    })
    .refine((data) => data.newLoginPwd === data.confirmPwd, {
      path: ['confirmPwd'],
      message: t('pages-user.pay-password.two-passwords-inconsistent'),
    })
)

function validateBySchema(schema: z.ZodTypeAny, data: any) {
  const res = schema.safeParse(data)
  if (!res.success) {
    const errors = res.error.flatten().fieldErrors
    const first = Object.values(errors).find((arr) => Array.isArray(arr) && arr.length)?.[0]
    if (first) uni.showToast({ title: String(first), icon: 'none' })
    return false
  }
  return true
}

async function submitLoginPwd() {
  if (!validateBySchema(loginPwdSchema.value, loginPwdForm.value)) return
  await appUserEditLoginPwdPost({ body: { ...loginPwdForm.value } })
  uni.showToast({ title: t('pages-user.password.change-password-successfully'), icon: 'none' })
  showLoginPwdPopup.value = false
  loginPwdForm.value = { oldLoginPwd: '', newLoginPwd: '', confirmPwd: '' }
  setTimeout(() => {
    userStore.clear()
    uni.navigateTo({ url: Config.loginPath })
  }, 1000)
}

const loginPwdForgetForm = ref({
  areaCode: userStore.userInfo?.areaCode || '',
  phone: userStore.userInfo?.phone || '',
  captcha: '',
  confirmPwd: '',
  newLoginPwd: '',
})

const loginPwdForgetSchema = computed(() =>
  z
    .object({
      captcha: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-verification-code') }),
      confirmPwd: z
        .string()
        .min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password') })
        .regex(/^\d{6}$/, { message: t('pages-user.pay-password.enter-6-digit-password') }),
      newLoginPwd: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password-again') }),
    })
    .refine((data) => data.confirmPwd === data.newLoginPwd, {
      path: ['newLoginPwd'],
      message: t('pages-user.pay-password.two-passwords-inconsistent'),
    })
)

function openLoginPwdPopup() {
  showLoginPwdPopup.value = true
}

function openPayPwdPopup() {
  payPwdMode.value = userStore.userInfo?.payPwd ? 'change' : 'set'
  showPayPwdPopup.value = true
}

function requestLoginForgetCode() {
  if (isSend.value > 0) return
  getMsgCode({
    type: SmsType.USER_FORGET_PASSWORD,
    phone: loginPwdForgetForm.value.phone,
    areaCode: loginPwdForgetForm.value.areaCode,
  })
}

async function submitLoginPwdForget() {
  if (!validateBySchema(loginPwdForgetSchema.value, loginPwdForgetForm.value)) return
  await appUserForgetPwdPost({ body: { ...loginPwdForgetForm.value } })
  uni.showToast({ title: t('pages-user.password.forget-password-successfully'), icon: 'none' })
  await userStore.getUserInfo()
  showLoginPwdForgetPopup.value = false
  loginPwdForgetForm.value = {
    areaCode: userStore.userInfo?.areaCode || '',
    phone: userStore.userInfo?.phone || '',
    captcha: '',
    confirmPwd: '',
    newLoginPwd: '',
  }
}

const payPwdSetForm = ref({
  areaCode: userStore.userInfo?.areaCode || '',
  phone: userStore.userInfo?.phone || '',
  captcha: '',
  payPwd: '',
  confirmPwd: '',
})

const payPwdSetSchema = computed(() =>
  z
    .object({
      captcha: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-verification-code') }),
      payPwd: z
        .string()
        .min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password') })
        .regex(/^\d{6}$/, { message: t('pages-user.pay-password.enter-6-digit-password') }),
      confirmPwd: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password-again') }),
    })
    .refine((data) => data.payPwd === data.confirmPwd, {
      path: ['confirmPwd'],
      message: t('pages-user.pay-password.two-passwords-inconsistent'),
    })
)

function requestPaySetCode() {
  if (isSend.value > 0) return
  getMsgCode({
    type: SmsType.USER_SET_PAYMENT_PASSWORD,
    phone: payPwdSetForm.value.phone,
    areaCode: payPwdSetForm.value.areaCode,
  })
}

async function submitPayPwdSet() {
  if (!validateBySchema(payPwdSetSchema.value, payPwdSetForm.value)) return
  await setPayPwd(payPwdSetForm.value as any)
  uni.showToast({ title: t('pages-user.pay-password.set-payment-password-successfully'), icon: 'none' })
  await userStore.getUserInfo()
  showPayPwdPopup.value = false
  payPwdSetForm.value = {
    areaCode: userStore.userInfo?.areaCode || '',
    phone: userStore.userInfo?.phone || '',
    captcha: '',
    payPwd: '',
    confirmPwd: '',
  }
}

const payPwdChangeForm = ref({
  oldPayPwd: '',
  newPayPwd: '',
  confirmPwd: '',
})

const payPwdChangeSchema = computed(() =>
  z
    .object({
      oldPayPwd: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-old-password') }),
      newPayPwd: z
        .string()
        .min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password') })
        .regex(/^\d{6}$/, { message: t('pages-user.pay-password.enter-6-digit-password') }),
      confirmPwd: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password-again') }),
    })
    .refine((data) => data.newPayPwd === data.confirmPwd, {
      path: ['confirmPwd'],
      message: t('pages-user.pay-password.two-passwords-inconsistent'),
    })
)

async function submitPayPwdChange() {
  if (!validateBySchema(payPwdChangeSchema.value, payPwdChangeForm.value)) return
  await editPayPwd(payPwdChangeForm.value as any)
  uni.showToast({ title: t('pages-user.pay-password.change-payment-password-successfully'), icon: 'none' })
  await userStore.getUserInfo()
  showPayPwdPopup.value = false
  payPwdChangeForm.value = { oldPayPwd: '', newPayPwd: '', confirmPwd: '' }
}

const payPwdForgetForm = ref({
  areaCode: userStore.userInfo?.areaCode || '',
  phone: userStore.userInfo?.phone || '',
  captcha: '',
  payPwd: '',
  confirmPwd: '',
})

const payPwdForgetSchema = computed(() =>
  z
    .object({
      captcha: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-verification-code') }),
      payPwd: z
        .string()
        .min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password') })
        .regex(/^\d{6}$/, { message: t('pages-user.pay-password.enter-6-digit-password') }),
      confirmPwd: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password-again') }),
    })
    .refine((data) => data.payPwd === data.confirmPwd, {
      path: ['confirmPwd'],
      message: t('pages-user.pay-password.two-passwords-inconsistent'),
    })
)

function requestPayForgetCode() {
  if (isSend.value > 0) return
  getMsgCode({
    type: SmsType.USER_FORGET_PAYMENT_PASSWORD,
    phone: payPwdForgetForm.value.phone,
    areaCode: payPwdForgetForm.value.areaCode,
  })
}

async function submitPayPwdForget() {
  if (!validateBySchema(payPwdForgetSchema.value, payPwdForgetForm.value)) return
  await forgetPayPwd(payPwdForgetForm.value as any)
  uni.showToast({ title: t('pages-user.pay-password.forget-payment-password-successfully'), icon: 'none' })
  await userStore.getUserInfo()
  showPayPwdForgetPopup.value = false
  payPwdForgetForm.value = {
    areaCode: userStore.userInfo?.areaCode || '',
    phone: userStore.userInfo?.phone || '',
    captcha: '',
    payPwd: '',
    confirmPwd: '',
  }
}

function handleChooseLanguage() {
  if (chooseLanguageRef.value) {
    chooseLanguageRef.value.init()
  }
}


function navigateTo(url: string) {
  uni.navigateTo({url});
}


function handleSetOrUpdatePassword() {
  openPayPwdPopup()
}

function handleLogout() {
  if (logoutRef.value) {
    logoutRef.value.init()
  }
}

function handleLogoutAccount() {
  message
      .confirm({
        msg: t('pages-user.setting.cancelAccountConfirm'),
        title: t('common.prompt.system-prompt'),
        cancelButtonText: t('common.close'),
        confirmButtonText: t('common.confirm'),
        confirmButtonProps: {
          customClass: '!bg-#000'
        }
      })
      .then(() => {
        appUserLogOffPost({
          body: {
            userPort: 1,
          }
        }).then(res=> {
          uni.showToast({
            title: t('pages-user.setting.cancelAccountSuccess'),
            icon: 'none',
          })
          userStore.clear()
          uni.switchTab({
            url: Config.indexPath,
          })
        })
      })
      .catch(() => {})
}
</script>

<template>
  <view class="setting-root">
    <navbar :title="t('navbar-settings')"/>
    <view class="setting-page">
      <view class="setting-card">
        <view
          class="setting-row setting-row--border"
          @click="openLoginPwdPopup"
        >
          <text class="setting-row__label">{{ t("pages-user.setting.modification") }}</text>
          <image src="@img/chef/100202.png" class="setting-row__arrow"></image>
        </view>

        <view class="setting-row" @click="handleSetOrUpdatePassword">
          <text class="setting-row__label">{{ t("pages-user.setting.payPwd") }}</text>
          <view class="setting-row__right">
            <text class="setting-row__value">{{ t('pages.mine.set') }}</text>
            <image src="@img/chef/100202.png" class="setting-row__arrow"></image>
          </view>
        </view>
      </view>

      <view class="setting-card setting-card--gap">
        <view class="setting-row" @click="handleChooseLanguage">
          <text class="setting-row__label">{{ t("pages-user.setting.language") }}</text>
          <view class="setting-row__right">
            <text class="setting-row__value">{{ currentLanguageLabel }}</text>
            <image src="@img/chef/100202.png" class="setting-row__arrow"></image>
          </view>
        </view>
      </view>

      <view class="setting-card setting-card--gap">
        <view class="setting-row" @click="handleLogoutAccount">
          <text class="setting-row__label setting-row__label--strong">{{ t('pages-user.setting.cancelAccount') }}</text>
          <!-- <image src="@img/chef/100202.png" class="setting-row__arrow"></image> -->
        </view>
      </view>

      <view class="logout-actions">
        <wd-button custom-class="logout-btn" block @click="handleLogout">
          {{ t('pages-user.setting.logout') }}
        </wd-button>
      </view>
    </view>

    <choose-language ref="chooseLanguageRef"/>
    <logout ref="logoutRef"/>
    <password-dialogs
      :t="t"
      :is-send="isSend"
      :pay-pwd-mode="payPwdMode"
      :show-login-pwd-popup="showLoginPwdPopup"
      :show-login-pwd-forget-popup="showLoginPwdForgetPopup"
      :show-pay-pwd-popup="showPayPwdPopup"
      :show-pay-pwd-forget-popup="showPayPwdForgetPopup"
      :login-pwd-form="loginPwdForm"
      :login-pwd-forget-form="loginPwdForgetForm"
      :pay-pwd-set-form="payPwdSetForm"
      :pay-pwd-change-form="payPwdChangeForm"
      :pay-pwd-forget-form="payPwdForgetForm"
      @update:show-login-pwd-popup="showLoginPwdPopup = $event"
      @update:show-login-pwd-forget-popup="showLoginPwdForgetPopup = $event"
      @update:show-pay-pwd-popup="showPayPwdPopup = $event"
      @update:show-pay-pwd-forget-popup="showPayPwdForgetPopup = $event"
      @submit-login-pwd="submitLoginPwd"
      @submit-login-pwd-forget="submitLoginPwdForget"
      @submit-pay-pwd-set="submitPayPwdSet"
      @submit-pay-pwd-change="submitPayPwdChange"
      @submit-pay-pwd-forget="submitPayPwdForget"
      @request-login-forget-code="requestLoginForgetCode"
      @request-pay-set-code="requestPaySetCode"
      @request-pay-forget-code="requestPayForgetCode"
    />
  </view>
</template>

<style scoped lang="scss">
.setting-root {
  min-height: 100vh;
  background: #f5f5f5;
}

.setting-page {
  padding: 20rpx 30rpx calc(160rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.setting-card {
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
}

.setting-card--gap {
  margin-top: 24rpx;
}

.setting-row {
  height: 102rpx;
  padding: 0 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &--border {
    border-bottom: 1rpx solid #ededed;
  }

  &__label {
    font-size: 34rpx;
    line-height: 34rpx;
    color: #2c2c2c;
    // font-weight: 700;
  }

  &__label--strong {
    width: 100%;
    text-align: center;
  }

  &__right {
    display: flex;
    align-items: center;
    gap: 12rpx;
  }

  &__value {
    font-size: 30rpx;
    line-height: 30rpx;
    color: #2c2c2c;
    // font-weight: 600;
  }

  &__arrow {
    width: 22rpx;
    height: 30rpx;
    flex-shrink: 0;
  }
}

.logout-actions {
  position: fixed;
  left: 30rpx;
  right: 30rpx;
  bottom: calc(36rpx + env(safe-area-inset-bottom));
  z-index: 20;
}

:deep(.logout-btn) {
  height: 108rpx !important;
  border-radius: 22rpx !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 36rpx !important;
  font-weight: 700 !important;
}
</style>
