<script setup lang="ts">
import { useQuasar } from 'quasar'
import { useRouter } from 'vue-router'
import { useCounterMixin } from '@/stores/mixin'
import { usePositionKeycloakStore } from '@/stores/positionKeycloak'
import { logout } from '@/plugins/auth'
import CustomComponent from '@/components/CustomDialog.vue'

const $q = useQuasar()
const router = useRouter()
const mixin = useCounterMixin()
const positionKeycloakStore = usePositionKeycloakStore()
const { showLoader, hideLoader } = mixin

/**
 * ฟังก์ชันจัดการเมื่อผู้ใช้กดปุ่มตกลง
 * ดำเนินการ logout โดยตรง
 */
function handleOkClick() {
  performLogout()
}

/**
 * ฟังก์ชันดำเนินการออกจากระบบ
 */
async function performLogout() {
  showLoader()
  try {
    // ล้างข้อมูล positionKeycloak ก่อน logout
    positionKeycloakStore.clearPositionKeycloak()
    await logout()
  } catch (error) {
    console.error('Logout error:', error)
  } finally {
    setTimeout(() => {
      hideLoader()
    }, 1000)
  }
}
</script>

<template>
  <div
    class="fullscreen bg-secondary text-white text-center q-pa-sm flex flex-center"
  >
    <div class="no-position-container">
      <!-- Icon แสดงความผิดปกติ -->
      <div class="icon-container">
        <q-icon name="mdi-account-off-outline" size="100px" color="white" />
      </div>

      <!-- หัวข้อหลัก -->
      <div class="text-h4 q-mt-lg q-mb-md">ไม่พบข้อมูลสังกัด</div>

      <!-- รายละเอียด -->
      <div class="text-h6 q-mb-lg text-weight-regular">
        ท่านยังไม่มีสังกัดในโครงสร้างองค์กร<br />
        กรุณาติดต่อเจ้าหน้าที่ที่เบอร์ 1171
        <br />เพื่อดำเนินการเพิ่มข้อมูล
      </div>

      <div class="text-weight-regular">
        เมื่อเจ้าหน้าที่ได้เพิ่มท่านในโครงสร้างองค์กรเรียบร้อยแล้ว
        กรุณาเข้าสู่ระบบใหม่อีกครั้ง
      </div>
      <!-- ปุ่มตกลง -->
      <q-btn
        class="q-mt-xl"
        color="white"
        text-color="secondary"
        unelevated
        label="ตกลง"
        no-caps
        size="lg"
        padding="md xl"
        @click="handleOkClick"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.no-position-container {
  max-width: 600px;
  padding: 2rem;
}

.icon-container {
  opacity: 0.9;
}

.text-h4 {
  font-weight: 700;
}

.text-h6 {
  line-height: 1.8;
  opacity: 0.95;
}

.q-btn {
  border-radius: 8px;
  font-weight: 600;
  min-width: 150px;
}
</style>
