<script setup lang="ts">
import type { DropdownMenuItem } from '@nuxt/ui'
import { useForm } from '@inertiajs/vue3'
import Logo from '@/components/common/Logo.vue'
import { useAuth } from '@/composables/useAuth'

const { user } = useAuth()

const logoutForm = useForm({})

function logout() {
  logoutForm.post('/logout')
}

const sidebarLinks = [
  {
    label: 'Dashboard',
    icon: 'i-lucide-house',
    to: '/dashboard',
  },
]

const userMenuItems: DropdownMenuItem[][] = [
  [
    {
      label: 'Profile',
      icon: 'i-lucide-user-round',
      to: '/profile',
    },
  ],
  [
    {
      label: 'Sign out',
      icon: 'i-lucide-log-out',
      color: 'error',
      onSelect: logout,
    },
  ],
]
</script>

<template>
  <UApp>
    <UDashboardGroup>
      <UDashboardSidebar collapsible>
        <template #header>
          <Logo :link-to-home="false" size="sm" />
        </template>

        <UNavigationMenu :items="sidebarLinks" orientation="vertical" />

        <template #footer>
          <UDropdownMenu
            :items="userMenuItems"
            :content="{ align: 'start', side: 'top', sideOffset: 8 }"
            :ui="{ content: 'w-64' }"
          >
            <UButton
              color="neutral"
              variant="ghost"
              class="w-full justify-start px-2 py-2"
              aria-label="Open user menu"
              :loading="logoutForm.processing"
            >
              <UAvatar :alt="user?.full_name" size="sm" />
              <span class="min-w-0 flex-1 text-left">
                <span class="block truncate text-sm font-medium text-highlighted">
                  {{ user?.full_name }}
                </span>
                <span class="block truncate text-xs font-normal text-muted">
                  {{ user?.email }}
                </span>
              </span>
              <UIcon
                name="i-lucide-chevrons-up-down"
                class="size-4 shrink-0 text-muted"
              />
            </UButton>
          </UDropdownMenu>
        </template>
      </UDashboardSidebar>

      <slot />
    </UDashboardGroup>
  </UApp>
</template>
