TurboHR/frontend/src/components/layout/SidebarNav.tsx

/**
 * 侧边栏导航组件
 * 分组式菜单结构，支持折叠/展开，移动端抽屉模式
 */

import { Link, useLocation } from 'react-router-dom'
import { useState } from 'react'
import clsx from 'clsx'
import {
  LayoutDashboard, Users, CalendarCheck, UserX,
  Calculator, Shield,
  FileSearch, FileText, Stethoscope, HeartPulse, Award,
  Bot, BookMarked,
  Bell, ScrollText, Settings,
  ChevronDown, ChevronRight,
  Building2, CalendarDays, ClipboardList,
} from 'lucide-react'
import Logo from '../ui/Logo'

interface NavItem {
  path: string
  label: string
  icon: typeof LayoutDashboard
}

interface NavGroup {
  title: string
  items: NavItem[]
}

const navGroups: NavGroup[] = [
  {
    title: '工作台',
    items: [
      { path: '/', label: '总览', icon: LayoutDashboard },
      { path: '/calendar', label: '工作日历', icon: CalendarDays },
    ],
  },
  {
    title: '员工管理',
    items: [
      { path: '/roster', label: '花名册', icon: Users },
      { path: '/work-process', label: '用工办理', icon: ClipboardList },
      { path: '/attendance', label: '考勤确认', icon: CalendarCheck },
      { path: '/termination', label: '解聘补偿', icon: UserX },
    ],
  },
  {
    title: '薪税社保',
    items: [
      { path: '/money', label: '薪税管理', icon: Calculator },
      { path: '/social', label: '社保公积金', icon: Shield },
    ],
  },
  {
    title: '合规风控',
    items: [
      { path: '/evidence', label: '证据链', icon: FileSearch },
      { path: '/policies', label: '规章制度', icon: FileText },
      { path: '/tools/health-check', label: '用工体检', icon: Stethoscope },
      { path: '/tools/medical-period', label: '医疗期计算', icon: HeartPulse },
      { path: '/tools/annual-value', label: '年度价值', icon: Award },
    ],
  },
  {
    title: 'AI 辅助',
    items: [
      { path: '/ai-assistant', label: 'AI 顾问', icon: Bot },
      { path: '/templates', label: '文本模板', icon: BookMarked },
    ],
  },
  {
    title: '系统',
    items: [
      { path: '/notifications', label: '通知管理', icon: Bell },
      { path: '/audit', label: '操作日志', icon: ScrollText },
      { path: '/settings', label: '设置', icon: Settings },
    ],
  },
]

/**
 * 侧边栏导航
 */
export default function SidebarNav({ mobileOpen, onClose }: { mobileOpen: boolean; onClose: () => void }) {
  const location = useLocation()
  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set(navGroups.map(g => g.title)))

  const toggleGroup = (title: string) => {
    setExpandedGroups(prev => {
      const next = new Set(prev)
      if (next.has(title)) next.delete(title)
      else next.add(title)
      return next
    })
  }

  const isActive = (path: string) => {
    if (path === '/') return location.pathname === '/'
    return location.pathname.startsWith(path)
  }

  return (
    <>
      {/* 移动端遮罩 */}
      {mobileOpen && (
        <div
          className="fixed inset-0 bg-black/40 z-40 md:hidden"
          onClick={onClose}
          aria-label="关闭侧边栏"
        />
      )}

      <aside
        className={clsx(
          'fixed md:sticky top-0 left-0 z-50 md:z-auto',
          'w-52 h-screen md:h-screen flex-shrink-0',
          'bg-white border-r border-gray-200',
          'flex flex-col',
          'transition-transform duration-200',
          mobileOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
        )}
      >
        {/* Logo 区 */}
        <div className="h-14 flex items-center gap-2 px-4 border-b border-gray-200 shrink-0">
          <Logo className="w-5 h-5 text-primary" />
          <span className="font-bold text-sm text-gray-900">企业用工专家</span>
        </div>

        {/* 导航菜单 */}
        <nav className="flex-1 overflow-y-auto py-3 px-2 space-y-3">
          {navGroups.map((group, idx) => {
            const isExpanded = expandedGroups.has(group.title)
            const hasActiveItem = group.items.some(item => isActive(item.path))

            return (
              <div key={group.title} className={idx > 0 ? 'pt-2 border-t border-gray-100' : ''}>
                {/* 分组标题 */}
                <button
                  onClick={() => toggleGroup(group.title)}
                  className={clsx(
                    'flex items-center justify-between w-full px-2 py-1.5 text-xs font-medium rounded-md transition-colors',
                    hasActiveItem ? 'text-gray-800' : 'text-gray-500 hover:text-gray-700',
                  )}
                >
                  <span>{group.title}</span>
                  {isExpanded ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
                </button>

                {/* 菜单项 */}
                {isExpanded && (
                  <div className="mt-0.5 space-y-0.5">
                    {group.items.map((item) => {
                      const Icon = item.icon
                      const active = isActive(item.path)
                      return (
                        <Link
                          key={item.path}
                          to={item.path}
                          onClick={onClose}
                          className={clsx(
                            'flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors',
                            active
                              ? 'bg-primary/10 text-primary font-medium'
                              : 'text-gray-600 hover:bg-gray-100 hover:text-gray-800',
                          )}
                        >
                          <Icon className="w-4 h-4 flex-shrink-0" />
                          <span className="truncate">{item.label}</span>
                        </Link>
                      )
                    })}
                  </div>
                )}
              </div>
            )
          })}
        </nav>
      </aside>
    </>
  )
}