import { Layout, Badge, Avatar, Dropdown, Space } from 'antd'
import { useNavigate } from 'react-router-dom'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  BellOutlined,
  QuestionCircleOutlined,
  FileTextOutlined,
  CustomerServiceOutlined,
  UserOutlined,
} from '@ant-design/icons'
import useUserStore from '@/stores/userStore'
import Toast from '@/components/Toast/Toast'
import headerMenuData from '../../data/headerMenuData.json'
import './AppHeader.css'

const { Header } = Layout

// 图标映射
const iconMap = {
  QuestionCircleOutlined: <QuestionCircleOutlined />,
  FileTextOutlined: <FileTextOutlined />,
  CustomerServiceOutlined: <CustomerServiceOutlined />,
}

function AppHeader({ collapsed, onToggle }) {
  const navigate = useNavigate()
  const { user, logout } = useUserStore()

  // 用户下拉菜单
  const userMenuItems = [
    {
      key: 'profile',
      label: '个人中心',
    },
    {
      key: 'settings',
      label: '账户设置',
    },
    {
      type: 'divider',
    },
    {
      key: 'logout',
      label: '退出登录',
    },
  ]

  const handleUserMenuClick = ({ key }) => {
    if (key === 'logout') {
      logout()
      Toast.success('退出成功', '您已安全退出')
      navigate('/login')
    } else if (key === 'profile') {
      navigate('/profile')
    } else if (key === 'settings') {
      Toast.info('开发中', '账户设置功能正在开发中')
    }
  }

  const handleHeaderMenuClick = (key) => {
    console.log('Header menu clicked:', key)
    if (key === 'support') {
      Toast.info('开发中', '支持功能正在开发中')
    }
  }

  return (
    <Header className="app-header">
      {/* 左侧：Logo + 折叠按钮 */}
      <div className="header-left">
        {/* Logo 区域 */}
        <div className="header-logo">
          <h2 style={{ margin: 0, color: '#1677ff', fontWeight: 'bold' }}>NEX Docus</h2>
        </div>

        {/* 折叠按钮 */}
        <div className="trigger" onClick={onToggle}>
          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </div>
      </div>

      {/* 右侧：功能按钮 + 用户信息 */}
      <div className="header-right">
        {/* 功能图标 */}
        <Space size={16} className="header-actions">
          {/* 动态渲染 header 菜单 */}
          {headerMenuData.map((item) => (
            <div
              key={item.key}
              className="header-link"
              title={item.label}
              onClick={() => handleHeaderMenuClick(item.key)}
            >
              {iconMap[item.icon]}
              <span className="ml-1">{item.label}</span>
            </div>
          ))}

          {/* 消息中心 */}
          <div
            className="header-link"
            title="消息中心"
            onClick={() => handleHeaderMenuClick('messages')}
          >
            <Badge count={5} size="small" offset={[4, -2]}>
              <BellOutlined />
            </Badge>
            <span className="ml-1">消息</span>
          </div>

          {/* 用户下拉菜单 */}
          <Dropdown
            menu={{
              items: userMenuItems,
              onClick: handleUserMenuClick,
            }}
            placement="bottomRight"
          >
            <div className="user-info">
              <Avatar size={32} icon={<UserOutlined />} />
              <span className="username">{user?.nickname || user?.username || 'User'}</span>
            </div>
          </Dropdown>
        </Space>
      </div>
    </Header>
  )
}

export default AppHeader