<template>
  <UDashboardSidebar
    v-model:open="open"
    v-model:collapsed="collapsed"
    collapsible
    resizable
    :default-size="28"
    :min-size="20"
    :max-size="38"
    :toggle="{ color: 'neutral', variant: 'ghost', class: 'rounded-full hover:bg-[var(--brand-primary)]/10 text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)]' }"
    :ui="{
      root: 'bg-[var(--brand-surface)] border-r border-[var(--brand-border)]'
    }"
  >
    <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-[var(--brand-accent)]/40"
        />
        <UIcon v-else name="i-lucide-activity" class="size-5 text-[var(--brand-accent)]" />
        <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 border-[var(--brand-border)] bg-[var(--brand-bg)]/50 hover:bg-[var(--brand-primary)]/10 hover:border-[var(--brand-primary)]/30 text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)]"
      >
        <template v-if="!isCollapsed" #trailing>
          <div class="flex items-center gap-0.5 ms-auto text-[var(--brand-text-muted)]">
            <UKbd value="⌘" variant="subtle" class="bg-[var(--brand-surface)] border-[var(--brand-border)] text-[var(--brand-text-muted)]" />
            <UKbd value="K" variant="subtle" class="bg-[var(--brand-surface)] border-[var(--brand-border)] text-[var(--brand-text-muted)]" />
          </div>
        </template>
      </UButton>

      <UNavigationMenu
        :collapsed="isCollapsed"
        :items="navigationPrimary"
        orientation="vertical"
        class="gap-1"
        :ui="{
          item: {
            base: 'hover:text-[var(--brand-primary)] hover:bg-[var(--brand-primary)]/10',
            active: 'bg-[var(--brand-success)]/15 text-[var(--brand-success)] border-l-2 border-[var(--brand-success)] font-medium',
            inactive: 'text-[var(--brand-text-muted)] border-l-2 border-transparent'
          }
        }"
      />

    </template>

    <template #footer="{ collapsed: isCollapsed }">
      <div v-if="isAuthenticated" class="space-y-3">
        <!-- User Profile Section -->
        <div
          v-if="!isCollapsed"
          class="p-0 space-y-2"
        >
          <!-- User Info Card -->
          <div class="px-3 py-2.5 bg-gradient-to-br from-[var(--brand-surface)] to-transparent rounded-lg border border-[var(--brand-border)]/60">
            <div class="flex items-center gap-3">
              <div class="relative flex-shrink-0">
                <UAvatar
                  v-bind="userAvatar"
                  size="md"
                  :ui="{
                    wrapper: 'ring-2 ring-[var(--brand-primary)]/50 shadow-sm'
                  }"
                />
                <span
                  class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-[var(--brand-accent)] border-2 border-[var(--brand-surface)] rounded-full shadow-sm"
                  title="En línea"
                />
              </div>
              <div class="flex-1 min-w-0">
                <p class="font-semibold text-sm text-[var(--brand-text)] truncate leading-tight">
                  {{ user.name || user.username }}
                </p>
                <p class="text-xs text-[var(--brand-text-muted)] truncate mt-0.5">
                  {{ user.email }}
                </p>
              </div>
            </div>
          </div>

          <!-- Quick Actions -->
          <div class="space-y-1">
            <UButton
              to="https://inicio.nucleoriofrio.com"
              color="neutral"
              variant="ghost"
              size="sm"
              block
              class="justify-start gap-2.5 hover:bg-[var(--brand-primary)]/10 transition-all duration-300 hover:shadow-sm"
              :ui="{
                rounded: 'rounded-lg',
                padding: { sm: 'px-2.5 py-2' }
              }"
            >
              <template #leading>
                <div class="w-7 h-7 rounded-md bg-[var(--brand-surface)] flex items-center justify-center flex-shrink-0 relative overflow-hidden shadow-sm border border-[var(--brand-border)]">
                  <img
                    src="/perfil-icon.png"
                    alt="Perfil"
                    class="w-4 h-4 absolute inset-0 m-auto object-cover rounded-sm opacity-90"
                    @error="handlePerfilIconError"
                  />
                  <UIcon name="i-lucide-home" class="size-3.5 text-[var(--brand-primary)] opacity-0" />
                </div>
              </template>
              <span class="text-sm font-medium text-[var(--brand-text)]">Inicio</span>
            </UButton>

            <UButton
              to="/settings"
              color="neutral"
              variant="ghost"
              size="sm"
              block
              class="justify-start gap-2.5 hover:bg-[var(--brand-primary)]/10 transition-all duration-200"
              :ui="{
                rounded: 'rounded-lg',
                padding: { sm: 'px-2.5 py-2' }
              }"
            >
              <template #leading>
                <div class="w-7 h-7 rounded-md bg-[var(--brand-surface)] flex items-center justify-center flex-shrink-0">
                  <UIcon name="i-lucide-settings" class="size-3.5 text-[var(--brand-text-muted)]" />
                </div>
              </template>
              <span class="text-sm font-medium text-[var(--brand-text)]">Configuración</span>
            </UButton>

            <UButton
              to="/notifications"
              color="neutral"
              variant="ghost"
              size="sm"
              block
              class="justify-start gap-2.5 hover:bg-[var(--brand-primary)]/10 transition-all duration-200"
              :ui="{
                rounded: 'rounded-lg',
                padding: { sm: 'px-2.5 py-2' }
              }"
            >
              <template #leading>
                <div class="w-7 h-7 rounded-md bg-[var(--brand-surface)] flex items-center justify-center relative flex-shrink-0">
                  <UIcon name="i-lucide-bell" class="size-3.5 text-[var(--brand-primary)]" />
                  <span v-if="unreadCount > 0" class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-[var(--brand-accent)] rounded-full ring-1 ring-[var(--brand-surface)]" />
                </div>
              </template>
              <span class="text-sm font-medium text-[var(--brand-text)]">Notificaciones</span>
              <template v-if="unreadCount > 0" #trailing>
                <UBadge color="neutral" variant="solid" size="xs" class="ml-auto bg-[var(--brand-accent)] text-[var(--brand-bg)]">{{ unreadCount }}</UBadge>
              </template>
            </UButton>

            <div class="pt-2 mt-1.5 border-t border-[var(--brand-border)]">
              <UButton
                color="neutral"
                variant="ghost"
                size="sm"
                block
                class="justify-start gap-2.5 hover:bg-[var(--brand-primary)]/10 transition-all duration-200 group"
                :ui="{
                  rounded: 'rounded-lg',
                  padding: { sm: 'px-2.5 py-2' }
                }"
                @click="logout"
              >
                <template #leading>
                  <div class="w-7 h-7 rounded-md bg-[var(--brand-surface)] flex items-center justify-center flex-shrink-0 group-hover:bg-[var(--brand-border)] transition-colors">
                    <UIcon name="i-lucide-log-out" class="size-3.5 text-[var(--brand-primary)]" />
                  </div>
                </template>
                <span class="text-sm font-medium text-[var(--brand-primary)]">Cerrar sesión</span>
              </UButton>
            </div>
          </div>
        </div>

        <!-- Collapsed View -->
        <div v-else class="flex flex-col items-center gap-3">
          <div class="relative group">
            <UButton
              color="neutral"
              variant="ghost"
              square
              class="relative hover:bg-[var(--brand-primary)]/10 transition-all duration-200"
              :ui="{ rounded: 'rounded-lg' }"
            >
              <div class="relative">
                <UAvatar
                  v-bind="userAvatar"
                  size="sm"
                  :ui="{
                    wrapper: 'ring-2 ring-[var(--brand-primary)]/40 group-hover:ring-[var(--brand-primary)]/60 transition-all duration-200 shadow-sm'
                  }"
                />
                <span
                  class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-[var(--brand-accent)] border-2 border-[var(--brand-surface)] rounded-full shadow-sm"
                />
              </div>
            </UButton>
          </div>

          <div class="w-full h-px bg-[var(--brand-border)]" />

          <UButton
            @click="logout"
            color="neutral"
            variant="ghost"
            square
            class="hover:bg-[var(--brand-primary)]/10 transition-all duration-200"
            :ui="{ rounded: 'rounded-lg' }"
          >
            <UIcon name="i-lucide-log-out" class="size-4 text-[var(--brand-primary)]" />
          </UButton>
        </div>
      </div>
    </template>
  </UDashboardSidebar>
</template>

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

const route = useRoute()

// Usar el composable unificado para el estado de la sidebar
const sidebarState = useSidebarState()

// Exponer como models para compatibilidad con UDashboardSidebar
const open = computed({
  get: () => sidebarState.open.value,
  set: (value: boolean) => sidebarState.setOpen(value)
})

const collapsed = computed({
  get: () => sidebarState.collapsed.value,
  set: (value: boolean) => sidebarState.setCollapsed(value)
})

// Manejo del fallback de iconos para el botón Inicio
const perfilIconFallbackIndex = ref(0)
const perfilIconSources = [
  '/perfil-icon.png',
  'https://inicio.nucleoriofrio.com/apple-touch-icon.png',
  'https://inicio.nucleoriofrio.com/favicon.ico'
]

const handlePerfilIconError = (event: Event) => {
  const img = event.target as HTMLImageElement
  perfilIconFallbackIndex.value++

  if (perfilIconFallbackIndex.value < perfilIconSources.length) {
    img.src = perfilIconSources[perfilIconFallbackIndex.value]
  } else {
    // Si todos los iconos fallan, mostrar el icono de casa
    img.style.display = 'none'
    const icon = img.nextElementSibling as HTMLElement
    if (icon) {
      icon.style.opacity = '1'
    }
  }
}

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: 'Metabase Debug',
    icon: 'i-lucide-bug',
    to: '/metabase-debug',
    active: route.path === '/metabase-debug'
  }
])

const { user, isAuthenticated, logout } = useAuthentik()

// Obtener el contador de notificaciones no leídas
const { unreadCount } = useNotifications()

// Computed para el avatar del usuario
const userAvatar = computed(() => ({
  src: user.value?.avatar || `https://ui-avatars.com/api/?name=${encodeURIComponent(user.value?.name || user.value?.username || 'User')}&background=c08040&color=1b1209&bold=true&format=svg`,
  alt: user.value?.name || user.value?.username || 'User'
}))
</script>
