import { useWrStore } from "@/app/store";
import { btnClass } from "@/app/store/common/code";
import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
import { excelDownload } from "@/components/lib/func/commom";
import { Title, UiTable, UITab } from '@common/business_components';
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
import { Button } from "@common/components/ui";
import React, { useCallback, useState, useEffect } from 'react';
import NewWindowPortal from '@/app/map/newWindowPortal';
import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
import type { chgBuilding, customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import RainPrfmncSttnPopup from "@/app/map/rainPrfmncSttnPopup";
import RswtrPrfmncsSttnPopup from "@/app/map/rswtrPrfmncSttnPopup";
import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
import HtdflPrfmncSttnPopup from "@/app/map/htdflPrfmncSttnPopup";
import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
import { getFetch } from "@/components/lib/api";

interface NewWindowPopupProps {
  featureData: any;
  checkedLayers?: string[];
  checkedLayersData?: any[];
  onClose: () => void;
}

// 데이터의 속성(key)을 사용자에게 보여줄 한글 이름으로 변환하기 위한 맵
// 실제 데이터에 맞게 이 부분을 확장해야 합니다.
const propertyNameMap: { [key: string]: string } = {
  fid: '고유 ID',
  fcltNm: '시설명',
  opertDe: '운영일자',
  addr: '주소',
  // ... 필요한 만큼 속성 매핑 추가
};

const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
  featureData,
  checkedLayers = [],
  checkedLayersData = [],
  onClose
}) => {
  const [tabData, setTabData] = useState<{ id: string; name: string; data: any }[]>([]);
  const [activeTab, setActiveTab] = useState<string>('0');
  // swcho : useState의 true, false 값 변경하여 목록, 상태 테스트 하였음
  const [showDetailView, setShowDetailView] = useState(false); // 상세정보 화면 표시 상태 추가

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

  // 하수재이용시설 변수
  const {
    code,
    pbnstSttn,
    pbnstSttnSearch,
    pbnSttnInit,
    getPbnStnDetail,
    pbnNmSearch,
  } = useWrStore((state) => state);
  const [bdstTable, setBdstTable] = useState<WaterReuseFacility[]>();
  const [pageNation, setPageNation] = useState(1);
  const [pbnstRuseFcltPk, setPbnstRuseFcltPk] = useState<string>('');
  const [pbnDetaileData, setPbnDetaileData] = useState<{
    isModal: boolean;
    data: customPbnst;
  }>({ isModal: false, data: {} as customPbnst });

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

  // 중수도시설 변수
  const { rswtSttn, rswtSttnSearch, rswtSttnInit } = useWrStore(
    (state) => state
  );
  const { rswtSttnRes } = rswtSttn;
  const [rswtrTable, setRswtrTable] = useState<customRswtBdst[]>();
  const [rswtrDetailModal, setRswtrDetailModal] = useState<{ isOpen: boolean, data: customRswtBdst | undefined }>({ data: undefined, isOpen: false });
  const [rswtrBdstChgProps, setRswtrBdstChgProps] = useState<{
    isOpen: boolean;
    chBuilding: chgBuilding[];
  }>({ isOpen: false, chBuilding: [] });

  // 온배수시설 변수
  const { htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state);
  const { htdflSttnRes } = htdflSttn;
  const [htdflTable, setHtdflTable] = useState<customHtdflBdst[]>();
  const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false });
  const [bdstChgProps, setBdstChgProps] = useState<{ isOpen: boolean, chBuilding: chgBuilding[] }>({ isOpen: false, chBuilding: [] });

  if (!featureData) {
    return null;
  }

  // 물재이용시설 cellClick 이벤트 (상세정보)
  const pbnstCellClick = (index: number | undefined) => {
    if (
      index !== undefined &&
      pbnstSttn.pbnstSttnRes &&
      pbnstSttn.pbnstSttnRes[index]
    ) {
      setPbnstRuseFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk);
      fetchpbnstDetail(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk)
      setActiveTab(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk)
      setShowDetailView(true); // 상세정보 화면 표시 상태 변경
    }
  };

    useEffect(() => {
      if (!pbnstSttn.isInit) {
        pbnSttnInit("1", "13",{
          partValue: "A",
          sidoValue: "0",
          sigunValue: "",
          regionValue: "",
          unitWaterShedValue: "",
          middleRegionValue: "",
          envPartValue: "",
          sidoText: "",
          sigunText: ""
        },  String(new Date().getFullYear()));
      }
    }, [pbnstSttn.isInit]);

    useEffect(() => {
      setBdstTable(pbnstSttn.pbnstSttnRes);
    }, [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 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 onPageChangeHandler = useCallback((page: number) => {
    pbnstSttnSearch(
      String(page),
      String(13),
      {
        partValue: "A",
        sidoValue: "0",
        sigunValue: "",
        regionValue: "",
        unitWaterShedValue: "",
        middleRegionValue: "",
        envPartValue: "",
        sidoText: "",
        sigunText: "",
      },
      "",
      String(new Date().getFullYear())
    );
  }, []);
  // useEffect(() => {
  //   if (featureData) {
  //     const selectedVal = featureData.getProperties();
  //     const featureCd = selectedVal?.swtrmt_fclt_cd;
  //     if (featureCd && featureCd !== pbnstRuseFcltPk) {
  //       setPbnstRuseFcltPk(featureCd); // 현재 호출된 featureCd 저장
  //       setActiveTab(featureCd)
  //       fetchpbnstDetail(featureCd); // 상세정보 가져오기
  //     }
  //   }
  // }, [featureData]);

  useEffect(() => {
    if (pbnstSttn.pbnstDetail) {
      setPbnDetaileData({
        isModal: true,
        data: pbnstSttn.pbnstDetail,
      });
    }
  }, [pbnstSttn.pbnstDetail]);

  // 빗물재이용시설 cellClick 이벤트 (상세정보)
  const rainCellClick = (index: number | undefined, headId: string) => {
    if (
      index !== undefined &&
      rainTable !== undefined &&
      headId !== 'chBuildingYn') {
      setRainDetailModal({ isOpen: true, data: rainTable[index] })
    } else if (headId === 'chBuildingYn' && index !== undefined && rainTable !== undefined) {
      if (rainTable[index] && rainTable[index]?.chgBuilding[0]?.bdstChgNm !== null)
        setRainBdstChgProps({ isOpen: true, chBuilding: rainTable[index].chgBuilding });
    }
  }

  // 중수도시설 cellClick 이벤트 (상세정보)
  const rswtCellClick = (index: number | undefined, headId: string) => {
    if (headId !== 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) {
      setRswtrDetailModal({ isOpen: true, data: rswtrTable[index] })
    } else if (headId === 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) {
      if (rswtrTable[index] && rswtrTable[index]?.chBuildingYn === 'Y') {
        setRswtrBdstChgProps({ isOpen: true, chBuilding: rswtrTable[index].chgBuilding });
      }
    }
  }

  // 온배수시설 cellClick 이벤트 (상세정보)
  const htdflCellClick = (index: number | undefined, headId: string) => {
    if (
      headId !== "chBuildingYn" &&
      index !== undefined &&
      htdflTable !== undefined
    ) {
      setHtdflDetailModal({ isOpen: true, data: htdflTable[index] });
    }
  };

  const excelClick = useCallback(() => {
    // if (codeData) pbnstSttnSearch(1, "10000", codeData);
    excelDownload(
      [[]],
      "하수재이용시설 현황",
      "sample_pbnstSttn.xlsx",
      "A1:U2"
    );
  }, [pbnstSttnSearch]);

  // 체크된 레이어에 따른 조건부 컴포넌트 렌더링 함수
  const renderConditionalContent = () => {
    // 특정 레이어가 체크되었는지 확인
    const hasWaterTreatmentLayer = checkedLayersData.some(layer =>
      layer.data?.lyrNm?.includes('하수처리') || layer.data?.lyrNm?.includes('재이용시설')
    );
    const actTabData = tabData.find((tab) => tab.id === activeTab);
    console.log('tavbData',actTabData)
    // swcho : true, false 값 변경하여 시설 변경하여 테스트하였음
    // 재이용시설
    const isPbnst = true;
    // 빗물이용시설
    const isRain = false;
    // 중수도시설
    const isRswt = false;
    // 온배수시설
    const isHtdfl = false;
    if (isPbnst) {
      if (showDetailView) {
        // 재이용시설 상세
        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),
                }))}
                children={undefined}
              />
            </div>
            <PbnstSttnModal
              data={tabData.find((tab) => tab.id === activeTab)?.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 || []}
              children={<HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />}
              headlist={pbnstSttn.pbnstSttHeadList}
              pageSize={20}
              total={100000}
              cellClick={(index: number | undefined, headId: string) => {
                pbnstCellClick(index);
              }}
              onPageChange={onPageChangeHandler}
            />
          </>
        );
      }
    }
  
    if (isRain) {
      if (showDetailView) {
        // 빗물이용시설 상세
        return (
          <>
            <div className="flex justify-between items-center mb-4">
              <Title title="빗물이용시설 상세정보" />
            </div>
            <RainPrfmncSttnPopup rainForm={rainDetailModal.data as customRainBdst} isModal={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={rainTable || []}
              children={<HeadMakeColSpan upHeadList={rainSttn.rainSttNodeList} />}
              headlist={rainSttn.rainSttHeadList}
              pageSize={20}
              total={100000}
              cellClick={(index: number | undefined, headId: string) => {
                rainCellClick(index ?? undefined, headId);
              }}
              onPageChange={setPageNation}
            />
          </>
        );
      }
    }
  
    if (isRswt) {
      if (showDetailView) {
        // 중수도시설 상세
        return (
          <>
            <div className="flex justify-between items-center mb-4">
              <Title title="중수도시설 상세정보" />
            </div>
            <RswtrPrfmncsSttnPopup rswtForm={rswtrDetailModal.data as customRswtBdst} isModal={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={rswtrTable || []}
              children={<HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} />}
              headlist={rswtSttn.rswtSttHeadList}
              pageSize={20}
              total={100000}
              cellClick={(index: number | undefined, headId: string) => {
                rswtCellClick(index, headId);
              }}
              onPageChange={setPageNation}
            />
          </>
        );
      }
    }
  
    if (isHtdfl) {
      if (showDetailView) {
        // 온배수시설 상세
        return (
          <>
            <div className="flex justify-between items-center mb-4">
              <Title title="온배수시설 상세정보" />
            </div>
            <HtdflPrfmncSttnPopup htdflForm={htdflDetailModal.data as customHtdflBdst} isModal={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={htdflTable || []}
              children={<HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />}
              headlist={htdflSttn.htdflSttHeadList}
              pageSize={20}
              total={100000}
              cellClick={(index: number | undefined, headId: string) => {
                htdflCellClick(index ?? undefined, headId);
              }}
              onPageChange={setPageNation}
            />
          </>
        );
      }
    }
  
    return null; // 조건에 맞는 콘텐츠가 없을 경우
  };

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

export default NewWindowPopup;