/**
 * KRA - Header Tools Component
 * Header toolbar with user info, settings, notifications
 */
import React from 'react';
import { Space, Dropdown, Avatar, Badge, Tooltip, Switch } from 'antd';
import {
  UserOutlined,
  SettingOutlined,
  LogoutOutlined,
  BellOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
  SunOutlined,
  MoonOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { useModel, history } from '@umijs/max';
import { useAuth } from '@/hooks/useAuth';
import Screenfull from './Screenfull';

const HeaderTools: React.FC = () => {
  const { initialState, setInitialState } = useModel('@@initialState');
  const { logout } = useAuth();

  const currentUser = initialState?.currentUser;
  const isDark = initialState?.settings?.navTheme === 'realDark';

  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
    switch (key) {
      case 'profile':
        history.push('/person');
        break;
      case 'settings':
        history.push('/system/config');
        break;
      case 'logout':
        logout();
        break;
    }
  };

  const userMenuItems: MenuProps['items'] = [
    {
      key: 'profile',
      icon: <UserOutlined />,
      label: '个人中心',
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: '系统设置',
    },
    { type: 'divider' },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
    },
  ];

  const toggleTheme = () => {
    setInitialState((s: any) => ({
      ...s,
      settings: {
        ...s?.settings,
        navTheme: isDark ? 'light' : 'realDark',
      },
    }));
  };

  return (
    <Space size={16}>
      <Tooltip title={isDark ? '切换到亮色模式' : '切换到暗色模式'}>
        <Switch
          checkedChildren={<MoonOutlined />}
          unCheckedChildren={<SunOutlined />}
          checked={isDark}
          onChange={toggleTheme}
        />
      </Tooltip>

      <Screenfull />

      <Badge count={0} size="small">
        <Tooltip title="通知">
          <BellOutlined style={{ fontSize: 16, cursor: 'pointer' }} />
        </Tooltip>
      </Badge>

      <Dropdown menu={{ items: userMenuItems, onClick: handleMenuClick }} placement="bottomRight">
        <Space style={{ cursor: 'pointer' }}>
          <Avatar
            size="small"
            src={currentUser?.headerImg}
            icon={<UserOutlined />}
          />
          <span>{currentUser?.nickName || currentUser?.userName || '用户'}</span>
        </Space>
      </Dropdown>
    </Space>
  );
};

export default HeaderTools;
