<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Box } from '@/components/ui/box'
import { Button } from '@/components/ui/button'
import { AlertRoot, AlertTitle, AlertDescription } from '@/components/ui/alert'
import { logout, resolvePostAuthRoute } from '@/modules/auth'
import { useAuthStore } from '@/stores/auth'
import logoUrl from '@/assets/images/logo-kopkb.svg'
import illustrationUrl from '@/assets/images/logo-kopkb.svg'

const router = useRouter()
const authStore = useAuthStore()

const loggingOut = ref(false)
const checkingStatus = ref(false)

let statusPollInterval: ReturnType<typeof setInterval> | null = null

const checkActivationStatus = async () => {
  checkingStatus.value = true

  try {
    await authStore.fetchSession()

    if (authStore.isAccountActive) {
      await router.replace(resolvePostAuthRoute(authStore.user))
    }
  } finally {
    checkingStatus.value = false
  }
}

const handleLogout = async () => {
  loggingOut.value = true

  try {
    await logout()
    authStore.clearSession()
    await router.push({ name: 'login' })
  } finally {
    loggingOut.value = false
  }
}

onMounted(() => {
  statusPollInterval = setInterval(checkActivationStatus, 30000)
})

onUnmounted(() => {
  if (statusPollInterval) {
    clearInterval(statusPollInterval)
  }
})

const appName = import.meta.env.VITE_APP_NAME
const appVersion = import.meta.env.VITE_APP_VERSION
</script>

<template>
  <div :class="[
    'relative min-h-screen lg:overflow-hidden bg-primary bg-noise xl:bg-background xl:bg-none',
    'before:hidden before:xl:block before:content-[\'\'] before:w-[57%] before:mt-[-28%] before:mb-[-16%] before:ml-[-12%] before:absolute before:inset-y-0 before:left-0 before:transform before:rotate-6 before:bg-primary/95 before:bg-noise before:rounded-[35%]',
    'after:hidden after:xl:block after:content-[\'\'] after:w-[57%] after:mt-[-28%] after:mb-[-16%] after:ml-[-12%] after:absolute after:inset-y-0 after:left-0 after:transform after:rotate-6 after:border after:bg-accent after:bg-cover after:blur-xl after:rounded-[35%] after:border-primary',
  ]">
    <div :class="[
      'p-3 sm:px-8 relative min-h-screen',
      'before:hidden before:xl:block before:w-[57%] before:mt-[-20%] before:mb-[-13%] before:ml-[-12%] before:absolute before:inset-y-0 before:left-0 before:transform before:-rotate-6 before:bg-primary/40 before:bg-noise before:border before:border-primary/50 before:opacity-60 before:rounded-[20%]',
    ]">
      <div class="container relative z-10 mx-auto sm:px-20">
        <div class="block grid-cols-2 gap-4 xl:grid">
          <div class="hidden min-h-screen flex-col xl:flex">
            <a class="flex items-center pt-10" href="">
              <img class="w-6" :src="logoUrl" alt="logo-RAJD" />
              <span class="ml-3 text-xl font-medium text-white">
                {{ appName }} {{ appVersion }}
              </span>
            </a>
            <div class="my-auto">
              <img class="-mt-16 w-1/2" :src="illustrationUrl" alt="logo-RAJD" />
            </div>
          </div>

          <div class="my-10 flex min-h-screen py-5 xl:my-0 xl:min-h-0 xl:h-auto xl:py-0">
            <Box raised="double"
              class="mx-auto my-auto w-full px-5 py-8 sm:w-3/4 sm:px-8 lg:w-2/4 xl:ml-24 xl:w-auto xl:p-0 xl:before:hidden xl:after:hidden xl:shadow-none xl:border-none xl:bg-none">
              <h2 class="text-center text-2xl font-semibold xl:text-left xl:text-3xl">
                Akaun Menunggu Pengaktifan
              </h2>
              <p class="mt-2 text-center text-sm opacity-70 xl:text-left">
                Halo{{ authStore.userName ? `, ${authStore.userName}` : '' }}.
              </p>

              <AlertRoot class="mt-8" variant="primary">
                <AlertTitle>E-mel disahkan</AlertTitle>
                <AlertDescription>
                  Akaun anda sedang menunggu pengaktifan daripada pentadbir sistem. Anda akan dapat
                  mengakses sistem selepas akaun diaktifkan.
                </AlertDescription>
              </AlertRoot>

              <div class="mt-8 flex flex-col gap-4">
                <Button class="box w-full px-4 py-5" variant="primary" type="button" :disabled="checkingStatus"
                  @click="checkActivationStatus">
                  {{ checkingStatus ? 'Checking...' : 'Semak Status' }}
                </Button>
                <Button class="box w-full px-4 py-5" look="outline" type="button" :disabled="loggingOut"
                  @click="handleLogout">
                  {{ loggingOut ? 'Logging out...' : 'Log Keluar' }}
                </Button>
              </div>
            </Box>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
