import { Menu } from 'antd'
import { useNavigate, useLocation } from 'react-router-dom'
import {
  DashboardOutlined,
  FileTextOutlined,
  BookOutlined,
  SyncOutlined,
  UserOutlined,
  TeamOutlined,
} from '@ant-design/icons'
import useAuthStore from '../../stores/authStore'

function SideNav() {
  const navigate = useNavigate()
  const location = useLocation()
  const { user } = useAuthStore()

  const allMenuItems = [
    { key: '/dashboard', icon: <DashboardOutlined />, label: '仪表盘' },
    { key: '/editor-desk', icon: <FileTextOutlined />, label: '责编录入' },
    { key: '/tps', icon: <FileTextOutlined />, label: 'TPS 选题策划' },
    { key: '/knowledge', icon: <BookOutlined />, label: '知识库' },
    { key: '/doco', icon: <SyncOutlined />, label: '文稿对齐' },
    { key: '/editor-home', icon: <UserOutlined />, label: '个人首页' },
    { key: '/users', icon: <TeamOutlined />, label: '用户管理' },
  ]

  // 按角色过滤菜单项
  // user.role 值来自后端 /api/auth/me，应为字符串 'zhipianren' / 'zebian' / 'biandao'
  const visibleItems = allMenuItems.filter(item => {
    // /dashboard 三角色都可见
    if (item.key === '/dashboard') return true
    // /users 仅 zhipianren
    if (item.key === '/users') return String(user?.role) === 'zhipianren'
    // /editor-desk 仅 zhipianren + zebian
    if (item.key === '/editor-desk') {
      const role = String(user?.role)
      return role === 'zhipianren' || role === 'zebian'
    }
    // 其余三角色都可见（保留后期 Phase 入口）
    return true
  })

  return (
    <div className="side-nav">
      <div className="side-nav-logo">
        <span className="logo-text">军事科技</span>
        <span className="logo-sub">TPS 工作台</span>
      </div>
      <Menu
        mode="inline"
        selectedKeys={[location.pathname]}
        items={visibleItems}
        onClick={({ key }) => navigate(key)}
        className="side-nav-menu"
      />
    </div>
  )
}

export default SideNav