<script setup>
import { ref, watch, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useUi }   from '@/stores/useUi'

const ui = useUi()

// enlaces de la app
const links = [
  { to: '/',            label: 'Chat',        icon: '💬' },
  { to: '/empleados',   label: 'Empleados',   icon: '👥' },
  { to: '/tareas',      label: 'Tareas',      icon: '📋' },
  { to: '/planillas',   label: 'Planillas',   icon: '📂' },
  { to: '/asistencias', label: 'Asistencias', icon: '⏰' },
  { to: '/config',      label: 'Config',      icon: '⚙️' },
]

const route = useRoute()
const activePath = ref(route.path)
watch(route, v => (activePath.value = v.path))

// clases dinámicas p/ mostrar / ocultar barra
const sidebarClasses = computed(() => ui.sidebarOpen ? 'translate-x-0' : '-translate-x-full')

const handleLinkClick = () => {
  // Close sidebar if desktopNavbarPersistent is false or if it's mobile view (width < 768px)
  // Assuming 768px is the 'md' breakpoint.
  if (!ui.desktopNavbarPersistent || window.innerWidth < 768) {
    ui.closeSidebar()
  }
  // Otherwise, (desktopNavbarPersistent is true AND width >= 768px), do nothing to keep sidebar open.
}
</script>

<template>
  <!-- backdrop en mobile -->
  <div v-if="ui.sidebarOpen" class="fixed inset-0 bg-black/40 md:hidden" @click="ui.closeSidebar" />

  <!-- barra lateral -->
  <aside
    :class="['fixed left-0 top-0 md:top-14 h-screen w-60 flex flex-col select-none z-50 transform transition-transform duration-200 ease-in-out', sidebarClasses]"
    style="background-color: var(--background-color); border-right-color: var(--secondary-color); border-right-width: 1px;">

    <!-- encabezado dentro de sidebar -->
    <div class="flex items-center justify-between px-4 py-4 md:px-5 md:py-4 md:border-none"
         style="border-bottom-color: var(--secondary-color); border-bottom-width: 1px;">
      <span class="text-lg font-semibold md:hidden" style="color: var(--primary-color);">Núcleo</span>
      <button class="h-8 w-8 inline-flex items-center justify-center text-gray-500"
              :style="{ color: 'var(--primary-color)' }"
              @mouseover="($event.target.style.color = 'var(--primary-color)')"
              @mouseleave="($event.target.style.color = 'var(--secondary-color)')"
              @click="ui.toggleSidebar">
        ✕
      </button>
    </div>

    <!-- navegación -->
    <nav class="flex-1 overflow-y-auto custom-scroll pr-1 pt-4 md:pt-0">
      <ul class="space-y-1 px-2">
        <li v-for="l in links" :key="l.to">
          <RouterLink
            :to="l.to"
            class="nav-link flex items-center gap-3 w-full px-3 py-2 rounded-md font-medium transition group"
            :class="activePath.startsWith(l.to) ? 'active' : ''"
            @click="handleLinkClick"
          >
            <span class="text-lg" aria-hidden="true">{{ l.icon }}</span>
            <span class="truncate">{{ l.label }}</span>
          </RouterLink>
        </li>
      </ul>
    </nav>
  </aside>
</template>

<style scoped>
ul { list-style: none; padding-left: 0; }

.nav-link {
  color: var(--text-color); /* Default text color */
}

.nav-link:hover {
  background-color: var(--secondary-color);
  color: var(--primary-color); /* Text color on hover */
}

.nav-link.active {
  background-color: var(--primary-color);
  color: white; /* Assuming primary color is dark enough for white text */
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); /* Tailwind shadow-sm equivalent */
}

/* Scrollbar styling using primary color */
.custom-scroll::-webkit-scrollbar { width: 8px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  opacity: 0.4;
  border-radius: 4px;
}
.custom-scroll:hover::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  opacity: 0.7;
}
.custom-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) transparent; /* scrollbar-color: <thumb-color> <track-color> */
}
</style>
