import React, { useEffect } from 'react';
import { useSupplyChain } from '../context/SupplyChainContext';
import SingleImageDisplay from './SingleImageDisplay';
import DoubleImageDisplay from './DoubleImageDisplay';
import MultipleImageDisplay from './MultipleImageDisplay';

// 图片展示模式类型
type ImageDisplayMode = 'single' | 'double' | 'multiple';

interface SupplyChainModalProps {
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  imageUrls?: string[];
  children?: React.ReactNode;
}

const SupplyChainModal: React.FC<SupplyChainModalProps> = ({
  isOpen,
  onClose,
  title = "江汉大米优质水稻种植核心示范基地",
  imageUrls = ["https://placehold.co/960x640"]
}) => {
  const { themeColor } = useSupplyChain();

  // 根据图片数量确定展示模式
  const displayMode: ImageDisplayMode =
    imageUrls.length === 1 ? 'single' :
    imageUrls.length === 2 ? 'double' :
    'multiple';

  // ESC键关闭弹窗
  useEffect(() => {
    const handleEsc = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener('keydown', handleEsc);
      return () => document.removeEventListener('keydown', handleEsc);
    }
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div
      data-layer="操控屏-1-粮食•油脂-粮食首页-基地弹出数据"
      className="fixed w-[1920px] h-[1080px] left-0 top-0 z-50 flex items-center justify-center"
    >
      {/* 遮罩层 */}
      <div
        data-layer="遮罩层"
        className="absolute inset-0 bg-stone-800/50 backdrop-blur-[5px]"
        onClick={onClose}
      />


      {/* 弹出框样式1 */}
      <div data-layer="弹出框样式1" className="relative w-[1600px] h-[900px] bg-stone-800/40">
        {/* 边框装饰 - Union SVG */}
        <div data-svg-wrapper data-layer="Union" className="absolute left-[21.96px] top-[29.88px] pointer-events-none">
          <svg width="1557" height="841" viewBox="0 0 1557 841" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g opacity="0.5">
              <path d="M10.9804 837.02H1545.1V496.309H1548.24V840.238H7.84314V496.309H10.9804V837.02Z" fill={themeColor} />
              <path d="M18.8235 485.721L0 497.91V281.743L18.8235 269.696V485.721Z" fill={themeColor} />
              <path d="M1556.08 281.884V497.91L1537.25 485.863V269.696L1556.08 281.884Z" fill={themeColor} />
              <path d="M428.474 19.2889H395.637L399.084 9.58322H10.9804V269.94H7.84314V6.36579H400.227L402.488 0H436.422L428.474 19.2889Z" fill={themeColor} />
              <path d="M1157.82 6.36579H1548.24V269.94H1545.1V9.58322H1156.49L1152.49 19.2889H1119.66L1126.51 0H1160.44L1157.82 6.36579Z" fill={themeColor} />
            </g>
          </svg>
        </div>

        {/* 图片展示区域 */}
        <div
          data-layer="图片展示区域"
          className="absolute h-[640px] left-[calc(50%+-0.06px)] rounded-[20px] top-[calc(50%+48.26px)] translate-x-[-50%] translate-y-[-50%] w-[1357px]"
        >
          {/* 单图模式 */}
          {displayMode === 'single' && (
            <SingleImageDisplay imageUrl={imageUrls[0]} title={title} />
          )}

          {/* 双图模式 */}
          {displayMode === 'double' && (
            <DoubleImageDisplay imageUrls={imageUrls} title={title} themeColor={themeColor} />
          )}

          {/* 多图模式 */}
          {displayMode === 'multiple' && (
            <MultipleImageDisplay imageUrls={imageUrls} title={title} themeColor={themeColor} />
          )}
        </div>


        {/* 标题 */}
        <div data-layer="标题" className="absolute content-stretch flex gap-[30px] h-[125px] items-center justify-center left-1/2 top-[42px] translate-x-[-50%] w-[1200px]">
          {/* 标题元素 - 光线左侧 */}
          <div data-svg-wrapper data-layer="标题元素" data-property-1="光线左侧" className="relative">
            <svg width="82" height="22" viewBox="0 0 82 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g filter="url(#filter0_d_2019_17227)">
                <path fillRule="evenodd" clipRule="evenodd" d="M9 11C9 11 69.8954 9 71 9C72.1046 9 73 9.89543 73 11C73 12.1046 72.1046 13 71 13C69.8954 13 9 11 9 11Z" fill="url(#paint0_linear_2019_17227)" />
              </g>
              <defs>
                <filter id="filter0_d_2019_17227" x="0" y="0" width="82" height="22" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
                  <feFlood floodOpacity="0" result="BackgroundImageFix" />
                  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                  <feOffset />
                  <feGaussianBlur stdDeviation="4.5" />
                  <feColorMatrix type="matrix" values="0 0 0 0 0.426042 0 0 0 0 0.697115 0 0 0 0 0.187685 0 0 0 1 0" />
                  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2019_17227" />
                  <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2019_17227" result="shape" />
                </filter>
                <linearGradient id="paint0_linear_2019_17227" x1="9" y1="13" x2="73" y2="13" gradientUnits="userSpaceOnUse">
                  <stop stopColor={themeColor} stopOpacity="0.01" />
                  <stop offset="0.643405" stopColor={themeColor} />
                  <stop offset="1" stopColor={themeColor} />
                </linearGradient>
              </defs>
            </svg>
          </div>

          {/* 标题文本 */}
          <div data-layer="text" data-位置="居中对齐" data-字号="30px" data-字重="特粗" className="py-1 flex justify-center items-center gap-2.5">
            <div className="text-center justify-center text-4xl font-bold font-['HarmonyOS_Sans_SC'] leading-8 tracking-[8px] bg-gradient-to-b from-white to-sky-400 bg-clip-text text-transparent">
              {title}
            </div>
          </div>

          {/* 标题元素 - 光线右侧 */}
          <div data-svg-wrapper data-layer="标题元素" data-property-1="光线右侧" className="relative">
            <svg width="82" height="22" viewBox="0 0 82 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g filter="url(#filter0_d_2019_17231)">
                <path fillRule="evenodd" clipRule="evenodd" d="M73 11C73 11 12.1046 9 11 9C9.89542 9 9 9.89543 9 11C9 12.1046 9.89542 13 11 13C12.1046 13 73 11 73 11Z" fill="url(#paint0_linear_2019_17231)" />
              </g>
              <defs>
                <filter id="filter0_d_2019_17231" x="0" y="0" width="82" height="22" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
                  <feFlood floodOpacity="0" result="BackgroundImageFix" />
                  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                  <feOffset />
                  <feGaussianBlur stdDeviation="4.5" />
                  <feColorMatrix type="matrix" values="0 0 0 0 0.426042 0 0 0 0 0.697115 0 0 0 0 0.187685 0 0 0 1 0" />
                  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2019_17231" />
                  <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2019_17231" result="shape" />
                </filter>
                <linearGradient id="paint0_linear_2019_17231" x1="73" y1="9" x2="9" y2="9" gradientUnits="userSpaceOnUse">
                  <stop stopColor={themeColor} stopOpacity="0.01" />
                  <stop offset="0.643405" stopColor={themeColor} stopOpacity="0.372549" />
                  <stop offset="1" stopColor={themeColor} />
                </linearGradient>
              </defs>
            </svg>
          </div>
        </div>

      </div>
      {/* 删除icon */}
      <button
        data-svg-wrapper data-layer="删除icon"
        className="absolute right-[149px] top-[80px] cursor-pointer hover:opacity-80 transition-opacity"
        onClick={onClose}
      >
        <svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g filter="url(#filter0_i_2019_17214)">
            <circle cx="20.0476" cy="20.0476" r="19.0476" fill="#C9DDFF" fillOpacity="0.09" />
          </g>
          <circle cx="20.0476" cy="20.0476" r="19.5476" stroke="#C9DDFF" />
          <g filter="url(#filter1_d_2019_17214)">
            <path d="M14.2929 12.5142C14.151 12.5094 14.0129 12.5612 13.9092 12.6579L13.1261 13.3862C12.9107 13.5873 12.8993 13.9242 13.1005 14.1395L18.6218 20.0477L13.1005 25.955C13.0036 26.0584 12.9515 26.1962 12.9564 26.3377C12.9612 26.4792 13.0223 26.6131 13.1261 26.7097L13.9092 27.4375C14.013 27.5341 14.1514 27.5857 14.2933 27.5807C14.4351 27.5757 14.5691 27.5146 14.6658 27.411L20.0485 21.6521L25.4308 27.411C25.5275 27.5146 25.6615 27.5757 25.8033 27.5807C25.9452 27.5857 26.0835 27.5341 26.1874 27.4375L26.9705 26.7097C27.0743 26.6131 27.1354 26.4792 27.1402 26.3377C27.1451 26.1962 27.093 26.0584 26.9961 25.955L21.4743 20.0477L26.9961 14.1395C27.1973 13.9243 27.1858 13.5873 26.9705 13.3862L26.1874 12.6579C26.0837 12.5612 25.9456 12.5095 25.8037 12.5142C25.6619 12.519 25.5277 12.58 25.4308 12.6835L20.0485 18.441L14.6658 12.6835C14.5689 12.58 14.4347 12.519 14.2929 12.5142Z" fill="#C9DDFF" />
          </g>
          <defs>
            <filter id="filter0_i_2019_17214" x="0" y="0" width="40.0957" height="40.0952" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
              <feFlood floodOpacity="0" result="BackgroundImageFix" />
              <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
              <feOffset />
              <feGaussianBlur stdDeviation="6.5" />
              <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
              <feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.866667 0 0 0 0 1 0 0 0 0.5 0" />
              <feBlend mode="normal" in2="shape" result="effect1_innerShadow_2019_17214" />
            </filter>
            <filter id="filter1_d_2019_17214" x="3.95605" y="3.51392" width="32.1846" height="33.0671" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
              <feFlood floodOpacity="0" result="BackgroundImageFix" />
              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
              <feOffset />
              <feGaussianBlur stdDeviation="4.5" />
              <feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.866667 0 0 0 0 1 0 0 0 0.501961 0" />
              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2019_17214" />
              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2019_17214" result="shape" />
            </filter>
          </defs>
        </svg>
      </button>

      {/* 返回icon */}
      <button
        className="absolute flex items-center justify-center left-[1770px] size-[90px] top-[900px] cursor-pointer hover:opacity-80 transition-opacity"
        onClick={onClose}
      >
        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
          <div className="relative size-[90px]" data-name="返回icon" data-node-id="853:111934">
            <div className="absolute aspect-[84/84] bottom-[2.38%] flex items-center justify-center left-1/2 top-[2.38%] translate-x-[-50%]">
              <div className="flex-none rotate-[180deg] scale-y-[-100%] size-[80px]">
                <div className="relative size-full" data-node-id="1412:67849">
                  <div className="absolute inset-[-1.25%]">
                    <div className="bg-blue-200/10 rounded-full shadow-[inset_0px_0px_13px_0px_rgba(201,221,255,0.50)] outline outline-1 outline-blue-200 size-full" />
                  </div>
                </div>
              </div>
            </div>
            <div className="absolute flex inset-[31.17%_39.47%] items-center justify-center">
              <div className="flex-none h-[26px] rotate-[180deg] w-[26px]">
                <div className="relative size-full" data-name="路径" data-node-id="853:111931">
                  <div className="absolute inset-[-50.89%_-28.44%]">
                    <svg width="37" height="52" viewBox="0 0 37 52" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g filter="url(#filter0_d_2019_17235)">
                        <path fillRule="evenodd" clipRule="evenodd" d="M24.9389 42.9001C25.2582 42.9114 25.5689 42.7956 25.8025 42.5782L27.5649 40.9403C27.7984 40.7228 27.9357 40.4217 27.9466 40.1032C27.9574 39.7847 27.8409 39.475 27.6227 39.2422L15.199 25.9511L27.6227 12.6576C28.0755 12.1732 28.0496 11.4146 27.5649 10.962L25.8025 9.32397C25.5692 9.10633 25.2587 8.99009 24.9394 9.0009C24.6201 9.01171 24.3183 9.14867 24.1003 9.3816L10.1959 24.2555L9.38209 25.012C9.12173 25.2542 8.98239 25.599 9.00166 25.9535C8.98385 26.3064 9.12306 26.6492 9.38209 26.8902L10.2007 27.6467L24.1003 42.5182C24.3179 42.7515 24.6196 42.8889 24.9389 42.9001Z" fill="#C9DDFF" />
                      </g>
                      <defs>
                        <filter id="filter0_d_2019_17235" x="0" y="0" width="36.9473" height="51.9009" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
                          <feFlood floodOpacity="0" result="BackgroundImageFix" />
                          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                          <feOffset />
                          <feGaussianBlur stdDeviation="4.5" />
                          <feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.866667 0 0 0 0 1 0 0 0 0.501961 0" />
                          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2019_17235" />
                          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2019_17235" result="shape" />
                        </filter>
                      </defs>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </button>
    </div>
  );
};

export default SupplyChainModal;