<template>
  <UDashboardSidebar
    v-model:open="open"
    v-model:collapsed="collapsed"
    collapsible
    resizable
    :default-size="28"
    :min-size="20"
    :max-size="38"
    :toggle="{ color: 'primary', variant: 'subtle', class: 'rounded-full' }"
  >
    <template #header="{ collapsed: isCollapsed }">
      <div class="flex items-center gap-2">
        <img
          v-if="!isCollapsed"
          src="/logo.png"
          alt="Analítica Núcleo"
          class="h-8 w-8 rounded-full border border-[#ffe0a0]/40"
        />
        <UIcon v-else name="i-lucide-activity" class="size-5 text-[#ffe0a0]" />
        <span v-if="!isCollapsed" class="text-sm font-semibold text-[var(--brand-text)]">Analítica Núcleo</span>
      </div>
    </template>

    <template #default="{ collapsed: isCollapsed }">
      <UButton
        :label="isCollapsed ? undefined : 'Buscar...'"
        icon="i-lucide-search"
        color="neutral"
        variant="outline"
        block
        :square="isCollapsed"
        class="mb-4"
      >
        <template v-if="!isCollapsed" #trailing>
          <div class="flex items-center gap-0.5 ms-auto text-[var(--brand-text-muted)]">
            <UKbd value="⌘" variant="subtle" />
            <UKbd value="K" variant="subtle" />
          </div>
        </template>
      </UButton>

      <UNavigationMenu
        :collapsed="isCollapsed"
        :items="navigationPrimary"
        orientation="vertical"
        class="gap-1"
      />

      <UNavigationMenu
        :collapsed="isCollapsed"
        :items="navigationSecondary"
        orientation="vertical"
        class="mt-auto gap-1"
      />
    </template>

    <template #footer="{ collapsed: isCollapsed }">
      <UButton
        :avatar="{ src: 'https://avatars.githubusercontent.com/u/12011070?v=4' }"
        :label="isCollapsed ? undefined : 'Equipo Núcleo'"
        color="neutral"
        variant="ghost"
        class="w-full justify-start"
        :block="isCollapsed"
      >
        <template #trailing>
          <UIcon name="i-lucide-log-out" class="size-4" />
        </template>
      </UButton>
    </template>
  </UDashboardSidebar>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import type { NavigationMenuItem } from '@nuxt/ui'

const route = useRoute()

const open = defineModel<boolean>('open', { default: true })
const collapsed = defineModel<boolean>('collapsed', { default: false })

const navigationPrimary = computed<NavigationMenuItem[]>(() => [
  {
    label: 'Inicio',
    icon: 'i-lucide-home',
    to: '/',
    active: route.path === '/'
  },
  {
    label: 'Panorama Facturador',
    icon: 'i-lucide-bar-chart-3',
    to: '/panorama',
    active: route.path === '/panorama'
  },
  {
    label: 'Informe Ingresos',
    icon: 'i-lucide-file-bar-chart',
    to: '/informe-ingresos',
    active: route.path === '/informe-ingresos'
  },
  {
    label: 'Comparativa Cosechas',
    icon: 'i-lucide-calendar-range',
    to: '/comparativa-cosechas',
    active: route.path === '/comparativa-cosechas'
  },
  {
    label: 'Explorador de datos',
    icon: 'i-lucide-table',
    to: '/explorer',
    active: route.path === '/explorer'
  },
  {
    label: 'Metadatos',
    icon: 'i-lucide-database',
    to: '/metadatos',
    active: route.path === '/metadatos'
  },
  {
    label: 'Explorador de datos raw',
    icon: 'i-lucide-table',
    to: '/rawExplorer',
    active: route.path === '/rawExplorer'
  }
])

const navigationSecondary: NavigationMenuItem[] = [
  {
    label: 'Documentación',
    icon: 'i-lucide-book-open',
    to: 'https://ui.nuxt.com',
    target: '_blank'
  },
  {
    label: 'Repositorio',
    icon: 'i-lucide-github',
    to: 'https://gitea.nucleoriofrio.com/nucleo000/analiticaNucleo',
    target: '_blank'
  }
]
</script>
