<template>
  <div>
    <div class="reset-password-page">
      <div class="columns is-centered">
        <div class="column is-5 reset-password-wrapper mt-6">
          <div class="reset-password-header mb-5">
            <Logo class="mb-5" />
            <h2 class="title">Đặt lại mật khẩu</h2>
          </div>
          <div class="reset-password-body">
            <!-- ============================> STEP EMAIL <============================ -->
            <div class="reset-step-email" v-if="!showStepVerify && !showStepPassword">
              <p class="has-text-centered mb-4">
                Vui lòng nhập email và mã xác thực để lấy lại mật khẩu. <br />
                Sau khi xác nhận thành công, chúng tôi sẽ gửi cho bạn một email để đặt lại mật khẩu.
              </p>

              <div class="form-login">
                <div class="field mt-5">
                  <label class="label">Email<b class="ml-1 has-text-danger">*</b></label>
                  <div class="control">
                    <input
                      class="input"
                      type="email"
                      placeholder="Nhập email"
                      v-model="email"
                      @blur="validateEmail(email)"
                      @keyup.enter="getPassword()"
                    />
                  </div>
                  <p
                    class="help is-danger"
                    v-if="errors.find((v) => v.name === 'email')"
                    v-html="errors.find((v) => v.name === 'email').text"
                  ></p>
                </div>
                <div class="field mt-5">
                  <label for="ref-code" class="label">Mã xác thực<b class="ml-1 has-text-danger">*</b></label>
                  <div class="field-body">
                    <div class="field has-addons">
                      <p class="control">
                        <input
                          class="input has-text-centered"
                          type="text"
                          v-model="generatedCode"
                          disabled
                          name="generated-code"
                        />
                      </p>
                      <p class="control is-expanded">
                        <input
                          class="input"
                          id="ref-code"
                          type="text"
                          :placeholder="`Nhập ${generatedCode} vào đây`"
                          v-model="refCode"
                          @keyup.enter="getPassword()"
                          @blur="validateRefCode()"
                          autocomplete="off"
                        />
                      </p>
                    </div>
                  </div>
                  <p class="help is-danger" v-if="errors.find((v) => v.name === 'refCode')">
                    {{ errors.find((v) => v.name === 'refCode').text }}
                  </p>
                </div>
                <div class="field mt-5 pt-1 group-action">
                  <button :class="['button', 'is-primary', isLoading && 'is-loading']" @click="getPassword()">
                    Lấy lại mật khẩu
                  </button>
                </div>
              </div>
            </div>

            <!-- ============================> STEP VERIFY <============================ -->
            <div class="reset-step-verify" v-if="showStepVerify && !showStepPassword">
              <article class="">
                <div class="py-3">
                  <p class="has-text-centered mb-4">
                    Chúng tôi đã gửi mã xác thực gồm 9 ký tự đến email
                    <strong>{{ email ? ' ' + email : '' }}</strong
                    >.
                    <br />
                    Vui lòng nhập mã bên dưới hoặc kiểm tra email để xác thực.
                  </p>
                  <OtpInput v-model="inputCodeVerify" :length="lengthCodeVerify" />
                  <p
                    class="help is-danger mt5 fs13 has-text-centered"
                    v-if="errors.find((v) => v.name === 'codeVerify')"
                  >
                    {{ errors.find((v) => v.name === 'codeVerify').text }}
                  </p>
                </div>
              </article>
              <div class="field mt-5">
                <p class="control has-text-centered">
                  <a class="button is-primary" @click="verifyCode()">Xác nhận</a>
                </p>
              </div>
              <p class="pt-4 has-text-danger has-text-centered" v-if="user">
                <span>Bạn chưa nhận được mã xác thực?</span>
                <br />
                <button :class="`button is-dark is-light ${isLoading ? 'is-loading' : ''} mt-4`" @click="sendCode()">
                  Gửi lại mã
                </button>
              </p>
            </div>

            <!-- ============================> STEP PASSWORD <============================ -->
            <div class="reset-step-password" v-if="showStepPassword && !showStepVerify">
              <div class="field mt-4">
                <label class="label">Mật khẩu<b class="ml-1 has-text-danger">*</b></label>
                <div class="field-body">
                  <div class="field has-addons">
                    <p class="control is-expanded">
                      <input
                        class="input"
                        :type="showpass ? 'text' : 'password'"
                        placeholder="Mật khẩu phải có ít nhất 8 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt."
                        v-model="inputPassword"
                        @blur="validatePassword(inputPassword)"
                      />
                    </p>
                    <div class="control">
                      <a class="button" @click="showpass = !showpass">
                        <span class="icon">
                          <i
                            :class="
                              showpass
                                ? 'mdi mdi-eye-outline has-text-dark fs22'
                                : 'mdi mdi-eye-off-outline has-text-dark fs22'
                            "
                          />
                        </span>
                      </a>
                    </div>
                  </div>
                </div>
                <p class="help is-danger" v-if="errors.find((v) => v.name === 'password')">
                  {{ errors.find((v) => v.name === 'password').text }}
                </p>
              </div>
              <div class="field mt-4">
                <label class="label">Nhập lại mật khẩu<b class="ml-1 has-text-danger">*</b></label>
                <div class="field-body">
                  <div class="field">
                    <p class="control is-expanded">
                      <input
                        class="input"
                        :type="showpass ? 'text' : 'password'"
                        placeholder=""
                        v-model="retypePassword"
                      />
                    </p>
                  </div>
                </div>
                <p class="help is-danger" v-if="errors.find((v) => v.name === 'retypePassword')">
                  {{ errors.find((v) => v.name === 'retypePassword').text }}
                </p>
              </div>
              <div class="field mt-5">
                <p class="control has-text-centered">
                  <a class="button is-primary" @click="changePassword()">Đổi mật khẩu</a>
                </p>
              </div>
            </div>
            <!-- Error system -->
            <p class="help is-danger mt5 fs13 has-text-centered" v-if="errors.find((v) => v.name === 'system')">
              {{ errors.find((v) => v.name === 'system').text }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { sendResetPasswordEmail } from '~/components/template/email';

export default {
  data() {
    return {
      code: undefined,
      errors: [],
      user: undefined,
      message: undefined,
      success: undefined,
      action: undefined,
      refCode: undefined,
      generatedCode: undefined,
      email: undefined,
      authcode: undefined,
      isLoading: false,
      isVietnamese: true,
      idUser: undefined,
      // ========================> step-verify <========================
      showStepVerify: false,
      codeVerify: undefined,
      lengthCodeVerify: 9,
      inputCodeVerify: undefined,
      // ========================> step-password <========================
      showStepPassword: false,
      showpass: false,
      inputPassword: undefined,
      retypePassword: undefined,
    };
  },

  watch: {
    refCode(val) {
      if (val === this.generatedCode) {
        this.getPassword();
      }
    },
    // step-verify
    inputCodeVerify(val) {
      if (val?.length === this.lengthCodeVerify) {
        this.checkCode();
      }
    },
  },
  computed: {
    authstatus: {
      get: function () {
        return this.$store.state.authstatus;
      },
      set: function (val) {
        this.$store.commit('updateAuthStatus', { authstatus: val });
      },
    },
  },

  head() {
    return {
      title: `${this.isVietnamese ? 'Đặt lại mật khẩu' : 'Reset password'} - ${this.$companyInfo().name}`,
    };
  },
  async created() {
    const { email, id, code } = this.$route.query;

    this.email = this.$validateEmail(email)?.status ? email.trim() : undefined;
    this.idUser = id?.trim() || undefined;
    this.inputCodeVerify = code?.trim() || undefined;

    if (this.email && this.idUser) {
      const resUser = await this.getInfoUser(this.email, this.idUser);
      this.user = resUser;
    }

    const isValidQuery = this.idUser && this.email && this.inputCodeVerify;

    if (isValidQuery) {
      this.showStepVerify = true;
      this.verifyCode();
    }
  },
  mounted() {
    this.generatedCode = this.$id().substring(0, 4);
    window.addEventListener('keyup', (ev) => (ev.key === 'Enter' && !this.success ? this.getPassword() : false));
  },
  methods: {
    validateEmail(email) {
      // Xóa lỗi cũ
      this.errors = this.errors.filter((err) => err.name !== 'email');

      const res = this.$validateEmail(email);

      if (!res.status) {
        this.errors.push({
          name: 'email',
          text: res.message,
        });
      }
    },

    validatePassword(password) {
      // Xóa lỗi cũ
      this.errors = this.errors.filter((err) => err.name !== 'password');

      const res = this.$validatePassword(password);

      if (!res.status) {
        this.errors.push({
          name: 'password',
          text: res.message,
        });
      }
    },

    validateRefCode() {
      // Xóa lỗi cũ
      this.errors = this.errors.filter((err) => err.name !== 'refCode');

      if (this.$empty(this.refCode)) {
        this.errors.push({ name: 'refCode', text: 'Chưa nhập mã xác thực' });
        return;
      }
      if (this.refCode !== this.generatedCode) this.errors.push({ name: 'refCode', text: 'Mã xác thực không đúng' });
    },

    async getInfoUser(email, id) {
      let query = {
        email: email,
      };

      if (id) query.id = id;

      const resUser = await this.$getdata('user', query);
      return resUser?.[0] ?? null;
    },

    async createAccountRecovery(user, code) {
      let payload = {
        user: user,
        code: code,
      };
      await this.$insertapi('accountrecovery', payload);
    },

    // ============================> STEP EMAIL <============================
    async getPassword() {
      this.isLoading = true;

      this.success = undefined;
      this.message = undefined;
      this.action = undefined;
      this.errors = [];

      this.validateEmail(this.email);
      this.validateRefCode();

      if (this.errors.length > 0) {
        this.isLoading = false;
        return;
      }

      const resUser = await this.getInfoUser(this.email);

      if (!resUser) {
        this.isLoading = false;
        this.errors.push({ name: 'email', text: 'Tài khoản không tồn tại' });
        return;
      }

      this.user = resUser;
      this.authcode = this.$id();
      this.idUser = resUser.id;
      this.createAccountRecovery(resUser.id, this.authcode);
      this.sendEmailGetPassword(resUser);
    },
    async sendEmailGetPassword(data) {
      this.isLoading = true;
      console.log('data', data);

      let query = { id: data.id, code: this.authcode, email: data.email };
      if (this.$store.state.link) query.link = this.$store.state.link;
      let routeData = this.$router.resolve({ path: '/account/recovery', query: query });
      let path = window.location.origin + routeData.href;
      const contentEmail = sendResetPasswordEmail(data.fullname, data.email, this.authcode, path);

      const dataSendEmail = {
        subject: `[${this.$companyInfo().name}] Mã xác thực đặt lại mật khẩu của bạn`,
        content: contentEmail,
        to: this.email,
      };

      const resSendMail = await this.$insertapi('sendemail', dataSendEmail);
      console.log('resSendMail', resSendMail);

      this.isLoading = false;

      let text = `Hãy mở email <b>${this.email}</b> để nhận mã xác thực`;
      this.$dialog(text, 'Mã xác thực', undefined, 5);
      setTimeout(() => {
        this.showStepVerify = true;
      }, 6000);
    },

    // ============================> STEP VERIFY <============================

    async verifyCode() {
      this.success = undefined;
      this.message = undefined;
      this.action = undefined;
      this.errors = [];

      this.validateEmail(this.email);

      if (this.$empty(this.inputCodeVerify)) this.errors.push({ name: 'codeVerify', text: 'Chưa nhập mã xác thực' });

      if (this.errors.length > 0) {
        this.isLoading = false;
        return;
      }

      this.checkCode();
    },

    async checkCode() {
      this.errors = [];
      if (!this.idUser || !this.email || !this.inputCodeVerify) {
        return;
      }

      try {
        const resAccountRecovery = await this.$getdata('accountrecovery', {
          user: this.idUser,
          code: this.inputCodeVerify,
        });
        const tempData = resAccountRecovery?.[0] ?? null;
        if (!tempData) {
          this.errors.push({ name: 'codeVerify', text: 'Mã xác thực không đúng' });
          return;
        }
        if (tempData.expiry) {
          this.errors.push({ name: 'codeVerify', text: 'Mã xác thực đã hết hạn' });
          return;
        }

        this.showStepVerify = false;
        this.showStepPassword = true;
        resAccountRecovery[0].expiry = true;
        await this.$updateapi('accountrecovery', resAccountRecovery[0]);
      } catch (error) {
        this.errors.push({ name: 'system', text: 'Có lỗi xảy ra, vui lòng thử lại sau' });
      }
    },

    sendCode() {
      if (!this.idUser || !this.email) {
        return;
      }
      this.authcode = this.$id();
      this.createAccountRecovery(this.idUser, this.authcode);
      this.sendEmailGetPassword(this.user);
    },

    // ============================> STEP PASSWORD <============================

    async changePassword() {
      this.success = undefined;
      this.message = undefined;
      this.action = undefined;
      this.errors = [];

      this.validatePassword(this.inputPassword);

      if (this.$empty(this.retypePassword)) {
        this.errors.push({ name: 'retypePassword', text: 'Nhắc lại mật khẩu không được bỏ trống.' });
      } else if (this.inputPassword !== this.retypePassword) {
        this.errors.push({ name: 'retypePassword', text: 'Nhắc lại mật khẩu phải giống với mật khẩu đã nhập.' });
      }

      if (this.errors.length > 0) {
        this.isLoading = false;
        return;
      }
      if (this.idUser && this.email) {
        const resUser = await this.$getdata('user', {
          id: this.idUser,
          email: this.email,
        });

        let hasPass = await this.$insertapi('gethash', { text: this.inputPassword });

        resUser[0].password = hasPass.rows[0];
        const resUpdateUser = await this.$updateapi('user', resUser[0]);
        if (resUpdateUser.errors) {
          this.errors.push({ name: 'retypePassword', text: 'Đổi mật khẩu thất bại' });
        } else {
          let text = `Mật khẩu của tài khoản <b>${this.email}</b> đã được cập nhật thành công. Bạn có thể đăng nhập lại bằng mật khẩu mới.`;
          this.$dialog(text, 'Mã xác thực', undefined, 5);
          setTimeout(() => {
            this.$router.push('/signin');
          }, 6000);
        }
      } else {
        this.errors.push({ name: 'retypePassword', text: 'Đổi mật khẩu thất bại' });
      }
    },
  },
};
</script>

<style lang="scss">
.reset-password-page {
  min-height: var(--layout-full-height);
  background-color: var(--bg-accent);
  .reset-password-wrapper {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--primary-200);
    background-color: #fff;
    .title {
      font-size: 2rem;
      text-align: center;
    }
  }
}
</style>
