<script setup lang="ts">
import api from '/@src/utils/api.ts'
import type { UserData } from '/@src/utils/types'
import regex from '/@src/utils/regex'
import rules from '/@src/utils/rules'

type StepId = 'login' | 'forgot-password'
const step = ref<StepId>('login')
const isLoading = ref(false)
const privacyModal = ref(false)
const privacy = ref(false)
const loginForm = ref(<UserData>{
  bizNo: '999-99-99999',
  pwd: 'kospo2025!',
})

const forgetForm = ref(<UserData>{})
const forgetValid = ref({
  email: true,
  bizNo: true,
})

const router = useRouter()
const notyf = useNotyf()
const token = useUserToken()
const userSession = useUserSession()

const onComplete = (e: any) => {
  loginForm.value.bizNo = e.value
}

const onBizNoComplete = (e: any) => {
  forgetForm.value.bizNo = e.value
}

const onEmailComplete = (e: any) => {
  forgetForm.value.email = e.value
}

const handleLogin = async () => {
  if (!isLoading.value) {
    isLoading.value = true
    api.login(loginForm.value.bizNo, loginForm.value.pwd).then((result: UserData) => {
      token.value = result.accessToken
      userSession.setUser(result)
      notyf.dismissAll()
      notyf.primary(`환영합니다. ${result.repNm}님`)
      router.push('/navbar/layouts/contract-list')
      isLoading.value = false
    }).catch((res) => {
      notyf.error(res.response._data.body)
      console.log(res.response._data)
      if (res.response._data.code === '43003') {
        console.log('약관 활성화********')
        privacyModal.value = true
      }
      isLoading.value = false
    })
  }
}

const forgetSubmit = () => {
  let submit = true
  notyf.dismissAll()
  forgetValid.value = {
    bizNo: true,
    email: true,
  }
  if (!regex.bizNo.test(forgetForm.value.bizNo)) {
    notyf.error('사업자번호가 정상적이지 않습니다. 다시 입력해주세요.')
    forgetValid.value.bizNo = false
    submit = false
  }
  if (!regex.email.test(forgetForm.value.email)) {
    notyf.error('이메일이 정상적이지 않습니다. 다시 입력해주세요.')
    forgetValid.value.email = false
    submit = false
  }
  if (submit) {
    step.value = 'login'
  }
  else {
    return false
  }
}

useHead({
  title: '소액계약관리 - 로그인',
})
</script>

<template>
  <div class="modern-login">
    <div class="underlay h-hidden-mobile h-hidden-tablet-p" />

    <div class="columns is-gapless is-vcentered">
      <div class="column is-relative is-8 h-hidden-mobile h-hidden-tablet-p">
        <div class="hero is-fullheight is-image">
          <div class="hero-body">
            <div class="container">
              <div class="columns">
                <div class="column">
                  <img
                    class="hero-image"
                    src="/images/illustrations/login/station.svg"
                    alt=""
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-4 is-relative">
        <div class="top-tools">
          <RouterLink
            to="/"
            class="top-logo"
          >
            <AnimatedLogo
              width="38px"
              height="38px"
            />
          </RouterLink>

          <VDarkmodeToggle />
        </div>
        <div class="is-form">
          <div class="is-form-inner">
            <div
              class="form-text"
              :class="[step !== 'login' && 'is-hidden']"
            >
              <h2>로그인</h2>
              <p>소액 관리 시스템</p>
            </div>
            <div
              class="form-text"
              :class="[step === 'login' && 'is-hidden']"
            >
              <h2>계정 복구</h2>
              <p>비밀번호를 초기화 합니다.</p>
            </div>
            <form
              method="post"
              novalidate
              :class="[step !== 'login' && 'is-hidden']"
              class="login-wrapper"
              @submit.prevent="handleLogin"
            >

              <VField>
                <VControl icon="lnil lnil-user autv-icon">
                  <VLabel class="auth-label">
                    사업자 번호
                  </VLabel>
                  <VIMaskInput
                    class="input v-input"
                    :mask="Number"
                    :model-value="loginForm.bizNo"
                    :options="rules.bizNo"
                    @complete="onComplete"
                    placeholder="111-11-11111"
                    autocomplete="username"
                  />
                </VControl>
              </VField>
              <VField>
                <VControl icon="lnil lnil-lock-alt autv-icon">
                  <VLabel class="auth-label">
                    비밀번호
                  </VLabel>
                  <VInput
                    type="password"
                    v-model="loginForm.pwd"
                    placeholder="*********"
                    autocomplete="current-password"
                  />
                </VControl>
              </VField>

              <VField>
                <VControl class="is-flex">
                  <a
                    tabindex="0"
                    role="button"
                    @keydown.enter.prevent="step = 'forgot-password'"
                    @click="step = 'forgot-password'"
                  >
                    비밀번호 찾기
                  </a>
                </VControl>
              </VField>

              <div class="button-wrap has-help">
                <VButton
                  id="login-button"
                  :loading="isLoading"
                  color="primary"
                  type="submit"
                  size="big"
                  rounded
                  raised
                  bold
                >
                  확인
                </VButton>
                <span>
                  또는
                  <RouterLink to="/auth/signup">계정</RouterLink>
                  을 만드세요.
                </span>
              </div>
            </form>

            <form
              method="post"
              novalidate
              :class="[step !== 'forgot-password' && 'is-hidden']"
              class="login-wrapper"
              @submit.prevent="forgetSubmit"
            >
              <p class="recover-text">
                회원가입시 입력한 이메일주소를 입력해주세요.
                임시 비밀번호를 이메일로 보내드리겠습니다.
              </p>

              <VField>
                <VControl icon="lnil lnil-user autv-icon" :class="[!forgetValid.bizNo && 'valid-err']">
                  <VLabel class="auth-label">
                    사업자번호
                  </VLabel>
                  <VIMaskInput
                    class="input v-input"
                    mask="000-00-00000"
                    :model-value="forgetForm.bizNo"
                    :options="rules.bizNo"
                    placeholder="111-11-11111"
                    autocomplete="username"
                    @complete="onBizNoComplete"
                  />
                </VControl>
              </VField>
              <VField>
                <VControl icon="lnil lnil-envelope autv-icon" :class="[!forgetValid.email && 'valid-err']">
                  <VLabel class="auth-label">
                    이메일 주소
                  </VLabel>
                  <VIMaskInput
                    class="input v-input"
                    :mask="String"
                    :model-value="forgetForm.email"
                    :options="rules.email"
                    placeholder="kospo@kospo.co.kr"
                    autocomplete="email"
                    @complete="onEmailComplete"
                  />
                </VControl>
              </VField>
              <div class="button-wrap">
                <VButton
                  color="white"
                  size="big"
                  lower
                  rounded
                  @click="step = 'login'"
                >
                  취소
                </VButton>
                <VButton
                  color="primary"
                  size="big"
                  type="submit"
                  lower
                  rounded
                  solid
                >
                  확인
                </VButton>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <VModal
        is="form"
        :open="privacyModal"
        novalidate
        title="개인정보 동의서"
        actions="right"
        cancel-label="취소"

        size="big"
        @close="privacyModal = false"
    >
      <template #content>
        <Privacy/>
      </template>
      <template #cancel>
        <div class="checkbox-wrap">
          <VField horizontal>
            <div class="txt">개인정보 이용 및 수집 동의(필수)</div>
            <VCheckbox label="동의" v-model="privacy"/>
          </VField>
        </div>
      </template>
      <template #action>
        <VButton color="primary">확인</VButton>
      </template>
    </VModal>
  </div>
</template>

<style lang="scss">
:root {
  zoom: 1.2 !important;
}
</style>
<style lang="scss" scoped>
.checkbox-wrap {
  .is-horizontal {
    justify-content: end;

    .txt {
      line-height: 40px;
      padding-right: 10px;
      letter-spacing: -.45px;
    }
  }
}

.modern-login {
  position: relative;
  background: var(--white);
  min-height: 100vh;

  .column {
    &.is-relative {
      position: relative;
    }
  }

  .hero {
    &.has-background-image {
      position: relative;

      .hero-overlay {
        position: absolute;
        top: 0;
        inset-inline-start: 0;
        width: 100%;
        height: 100%;
        background: #5d4298 !important;
        opacity: 0.6;
      }
    }
  }

  .underlay {
    display: block;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 66.6%;
    height: 100%;
    background: #fdfdfd;
    z-index: 0;
  }

  @media (width <= 768px) {
    .top-tools {
      margin-top: 1rem !important;
      margin-bottom: 3rem !important;
    }
  }
  .top-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 400px;
    margin: 0 auto;
    padding: 0 1.25rem;
    margin-bottom: 5rem;

    .dark-mode {
      transform: scale(0.6);
      z-index: 2;
    }

    .top-logo {
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
      width: 200px;

      img {
        display: block;
        width: 150px;
        //max-width: 50px;
        margin: 0 auto;
      }

      .iconify {
        height: 50px;
        width: 50px;
      }
    }
  }

  .is-image {
    position: relative;
    border-inline-end: 1px solid var(--fade-grey);

    .hero-image {
      position: relative;
      z-index: 2;
      display: block;
      margin: -80px auto 0;
      max-width: 60%;
      width: 60%;
    }
  }

  .is-form {
    position: relative;
    max-width: 400px;
    margin: 0 auto;

    form {
      animation: fadeInLeft 0.5s;
    }

    .form-text {
      padding: 0 20px;
      animation: fadeInLeft 0.5s;

      h2 {
        font-family: var(--font-alt);
        font-weight: 400;
        font-size: 3rem;
        color: var(--primary);
      }

      p {
        color: var(--muted-grey);
        margin-top: 10px;
        font-size: 1.5em;
      }
    }

    .recover-text {
      font-size: 0.9rem;
      color: var(--dark-text);
    }

    .login-wrapper {
      padding: 30px 20px;

      .control {
        position: relative;
        width: 100%;
        margin-top: 16px;

        .input {
          padding-top: 14px;
          height: 60px;
          border-radius: 10px;
          padding-inline-start: 55px;
          transition: all 0.3s; // transition-all test

          &:focus {
            background: color-mix(in oklab, var(--fade-grey), white 6%);
            border-color: var(--placeholder);

            ~ .auth-label,
            ~ .autv-icon .iconify {
              color: var(--muted-grey);
            }
          }
        }

        .error-text {
          color: var(--danger);
          font-size: 0.8rem;
          display: none;
          padding: 2px 6px;
        }

        .auth-label {
          position: absolute;
          top: 6px;
          inset-inline-start: 55px;
          font-size: 1.0rem;
          color: var(--dark-text);
          font-weight: 500;
          z-index: 2;
          transition: all 0.3s; // transition-all test
        }

        .autv-icon,
        :deep(.autv-icon) {
          position: absolute;
          top: 0;
          inset-inline-start: 0;
          height: 60px;
          width: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24px;
          color: var(--placeholder);
          transition: all 0.3s;
        }

        &.has-validation {
          .validation-icon {
            position: absolute;
            top: 0;
            inset-inline-end: 0;
            height: 60px;
            width: 60px;
            display: none;
            justify-content: center;
            align-items: center;

            .icon-wrapper {
              height: 20px;
              width: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: var(--radius-rounded);

              .iconify {
                height: 10px;
                width: 10px;
                stroke-width: 3px;
                color: var(--white);
              }
            }

            &.is-success {
              .icon-wrapper {
                background: var(--success);
              }
            }

            &.is-error {
              .icon-wrapper {
                background: var(--danger);
              }
            }
          }

          &.has-success {
            .validation-icon {
              &.is-success {
                display: flex;
              }

              &.is-error {
                display: none;
              }
            }
          }

          &.has-error {
            .input {
              border-color: var(--danger);
            }

            .error-text {
              display: block;
            }

            .validation-icon {
              &.is-error {
                display: flex;
              }

              &.is-success {
                display: none;
              }
            }
          }
        }

        &.is-flex {
          display: flex;
          align-items: center;

          a {
            display: block;
            margin-inline-start: auto;
            color: var(--muted-grey);
            font-weight: 500;
            font-size: 1.1rem;
            transition: color 0.3s;

            &:hover,
            &:focus {
              color: var(--primary);
            }
          }

          .remember-me {
            font-size: 0.9rem;
            color: var(--muted-grey);
            font-weight: 500;
          }
        }
      }

      .button-wrap {
        margin: 40px 0;

        &.has-help {
          display: flex;
          align-items: center;

          > span {
            margin-inline-start: 12px;
            font-family: var(--font);

            a {
              color: var(--primary);
              font-weight: 500;
              padding: 0 2px;
              font-size: 1.1em;
            }
          }
        }

        .button {
          height: 46px;
          width: 140px;
          margin-inline-start: 6px;
          font-size: 1.1em;

          &:first-child {
            &:hover {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
}

.remember-toggle {
  width: 65px;
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 22px;
  user-select: none;
  transform: scale(0.9);

  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;

    &:checked ~ .toggler {
      border-color: var(--primary);

      .active,
      .inactive {
        transform: translateX(calc(var(--transform-direction) * 100%)) rotate(360deg);
      }

      .active {
        opacity: 1;
      }

      .inactive {
        opacity: 0;
      }
    }
  }

  .toggler {
    position: relative;
    display: block;
    height: 34px;
    width: 61px;
    border: 2px solid var(--placeholder);
    border-radius: 100px;
    transition: all 0.3s; // transition-all test

    .active,
    .inactive {
      position: absolute;
      top: 2px;
      inset-inline-start: 2px;
      height: 26px;
      width: 26px;
      border-radius: var(--radius-rounded);
      background: black;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translateX(calc(var(--transform-direction) * 0))
        rotate(calc(var(--transform-direction) * 0));
      transition: all 0.3s ease;

      .iconify {
        color: var(--white);
        font-size: 14px;
      }
    }

    .inactive {
      background: var(--placeholder);
      border-color: var(--placeholder);
      opacity: 1;
      z-index: 1;
    }

    .active {
      background: var(--primary);
      border-color: var(--primary);
      opacity: 0;
      z-index: 0;
    }
  }
}

@media only screen and (width <= 767px) {
  .modern-login {
    .top-logo {
      top: 30px;
    }

    .dark-mode {
      top: 36px;
      inset-inline-end: 44px;
    }

    //.is-form {
    //  padding-top: 100px;
    //}
  }
}

@media only screen and (width >= 768px) and (width <= 1024px) and (orientation: portrait) {
  .modern-login {
    .top-logo {
      .iconify {
        height: 60px;
        width: 60px;
      }
    }

    .dark-mode {
      top: -58px;
      inset-inline-end: 30%;
    }

    .columns {
      display: flex;
      height: 100vh;
    }
  }
}

/* ==========================================================================
Dark mode
========================================================================== */

.is-dark {
  .modern-login {
    background: var(--dark-sidebar);

    .underlay {
      background: color-mix(in oklab, var(--dark-sidebar), white 10%);
    }

    .is-image {
      border-color: color-mix(in oklab, var(--dark-sidebar), white 10%);
    }

    .is-form {
      .form-text {
        h2 {
          color: var(--primary);
        }
      }

      .login-wrapper {
        .control {
          &.is-flex {
            a:hover {
              color: var(--primary);
            }
          }

          .input {
            background: color-mix(in oklab, var(--dark-sidebar), white 4%);

            &:focus {
              border-color: var(--primary);

              ~ .autv-icon {
                .iconify {
                  color: var(--primary);
                }
              }
            }
          }

          .auth-label {
            color: var(--light-text);
          }
        }

        .button-wrap {
          &.has-help {
            span {
              color: var(--light-text);

              a {
                color: var(--primary);
              }
            }
          }
        }
      }
    }
  }

  .remember-toggle {
    input {
      &:checked + .toggler {
        border-color: var(--primary);

        > span {
          background: var(--primary);
        }
      }
    }

    .toggler {
      border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

      > span {
        background: color-mix(in oklab, var(--dark-sidebar), white 12%);
      }
    }
  }
}

</style>
