import React, { useRef } from 'react';
import { useSelector } from 'react-redux';
import { Row, Col, Typography, Image, Flex } from 'antd';
import { getViewIconUrl, getExposedImageUrl } from '@/API/bodyPosition';
import CollimatorIcon from '../../../assets/imgs/Collimator_normal.png';
import SidIcon from '../../../assets/imgs/SID.png';
import { RootState } from '@/states/store';

const { Title, Text } = Typography;

const BodyPositionDetail: React.FC = () => {
  const bodyPositionDetail = useSelector(
    (state: RootState) => state.bodyPositionDetail
  );
  const wrapRef = useRef<HTMLDivElement>(null);

  // 🆕 根据曝光状态选择图像源
  const imageUrl = bodyPositionDetail.expose_status === 'Exposed'
    ? getExposedImageUrl(bodyPositionDetail.sop_instance_uid)  // 已曝光：缩略图
    : getViewIconUrl(bodyPositionDetail.body_position_image);  // 未曝光：示意图

  return (
    <Flex vertical className="h-full">
      {/* 第一行 : 患者姓名*/}
      <div className="text-center">
        <Title level={4}>{bodyPositionDetail.patient_name}</Title>
      </div>
      {/* 第二行 ：患者id，登记号，study描述*/}
      <Row>
        <Col span={8}>
          <Text>Patient ID: {bodyPositionDetail.patient_id}</Text>
        </Col>
        <Col span={8}>
          <Text>
            Accession Number: {bodyPositionDetail.registration_number}
          </Text>
        </Col>
        <Col span={8}>
          <Text>Study Description: {bodyPositionDetail.study_description}</Text>
        </Col>
      </Row>

      {/* 第三行 ：体位示意图或缩略图 🆕 修改此处 */}
      <Flex
        //flex={1}                       // 吃掉剩余宽高
        style={{ minHeight: 0 }} // 保险丝
        className="flex-grow"
        ref={wrapRef}
      >
        <div
          style={{
            // border: '1px solid red',
            // width: '500px',
            // height: '300px',
            width: '100%', // 随父容器宽
            //aspectRatio: '16 / 9',        // 根据图片真实比例改，如 4/3、1/1 等
            backgroundImage: `url(${imageUrl})`,  // 🆕 使用动态 imageUrl
            backgroundSize: 'contain', // cover 亦可
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
          }}
        ></div>
      </Flex>

      {/* 第四行 ：体位描述*/}
      <div className="text-center">
        <Text>View Description: {bodyPositionDetail.view_description}</Text>
      </div>
      {/* 第五行 ：设备信息*/}
      <div className="flex flex-row items-center justify-center">
        <div className="text-center">
          <Image src={CollimatorIcon} alt="Logo" height={'100%'} />
        </div>
        <div className="text-center">
          <Text>Length: {bodyPositionDetail.collimator_length}</Text>
        </div>
        <div className="text-center ml-2">
          <Text>Width: {bodyPositionDetail.collimator_width}</Text>
        </div>
      </div>
      {/* 第六行 */}

      <Flex justify="center" align="center">
        <Image src={SidIcon} alt="Logo" className="mr-2" height={'100%'} />
        <Text>SID: {bodyPositionDetail.sid}</Text>
      </Flex>
    </Flex>
  );
};

export default BodyPositionDetail;