<script setup lang="ts">
import { deleteCookie, getCookie, setCookie } from "@/plugins/cookie";
import router from "@/router";
import { computed, onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import axios from "axios";
import config from "@/app.config";

import CustomComponent from "@/components/CustomDialog.vue";

const $q = useQuasar();

const urlAdmin = import.meta.env.VITE_URL_ADMIN ?? "";
const urlUser = import.meta.env.VITE_URL_USER ?? "";
const urlMgt = import.meta.env.VITE_URL_MGT ?? "";
const urlCheckin = import.meta.env.VITE_URL_CHECKIN ?? "";

const token = ref<any>("");
const refreshToken = ref<any>("");
const fullname = computed(() => {
  if (token.value) {
    const base64Url = token.value.split(".")[1];

    // แปลงจาก Base64 URL-safe เป็น Base64 ปกติ
    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");

    // ถอดรหัส Base64
    const decoded = atob(base64);
    const decodedData = JSON.parse(decoded);

    // ดึงชื่อผู้ใช้
    return decodeURIComponent(escape(decodedData.name));
  } else return "";
});

async function goPage(sys: string, url: string) {
  // แยกส่วน Payload ของ JWT (ส่วนที่ 2)
  const base64Url = token.value.split(".")[1];

  // แปลงจาก Base64 URL-safe เป็น Base64 ปกติ
  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");

  // ถอดรหัส Base64
  const decoded = atob(base64);

  // กำหนด requiredRole ตามค่าของ sys
  let requiredRole: string[] = [];

  if (sys === "user" || sys === "checkin") {
    requiredRole = ["USER"];
  } else if (sys === "mgt") {
    requiredRole = ["STAFF"]; // ถ้า sys เป็นค่าว่าง ให้ใช้ "ADMIN"
  } else if (sys === "admin") {
    requiredRole = ["ADMIN", "SUPER_ADMIN"];
  }

  console.log("requiredRole===>", requiredRole);
  console.log("decoded===>", JSON.parse(decoded).realm_access.roles);

  // ตรวจสอบว่า payload.role มีค่าหรือไม่ และว่ามี role ที่ต้องการหรือไม่
  if (
    requiredRole.some((role) =>
      JSON.parse(decoded).realm_access.roles.includes(role)
    )
  ) {
    window.location.href = `${url}/auth?token=${token.value}&accessToken=${refreshToken.value}`;
  } else {
    // alert("คุณไม่มีสิทธิ์เข้าใช้งานระบบนี้");
    $q.dialog({
      component: CustomComponent,
      componentProps: {
        title: `แจ้งเตือน`,
        message: "คุณไม่มีสิทธิ์เข้าใช้งานระบบนี้",
        icon: "warning",
        color: "red",
        onlycancel: true,
      },
    });
  }
}

async function logout() {
  await deleteCookie("BMAHRIS_KEYCLOAK_IDENTITY");
  await deleteCookie("BMAHRIS_KEYCLOAK_REFRESH");

  window.location.href = `${import.meta.env.VITE_URL_SSO}`;
}

onMounted(async () => {
  token.value = await getCookie("BMAHRIS_KEYCLOAK_IDENTITY");
  refreshToken.value = await getCookie("BMAHRIS_KEYCLOAK_REFRESH");

  deleteCookie("BMAHRISADM_KEYCLOAK_IDENTITY");
  deleteCookie("BMAHRISCKI_KEYCLOAK_IDENTITY");
  deleteCookie("BMAHRISUSER_KEYCLOAK_IDENTITY");

  const checkToken = (await token.value) ?? null;

  if (!checkToken && !token.value) {
    await axios
      .post(
        `${config.API.sso}/kcauth`,
        {},
        {
          headers: {
            "Content-Type": "application/json",
          },
          withCredentials: true, // Include cookies with the request
        }
      )
      .then((res: any) => {
        console.log("res===>", res);

        if (res.status === 200) {
          setCookie("BMAHRIS_KEYCLOAK_IDENTITY", res.data.access_token, 1);
          setCookie("BMAHRIS_KEYCLOAK_REFRESH", res.data.refresh_token, 1);
        }
      })
      .catch((err: any) => {
        router.push("/sso");
      });
  }
});
</script>

<template>
  <div class="q-ma-md">
    <div class="row">
      {{ fullname }}
      <q-btn @click="logout()" class="btn_logout">
        ออกจากระบบ <i class="mdi mdi-logout"></i>
      </q-btn>
    </div>
    <div class="row">
      <div class="col-4">
        <img src="@/assets/screen1.png" style="width: 100%" />
        <div class="h-100 py-3">
          <a @click="goPage('user', urlUser)" class="link">
            ระบบบริการเจ้าของข้อมูล
          </a>
        </div>
      </div>

      <div class="col-4">
        <img src="@/assets/screen2.png" style="width: 100%" />
        <div class="h-100 py-3">
          <a @click="goPage('checkin', urlCheckin)" class="link">
            ระบบลงเวลาปฏิบัติราชการ
          </a>
        </div>
      </div>

      <div class="col-4">
        <img src="@/assets/screen3.png" style="width: 100%" />
        <div class="h-100 py-3">
          <a @click="goPage('mgt', urlMgt)" class="link"> ระบบบริหารจัดการ </a>
        </div>
      </div>

      <div class="col-4">
        <img src="@/assets/screen4.png" style="width: 100%" />
        <div class="h-100 py-3">
          <a @click="goPage('admin', urlAdmin)" class="link"> ระบบแอดมิน </a>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.link {
  cursor: pointer;
}
</style>
