import React from 'react';
import { Layout, Button, Typography, Divider, Flex } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useIntl } from 'react-intl';
import { useDispatch, useSelector } from 'react-redux';
import { switchToOperationPanel } from '../../../states/panelSwitchSliceForView';
import {
  setMeasurementAction,
  type MeasurementAction,
} from '../../../states/view/measurementPanelSlice';
import type { RootState } from '../../../states/store';
import Icon from '@/components/Icon';
import '@/themes/truncateText.css';

const { Header, Content } = Layout;
const { Title, Text } = Typography;

const FunctionButton = ({
  title,
  action,
  iconName,
  productId,
}: {
  title: string;
  action: string;
  iconName: string;
  productId?: string;
}) => {
  const dispatch = useDispatch();

  const handleMeasurementAction = (action: string) => {
    console.log(`执行测量操作: ${action}`);
    // 通过 Redux 分发 action 到 ViewerContainer
    dispatch(setMeasurementAction(action as MeasurementAction));
  };

  return (
    <Button
      onClick={() => handleMeasurementAction(action)}
      icon={
        iconName ? (
          <Icon
            productId={productId}
            module="module-process"
            name={iconName}
            userId="base"
            theme="default"
            size="2x"
            state="normal"
          />
        ) : undefined
      }
      style={{
        width: '1.5rem',
        height: '1.5rem',
        padding: 0,
      }}
      title={title}
      className="truncate-text"
    >
      {/* {title} */}
    </Button>
  );
};

const MeasurementPanel = () => {
  const intl = useIntl();
  const dispatch = useDispatch();
  const productName = useSelector((state: RootState) => state.product.productName);

  const handleReturn = () => {
    dispatch(switchToOperationPanel());
  };

  return (
    <Layout className="h-full">
      {/* 顶部导航栏 */}
      <Header
        style={{
          display: 'flex',
          alignItems: 'center',
          padding: '0 16px',
        }}
      >
        <Button
          type="text"
          icon={<ArrowLeftOutlined />}
          onClick={handleReturn}
        />
        <Title level={5} style={{ margin: 0, lineHeight: '48px' }}>
          {intl.formatMessage({ id: 'measurementPanel.title' })}
        </Title>
      </Header>

      {/* 主体内容 */}
      <Content
        style={{ padding: '16px', maxHeight: '100%', overflowY: 'auto' }}
      >
        {/* 基础测量组 */}
        <div style={{ marginBottom: '24px' }}>
          <Text
            strong
            style={{ fontSize: '14px', marginBottom: '12px', display: 'block' }}
          >
            {intl.formatMessage({ id: 'measurementPanel.basicMeasurements' })}
          </Text>
          <Flex wrap gap="small" align="center" justify="start" className="p-1">
            <FunctionButton
              title={intl.formatMessage({ id: 'measurementPanel.lineMeasurement' })}
              action="线段测量"
              iconName="btn_LineMeasurement"
            />
            <FunctionButton
              title={intl.formatMessage({ id: 'measurementPanel.angleMeasurement' })}
              action="角度测量"
              iconName="btn_AngleMeasurement"
            />
            <FunctionButton
              title={intl.formatMessage({ id: 'measurementPanel.clearMeasurement' })}
              action="清除测量"
              iconName="btn_ClearMeasurement"
            />
            <FunctionButton
              title={intl.formatMessage({ id: 'measurementPanel.measurementCalibration' })}
              action="测量校正"
              iconName="MeasurementCalibration"
            />
          </Flex>
          <div style={{ marginTop: '8px', fontSize: '12px', color: '#666' }}>
            {intl.formatMessage({ id: 'measurementPanel.basicMeasurementsNote' })}
          </div>
        </div>

        <Divider />

        {/* 专业测量组 */}
        <div style={{ marginBottom: '24px' }}>
          <Text
            strong
            style={{ fontSize: '14px', marginBottom: '12px', display: 'block' }}
          >
            {intl.formatMessage({ id: 'measurementPanel.professionalMeasurements' })}
          </Text>
          <Flex wrap gap="small" align="center" justify="start" className="p-1">
            <FunctionButton
              title={intl.formatMessage({ id: 'measurementPanel.cobbAngle' })}
              action="Cobb角"
              iconName="btn_Cobbangle"
              productId="animal"
            />
          </Flex>
        </div>

        <Divider />

        {/* 宠物专用测量组 */}
        {productName === 'VETDROS' && (
          <div style={{ marginBottom: '24px' }}>
            <Text
              strong
              style={{ fontSize: '14px', marginBottom: '12px', display: 'block' }}
            >
              {intl.formatMessage({ id: 'measurementPanel.petSpecificMeasurements' })}
            </Text>
            <Flex wrap gap="small" align="center" justify="start" className="p-1">
              <FunctionButton
                title="髋臼水平角"
                action="髋臼水平角"
                iconName="btn_DAR"
                productId="animal"
              />
              <FunctionButton
                title="胫骨平台夹角"
                action="胫骨平台夹角"
                iconName="btn_TPA"
                productId="animal"
              />
              <FunctionButton
                title="髋关节牵引指数"
                action="髋关节牵引指数"
                iconName="btn_HDI"
                productId="animal"
              />
              <FunctionButton
                title="髋关节水平角"
                action="髋关节水平角"
                iconName="btn_NHA"
                productId="animal"
              />
              <FunctionButton
                title="心锥比"
                action="心锥比"
                iconName="btn_VHS"
                productId="animal"
              />
              <FunctionButton
                title="胫骨平台骨切开术"
                action="胫骨平台骨切开术"
                iconName="btn_TPLO"
                productId="animal"
              />
              <FunctionButton
                title="胫骨结节前移术"
                action="胫骨结节前移术"
                iconName="btn_TTA"
                productId="animal"
              />
              <FunctionButton
                title="胫骨结节前移术5点测量法"
                action="胫骨结节前移术5点测量法"
                iconName="btn_TTA2"
                productId="animal"
              />
              <FunctionButton
                title="水平截骨术"
                action="水平截骨术"
                iconName="btn_CBLO"
                productId="animal"
              />
              <FunctionButton
                title="股骨头覆盖率"
                action="股骨头覆盖率"
                iconName="btn_DLS"
                productId="animal"
              />
              <FunctionButton
                title="髋臼背覆盖"
                action="髋臼背覆盖"
                iconName="btn_DAC"
                productId="animal"
              />
              <FunctionButton
                title="拆线长度测量"
                action="拆线长度测量"
                iconName="btn_FoldLine"
                productId="animal"
              />
              <FunctionButton
                title="多边形长度测量"
                action="多边形长度测量"
                iconName="btn_Polygon"
                productId="animal"
              />
              <FunctionButton
                title="找圆心"
                action="找圆心"
                iconName="btn_CenterCircle"
                productId="animal"
              />
              <FunctionButton
                title="找中线"
                action="找中线"
                iconName="btn_CenterLine"
                productId="animal"
              />
              <FunctionButton
                title="找中点"
                action="找中点"
                iconName="btn_Midpoint"
                productId="animal"
              />
              <FunctionButton
                title="直线垂直倾斜度"
                action="直线垂直倾斜度"
                iconName="btn_VerticalInclination"
                productId="animal"
              />
              <FunctionButton
                title="直线水平倾斜度"
                action="直线水平倾斜度"
                iconName="btn_HorizontalInclination"
                productId="animal"
              />
              <FunctionButton
                title="矩形区域灰度"
                action="矩形区域灰度"
                iconName="btn_RectangularGrayscale"
                productId="animal"
              />
              <FunctionButton
                title="直线灰度"
                action="直线灰度"
                iconName="btn_LineGrayscale"
                productId="animal"
              />
            </Flex>
          </div>
        )}
      </Content>
    </Layout>
  );
};

export default MeasurementPanel;