<template>
  <aside class="rail" :class="{ 'rail-collapsed': collapsed }" aria-label="主导航">
    <div class="rail-brand">
      <div class="brand-mark" aria-hidden="true">
        <img v-if="companyLogo" :src="companyLogo" alt="System Logo" class="custom-logo" />
        <svg v-else viewBox="0 0 36 36">
          <path d="M19.8 4.5c5.7 1.1 9.9 5.7 10.5 11.6-2.8-.9-5.5-.7-7.9.6-2.8 1.5-4.5 4.3-5.2 8.2-4.4-2.8-6.5-6.5-6.3-11.1.2-4.2 3.5-7.8 8.9-9.3Z" />
          <path d="M9 7.6c-3 3.5-4 7.3-2.9 11.2 1.2 4.2 4.6 7 10.1 8.5-2 1.8-4.6 2.6-7.6 2.3C5.1 26.7 3.5 23.1 3.7 19 4 14.4 5.7 10.6 9 7.6Z" />
        </svg>
      </div>
      <strong class="brand-name">{{ displayCompanyName }}</strong>
      <ElTooltip
        :content="collapseTooltipContent"
        placement="right"
        effect="light"
        :show-after="180"
        :hide-after="0"
        :offset="12"
        popper-class="rail-tooltip-popper"
      >
        <button
          class="rail-collapse-btn"
          type="button"
          :aria-label="collapseTooltipContent"
          :aria-expanded="!collapsed"
          @click="emit('toggle-collapse')"
        >
          <i :class="collapsed ? 'mdi mdi-chevron-right' : 'mdi mdi-chevron-left'"></i>
        </button>
      </ElTooltip>
    </div>

    <nav class="rail-nav" aria-label="功能导航">
      <ElTooltip
        v-for="item in decoratedNavItems"
        :key="item.id"
        :content="item.displayLabel"
        placement="right"
        effect="light"
        :disabled="!collapsed"
        :show-after="180"
        :hide-after="0"
        :offset="12"
        popper-class="rail-tooltip-popper"
      >
        <button
          class="nav-btn"
          :class="{ active: activeView === item.id }"
          type="button"
          @mouseenter="emit('prefetch-view', item.id)"
          @focus="emit('prefetch-view', item.id)"
          @click="emit('navigate', item.id)"
        >
          <span class="nav-icon" v-html="item.icon"></span>
          <span class="nav-label">{{ item.displayLabel }}</span>
          <span v-if="item.badge" class="nav-badge">{{ item.badge }}</span>
        </button>
      </ElTooltip>
    </nav>

    <section class="rail-user" aria-label="当前用户">
      <div class="user-avatar" aria-hidden="true">{{ displayUser.avatar }}</div>
      <div class="user-copy">
        <strong>{{ displayUser.name }}</strong>
        <span>{{ displayUser.subtitle }}</span>
      </div>
      <div class="user-actions" aria-label="用户操作">
        <button type="button" class="user-action user-logout" aria-label="退出系统" @click="emit('logout')">
          <i class="mdi mdi-logout-variant" aria-hidden="true"></i>
        </button>
      </div>
    </section>
  </aside>
</template>

<script setup>
import { ElTooltip } from 'element-plus/es/components/tooltip/index.mjs'
import { computed } from 'vue'

const props = defineProps({
  navItems: { type: Array, required: true },
  activeView: { type: String, required: true },
  companyName: {
    type: String,
    default: ''
  },
  companyLogo: {
    type: String,
    default: ''
  },
  currentUser: {
    type: Object,
    default: () => ({
      name: '系统管理员',
      role: '管理员',
      avatar: '管'
    })
  },
  collapsed: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['navigate', 'openChat', 'logout', 'toggle-collapse', 'prefetch-view'])

const sidebarMeta = {
  overview: { label: '分析看板' },
  workbench: { label: '个人工作台' },
  documents: { label: '单据中心' },
  budget: { label: '预算编制' },
  policies: { label: '财务政策' },
  audit: { label: '规则管理' },
  digitalEmployees: { label: '数字员工' },
  employees: { label: '员工管理' },
  settings: { label: '系统设置' }
}

const decoratedNavItems = computed(() =>
  props.navItems.map((item) => ({
    ...item,
    displayLabel: sidebarMeta[item.id]?.label ?? item.label,
    badge: sidebarMeta[item.id]?.badge
  }))
)


const displayUser = computed(() => ({
  name: props.currentUser?.name || '系统管理员',
  subtitle:
    props.currentUser?.email ||
    (props.currentUser?.username && props.currentUser?.username !== props.currentUser?.name ? props.currentUser.username : '') ||
    props.currentUser?.role ||
    '管理员',
  avatar: props.currentUser?.avatar || String(props.currentUser?.name || '管').trim().slice(0, 1) || '管'
}))

const displayCompanyName = computed(() => props.companyName || '易财费控')
const collapseTooltipContent = computed(() => (props.collapsed ? '展开侧边栏' : '折叠侧边栏'))
</script>


<style scoped src="../../assets/styles/components/sidebar-rail.css"></style>
