import {
  AlertOutlined,
  CheckOutlined,
  DisconnectOutlined,
  ExclamationOutlined,
  WarningOutlined,
} from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Flex, Tag, theme, Tooltip } from 'antd';
import { useState } from 'react';
import { TagStateCallbackPayload } from '../../pages/Slave/SGW/Map/type';

type TagStateProps = {
  normalCount?: number;
  warningCount?: number;
  criticalCount?: number;
  sosCount?: number;
  disconnectedCount?: number;
  onTagPress?: (selection: TagStateCallbackPayload) => void;
};

const TagState = ({
  normalCount = 0,
  warningCount = 0,
  criticalCount = 0,
  sosCount,
  disconnectedCount = 0,
  onTagPress,
}: TagStateProps) => {
  const [activeStates, setActiveStates] = useState({
    normal: false,
    warning: false,
    critical: false,
    sos: false,
    disconnected: false,
  });
  const { token } = theme.useToken();
  const intl = useIntl();

  // Style variants using antd theme tokens for dark mode support
  const getTagStyle = (
    type: 'normal' | 'warning' | 'critical' | 'offline',
    isActive: boolean,
  ) => {
    const baseStyle = {
      borderRadius: token.borderRadiusSM,
      borderWidth: 1,
      borderStyle: 'solid' as const,
    };

    if (type === 'normal') {
      return {
        ...baseStyle,
        color: isActive ? token.colorSuccess : token.colorSuccess,
        backgroundColor: isActive
          ? token.colorSuccessBg
          : token.colorBgContainer,
        borderColor: token.colorSuccessBorder,
      };
    }
    if (type === 'warning') {
      return {
        ...baseStyle,
        color: isActive ? token.colorWarning : token.colorWarning,
        backgroundColor: isActive
          ? token.colorWarningBg
          : token.colorBgContainer,
        borderColor: token.colorWarningBorder,
      };
    }
    if (type === 'critical') {
      return {
        ...baseStyle,
        color: isActive ? token.colorError : token.colorError,
        backgroundColor: isActive ? token.colorErrorBg : token.colorBgContainer,
        borderColor: token.colorErrorBorder,
      };
    }
    // offline
    return {
      ...baseStyle,
      color: token.colorTextSecondary,
      backgroundColor: isActive
        ? token.colorFillSecondary
        : token.colorBgContainer,
      borderColor: token.colorBorder,
    };
  };

  const handleTagClick = (key: keyof typeof activeStates) => {
    const newStates = { ...activeStates, [key]: !activeStates[key] };
    setActiveStates(newStates);
    if (onTagPress) {
      onTagPress({
        isNormal: newStates.normal,
        isWarning: newStates.warning,
        isCritical: newStates.critical,
        isSos: newStates.sos,
        isDisconnected: newStates.disconnected,
      });
    }
  };

  return (
    <Flex
      gap={1}
      style={{
        overflowX: 'auto',
        overflowY: 'hidden',
        whiteSpace: 'nowrap',
        minWidth: 0,
        zIndex: 20,
        flexWrap: 'nowrap',
      }}
    >
      {/* Only show SOS tag if sosCount is provided (SGW environment) */}
      {sosCount !== undefined && (
        <Tooltip
          title={intl.formatMessage({
            id: 'common.level.sos',
            defaultMessage: 'SOS',
          })}
        >
          <Tag.CheckableTag
            style={getTagStyle('critical', activeStates.sos)}
            icon={<AlertOutlined />}
            checked={activeStates.sos}
            onChange={() => handleTagClick('sos')}
          >
            {`${sosCount}`}
          </Tag.CheckableTag>
        </Tooltip>
      )}

      {/* {normalCount > 0 && ( */}
      <Tooltip
        title={intl.formatMessage({
          id: 'common.level.normal',
          defaultMessage: 'Normal',
        })}
      >
        <Tag.CheckableTag
          style={getTagStyle('normal', activeStates.normal)}
          icon={<CheckOutlined />}
          checked={activeStates.normal}
          onChange={() => handleTagClick('normal')}
        >
          {`${normalCount}`}
        </Tag.CheckableTag>
      </Tooltip>

      {/* {warningCount > 0 && ( */}
      <Tooltip
        title={intl.formatMessage({
          id: 'common.level.warning',
          defaultMessage: 'Warning',
        })}
      >
        <Tag.CheckableTag
          style={getTagStyle('warning', activeStates.warning)}
          icon={<WarningOutlined />}
          checked={activeStates.warning}
          onChange={() => handleTagClick('warning')}
        >
          {`${warningCount}`}
        </Tag.CheckableTag>
      </Tooltip>

      {/* {criticalCount > 0 && ( */}
      <Tooltip
        title={intl.formatMessage({
          id: 'common.level.critical',
          defaultMessage: 'Critical',
        })}
      >
        <Tag.CheckableTag
          style={getTagStyle('critical', activeStates.critical)}
          icon={<ExclamationOutlined />}
          checked={activeStates.critical}
          onChange={() => handleTagClick('critical')}
        >
          {`${criticalCount}`}
        </Tag.CheckableTag>
      </Tooltip>

      {/* {disconnectedCount > 0 && ( */}
      <Tooltip
        title={intl.formatMessage({
          id: 'common.level.disconnected',
          defaultMessage: 'Disconnected',
        })}
      >
        <Tag.CheckableTag
          style={getTagStyle('offline', activeStates.disconnected)}
          icon={<DisconnectOutlined />}
          checked={activeStates.disconnected}
          onChange={() => handleTagClick('disconnected')}
        >
          {`${disconnectedCount}`}
        </Tag.CheckableTag>
      </Tooltip>
    </Flex>
  );
};
export default TagState;
