import { Flex, Button, Badge } from 'antd';
import {
  ToolOutlined,
  CameraOutlined,
  TabletOutlined,
} from '@ant-design/icons';
import { useSelector } from 'react-redux';
import { RootState } from '@/states/store';
import {
  GENERATOR_STATUS,
  GeneratorStatus,
} from '@/states/exam/deviceAreaSlice';
import triggerInspection from '../../API/exam/triggerInspection';

const DeviceArea = ({ className }: { className?: string }) => {
  const generatorStatus = useSelector(
    (state: RootState) => state.deviceArea.generatorStatus
  );
  const generatorStatus_2 = useSelector(
    (state: RootState) => state.deviceArea.generatorStatus_2
  );
  const exposureStatus = useSelector(
    (state: RootState) => state.deviceArea.exposureStatus
  );
  const tabletStatus = useSelector(
    (state: RootState) => state.deviceArea.tabletStatus
  );

  // 读取 FPD 状态，判断是否为模拟器模式
  const fpd = useSelector((state: RootState) => state.product.fpd);
  const isSimulator = fpd === 'Simulator';

  const btnStyle = { width: '1.5rem', height: '1.5rem' };
  const classValue = 'mr-1';

  return (
    <Flex justify="end" align="center" className={`w-full ${className}`}>
      <Button
        style={btnStyle}
        className={classValue}
        icon={
          <ToolOutlined
            className={
              generatorStatus_2 === GENERATOR_STATUS.GENERATOR_STATUS_STANDBY
                ? 'text-green-500'
                : generatorStatus === GeneratorStatus.GENERATOR_RAD_PREPARE
                  ? 'text-yellow-500'
                  : generatorStatus === GeneratorStatus.GENERATOR_RAD_READY
                    ? 'text-yellow-500'
                    : ''
            }
          />
        }
        title={`手闸状态指示器: ${generatorStatus}`}
      />
      <Badge count={isSimulator ? 'S' : 'R'} offset={[-15, 10]} color="orange">
        <Button
          style={btnStyle}
          data-testid="device-all-ready"
          className={`${classValue} ${
            exposureStatus === 'ready'
              ? 'text-green-500'
              : exposureStatus === 'not_ready'
                ? ''
                : ''
          }`}
          icon={
            <CameraOutlined
            // className={
            //   exposureStatus === 'ready'
            //     ? 'text-green-500'
            //     : exposureStatus === 'not_ready'
            //       ? ''
            //       : ''
            // }
            />
          }
          onClick={() => {
            if (!isSimulator) {
              // 真实环境下禁止点击
              console.warn('真实环境下，曝光操作需要通过硬件触发');
              return;
            }
            // 模拟环境下允许点击
            triggerInspection();
          }}
          title={`曝光指示器: ${exposureStatus}${isSimulator ? ' (模拟模式)' : ' (真实模式)'}`}
        />
      </Badge>
      <Button
        style={btnStyle}
        className={`${classValue} ${
          tabletStatus === 'exposing'
            ? 'text-yellow-500'
            : tabletStatus === 'ready'
              ? 'text-green-500'
              : tabletStatus === 'error'
                ? 'text-red-500'
                : ''
        }`}
        icon={
          <TabletOutlined
          // className={
          //   tabletStatus === 'exposing'
          //     ? 'text-yellow-500'
          //     : tabletStatus === 'ready'
          //       ? 'text-green-500'
          //       : tabletStatus === 'error'
          //         ? 'text-red-500'
          //         : ''
          // }
          />
        }
        title={`平板指示器: ${tabletStatus}`}
      />
    </Flex>
  );
};

export default DeviceArea;