<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";
import screen1 from "@/assets/screen1.png";
import screen2 from "@/assets/screen2.png";
import screen3 from "@/assets/screen3.png";
import screen4 from "@/assets/screen4.png";

import type { DateCards } from "@/interface/index/Main";

const $q = useQuasar();

const cookieTokenName = ref<string>("BMAHRIS_KEYCLOAK_IDENTITY");
const cookieTokenRefName = ref<string>("BMAHRIS_KEYCLOAK_REFRESH");
const urlAdmin = config.API.URL_ADMIN;
const urlUser = config.API.URL_USER;
const urlMgt = config.API.URL_MGT;
const urlCheckin = config.API.URL_CHECKIN;

const cards = ref<DateCards[]>([
  {
    label: "ระบบบริการเจ้าของข้อมูล",
    img: screen1,
    page: "user",
  },
  {
    label: "ระบบลงเวลาปฏิบัติราชการ",
    img: screen2,
    page: "checkin",
  },
  {
    label: "ระบบบริหารจัดการ",
    img: screen3,
    page: "mgt",
  },
  {
    label: "ระบบแอดมิน",
    img: screen4,
    page: "admin",
  },
]);

const token = ref<any>("");
const refreshToken = ref<any>("");
const fullname = computed(async () => {
  const token = await getCookie(cookieTokenName.value);
  if (token) {
    const base64Url = token.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) {
  const token = await getCookie(cookieTokenName.value);

  if (token) {
    // แยกส่วน Payload ของ JWT (ส่วนที่ 2)
    const base64Url = token.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}&accessToken=${refreshToken.value}`;
    } else {
      // alert("คุณไม่มีสิทธิ์เข้าใช้งานระบบนี้");
      $q.dialog({
        component: CustomComponent,
        componentProps: {
          title: `แจ้งเตือน`,
          message: "คุณไม่มีสิทธิ์เข้าใช้งานระบบนี้",
          icon: "warning",
          color: "red",
          onlycancel: true,
        },
      });
    }
  }
}

async function logout() {
  $q.dialog({
    component: CustomComponent,
    componentProps: {
      title: `ยืนยันการออกจากระบบ`,
      message: "ต้องการออกจากระบบใช่หรือไม่?",
      icon: "info",
      color: "public",
    },
    cancel: true,
    persistent: true,
  }).onOk(async () => {
    await deleteCookie(cookieTokenName.value);
    await deleteCookie(cookieTokenRefName.value);
    // ยิง logout เข้าระบบ
    await postSaveLog("ออกจากระบบ", token.value);
    window.location.href = `${config.API.URL_SSO}`;
  });
}

async function postSaveLog(type: string, token: any) {
  await axios
    .post(
      config.API.ssoLog,
      { text: type },
      {
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
          accept: "application/json",
        },
      }
    )
    .then((res) => {
      console.log("res:", res.data);
    })
    .catch((err) => {
      console.error("Error:", err);
    });
}

onMounted(async () => {
  deleteCookie("BMAHRISADM_KEYCLOAK_IDENTITY");
  deleteCookie("BMAHRISCKI_KEYCLOAK_IDENTITY");
  deleteCookie("BMAHRISUSER_KEYCLOAK_IDENTITY");

  const checkToken = await getCookie(cookieTokenName.value);

  if (!checkToken && !token.value) {
    await axios
      .post(
        `${config.API.sso}/kcauth`,
        {},
        {
          headers: {
            "Content-Type": "application/json",
          },
          withCredentials: true, // Include cookies with the request
        }
      )
      .then(async (res: any) => {
        if (res.status === 200) {
          setCookie(cookieTokenName.value, res.data.access_token, 1);
          setCookie(cookieTokenRefName.value, res.data.refresh_token, 1);

          token.value = await res.data.access_token;
          refreshToken.value = await res.data.refresh_token;

          // ยิง log เข้าระบบ
          await postSaveLog("เข้าสู่ระบบ", res.data.access_token);
        }
      })
      .catch((err: any) => {
        router.push("/sso");
      });
  } else {
    token.value = await getCookie(cookieTokenName.value);
    refreshToken.value = await getCookie(cookieTokenRefName.value);
  }
});
</script>

<template>
  <!-- Background Image -->
  <div class="bg-img h-50 fixed-top" style="z-index: -1">
    <img
      alt=""
      src="https://bma-sso.frappet.synology.me/images/line2.png"
      class="img_absolute_line"
    />
  </div>

  <div class="row justify-center">
    <div class="col-md-8 col-sm-12">
      <q-toolbar style="padding: 0px">
        <div class="row items-center q-py-sm">
          <q-img src="@/assets/sso.png" style="width: 80px" />

          <div class="text-white q-ml-md" v-if="$q.screen.gt.md">
            <div class="text-grey-5 text-caption">
              Bangkok Metropolitan Administration
            </div>
            <div class="text-bold text-left">Single Sign-On</div>
          </div>
        </div>
        <q-space />
        <div class="row items-center q-col-gutter-md">
          <div class="text-white">
            {{ fullname }}
          </div>
          <div>
            <q-btn
              @click="logout()"
              class="btn_logout"
              icon="mdi-logout"
              :label="$q.screen.gt.md ? 'ออกจากระบบ' : ''"
            >
            </q-btn>
          </div>
        </div>
      </q-toolbar>

      <!-- Title Section -->
      <div class="text-white text-center" style="margin-top: 80px">
        <div class="text-bold" :class="!$q.screen.gt.sm ? '' : 'text-h5'">
          ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
        </div>
        <div class="text-caption q-mt-sm">
          Human Resource Management System (HRMS)
        </div>
      </div>

      <!-- Card Section -->
      <div
        class="q-mt-xl"
        :class="!$q.screen.gt.md ? 'row justify-center' : ''"
      >
        <div class="q-col-gutter-lg" :class="$q.screen.gt.md ? 'row' : ''">
          <div class="col" v-for="(card, index) in cards" :key="index">
            <q-card
              :style="!$q.screen.gt.md ? 'width: 300px' : ''"
              bordered
              class="my-card"
              :class="
                $q.screen.gt.md ? (index % 2 === 0 ? '' : 'card-right') : ''
              "
            >
              <q-img :src="card.img" />

              <q-card-section>
                <div class="row col-12">
                  <q-btn
                    outline
                    class="full-width"
                    color="primary"
                    :label="card.label"
                    @click="
                      goPage(
                        card.page,
                        card.page === 'user'
                          ? urlUser
                          : card.page === 'checkin'
                          ? urlCheckin
                          : card.page === 'mgt'
                          ? urlMgt
                          : card.page === 'admin'
                          ? urlAdmin
                          : ''
                      )
                    "
                  />
                </div>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- <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>
.my-card {
  width: 100%;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 12px; /* มุมโค้งมน */
  transition: all 0.3s ease; /* ทำให้การเปลี่ยนแปลงดูนุ่มนวล */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* เพิ่มเงาเมื่อ hover */
}

.card-right {
  transform: translateY(30px); /* เลื่อนการ์ดลงเล็กน้อย */
}

.btn_logout {
  text-align: center;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  border: 0;

  border-radius: 50px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}
.btn_logout:hover {
  color: #fff;
  background-color: #00ffc8a1;
  transition: 0.8s;
  box-shadow: rgba(255, 255, 255, 0.16) 0px 10px 36px 0px,
    rgba(255, 255, 255, 0.06) 0px 0px 0px 1px;
}

.img_absolute_line {
  position: absolute;
  height: 100%;
  width: auto;
  left: 0;
  bottom: 0;
}

.bg-img {
  background: rgb(30, 50, 49);
  background: linear-gradient(
    90deg,
    rgba(30, 50, 49, 1) 0%,
    rgba(20, 120, 99, 1) 100%
  );
  min-height: 480px;
}
</style>
