import React, { forwardRef, useState } 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';
import ExitModal from '@/components/ExitModal';
import LanguageSettingModal from '@/components/LanguageSettingModal';
import { showNotImplemented } from '@/utils/notificationHelper';
import { FormattedMessage } from 'react-intl';
import { UserOutlined } from '@ant-design/icons';

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

const SystemZone = forwardRef<HTMLDivElement, SystemZoneProps>(
  // eslint-disable-next-line
  ({ 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);

    // 退出弹框状态管理
    const [exitModalVisible, setExitModalVisible] = useState(false);
    // 语言设置弹框状态管理
    const [languageModalVisible, setLanguageModalVisible] = useState(false);

    const handleExitClick = (): void => {
      setExitModalVisible(true);
    };

    const handleExitModalClose = (): void => {
      setExitModalVisible(false);
    };

    const handleLanguageClick = (): void => {
      setLanguageModalVisible(true);
    };

    const handleLanguageModalClose = (): void => {
      setLanguageModalVisible(false);
    };

    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)',
        }}
      >
        <style>{`
          .system-zone-space .ant-space-item {
            width: 100%;
          }
        `}</style>
        <Space
          direction="vertical"
          align="start"
          style={{ width: '100%', paddingLeft: 20 }}
          className='system-zone-space'
        >
          <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"
            block
            style={{ padding: '4px 16px' }}
            onClick={handleLanguageClick}
          >
            <FormattedMessage
              id="nav.config"
              defaultMessage={'nav.config'}
            />
          </IconButton>

          <IconButton
            icon={
              login ? (
                avatarUrl ? (
                  <Icon
                    module="module-common"
                    name="btn_3DCam_AIView"
                    userId="user-A"
                    theme="default"
                    size="2x"
                    state="normal"
                    url={avatarUrl}
                  />
                ) : (
                  <Icon
                    module="module-security"
                    name="user-not-login"
                    userId="user-A"
                    theme="default"
                    size="2x"
                    state="normal"
                  />
                )
              ) : (
                <Icon
                  module="module-common"
                  name="user-not-login"
                  userId="user-A"
                  theme="default"
                  size="2x"
                  state="normal"
                />
              )
            }
            iconPlace="left"
            iconSize={32}
            type="primary"
            block
            style={{ padding: '4px 16px' }}
            onClick={() => showNotImplemented('我的')}
          >
            {login ? username : '未登录'}
          </IconButton>

          <IconButton
            data-testid="exit-button"
            icon={
              <Icon
                module="module-common"
                name="btn_3DCam_AIView"
                userId="user-A"
                theme="default"
                size="2x"
                state="normal"
              />
            }
            iconPlace="left"
            iconSize={32}
            type="primary"
            block
            style={{ padding: '4px 16px' }}
            onClick={handleExitClick}
          >
            <FormattedMessage
              id="nav.logout"
              defaultMessage={'nav.logout'}
            />
          </IconButton>
        </Space>

        {/* 退出选择弹框 */}
        <ExitModal visible={exitModalVisible} onClose={handleExitModalClose} />

        {/* 语言设置弹框 */}
        <LanguageSettingModal
          visible={languageModalVisible}
          onClose={handleLanguageModalClose}
        />
      </Row>
    );
  }
);

export default SystemZone;