<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { API } from '@/Api'
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@/components/ui/dropdown-menu'
import { SidebarMenuButton } from '@/components/ui/sidebar'

type CurrentUser = {
  login: string
  displayName: string
  email: string
  hasWriteAccess: boolean
}

const props = defineProps<{ sidebarOpen: boolean }>()

const emit = defineEmits<{
  (e: 'view-admin-settings'): void
}>()

const user = ref<CurrentUser | null>(null)
const loading = ref(false)

onMounted(async () => {
  loading.value = true
  try {
    const { data } = await API.getCurrentUser()
    user.value = data
  } finally {
    loading.value = false
  }
})

const initials = computed(() => {
  const name = user.value?.displayName || user.value?.login || ''
  const parts = name.trim().split(/\s+/).filter(Boolean)
  const first = parts[0]?.[0] ?? ''
  const last = parts.length > 1 ? parts[parts.length - 1][0] : ''
  return (first + last).toUpperCase() || 'U'
})
/*
function goSettings() {
  router.push({ name: 'Settings' })
}*/
function goAdmin() {
  emit('view-admin-settings')
}
</script>

<template>
  <!-- remove this if when settings are available -->
  <div v-if="user?.hasWriteAccess" class="admin-sidebar-footer">
    <DropdownMenu>
      <DropdownMenuTrigger as-child>
        <SidebarMenuButton
          class="h-12 data-[state=open]:bg-admin-sidebar-selected !rounded-none"
          :class="
            props.sidebarOpen
              ? 'px-3'
              : 'justify-center group-data-[collapsible=icon]:!w-full group-data-[collapsible=icon]:!h-full'
          "
        >
          <div
            class="flex items-center w-full min-w-0"
            :class="props.sidebarOpen ? 'gap-3' : 'justify-center'"
          >
            <div
              class="flex items-center justify-center rounded-full bg-black text-white font-semibold uppercase flex-shrink-0"
              :class="props.sidebarOpen ? 'h-8 w-8 text-sm' : 'h-8 w-8 text-sm'"
              :title="user?.displayName || user?.login || 'User'"
            >
              {{ initials }}
            </div>

            <template v-if="props.sidebarOpen">
              <div class="flex-1 min-w-0 text-left">
                <div class="truncate text-[12px] font-medium text-[#18181B]">
                  {{ user?.displayName || (loading ? 'Loading…' : 'User') }}
                </div>
                <div v-if="user?.hasWriteAccess" class="text-[10px] text-[#71717A]">Admin</div>
              </div>

              <i class="dku-icon-chevron-down-16 admin-text-muted flex-shrink-0"></i>
            </template>
          </div>
        </SidebarMenuButton>
      </DropdownMenuTrigger>

      <DropdownMenuContent
        :side="props.sidebarOpen ? 'top' : 'right'"
        :align="props.sidebarOpen ? 'start' : 'center'"
        :alignOffset="6"
        :sideOffset="props.sidebarOpen ? 4 : 6"
        class="bg-white shadow-lg border-admin-border-default min-w-[240px] p-0"
        :class="!props.sidebarOpen ? '-translate-y-2' : ''"
      >
        <div
          v-if="user?.email"
          class="flex cursor-default items-center gap-2 px-3 py-2 text-sm outline-hidden select-none admin-text-muted border-b border-admin-border-default"
        >
          <i class="dku-icon-person-16" />
          <span class="truncate">{{ user?.email }}</span>
        </div>
        <!-- settings are not yet implemented
        <DropdownMenuItem
          @click="goSettings"
          class="cursor-pointer data-[highlighted]:bg-admin-bg-hover px-3 py-2 admin-text-primary"
        >
          <i class="dku-icon-person-settings-16 mr-2" /> Settings
        </DropdownMenuItem> -->

        <DropdownMenuItem
          v-if="user?.hasWriteAccess"
          @click="goAdmin"
          class="cursor-pointer data-[highlighted]:bg-admin-bg-hover px-3 py-2 admin-text-primary"
        >
          <i class="dku-icon-gear-16 mr-2" /> Admin settings
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  </div>
</template>

<style scoped>
.h-12 {
  height: 3rem;
}

[data-sidebar='menu-button'][data-state='open'] {
  background-color: var(--admin-sidebar-selected) !important;
}

[data-sidebar='menu-button'] {
  border-radius: 0 !important;
}
</style>
