import { DownOutlined } from '@ant-design/icons';
import { Button, Dropdown, Popconfirm, Space } from 'antd';
import { useUserStore } from '@/store/UserStore';
import { GapBox } from '../GapBox';

export const HeaderUserInfo: React.FC = () => {
  const userInfo = useUserStore().user;

  return (
    <GapBox>
      {/* 用户信息 Dropdown */}
      <Dropdown
        trigger={['click']}
        placement='bottomRight'
        arrow
        menu={{
          items: [
            {
              key: 'user-info',
              disabled: true, // 只展示，不可操作
              label: (
                <Space size={8} style={{ color: 'rgba(0,0,0,0.88)' }}>
                  <span>{userInfo.username}</span>
                  <span>({userInfo.nickname})</span>
                </Space>
              ),
            },
          ],
        }}
      >
        <div style={{ cursor: 'pointer' }}>
          <Space size={4}>
            <span>欢迎您，</span>
            <span
              style={{
                maxWidth: 120,
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                overflow: 'hidden',
              }}
            >
              {userInfo.username}
            </span>
            <DownOutlined
              style={{
                fontSize: 10,
                marginTop: 2,
                color: '#666',
              }}
            />
          </Space>
        </div>
      </Dropdown>

      {/* 退出登录 */}
      <Popconfirm
        title='确定要退出登录吗？'
        onConfirm={() => {
          location.hash = '#/login';
        }}
      >
        <Button size='small' variant='text' color='primary'>
          退出登录
        </Button>
      </Popconfirm>
    </GapBox>
  );
};