<script setup lang="ts">
import { useRouter } from 'vue-router'
import { Box } from '@/components/ui/box'
import { Lucide } from '@/components/ui/lucide'
import {
  ComboboxRoot,
  ComboboxControl,
  ComboboxTrigger,
  ComboboxContent,
  ComboboxItemGroup,
  ComboboxItem,
  ComboboxItemText,
} from '@/components/ui/combobox'
import { logout } from '@/modules/auth'
import { useImpersonate } from '@/modules/user/composables/useImpersonate'
import { useAuthStore } from '@/stores/auth'
import { useRoleSwitcher } from '@/composables/useRoleSwitcher'

interface Props {
  class?: string
  boxClass?: string
}

const props = defineProps<Props>()
const router = useRouter()
const authStore = useAuthStore()

const {
  canSwitchRole,
  roleCollection,
  roleComboValue,
  switchingRole,
  onRoleValueChange,
  onRoleInputValueChange,
} = useRoleSwitcher()

const { impersonating, loading: impersonateLoading, stopImpersonation } = useImpersonate()

const goToProfile = (event: MouseEvent) => {
  event.preventDefault()
  router.push({ name: 'profile-overview-2' })
}

const handleLogout = async (event: MouseEvent) => {
  event.preventDefault()

  if (impersonating.value || impersonateLoading.value) {
    return
  }

  try {
    await logout()
  } catch {
    // Still redirect to login if the session is already invalid.
  }

  authStore.clearSession()
  await router.push({ name: 'login' })
}
</script>

<template>
  <div v-bind="$attrs" :class="[
    'invisible opacity-0 scale-95 transition-all duration-200 delay-0 group-hover/profile:visible group-hover/profile:opacity-100 group-hover/profile:scale-100 group-hover/profile:delay-200',
    props.class,
  ]">
    <Box
      :class="`text-foreground before:shadow-foreground/5 flex w-64 flex-col gap-2.5 px-6 py-5 before:rounded-2xl before:shadow-xl before:backdrop-blur after:rounded-2xl ${props.boxClass ?? ''}`">
      <div class="flex flex-col gap-0.5">
        <div class="font-medium">
          Selamat Datang, {{ authStore.userName }}
        </div>
        <div v-if="authStore.userActiveRole" class="text-xs opacity-70">
          {{ authStore.userActiveRole }}
        </div>
      </div>

      <template v-if="canSwitchRole">
        <div class="bg-foreground/5 h-px"></div>
        <div class="flex flex-col gap-1.5">
          <div class="text-xs font-medium opacity-70">Tukar Peranan</div>
          <ComboboxRoot class="w-full" :collection="roleCollection" :value="roleComboValue"
            :disabled="switchingRole || authStore.loading" @value-change="onRoleValueChange"
            @input-value-change="onRoleInputValueChange">
            <ComboboxControl>
              <ComboboxTrigger class="w-full" />
            </ComboboxControl>
            <ComboboxContent class="w-(--reference-width)">
              <ComboboxItemGroup>
                <ComboboxItem v-for="item in roleCollection.items" :key="item.value" :item="item">
                  <ComboboxItemText>{{ item.label }}</ComboboxItemText>
                </ComboboxItem>
              </ComboboxItemGroup>
            </ComboboxContent>
          </ComboboxRoot>
        </div>
      </template>

      <div class="bg-foreground/5 h-px"></div>

      <div class="flex flex-col gap-0.5">
        <a class="hover:bg-foreground/5 -mx-3 flex gap-2.5 rounded-lg px-4 py-1.5" href="" @click="goToProfile">
          <Lucide icon="Users" /> Profil
        </a>
      </div>

      <div class="bg-foreground/5 h-px"></div>

      <div class="flex flex-col gap-0.5">
        <a v-if="impersonating" href="" class="hover:bg-foreground/5 -mx-3 flex gap-2.5 rounded-lg px-4 py-1.5"
          :class="{ 'pointer-events-none opacity-50': impersonateLoading }" @click.prevent="stopImpersonation">
          <Lucide icon="VenetianMask" /> Keluar Penyamaran
        </a>
        <a class="hover:bg-foreground/5 -mx-3 flex gap-2.5 rounded-lg px-4 py-1.5"
          :class="(impersonating || impersonateLoading) && 'pointer-events-none cursor-not-allowed opacity-40'" href=""
          :aria-disabled="impersonating || impersonateLoading" @click="handleLogout">
          <Lucide icon="Power" /> Log Keluar
        </a>
      </div>
    </Box>
  </div>
</template>
