<script setup>
import { ref, onMounted, watch } from "vue";
import axios from "axios";
import Navbar from "@/components/Navbar.vue";

let tab = ref("");
const emit = defineEmits(["close"]);

function close() {
  emit("close", false);
}

// Google Login
const handleSignIn = async (response) => {
  const credential = response.credential;
  const profile = JSON.parse(
    decodeURIComponent(
      escape(
        window.atob(
          credential.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")
        )
      )
    )
  );

  console.log("profile", profile);

  let data = {
    username: profile.name,
    password: "googleLogin",
    email: profile.email,
  };

  try {
    const response = await axios.post(
      "https://cmm.ai:8088/api/login/google/access-token",
      data
    );
    console.log("response", response);
  } catch (error) {
    console.error(error);
  }
};

onMounted(() => {
  const script = document.createElement("script");
  script.src = "https://accounts.google.com/gsi/client";
  script.async = true;
  script.defer = true;
  document.head.appendChild(script);

  window.onSignIn1 = handleSignIn;
});

let token =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIiLCJleHAiOjE2ODg2MjU5MzN9.rMJGZxHeKaxBQx0VuTBk8AtYhhLyIPxNUHBrsKWXJjE";

// 解碼 JWT
const base64Url = token.split(".")[1]; // 取得 JWT 的 payload
const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/"); // 處理 URL 安全的 Base64 字串
const decodedPayload = atob(base64); // Base64 解碼

// 將解碼後的 payload 轉換為 JSON 物件
const payload = JSON.parse(decodedPayload);

// 獲取過期時間(exp)
const expirationTime = payload.exp; // 過期時間的 UNIX 時間戳

// 創建 Date 物件並設定時間戳
const expirationDate = new Date(expirationTime * 1000); // JS 時間戳以毫秒為單位故乘以 1000

// 取得日期和時間的字串表示
const formattedExpiration = expirationDate.toLocaleString();

console.log("JWT 過期時間：", formattedExpiration);
</script>

<template>
  <!-- <Navbar />
  <div>Login</div> -->
  <!-- <v-container class="pa-0">
    <v-row>
      <v-col cols="6">
        <img src="@/assets/img/img-08.jpg" alt="">
      </v-col>
      <v-col cols="6"></v-col>
    </v-row>
  </v-container> -->

  <v-card class="login-card">
    <div class="d-flex justify-end pa-3">
      <v-icon
        size="large"
        icon="mdi-close"
        color="gray"
        @click.prevent="close()"
      ></v-icon>
    </div>
    <v-tabs v-model="tab" color="primary" align-tabs="center">
      <v-tab :value="1" class="me-5">登入</v-tab>
      <v-tab :value="2">註冊</v-tab>
    </v-tabs>
    <v-window v-model="tab">
      <v-window-item :value="1">
        <div class="px-15 pt-10">
          <div
            id="g_id_onload"
            data-client_id="626437744072-q6djn202411is5vdk2v0tu8fo7n07qr0.apps.googleusercontent.com"
            data-callback="onSignIn1"
          ></div>
          <div
            class="g_id_signin"
            data-type="standard"
            data-theme="outline"
            data-size="large"
            data-logo_alignment="left"
          ></div>

          <p class="text-center my-7">使用平台帳號登入</p>

          <v-form @submit.prevent>
            <v-text-field
              label="帳號"
              :rules="[(v) => !!v || '請輸入您的帳號']"
              prepend-inner-icon="mdi-account"
              variant="solo"
              density="compact"
            ></v-text-field>
            <v-text-field
              label="密碼"
              :rules="[(v) => !!v || '請輸入您的密碼']"
              prepend-inner-icon="mdi-lock"
              variant="solo"
              density="compact"
            ></v-text-field>
            <v-btn
              type="submit"
              size="large"
              color="primary"
              block
              @click="login()"
              >登入</v-btn
            >
          </v-form>
        </div>
      </v-window-item>
      <v-window-item :value="2">
        <div class="px-15 pt-10">
          <v-form @submit.prevent>
            <v-text-field
              label="帳號"
              :rules="[(v) => !!v || '請輸入您的帳號']"
              prepend-inner-icon="mdi-account"
              variant="solo"
              density="compact"
            ></v-text-field>
            <v-text-field
              label="密碼"
              :rules="[(v) => !!v || '請輸入您的密碼']"
              prepend-inner-icon="mdi-lock"
              variant="solo"
              density="compact"
            ></v-text-field>
            <v-btn
              type="submit"
              size="large"
              color="primary"
              @click="register()"
              block
              >註冊</v-btn
            >
          </v-form>
        </div>
      </v-window-item>
    </v-window>

    <v-card-actions class="d-flex justify-center py-10 forget">
      <a href="">忘記密碼</a><span class="mx-1">／</span><a href="">忘記帳號</a>
    </v-card-actions>
  </v-card>

  <!-- <div style="width: 200px; margin: 20px 0">
    <div
      id="g_id_onload"
      data-client_id="626437744072-q6djn202411is5vdk2v0tu8fo7n07qr0.apps.googleusercontent.com"
      data-callback="onSignIn1"
    ></div>
    <div class="g_id_signin" data-type="standard"></div>

    <p class="mt-3">目前狀態：</p>

    <span id="GOOGLE_STATUS_1"></span>
  </div> -->
</template>

<style lang="scss">
.login-card {
  .v-tab {
    padding-bottom: 20px;
    font-size: 28px;
  }
  .tab {
    button {
      margin: 0 20px;
      padding-bottom: 20px;
      font-size: 28px;
      font-weight: 500;
      text-align: center;
      color: #d9d9d9;
      border-bottom: 3px solid transparent;
      transition: all 0.3s;
      &.active {
        color: var(--main-color);
        border-bottom: 3px solid var(--main-color);
      }
    }
  }
  h3,
  p {
    color: #595959;
  }
  .google-btn {
    width: 130px;
    margin: auto;
  }
  .v-text-field .v-input__details {
    position: relative;
    top: -4px;
  }
  .forget {
    a,
    span {
      color: #969696;
    }
    a {
      transition: all 0.3s;
      &:hover {
        opacity: 0.8;
      }
    }
  }
}
</style>
