import { Space, Avatar, Input, Button, Badge, Dropdown, Layout, type DropdownProps } from 'antd';
import { UserOutlined, SearchOutlined, BellOutlined, LogoutOutlined } from '@ant-design/icons';
const { Header } = Layout;

const userMenuItems: Exclude<DropdownProps['menu'], undefined>['items'] = [
  { key: 'profile', label: 'Profile' },
  { key: 'settings', label: 'Settings' },
  { type: 'divider' },
  { key: 'logout', label: 'Logout', icon: <LogoutOutlined /> },
];

export const LayoutHeader = () => {
  return (
    <Header
      style={{
        background: '#fff',
        padding: '0 24px',
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        position: 'sticky',
        top: 0,
        zIndex: 999,
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
        <h1 style={{ margin: 0, fontSize: '20px', fontWeight: 'bold', color: '#1890ff' }}>nxMesh</h1>
      </div>

      <Input placeholder="Search agents, workspaces..." prefix={<SearchOutlined />} style={{ width: '300px' }} />

      <Space size="large">
        <Badge count={3} style={{ backgroundColor: '#ff4d4f' }}>
          <Button type="text" icon={<BellOutlined style={{ fontSize: '18px' }} />} />
        </Badge>
        <Dropdown menu={{ items: userMenuItems }} trigger={['click']}>
          <Space style={{ cursor: 'pointer' }}>
            <Avatar icon={<UserOutlined />} style={{ backgroundColor: '#1890ff' }} />
            {/* TODO: from store */}
            <span>Admin User</span>
          </Space>
        </Dropdown>
      </Space>
    </Header>
  );
};