<template>
  <button
    :class="['nav-item', { active: isActive }]"
    :data-collapsed="collapsed ? 'true' : 'false'"
    @click="$emit('select', item.key)"
    :aria-label="item.label"
    :aria-current="isActive ? 'page' : undefined"
    @mouseenter="isHovering = true"
    @mouseleave="isHovering = false"
  >
    <span class="nav-icon" v-html="item.icon"></span>
    <span v-show="!collapsed" class="nav-label">{{ item.label }}</span>

    <span v-if="collapsed && isHovering" class="nav-tooltip">
      {{ item.label }}
    </span>
  </button>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  active: {
    type: Boolean,
    default: false
  },
  collapsed: {
    type: Boolean,
    default: false
  }
})

defineEmits(['select'])

const isHovering = ref(false)

const isActive = computed(() => props.active)
</script>

<style scoped>
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--sidebar-nav-item-height);
  padding: 0 12px;
  margin: 4px auto;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-nav-item) var(--radius-nav-item) 0;
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  width: calc(100% - 16px);
}

.nav-item[data-collapsed="true"] {
  padding: 0;
  margin: 4px auto;
  justify-content: center;
  width: calc(var(--sidebar-collapsed-width) - 16px);
  border-radius: var(--radius-nav-item);
}

.nav-item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-primary);
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(33, 37, 41, 0.04) 0%, transparent 100%);
  border-left-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 500;
}

.nav-indicator {
  display: none;
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nav-icon :deep(svg) {
  width: 100%;
  height: 100%;
}

.nav-label {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-tooltip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 12px;
  background: rgba(26, 26, 46, 0.92);
  color: #ffffff;
  font-size: 13px;
  border-radius: var(--radius-tooltip);
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: rgba(26, 26, 46, 0.92);
}
</style>