import { Layout, Space, Button, Dropdown, Avatar, Typography, Divider } from 'antd';
import {
  UserOutlined,
  LogoutOutlined,
  SettingOutlined,
  BellOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import CompanySwitcher from './CompanySwitcher';
import FiscalYearSelector from './FiscalYearSelector';

const { Header: AntHeader } = Layout;
const { Text } = Typography;

export default function Header() {
  const userMenuItems: MenuProps['items'] = [
    {
      key: 'profile',
      icon: <UserOutlined />,
      label: 'Min profil',
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: 'Indstillinger',
    },
    {
      type: 'divider',
    },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: 'Log ud',
      danger: true,
    },
  ];

  const handleUserMenuClick: MenuProps['onClick'] = ({ key }) => {
    switch (key) {
      case 'logout':
        // Handle logout
        console.log('Logout clicked');
        break;
      case 'settings':
        // Navigate to settings
        break;
      case 'profile':
        // Navigate to profile
        break;
    }
  };

  return (
    <AntHeader
      style={{
        padding: '0 24px',
        background: '#fff',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderBottom: '1px solid #f0f0f0',
        position: 'sticky',
        top: 0,
        zIndex: 10,
      }}
    >
      {/* Left side - Company Switcher and Fiscal Year Selector */}
      <Space split={<Divider type="vertical" style={{ height: 24, margin: '0 8px' }} />}>
        <CompanySwitcher />
        <FiscalYearSelector />
      </Space>

      {/* Right side - User actions */}
      <Space size="middle">
        {/* Help */}
        <Button
          type="text"
          icon={<QuestionCircleOutlined />}
          title="Hjaelp"
        />

        {/* Notifications */}
        <Button
          type="text"
          icon={<BellOutlined />}
          title="Notifikationer"
        />

        {/* User Menu */}
        <Dropdown
          menu={{
            items: userMenuItems,
            onClick: handleUserMenuClick,
          }}
          placement="bottomRight"
          trigger={['click']}
        >
          <Space style={{ cursor: 'pointer' }}>
            <Avatar
              size="small"
              icon={<UserOutlined />}
              style={{ backgroundColor: '#1677ff' }}
            />
            <Text style={{ maxWidth: 120 }} ellipsis>
              Bruger
            </Text>
          </Space>
        </Dropdown>
      </Space>
    </AntHeader>
  );
}