"use client";
import { useWrStore } from "@/app/store";
import { RuseDetailPopup } from "@/components/ui/map/detailPopup/ruseDetailPopup";
import CoDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/coDatailModal";
import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal";
import { Title, UiTable } from "@common/business_components/ui";
import { useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";

export default function MapFeaturePopup() {
  const [isFeatureCd, setIsFeatureCd] = useState<any>(null);
  const {
    pbnMap,
    rainMapDetile,
    rswtMapDetile,
    htdfMapDetile,
    pbnMapDetaile,
    ldrmntMapDetile,
  } = useWrStore((state) => state);
  const { pbnMapHeadList } = pbnMap;
  const [isDetail, setIsDetail] = useState<any>(null);
  const [layerNm, setLayerNm] = useState<string>();
  const searchParams = useSearchParams();

  useEffect(() => {
    const layerName = searchParams.get("layerNm");
    const featureCd = searchParams.get("featureCd");
    setLayerNm(String(layerName));
    setIsFeatureCd(featureCd);

    const handleUnload = () => {
      // 부모에게 닫힘 알림
      window.opener?.postMessage(
        { type: "POPUP_CLOSED", target: "detail" },
        "*"
      );
    };

    window.addEventListener("beforeunload", handleUnload);

    return () => {
      window.removeEventListener("beforeunload", handleUnload);
    };
  }, []);

  useEffect(() => {
    if (isFeatureCd && layerNm) {
      if (layerNm === "하수재이용시설") {
          setIsDetail(isFeatureCd);
      } else if (layerNm === "하수처리시설") {
        pbnMapDetaile(isFeatureCd, isFeatureCd).then((res) => {
          setIsDetail(res);
        });
      } else if (layerNm === "빗물이용시설") {
        rainMapDetile(isFeatureCd).then((res) => {
          setIsDetail(res);
        });
      } else if (layerNm === "중수도시설") {
        rswtMapDetile(isFeatureCd).then((res) => {
          setIsDetail(res);
        });
      } else if (layerNm === "온배수시설") {
        htdfMapDetile(isFeatureCd).then((res) => {
          setIsDetail(res);
        });
      } else if (layerNm === "잠재수요처") {
        ldrmntMapDetile(isFeatureCd).then((res) => {
          setIsDetail(res);
        });
      }
    }
  }, [isFeatureCd, layerNm]);

  if (!isDetail) return null; // 데이터 없으면 아무것도 안 그림
  return (
    <>
      {isDetail ? (
        <div className="fixed inset-0 w-screen h-screen m-0 p-0  bg-white">
          {layerNm === "하수재이용시설" ? (
            <RuseDetailPopup bscFctCd={isDetail} />
          ) : layerNm === "하수처리시설" ? (
            <div style={{ overflowX: "hidden" }}>
              <div className="flex justify-between items-center mb-4">
                <Title title="하수처리시설 상세정보" />
              </div>
              {/* 높이 조정 */}
              <UiTable
                tableData={isDetail || []}
                headlist={pbnMapHeadList.slice(0, 4)}
                pageSize={1}
                total={0}
                headName={"위치정보"}
                cellClick={() => {}}
                onPageChange={() => {}}
              />
              <UiTable
                tableData={isDetail || []}
                headlist={pbnMapHeadList.slice(4)}
                pageSize={1}
                total={0}
                headName={"기본정보"}
                cellClick={() => {}}
                onPageChange={() => {}}
              />
            </div>
          ) : layerNm === "잠재수요처" ? (
            <CoDetailModal
              formObj={isDetail}
              readonly={false}
              onFormSubmit={async (value) => {
                console.log(value)
              }}
              isMap={true}
            />
          ) : (
            <SttnDetailModal
              type={
                layerNm === "빗물이용시설"
                  ? "RNB"
                  : layerNm === "중수도시설"
                    ? "RST"
                    : "HTB"
              }
              formObj={isDetail}
              isMap={true}
            />
          )}
        </div>
      ) : (
        <></>
      )}
    </>
  );
}