<template>
  <pn-page-card>
    <template #title>
      {{$t('account_change_email__title')}}
    </template>
    <pn-scroll-list>
      <q-stepper
        v-model="step"
        vertical
        color="primary"
        animated
        flat
        class="bg-transparent"
        >
        <q-step
          :name="1"
          :title="$t('account_change_email__current_email')"
          :done="step > 1"
          >
          <q-input
            v-model="login"
            autofocus
            dense
            filled
            :label = "$t('account_change_email__current_email')"
            disable
          />
          <q-stepper-navigation>
            <q-btn
              @click="handleSubmit"
              color="primary"
              :label="$t('continue')"
            />
          </q-stepper-navigation>
        </q-step>

        <q-step
          :name="2"
          :title="$t('account_change_email__confirm_current_email')"
          :done="step > 2"
          >
          <div class="q-pb-md">{{$t('account_change_email__confirm_email_message')}}</div>
          <q-input
            v-model="code"
            dense
            filled
            autofocus
            hide-bottom-space
            :label = "$t('account_change_email__code')"
            num="30"
          />
          <q-stepper-navigation>
            <q-btn
              @click="handleSubmit"
              color="primary"
              :label="$t('continue')"
              :disable="code.length === 0"
            />
            <q-btn
              flat
              @click="step = 1"
              color="primary"
              :label="$t('back')"
              class="q-ml-sm"
            />
          </q-stepper-navigation>
        </q-step>

        <q-step
          :name="3"
          :title="$t('account_change_email__new_email')"
          :done="step > 2"
          >
          <q-input
            v-model="newLogin"
            autofocus
            dense
            filled
            :label = "$t('account_change_email__new_email')"
            :rules="validationRules.email"
            lazy-rules
            no-error-icon
            @focus="($refs.emailInput as typeof QInput)?.resetValidation()"
            ref="emailInput"
          />
          <q-stepper-navigation>
            <q-btn
              @click="handleSubmit"
              color="primary"
              :label="$t('continue')"
              :disabled="!isEmailValid"
            />
            <q-btn
              flat
              @click="step = 2"
              color="primary"
              :label="$t('back')"
              class="q-ml-sm"
            />
          </q-stepper-navigation>
        </q-step>

        <q-step
          :name="4"
          :title="$t('account_change_email__confirm_new_email')"
          :done="step > 3"
          >
          <div class="q-pb-md">{{$t('account_change_email__confirm_email_message')}}</div>
          <q-input
            v-model="newCode"
            dense
            filled
            autofocus
            hide-bottom-space
            :label = "$t('account_change_email__code')"
            num="30"
          />
          <q-stepper-navigation>
            <q-btn
              @click="handleSubmit"
              color="primary"
              :label="$t('continue')"
              :disable="newCode.length === 0"
            />
            <q-btn
              flat
              @click="step = 3"
              color="primary"
              :label="$t('back')"
              class="q-ml-sm"
            />
          </q-stepper-navigation>
        </q-step>

        <q-step
          :name="5"
          :title="$t('account_change_email__set_password')"
          >
          <q-input
            v-model="password"
            dense
            filled
            :label = "$t('account_change_email__password')"
            :type="isPwd ? 'password' : 'text'"
            hide-hint
            :hint="passwordHint"
            :rules="validationRules.password"
            lazy-rules
            no-error-icon
            @focus="($refs.passwordInput as typeof QInput)?.resetValidation()"
            ref="passwordInput"
            >
              <template #append>
                <q-icon
                  color="grey-5"
                  :name="isPwd ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
                  class="cursor-pointer"
                  @click="isPwd = !isPwd"
                />
              </template>
            </q-input>

          <q-stepper-navigation>
            <q-btn
              @click="handleSubmit"
              color="primary"
              :label="$t('account_change_email__finish')"
              :disabled = "!isPasswordValid"
            />
            <q-btn
              flat
              @click="step = 4"
              color="primary"
              :label="$t('back')"
              class="q-ml-sm"
            />
          </q-stepper-navigation>
        </q-step>
      </q-stepper>
      
      <pn-magic-overlay
        v-if="showSuccessOverlay"
        icon="mdi-check-circle-outline"
        message1="account_change_email__ok_message1"
        message2="account_change_email__ok_message2"
        route-name="account"
      />
    </pn-scroll-list>
  </pn-page-card>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import type { AxiosError } from 'axios'
  import { useQuasar } from 'quasar'
  import { useI18n } from "vue-i18n"
  import { QInput } from 'quasar'
  import { useAuthStore } from 'stores/auth'

  const $q = useQuasar()
  const { t } = useI18n()
  const authStore = useAuthStore()

  type ValidationRule = (val: string) => boolean | string
  type Step = 1 | 2 | 3 | 4 | 5

  const step = ref<Step>(1)
  const login = authStore.customer?.email
  const code = ref<string>('')
  const newLogin = ref<string>('')
  const newCode = ref<string>('')
  const password = ref<string>('')
  const showSuccessOverlay = ref(false)
  const isPwd = ref<boolean>(true)
  const validationRules = {
    email: [(val: string) => /.+@.+\..+/.test(val) || t('login__incorrect_email')] as [ValidationRule],
    password: [(val: string) => val.length >= 8 || t('login__password_require')] as [ValidationRule]
  }

  const isEmailValid = computed(() => 
    validationRules.email.every(f => f(newLogin.value) === true)
  )

  const isPasswordValid = computed(() => 
    validationRules.password.every(f => f(password.value) === true)
  )

  const passwordHint = computed(() => {
    const result = validationRules.password[0](password.value)
    return typeof result === 'string' ? result : ''
  })

  const stepActions: Record<Step, () => Promise<void>> = {
  1: async () => {
    await authStore.getCodeCurrentEmail()
  },
  2: async () => {
    await authStore.confirmCurrentEmailCode(code.value)
    console.log(code.value)
  },
  3: async () => {
    await authStore.getCodeNewEmail(code.value, newLogin.value)
  },
  4: async () => {
    await authStore.confirmNewEmailCode(code.value, newCode.value, newLogin.value,)
  },
  5: async () => {
    await authStore.setNewEmailPassword(code.value, newCode.value, newLogin.value, password.value)
    await authStore.loginWithCredentials(newLogin.value, password.value)
  }
}

  const handleError = (err: AxiosError) => {
    const error = err as AxiosError<{ error?: { message?: string } }>
    const message = error.response?.data?.error?.message || t('unknown_error')
    
    $q.notify({
      message: `${t('error')}: ${message}`,
      type: 'negative',
      position: 'bottom',
      timeout: 2500
    })
    
    if (step.value > 1) {
      code.value = ''
      password.value = ''
    }
  }

  const handleSubmit = async () => {
    try {
      await stepActions[step.value]()
      if (step.value < 5) {
        step.value++
      } else {
        showSuccessOverlay.value = true
      }
    } catch (error) {
      handleError(error as AxiosError)
    }
  }

</script>
