import React from 'react'
import { Layout, Button, Badge, Space, Dropdown, Avatar } from 'antd'
import { 
  MenuOutlined, 
  WifiOutlined, 
  DisconnectOutlined,
  SettingOutlined,
  InfoCircleOutlined,
  MobileOutlined 
} from '@ant-design/icons'
import { useSelector } from 'react-redux'
import type { RootState } from '../../store/store'

const { Header: AntHeader } = Layout

interface HeaderProps {
  onMenuClick: () => void
  onConnectClick: () => void
}

/**
 * 顶部导航栏组件
 */
const Header: React.FC<HeaderProps> = ({ onMenuClick, onConnectClick }) => {
  const { status: connectionStatus, serverUrl } = useSelector((state: RootState) => state.connection)
  const { connectedDevices } = useSelector((state: RootState) => state.devices)

  const getConnectionStatusIcon = () => {
    switch (connectionStatus) {
      case 'connected':
        return <WifiOutlined style={{ color: 'var(--md-success)' }} />
      case 'connecting':
        return <WifiOutlined style={{ color: 'var(--md-warning)' }} />
      default:
        return <DisconnectOutlined style={{ color: 'var(--md-error)' }} />
    }
  }

  const getConnectionStatusText = () => {
    switch (connectionStatus) {
      case 'connected':
        return '已连接'
      case 'connecting':
        return '连接中'
      case 'error':
        return '连接错误'
      default:
        return '未连接'
    }
  }

  const menuItems = [
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: '设置',
    },
    {
      key: 'about',
      icon: <InfoCircleOutlined />,
      label: '关于',
    },
  ]

  return (
    <AntHeader style={{ 
      background: 'var(--md-surface-container-lowest)', 
      padding: '0 24px',
      borderBottom: '1px solid var(--md-outline-variant)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between'
    }}>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <Button
          type="text"
          icon={<MenuOutlined />}
          onClick={onMenuClick}
          style={{ marginRight: '16px' }}
        />
        
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <MobileOutlined style={{ fontSize: '20px', marginRight: '8px', color: 'var(--md-primary)' }} />
          <span style={{ fontWeight: 'bold', fontSize: '18px' }}>
            远程控制
          </span>
        </div>
      </div>

      <Space size="middle">
        {/* 设备数量显示 */}
        <Badge count={connectedDevices.length} showZero>
          <Button 
            type="text" 
            icon={<MobileOutlined />}
            style={{ display: 'flex', alignItems: 'center' }}
          >
            设备
          </Button>
        </Badge>

        {/* 连接状态 */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          {getConnectionStatusIcon()}
          <span style={{ fontSize: '14px' }}>
            {getConnectionStatusText()}
          </span>
          {serverUrl && (
            <span style={{ fontSize: '12px', color: 'var(--md-on-surface-variant)' }}>
              ({new URL(serverUrl).hostname})
            </span>
          )}
        </div>

        {/* 连接按钮 */}
        <Button 
          type={connectionStatus === 'connected' ? 'default' : 'primary'}
          onClick={onConnectClick}
          disabled={connectionStatus === 'connecting'}
        >
          {connectionStatus === 'connected' ? '重新连接' : '连接服务器'}
        </Button>

        {/* 菜单下拉 */}
        <Dropdown
          menu={{ items: menuItems }}
          placement="bottomRight"
          trigger={['click']}
        >
          <Avatar 
            icon={<SettingOutlined />} 
            style={{ cursor: 'pointer', backgroundColor: 'var(--md-primary)' }}
          />
        </Dropdown>
      </Space>
    </AntHeader>
  )
}

export default Header 