import { useLocation, useNavigate } from 'react-router-dom'
import { Layout, Menu } from 'antd'
import {
  AppstoreOutlined,
  MessageOutlined,
  HistoryOutlined,
  TeamOutlined,
  FileTextOutlined,
  BarChartOutlined,
  SettingOutlined,
} from '@ant-design/icons'

const { Sider } = Layout

const menuItems = [
  { key: '/agent/dashboard', icon: <AppstoreOutlined />, label: '工作台' },
  { key: '/agent/chat-history', icon: <HistoryOutlined />, label: '对话记录' },
  { key: '/agent/customers', icon: <TeamOutlined />, label: '客户管理' },
  { key: '/agent/knowledge', icon: <FileTextOutlined />, label: '知识库' },
  { key: '/agent/statistics', icon: <BarChartOutlined />, label: '数据统计' },
  { key: '/agent/settings', icon: <SettingOutlined />, label: '系统设置' },
]

const AgentSidebar = () => {
  const location = useLocation()
  const navigate = useNavigate()

  const selectedKey = menuItems.find(item => location.pathname.startsWith(item.key))?.key || '/agent/dashboard'

  return (
    <Sider width={220} className="!bg-white border-r border-neutral-200">
      <div className="h-14 flex items-center px-5 border-b border-neutral-100">
        <MessageOutlined className="text-lg text-[#2563eb] mr-2.5" />
        <span className="text-base font-semibold text-neutral-900">客服云</span>
      </div>
      <Menu
        mode="inline"
        selectedKeys={[selectedKey]}
        items={menuItems}
        onClick={({ key }) => navigate(key)}
        className="border-e-0 mt-2"
      />
    </Sider>
  )
}

export default AgentSidebar