"use client"
import NewWindowPortal from '@/app/map/newWindowPortal';
import { useWrStore } from "@/app/store";
import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
import type { customPbnst, pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
import type { customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
import { fetchType, getFetch, postFectch } from "@/components/lib/api";
import { tableData } from "@/components/lib/func/commom";
import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal";
import { Title, UITab, UiTable } from '@common/business_components';
import { useGisContext } from "@common/business_components/ui/map/Gis";
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
import React, { useCallback, useEffect, useState } from 'react';

interface NewWindowPopupProps {
  featureData: any;
  seletectedLayerNm?: string
  viewMode?: 'list' | 'detail' | 'nothing'
  onFeatureSelect: (data: any) => void;
  onClose: () => void;
}

const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
  featureData,
  seletectedLayerNm,
  onFeatureSelect,
  onClose
}) => {
  const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject<number[]>; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; };
  const [tabData, setTabData] = useState<{ id: string; name: string; data: any }[]>([]);
  const [activeTab, setActiveTab] = useState<string>('0');
  const [viewMode, setViewMode] = useState<'list' | 'detail' | 'nothing'>('list');
  const [fcltPk, setFcltPk] = useState<string>('');


  // onClose 함수를 useCallback으로 메모이제이션
  const memoizedOnClose = useCallback(() => {
    onClose();
  }, [onClose]);

  // 하수재이용시설 변수
  const {
    code,
    pbnstSttn,
    pbnstSttnSearch,
    pbnSttnInit,
    getFlcts
  } = useWrStore((state) => state);
  const { fclts, pbnstSttnResCount } = pbnstSttn
  const [bdstTable, setBdstTable] = useState<WaterReuseFacility[]>()

  // 빗물재이용시설 변수
  const { rainSttn, rainSttnSearch, rainSttnInit } = useWrStore(
    (state) => state
  );
  const { rainSttnRes, rainSttnResCount } = rainSttn;
  const [rainTable, setRainTable] = useState<customRainBdst[]>();
  const [rainPage, setRainPage] = useState(1)
  const [rainDetailModal, setRainDetailModal] = useState<{ isOpen: boolean, data: customRainBdst | undefined }>({ data: undefined, isOpen: false });
  const [rainList, setRainList] = useState<customRainBdst[]>(rainSttnRes || []);

  // 중수도시설 변수
  const { rswtSttn, rswtSttnSearch, rswtSttnInit } = useWrStore(
    (state) => state
  );
  const { rswtSttnRes, rswtSttnResCount } = rswtSttn;
  const [rswtrTable, setRswtrTable] = useState<customRswtBdst[]>();
  const [rswtrDetailModal, setRswtrDetailModal] = useState<{ isOpen: boolean, data: customRswtBdst | undefined }>({ data: undefined, isOpen: false });
  const [rswtrPage, setRswtrPage] = useState(1);
  const [rswtrList, setRswtrList] = useState<customRswtBdst[]>(rswtSttnRes || []);

  // 온배수시설 변수
  const { htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state);
  const { htdflSttnRes,htdflSttnResCount } = htdflSttn;
  const [htdflTable, setHtdflTable] = useState<customHtdflBdst[]>();
  const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false });
  const [htdflPage, setHtdflPage] = useState(1)
  const [htdflList, setHtdflList] = useState<customHtdflBdst[]>(htdflSttnRes || []);

  //하수처리시설 변수
  const {
    pbnst,
    pubHasuInit,
  } = useWrStore((state) => state);
  const { pubFacHeadList, pbnstHasuRes } = pbnst;
  const [hasuList, setHasuList] = useState<pubHasuType[]>(pbnstHasuRes || []);
  const [isRuseReg, setIsRuseReg] = useState<{
    data: any | undefined;
  }>({ data: undefined });
  const [hasuTable, setHasuTable] = useState<pubHasuType[]>();
  const [hasuPage, setHasuPage] = useState<number>(1);
  ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
  const getSelectedLayers = () => {
    let result = null;
    const layers = gisMap ? gisMap.getLayers().getArray().filter((l: any) => l.getVisible()) : []; // gisMap이 null인지 확인 후 레이어 가져오기
    let featureLayer: { get: (key: string) => any } = {get:()=> null};
    layers.forEach((layer: any) => {
      const source = layer.getSource();
      if (source && source.hasFeature && featureData
        && typeof featureData.getId === 'function' && source.hasFeature(featureData)) {
        featureLayer = layer; // 피처가 속한 레이어 찾기)
      }
    });
    result = featureLayer.get('lyrNm');

    return result;
  };
  const fetchpbnstDetail = async (featureCd: string) => {
    try {
      const response = await getFetch("wr", `/reuseFc/pubFc/${featureCd}`);
      // 중복 데이터 추가 방지
      setTabDataFunc(response, featureCd);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };
  const fetchHasuDetail = async (featureCd: string, data: string) => {
    try {
      const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/10/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON)
      setHasuList(
        rainRes.data.map((item: any) => {
        return {
          ...item,
          fctCpc: Number(item.fctCpc) || 0,
          ruse: item.ruse === false ? "N" : "Y",
        };
      })
      ) 
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };
  const detainSttn = async (featureCd: string, layerNm: string) => {
    if (layerNm == '빗물이용시설') {
      const res = await getFetch(fetchType.WR, `/reuseFc/rainyInfoList/1/20/0/${featureCd}`)
      setRainList(res)
    }
    else if(layerNm == '중수도시설'){
      const res = await getFetch(fetchType.WR,`/reuseFc/waterreuseFc/1/20/0/${featureCd}`)
      setRswtrList(res)
    }
    else{
      const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`)
      setHtdflList(res)
      setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });
    }
  }
  // 상세 목록 데이터 상태 처리
  useEffect(()=>{
    if (hasuList.length > 0) setIsRuseReg({ data: [hasuList[0]] });
  },[hasuList])  
  useEffect(()=>{
    if (rainList.length > 0) setRainDetailModal({ isOpen: true, data: rainList[0] });
  },[rainList])
  useEffect(()=>{
    if (rswtrList.length > 0) setRswtrDetailModal({ isOpen: true, data: rswtrList[0] });
  },[rswtrList])
  useEffect(()=>{
    if (htdflList.length > 0) setHtdflDetailModal({ isOpen: true, data: htdflList[0] });
  },[htdflList])

  const layerId = getSelectedLayers();
    if (featureData && typeof featureData.getProperties === "function") {
      const selectedVal = featureData.getProperties();
      let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' || layerId == '온배수시설' ? selectedVal?.bdst_nm : layerId == '하수처리시설' ? selectedVal?.swtrmt_fclt_nm : null;
      if (featureCd && featureCd !== fcltPk) {
        if (layerId == '하수재이용시설') {
          featureCd = selectedVal?.swtrmt_fclt_cd;
          setFcltPk(featureCd); // 현재 호출된 featureCd 저장
          setActiveTab(featureCd)
          fetchpbnstDetail(featureCd); // 상세정보 
        }
        else if (layerId == '하수처리시설') {
          featureCd = selectedVal?.swtrmt_fclt_nm;
          setFcltPk(featureCd); // 현재 호출된 featureCd 저장
          fetchHasuDetail(featureCd, selectedVal?.swtrmt_fclt_cd);
        }
        else {
          featureCd = selectedVal?.bdst_nm;
          setFcltPk(featureCd)
          if (layerId) {
            detainSttn(featureCd, layerId);
          }
        }
        setViewMode("detail")
      }
    } else if (layerId === null && seletectedLayerNm) { setViewMode("list") }
  ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////

  ///////////////////////////////////////////// 하수재이용시설 //////////////////////////////////////////////////
  // 재이용시설 cellClick 이벤트 (상세정보)
  const pbnstCellClick = (index: number | undefined) => {
    if (
      index !== undefined &&
      pbnstSttn.pbnstSttnRes &&
      pbnstSttn.pbnstSttnRes[index]
    ) {
      setFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltId);
      onFeatureSelect(pbnstSttn.pbnstSttnRes[index]);
      onClose()
    }
  };

  // 재이용 현황 초기값
  useEffect(() => {
    if (!pbnstSttn.isInit) {
      getFlcts()
    }
  }, [seletectedLayerNm, pbnstSttn.isInit, getFlcts]);
  useEffect(()=>{
    pbnSttnInit("1", "15", {
      partValue: "A",
      sidoValue: '0',
      sigunValue: "0",
      regionValue: "",
      unitWaterShedValue: "",
      middleRegionValue: "",
      envPartValue: "",
      sidoText: "",
      sigunText: ""
    }, String(new Date().getFullYear()), pbnstSttn.fclts);
  }, [fclts, pbnSttnInit, pbnstSttn.fclts])
  useEffect(() => {
    setBdstTable(pbnstSttn.pbnstSttnRes);
  }, [seletectedLayerNm, pbnstSttn.pbnstSttnRes]);

  // 재이용시설 상세정보
  const setTabDataFunc = (res: any, pk: string) => {
    setTabData((prev) => {
      if (prev.some((tab) => tab.id === pk)) {
        return prev; // 이미 존재하는 탭이면 추가하지 않음
      }
      return [...prev, { id: pk, name: `재이용시설 ${prev.length + 1}`, data: res }];
    });
  }
  // 재이용시설 조회
  // 재이용시설 페이징처리 관련 함수
  const onPageChangeHandler = useCallback((page: number) => {
    pbnstSttnSearch(
      false,
      String(page),
      String(13),
      {
        partValue: "A",
        sidoValue: "0",
        sigunValue: "0",
        regionValue: "",
        unitWaterShedValue: "",
        middleRegionValue: "",
        envPartValue: "",
        sidoText: "",
        sigunText: "",
      },
      "",
      String(new Date().getFullYear()), fclts
    );
  }, [fclts, pbnstSttnSearch]);
// FIXME: 윤선화차장님 요구사항으로 엑셀 다운로드 삭제.
  // const excelClick = useCallback(() => {
  //   // if (codeData) pbnstSttnSearch(1, "10000", codeData);
  //   excelDownload(
  //     [[]],
  //     "하수재이용시설 현황",
  //     "sample_pbnstSttn.xlsx",
  //     "A1:U2"
  //   );
  // }, [pbnstSttnSearch]);
  ///////////////////////////////////////////// 하수재이용시설 //////////////////////////////////////////////////

  ///////////////////////////////////////////// 빗물 재이용 //////////////////////////////////////////////////
  // 빗물재이용시설 cellClick 이벤트 (상세정보)
  const rainCellClick = (index: number | undefined, headId: string) => {
    if (
      index !== undefined &&
      rainTable !== undefined &&
      headId !== 'chBuildingYn') {
      // setRainDetailModal({ isOpen: true, data: rainTable[index] })
      // setViewMode('detail')
      onFeatureSelect(rainTable[index]);
      onClose();
    }
  }
  

  useEffect(() => {
    if (!rainSttn.isInit) {
      rainSttnInit(false, 1, "20", "0", '', code.cityCd, code.sggCd);
    }
  }, [code.cityCd, code.sggCd, rainSttn.isInit, rainSttnInit]);

  useEffect(() => {
    const data = tableData(rainSttnRes, { code });
    const chData = data
      .map((item: any) => {
        return {
          ...item,
          ...item.reuseBuilding[0],
          ...item.reuseBuilding[0].rainyObj,
          dtfcltCpct: item.reuseBuilding[0].rainyObj.dtfcltCpct === -1
            ? "확인불가"
            : item.reuseBuilding[0].rainyObj.dtfcltCpct,
          instlCst: item.reuseBuilding[0].instlCst === -1
            ? "확인불가"
            : item.reuseBuilding[0].instlCst,
          instlCstSprtAmt: item.reuseBuilding[0].instlCstSprtAmt === -1
            ? "확인불가"
            : item.reuseBuilding[0].instlCstSprtAmt,
          chBuildingYn: item.chgBuilding[0]?.bdstChgNm !== null ? "Y" : "N",
          pntfColArea: item.reuseBuilding[0].rainyObj.pntfColArea === -1
            ? "확인불가"
            : item.reuseBuilding[0].rainyObj.pntfColArea,
          filtrTrtmfctCpct: item.reuseBuilding[0].rainyObj.filtrTrtmfctCpct === -1
            ? "확인불가"
            : item.reuseBuilding[0].rainyObj.filtrTrtmfctCpct,
          archArea: Math.floor(item.archArea) === -1 ? "확인불가" : item.archArea,
        };
      })
      .filter((item: any) => item.rainyObj !== undefined);
    setRainTable(chData);
  }, [code, rainSttnRes, rainSttn.rainSttHeadList]);

  useEffect(() => {
    rainSttnSearch(false, rainPage, "20", '', '', code.cityCd, code.sggCd);
  }, [code.cityCd, code.sggCd, rainPage, rainSttnSearch]);
  ///////////////////////////////////////////// 빗물 재이용 //////////////////////////////////////////////////

  ///////////////////////////////////////////// 중수도 시설 //////////////////////////////////////////////////
  // 중수도시설 cellClick 이벤트 (상세정보)
  const rswtCellClick = (index: number | undefined, headId: string) => {
    if (headId !== 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) {
      // setRswtrDetailModal({ isOpen: true, data: rswtrTable[index] });
      // setViewMode('detail')
      onFeatureSelect(rswtrTable[index]);
      onClose();
    }
  }
  useEffect(() => {
    if (!rswtSttn.isInit) {
      rswtSttnInit(false, 1, "20", "0", '', code.cityCd, code.sggCd);
    }
  }, [code.cityCd, code.sggCd, rswtSttn.isInit, rswtSttnInit]);

  useEffect(() => {
    const data = tableData(rswtSttnRes, { code });
    const chData = data
      .map((item: customRswtBdst) => {
        return {
          ...item,
          ...item.reuseBuilding[0],
          ...item.reuseBuilding[0]?.rswtrObj,
          chBuildingYn: item?.chgBuilding[0]?.bdstChgNm !== null && item?.chgBuilding.length > 0 ? 'Y' : 'N',
          instlCst: item.reuseBuilding[0]?.instlCst === -1 ? "확인불가" : item.reuseBuilding[0]?.instlCst,
          instlCstSprtAmt: item.reuseBuilding[0]?.instlCstSprtAmt === -1 ? "확인불가" : item.reuseBuilding[0]?.instlCstSprtAmt,
          archArea: item?.archArea.split('.')[0] !== '-1' ? item?.archArea.split('.')[0] : '확인불가'
        }
      })
      .filter(
        (item: customRswtBdst) =>
          item.reuseBuilding[0]?.rswtrObj !== undefined
      );
    setRswtrTable(chData);
  }, [code, rswtSttnRes]);
  // FIXME: 윤선화 차장님 요구사항으로 엑셀 다운로드 삭제. 
  // const rswtSttnExcelDownload = useCallback(() => {
  //   if (rswtSttn.excelList.length > 0) {
  //     if (rswtSttn.excelList.length === 0) return;
  //     excelDownload(
  //       rswtSttn.excelList,
  //       "중수도시설 현황",
  //       "sample_rswtSttn.xlsx",
  //       "A1:W3",
  //     );
  //   }
  // }, [rswtSttn.excelList])

  useEffect(() => {
    rswtSttnSearch(false, rswtrPage, "20", '', '', code.cityCd, code.sggCd);
  }, [code.cityCd, code.sggCd, rswtSttnSearch, rswtrPage]);
  ///////////////////////////////////////////// 중수도 시설 //////////////////////////////////////////////////

  ///////////////////////////////////////////// 온배수 시설 //////////////////////////////////////////////////
  // 온배수시설 cellClick 이벤트 (상세정보)
  const htdflCellClick = (index: number | undefined) => {
    if (index !== undefined && htdflTable !== undefined) {
      onFeatureSelect(htdflTable[index]);
      onClose();
    }
  };
  useEffect(() => {
    if (!htdflSttn.isInit) {
      initHtdfl(false, 1, "20", "0", '', code.cityCd, code.sggCd);
    }
  }, [code.cityCd, code.sggCd, htdflSttn.isInit, initHtdfl]);

  useEffect(() => {
    const data = tableData(htdflSttnRes, { code });
    const chData = data
      .map((item: any) => ({
        ...item,
        ...item.reuseBuilding[0],
        ...item.reuseBuilding[0].htdflObj,
        chBuildingYn: item.chgBuilding[0]?.bdstChgNm !== null ? "Y" : "N",
      }))
      .filter((item: any) => item.htdflObj !== undefined);
    setHtdflTable(chData);
  }, [code, htdflSttnRes, htdflSttn.htdflSttHeadList]);

  useEffect(() => {
    htdflSttnSearch(true, htdflPage, "20", '', '', code.cityCd, code.sggCd);
  }, [code.cityCd, code.sggCd, htdflPage, htdflSttnSearch]);
  ///////////////////////////////////////////// 온배수 시설 //////////////////////////////////////////////////

  ///////////////////////////////////////////// 하수처리 시설 //////////////////////////////////////////////////
  useEffect(() => {
    if (code.sggCd.length && pbnstHasuRes.length > 0) {
      setHasuTable(tableData(pbnstHasuRes, { code }));
    }
  }, [code, pbnstHasuRes]);
  useEffect(() => {
    if (!pbnst.isInit) {
      pubHasuInit("1", "0");
    }
  }, [pbnst.isInit, pubHasuInit]);
  useEffect(() => {
    pubHasuInit(String(hasuPage), "0");
  }, [hasuPage, pubHasuInit]);
  
  const hasuCellClick = (index: number | undefined) => {
    if (index !== undefined && pbnstHasuRes !== undefined) {
      onFeatureSelect(pbnstHasuRes[index]);
      onClose();
    }
  };
  ///////////////////////////////////////////// 하수처리 시설 //////////////////////////////////////////////////

  // 체크된 레이어에 따른 조건부 컴포넌트 렌더링 함수
  const renderConditionalContent = () => {
    const actTabData = tabData.find((tab) => tab.id === activeTab);
    let layerId:string | undefined | null = getSelectedLayers();
    if (layerId === null || layerId === undefined) {
      layerId = seletectedLayerNm || '';
    }
    //하수처리시설
    const isPrcsFclt = layerId == '하수처리시설'
    // 재이용시설
    const isPbnst = layerId == '하수재이용시설';
    // 빗물이용시설
    const isRain = layerId == '빗물이용시설';
    // 중수도시설
    const isRswt = layerId == '중수도시설';
    // 온배수시설
    const isHtdfl = layerId == '온배수시설';
    if (isPrcsFclt) {
      if (viewMode == 'list') {
        return (
          <>
            <div className="flex justify-between items-center mb-4">
              <Title title="하수처리시설 현황" />
            </div>
            {/* 높이 조정 */}
            <UiTable
              tableData={hasuTable || []}
              headlist={pubFacHeadList}
              pageSize={10}
              total={5000}
              headName={""}
              cellClick={hasuCellClick}
              onPageChange={setHasuPage}
            />
          </>
        )
      } else {
        return (
          <>
            <div className="flex justify-between items-center mb-4">
              <Title title="하수처리시설 상세정보" />
            </div>
            {/* 높이 조정 */}
            <UiTable
              tableData={isRuseReg?.data || []}
              headlist={pubFacHeadList.slice(0, 4)}
              pageSize={1}
              total={0}
              headName={"위치정보"}
              cellClick={() => { }}
              onPageChange={() => { }}
            />
            <UiTable
              tableData={isRuseReg?.data || []}
              headlist={pubFacHeadList.slice(4)}
              pageSize={1}
              total={0}
              headName={"기본정보"}
              cellClick={() => { }}
              onPageChange={() => { }}
            />
          </>
        )
      }
    }
    if (isPbnst) {
      if (viewMode == 'detail') {
        // 재이용시설 상세
        return (
          <>
            <div className="flex justify-between items-center mb-4">
              <Title title="하수재이용시설 상세정보" />
            </div>
            <div className="flex justify-between items-center mb-8">
              <UITab
                defaultValue={activeTab}
                tabList={tabData.map((tab) => ({
                  value: tab.id,
                  label: tab.name,
                  onClick: () => setActiveTab(tab.id),
                }))}
              />
            </div>
            <PbnstSttnModal
              data={actTabData?.data[0] || ({} as customPbnst)}
              titleVisible={false}
            />
          </>
        );
      } else {
        // 재이용시설 목록
        return (
          <>
            <div className="flex justify-between items-center">
              <Title title="하수재이용시설 현황" />
              {/* <div className="flex gap-2 mt-8">
                <Button className={btnClass} color="primary" onClick={excelClick}>
                  엑셀다운로드
                </Button>
              </div> */}
            </div>
            <UiTable
              headName={[]}
              tableData={bdstTable || []}
              headlist={pbnstSttn.pbnstSttHeadList}
              pageSize={20}
              total={pbnstSttnResCount || 0}
              cellClick={(index: number | undefined) => {
                pbnstCellClick(index);
              }}
              onPageChange={onPageChangeHandler}
            >
              <HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />
            </UiTable>
          </>
        );
      }
    }

    if (isRain) {
      if (viewMode == 'detail') {
        // 빗물이용시설 상세
        return (
          <SttnDetailModal type={"RNB"} formObj={rainDetailModal.data as customRainBdst} />
        );
      } else {
        // 빗물이용시설 목록
        return (
          <>
            <div className="flex justify-between items-center">
              <Title title="빗물이용시설 현황" />
              {/* <div className="flex gap-2 mt-8">
                <Button className={btnClass} color="primary" onClick={excelClick}>
                  엑셀다운로드
                </Button>
              </div> */}
            </div>
            <UiTable
              headName={[]}
              tableData={rainTable || []}
              headlist={rainSttn.rainSttHeadList}
              pageSize={20}
              total={rainSttnResCount}
              cellClick={(index: number | undefined, headId: string) => {
                rainCellClick(index ?? undefined, headId);
              }}
              onPageChange={setRainPage}
            >
              <HeadMakeColSpan upHeadList={rainSttn.rainSttNodeList} />
            </UiTable>
          </>
        );
      }
    }

    if (isRswt) {
      if (viewMode == 'detail') {
        // 중수도시설 상세
        return (
          <SttnDetailModal type={"RST"} formObj={rswtrDetailModal.data as customRswtBdst} />
        );
      } else {
        // 중수도시설 목록
        return (
          <>
            <div className="flex justify-between items-center">
              <Title title="중수도시설 현황" />
              {/* <div className="flex gap-2 mt-8">
                <Button className={btnClass} color="primary" onClick={rswtSttnExcelDownload}>
                  엑셀다운로드
                </Button>
              </div> */}
            </div>
            <UiTable
              headName={[]}
              tableData={rswtrTable || []}
              headlist={rswtSttn.rswtSttHeadList}
              pageSize={20}
              total={rswtSttnResCount}
              cellClick={(index: number | undefined, headId: string) => {
                rswtCellClick(index, headId);
              }}
              onPageChange={setRswtrPage}
            >
              <HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} />
            </UiTable>
          </>
        );
      }
    }

    if (isHtdfl) {
      if (viewMode == 'detail') {
        // 온배수시설 상세
        return (
          <SttnDetailModal type={"HTB"} formObj={htdflDetailModal.data as customHtdflBdst} />
        );
      } else {
        // 온배수시설 목록
        return (
          <>
            <div className="flex justify-between items-center">
              <Title title="온배수시설 현황" />
              {/* <div className="flex gap-2 mt-8">
                <Button className={btnClass} color="primary" onClick={excelClick}>
                  엑셀다운로드
                </Button>
              </div> */}
            </div>
            <UiTable
              headName={[]}
              tableData={htdflTable || []}
              headlist={htdflSttn.htdflSttHeadList}
              pageSize={20}
              total={htdflSttnResCount || 0}
              cellClick={(index: number | undefined) => {
                htdflCellClick(index ?? undefined);
              }}
              onPageChange={setHtdflPage}
            >
              <HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />
            </UiTable>
          </>
        );
      }
    }

    return null; // 조건에 맞는 콘텐츠가 없을 경우
  };

  return (
    viewMode == 'nothing' ? <></> :
      <NewWindowPortal onClose={memoizedOnClose} title="시설 상세 정보">
        {/* 체크된 레이어에 따른 조건부 렌더링 */}
        {renderConditionalContent()}
      </NewWindowPortal>
  );
};

export default NewWindowPopup;