import React, { forwardRef } from 'react';
import { Space, Row } from 'antd';
import MeButton from '../pages/security/components/MeButton';
import { useSelector } from 'react-redux';
import { RootState } from '@/states/store';
import { isLoggedIn } from '../states/user_info';
import Icon from '@/components/Icon';
import { IconButton } from '@/components/IconButton';

interface SystemZoneProps {
  onMenuClick?: (key: string) => void;
}

const SystemZone = forwardRef<HTMLDivElement, SystemZoneProps>(
  ({ onMenuClick }, ref) => {
    const login = useSelector((state: RootState) => isLoggedIn(state.userInfo));
    const username = useSelector((state: RootState) => state.userInfo.name);
    const avatarUrl = useSelector((state: RootState) => state.userInfo.avatar);

    return (
      <Row
        ref={ref}
        style={{
          position: 'sticky',
          flex: '0 0 auto',
          bottom: 0,
          left: 0,
          width: '100%',
          justifyContent: 'center',
          padding: '16px 0',
          boxShadow: '0 -2px 5px rgba(0,0,0,0.1)',
        }}
      >
        <Space
          direction="vertical"
          align="start"
          style={{ width: '100%', paddingLeft: 20 }}
        >
          <IconButton
            icon={
              <Icon
                module="module-common"
                name="btn_3DCam_AIView"
                userId="user-A" // 会优先查 custom/user-A/... 再回退到 base
                theme="default"
                size="2x"
                state="normal"
                //widthPx={32}// 和size 2x 保持一致
              />
            }
            iconPlace="left"
            iconSize={32} // 和size 2x 保持一致
            type="primary"
            style={{ padding: '4px 16px' }}
            disabled
          >
            配置
          </IconButton>

          <MeButton
            size="large"
            isLogin={login}
            avatarUrl={avatarUrl || undefined}
            username={login ? username : '未登录'}
            onClick={() => onMenuClick?.('me')}
          />
        </Space>
      </Row>
    );
  }
);

export default SystemZone;
