<template>
  <div class="login-container">
    <div class="row full-height items-center justify-center q-pa-md">
      <div class="col-12 col-lg-10 col-xl-8">
        <div class="row login-card">
          <div class="col-md-6 illustration-container">
            <img
              src="/logo/Asset 3.png?height=400&width=400"
              alt="Login Illustration"
              class="illustration-image"
              @click="$router.push({ name: 'dashboard' })"
            />
          </div>
          <!-- Login form section (left side) -->
          <div class="col-12 col-md-6 login-form-container q-pa-lg">
            <h1 class="text-h4 text-weight-bold q-mb-sm">Đăng Nhập</h1>
            <p class="text-grey q-mb-lg">
              Chưa có tài khoản?
              <a href="/sign-up" class="text-purple">Đăng Kí</a>
            </p>

            <form
              @submit.prevent="onSubmit"
              class="q-gutter-y-md"
              autocomplete="off"
            >
              <div>
                <div class="text-subtitle2 q-mb-sm required">Tài Khoản</div>
                <q-input
                  v-model="username"
                  outlined
                  type="text"
                  placeholder="you@example.com/username"
                  class="login-input"
                />
              </div>

              <div>
                <div class="row justify-between items-center q-mb-sm">
                  <div class="text-subtitle2 required">Mật Khẩu</div>
                  <a href="#" class="text-purple text-caption"
                    >Quên Mật Khẩu?</a
                  >
                </div>
                <q-input
                  v-model="password"
                  outlined
                  :type="isPwdVisible ? 'text' : 'password'"
                  placeholder="Enter 6 character or more"
                  class="login-input"
                >
                  <template v-slot:append>
                    <q-icon
                      :name="isPwdVisible ? 'visibility' : 'visibility_off'"
                      class="cursor-pointer"
                      @click="isPwdVisible = !isPwdVisible"
                    />
                  </template>
                </q-input>
              </div>

              <div>
                <q-checkbox
                  v-model="rememberMe"
                  label="Ghi nhớ đăng nhâp"
                  color="purple"
                />
              </div>

              <q-btn
                type="submit"
                color="purple"
                class="full-width q-py-sm login-btn"
                label="ĐĂNG NHẬP"
                unelevated
              />

              <div class="text-center text-grey q-my-sm">
                hoặc đăng nhập với
              </div>

              <div class="row q-col-gutter-sm">
                <div class="col-12">
                  <q-btn
                    @click="onLoginGG"
                    outline
                    color="red"
                    class="full-width social-btn"
                    icon="fab fa-google"
                    label="Google"
                  />
                </div>
                <!-- <div class="col-6">
                  <q-btn
                    outline
                    color="blue"
                    class="full-width social-btn"
                    icon="fab fa-facebook-f"
                    label="Facebook"
                  />
                </div> -->
              </div>
            </form>
          </div>

          <!-- Illustration section (right side) -->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { mapGetters, mapActions } from 'vuex';

export default defineComponent({
  name: 'LoginPage',
  data() {
    return {
      text: '',
      dialog: false,
      username: '',
      password: '',
      rememberMe: false,
      isPwdVisible: false,
      loginInfo: {
        username: '',
        password: '',
      },
    };
  },
  computed: {
    ...mapGetters({
      getLoading: 'userModule/getLoading',
      getUser: 'userModule/getUser',
    }),
    getRoute() {
      return this.$route.name;
    },
  },
  created() {
    if (this.getUser) {
      this.$router.push({ name: 'dashboard' });
    }
  },
  watch: {
    getRoute() {
      if (!this.getUser && this.$route.name == 'map') {
        this.dialog = true;
      }
    },
  },
  methods: {
    ...mapActions({
      logout: 'userModule/logout',
      setUser: 'userModule/setUser',
      login: 'userModule/login',
      refreshToken: 'userModule/refreshToken',
    }),
    goListSlot() {
      this.$router.push({ name: 'parking', query: { name: this.text } });
    },
    openLoginDialog() {
      this.dialog = true;
    },
    async onSubmit() {
      try {
        await this.login({
          username: this.username,
          password: this.password,
        });
        this.dialog = false;
        this.$router.push({ name: 'dashboard' });
      } catch (error: any) {
        this.$q.notify({
          badgeClass: 'hide-badge',
          message: this.$t(`${error.response.data.message}`),
          color: 'negative',
          multiLine: true,
          position: 'top',
          html: true,
          classes: 'notify-error',
          timeout: 1000,
        });
      }
    },
    async onLoginGG() {
      if (!this.getUser || !localStorage.getItem('refresh')) {
        const googleUser = await this.$gAuth.signIn();
        await this.setUser({
          google_token: googleUser.getAuthResponse().id_token,
        });
      } else {
        if (localStorage.getItem('refresh')) {
          await this.refreshToken({
            refresh_token: localStorage.getItem('refresh'),
          });
        }
      }
      this.dialog = false;
      this.$router.push({ name: 'dashboard' });
    },
    signOut() {
      localStorage.removeItem('accesstoken');
      localStorage.removeItem('refresh');
      this.logout();
      window.location.replace('/');
    },
    closeDialog() {
      if (!this.getUser && this.$route.name == 'map') {
        this.$router.push({ name: 'dashboard' });
      }
    },
  },
});
</script>

<style scoped>
.login-container {
  height: 100vh;
  background-color: #0303ef;
  position: relative;
  background-image: url('/landing/z6547001438726_7a5bd095bcf160a078e1e1bffee5073a.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 599px) {
  .login-container {
    height: 100vh;
    background-color: #0303ef;
    position: relative;
    background-image: url('/landing/smart_city_2.png');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    left: 50%;
    transform: translateX(-50%);
  }
}

.login-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.login-form-container {
  background: white;
}

.login-input {
  border-radius: 8px;
}

.login-input :deep(.q-field__control) {
  height: 48px;
}

.login-btn {
  height: 48px;
  border-radius: 8px;
  font-weight: bold;
}

.social-btn {
  height: 42px;
  border-radius: 8px;
}

.illustration-container {
  background-color: #f8f5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.illustration-image {
  max-width: 100%;
  height: auto;
}

.text-purple {
  color: #8e24aa !important;
}

@media (max-width: 767px) {
  .illustration-container {
    display: none;
  }
}
</style>
