<template>
  <nav
    class="icon-nav"
    :class="{ 'icon-nav--collapsed': collapsed }"
    role="navigation"
    aria-label="功能导航"
  >
    <div class="icon-nav__items">
      <a-tooltip
        v-for="item in navItems"
        :key="item.key"
        :title="item.label"
        placement="right"
      >
        <button
          class="icon-nav__item"
          :class="{ 'icon-nav__item--active': activeKey === item.key }"
          :aria-label="item.label"
          :aria-current="activeKey === item.key ? 'page' : undefined"
          @click="handleClick(item)"
        >
          <component :is="item.icon" class="icon-nav__icon" />
        </button>
      </a-tooltip>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { ref, type Component } from 'vue'
import { Tooltip as ATooltip } from 'ant-design-vue'
import {
  MessageOutlined,
  ApartmentOutlined,
  BookOutlined,
  AppstoreOutlined,
  DashboardOutlined,
  SettingOutlined,
} from '@ant-design/icons-vue'

interface NavItem {
  key: string
  label: string
  icon: Component
  panel: 'chat' | 'tr' | 'br'
  tab?: string
}

withDefaults(defineProps<{
  collapsed?: boolean
}>(), {
  collapsed: false,
})

const emit = defineEmits<{
  navigate: [panel: string, tab?: string]
}>()

const navItems: NavItem[] = [
  { key: 'chat', label: '对话', icon: MessageOutlined as Component, panel: 'chat' },
  { key: 'workflow', label: '工作流', icon: ApartmentOutlined as Component, panel: 'tr', tab: 'workflow' },
  { key: 'knowledge', label: '知识库', icon: BookOutlined as Component, panel: 'tr', tab: 'knowledge' },
  { key: 'skills', label: '技能', icon: AppstoreOutlined as Component, panel: 'br', tab: 'skills' },
  { key: 'monitor', label: '监控', icon: DashboardOutlined as Component, panel: 'br', tab: 'monitor' },
  { key: 'settings', label: '设置', icon: SettingOutlined as Component, panel: 'br', tab: 'settings' },
]

const savedActive = localStorage.getItem('icon-nav-active') || 'chat'
const activeKey = ref(savedActive)

function handleClick(item: NavItem) {
  activeKey.value = item.key
  localStorage.setItem('icon-nav-active', item.key)
  emit('navigate', item.panel, item.tab)
}
</script>

<style scoped>
.icon-nav {
  display: flex;
  flex-direction: column;
  width: 52px;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-color-split);
  flex-shrink: 0;
  transition: width var(--transition-normal), opacity var(--transition-fast);
  overflow: hidden;
}

.icon-nav--collapsed {
  width: 0;
  border-right: none;
}

.icon-nav__items {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3) 0;
  gap: var(--space-1);
}

.icon-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.icon-nav__item:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.icon-nav__item--active {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* Active indicator bar — slides in from left */
.icon-nav__item--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  animation: indicatorSlideIn 0.2s ease-out;
}

@keyframes indicatorSlideIn {
  from { height: 0; opacity: 0; }
  to { height: 20px; opacity: 1; }
}

.icon-nav__icon {
  font-size: 18px;
}
</style>
