// "use client"

// import { useWrStore } from "@/app/store";
// import SearchInputText from "@/components/ui/searchInput/searchInput";
// import type { EnvPartSelectDataType, ReturnType, SelectDataType } from "@common/business_components/ui";
// import { SelectBox } from "@common/business_components/ui";
// import { Button, Input, Label } from "@common/components/ui";
// import React, { useEffect, useMemo, useRef, useState } from "react";
// import { MapSearchFormLeft } from "./mapSearchForm";


// // 건물 검색 타입 정의
// interface BuildingInfo {
//   bdstInfoPk: number;
//   ctpvCd: number;
//   sggCd: number;
//   daddr: string;
//   bdstNm: string;
//   frstArchPrmsnDt: string;
//   archArea: number;
//   ctpvNm: string | null;
//   sggNm: string | null;
//   lat: number | null;
//   lot: number | null;
//   regDt: string;
//   rgtr: string | null;
//   mdfcnDt: string;
//   mdfr: string | null;
// }

// type SearchBaseType = {
//   searchType: string;
//   selectSidoData?: SelectDataType[] | [];
//   selectSigunData?: SelectDataType[] | [];
//   selectRegionData?: SelectDataType[] | [];
//   selectUnitWaterShedData?: SelectDataType[] | [];
//   selectMiddleRegionData?: SelectDataType[] | [];
//   selectEnvPartData?: EnvPartSelectDataType[] | [];
//   onFeatureSelect: () => void;
//   btnClass?: string;
//   ref?: React.RefObject<ReturnType>;
//   isAdmin?: boolean;
//   leftClassName?: string;
//   rightClassName?: string;
//   showQueryButton?: boolean;
//   showInitButton?: boolean;
//   showApplyButton?: boolean;
//   checkedLayers?: string[];
//   checkedLayersData?: any[];
// }

// const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`;

// const YEARS = Array.from({ length: 100 }, (_, i) => `${2025 - i}`);

// interface SearchModalProps {
//   open: boolean;
//   onOpenChange: (open: boolean) => void;
//   onFeatureSelect: (row: any) => void;
// }

// interface SelectedDataTypeWithSggNm {
//   text: string;
//   val: string;
//   sggNm: string;
// }

// export function MapSearchBar({
//   searchType,
//   selectSidoData,
//   selectSigunData,
//   selectRegionData,
//   selectUnitWaterShedData,
//   selectMiddleRegionData,
//   selectEnvPartData,
//   btnClass,
//   onFeatureSelect,
//   isAdmin = false,
//   leftClassName,
//   rightClassName,
//   showQueryButton = true,
//   showInitButton = true,
//   showApplyButton = true,
//   checkedLayers = [],
//   checkedLayersData = [],
// }: SearchBaseType) {

//   // 로딩바 
//   const [isLoading, setIsLoading] = useState(false);
//   // 상세 정보 조회를 위한 상태 추가
//   const [popupFeature, setPopupFeature] = useState<any>(null);
//   const [isChHead, setIsChHead] = useState(false);
//   const ref = useRef<ReturnType>({} as ReturnType);

//   // zustand store에서 건물 검색 함수와 데이터 가져오기
//   const {
//     code,
//     bdst,
//     findBdst,
//     wrMap,
//     buildingSearchRes,
//     buildingNmSearch,
//     buildingNmSearchMultiple
//   } = useWrStore((state) => state);

//   const [selectedBuilding, setSelectedBuilding] = useState<BuildingInfo | null>(null);
//   const [buildingSearchText, setBuildingSearchText] = useState("");
//   const [buildingList, setBuildingList] = useState<BuildingInfo[]>([]);

//   // 전체 목록
//   const [partValue, setPartValue] = useState<string>("A");
//   const [sidoValue, setSidoValue] = useState<string>("0");
//   const [sigunValue, setSigunValue] = useState<string>("0");
//   const [regionValue, setRegionValue] = useState<string>("0");
//   const [untitWaterShedValue, setUntitWaterShedValue] = useState<string>("0");
//   const [middleRegionValue, setMiddleRegionValue] = useState<string>("0");
//   const [envPartValue, setEnvPartValue] = useState<string>("0");
//   const [resetTrigger, setResetTrigger] = useState(false);
//   const [sidoText, setSidoText] = useState<string>("0");
//   const [sigunText, setSigunText] = useState<string>("0");
//   // 공급처 후보지 조회 필터 목록
//   const [selectedSido, setSelectedSido] = useState<SelectDataType>({ text: "전체", val: '0' });
//   const [selectedSigun, setSelectedSigun] = useState<SelectDataType>({ text: "전체", val: '0' });
//   const [selectedFclt, setSelectedFclt] = useState<SelectedDataTypeWithSggNm>({ text: "전체", val: '0', sggNm: '전체' }); // 시설명 선택 상태
//   // 전체 시설
//   let allFclt: SelectedDataTypeWithSggNm[] = [{ text: "전체", val: '0', sggNm: '전체' }];
//   const [selectedDong, setSelectedDong] = useState<SelectedDataTypeWithSggNm>({ text: "전체", val: '0', sggNm: '전체' }); // 시설명 선택 상태 // 행정동

//   const filteredSigunData = useMemo(() => {
//     if (!selectedSido || selectedSido.val === '0' || !selectedSido.val) return [{ text: "전체", val: '0' }];
//     return [
//       { text: "전체", val: '0' },
//       ...code.sggCd.filter((item: { val: string; }) => item.val.substring(0, 2) === selectedSido.val.substring(0, 2))
//     ];
//   }, [selectedSido]);

//   const filteredFcltData = useMemo(() => {
//     if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) return [{ text: "전체", val: '0', sggNm: '전체' }];
//     return [
//       { text: "전체", val: '0', sggNm: '전체' },
//       ...allFclt.filter(item => item.sggNm === selectedSido.text)
//     ];
//   }, [selectedSigun]);

//   const filteredDong = useMemo(() => {
//     if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) return [{ text: "전체", val: '0', sggNm: '전체' }];
//     return [
//       { text: "전체", val: '0', sggNm: '전체' },
//       // ...code.dong.filter(item => item.sggNm === selectedSido.text)
//     ];
//   }, [selectedSigun]);

//   // 조회 함수
//   const queryVal = () => {
//     // 46 : 하수처리시설
//     // 47 : 하수재이용시설
//     // 48 : 빗물이용시설
//     // 49 : 중수도시설
//     // 50 : 온배수시설
//     console.log("조회버튼 클릭: ", checkedLayers);
//     if (checkedLayers && checkedLayers.includes('48')) {
//       // searchBuildings
//     }
//   }

//   // 초기화 함수
//   const initVal = () => {
//     setPartValue("A");
//     setSidoValue("0");
//     setSigunValue("0");
//     setRegionValue("0");
//     setUntitWaterShedValue("0");
//     setMiddleRegionValue("0");
//     setEnvPartValue("0");
//     setSidoText("전체");
//     setSigunText("전체");
//     setSelectedSido({ text: "전체", val: '0' });
//     setSelectedSigun({ text: "전체", val: '0' });
//     setSelectedFclt({ text: "전체", val: '0', sggNm: '전체' });
//     setSelectedDong({ text: "전체", val: '0', sggNm: '전체' });
//     setResetTrigger(true);
//   };

//   // 적용 버튼
//   const applyVal = () => {
//     onFeatureSelect();
//   };

//   useEffect(() => {
//     if (resetTrigger) {
//       setResetTrigger(false);
//     }
//   }, [resetTrigger]);

//   // 시설 조회
//   useEffect(() => {
//     const fetchData = async () => {
//       setIsLoading(true);
//       if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) {
//         allFclt = ([{ text: "전체", val: '0', sggNm: '전체' }]);
//         setIsLoading(false);
//         return;
//       }

//       try {
//         const queryParamsFacility = new URLSearchParams({
//           lyrTypeNm: 'tb_il_swage_prcs_fclt',
//           page: '0',
//           size: '100000',
//           sort: 'string',
//         });
//         const cqlFiltersFacility: string[] = [];
//         if (selectedSigun.text && selectedSigun.val !== '0') {
//           cqlFiltersFacility.push(`sgg_nm ILIKE '%${selectedSigun.text}%'`);
//         }
//         if (cqlFiltersFacility.length > 0) {
//           queryParamsFacility.append('cqlFiter', cqlFiltersFacility.join(' and '));
//         }
//         console.log("BaseLayout API URL for Facilities:", `v1/fclts?${queryParamsFacility.toString()}`);

//         const facilityRes = await fetch(`${API_URL}/v1/fclts?${queryParamsFacility.toString()}`, {
//           method: "GET",
//           headers: { accept: "application/json" }
//         }).then(res => res.json());

//         const facilities = (facilityRes.data || []).map((item: any) => ({
//           text: item.swtrmtFcltNm,
//           val: item.fid,
//           sggNm: item.sggNm
//         }));
//         allFclt = (facilities);

//       } catch (error) {
//         console.error("BaseLayout: 지역/시설 데이터 조회 중 오류 발생:", error);
//         allFclt = ([{ text: "전체", val: '0', sggNm: '전체' }]);
//       } finally {
//         setIsLoading(false);
//       }
//     };

//     fetchData();
//   }, [selectedSigun]);

//   useEffect(() => {
//     if (ref && ref.current) {
//       const customRef = ref.current;
//       customRef.partValue = partValue;
//       customRef.sidoValue = sidoValue;
//       customRef.sigunValue = sigunValue;
//       customRef.regionValue = regionValue;
//       customRef.unitWaterShedValue = untitWaterShedValue;
//       customRef.middleRegionValue = middleRegionValue;
//       customRef.envPartValue = envPartValue;
//       customRef.sidoText = selectedSido.text;
//       customRef.sigunText = selectedSigun.text;
//     }
//   }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, ref]);

//   // buildingSearchText가 변경될 때 API 호출
//   useEffect(() => {
//     if (buildingSearchText && buildingSearchText.length > 1) {
//       if (checkedLayers && checkedLayers.length > 0) {
//         // 다중 레이어 검색
//         // buildingNmSearchMultiple(checkedLayers, selectedSigun.val || "", buildingSearchText);
//         buildingNmSearch("RNB", selectedSigun.val, buildingSearchText);
//       } else {
//         // 단일 레이어 검색
//         // buildingNmSearch(checkedLayers[0], selectedSigun.val, buildingSearchText);
//       }
//     } else {
//       // 검색 텍스트가 짧으면 리스트 초기화
//       if (checkedLayers && checkedLayers.length > 0) {
//         // buildingNmSearchMultiple(checkedLayers, selectedSigun.val || "", "");
//       } else {
//         buildingNmSearch("RNB", selectedSigun.val || "", "");
//       }
//     }
//   }, [buildingSearchText]);

//   return (
//     <div className="absolute left-1/2 -translate-x-1/2 bg-white flex items-center justify-center p-4 rounded-md shadow-lg w-auto min-w-fit">
//       <div className={leftClassName ? leftClassName : `flex items-center justify-center space-x-2 `}>
//         <div className="flex gap-8 items-center">
//           {searchType == "공급처 후보지 조회" && (
//             <>
//               <SelectBox
//                 className="flex items-center"
//                 label={'시도'}
//                 selectArray={code.cityCd}
//                 onSelectValue={(val) => {
//                   const selected = code.cityCd.find((item: { val: string | number; }) => (item.val === val));
//                   setSelectedSido(selected || { text: "전체", val: '0' });
//                   setSelectedSigun({ text: "전체", val: '0' });
//                 }}
//                 value={selectedSido.val}
//                 selectClass={'w-32'}
//               />
//               <SelectBox
//                 className="flex items-center"
//                 label={'시군구'}
//                 selectArray={filteredSigunData}
//                 onSelectValue={(val) => {
//                   const selected = filteredSigunData.find(item => (item.val === val));
//                   setSelectedSigun(selected || { text: "전체", val: '0' });
//                   setSelectedFclt({ text: "전체", val: '0', sggNm: '전체' });
//                 }}
//                 value={selectedSigun.val}
//                 selectClass={'w-32'}
//               />
//               <div className="flex items-center">
//                 <Label className="w-20 text-xl text-gray-600">시설명</Label>
//                 <div className="w-64">
//                   <SearchInputText
//                     label="시설명"
//                     initValue={buildingSearchText}
//                     setValue={(searchNm?: string) => {
//                       setBuildingSearchText(searchNm || "");
//                     }}
//                     setRtnData={function (rtnData: any): void {
//                       // 선택된 건물 데이터 처리
//                       // if (rtnData && rtnData.bdstInfoPk) {
//                       //   setSelectedBuilding(rtnData);
//                       //   setBuildingSearchText(rtnData.bdstNm || "");
//                       // }
//                     }}
//                     searchList={buildingSearchRes || []}
//                   />
//                 </div>
//               </div>
//             </>
//           )}
//           {searchType == "우리동네가뭄지도보기" && (
//             <>
//               <SelectBox
//                 className="flex items-center"
//                 label={'시도'}
//                 selectArray={code.cityCd}
//                 onSelectValue={(val) => {
//                   const selected = code.cityCd.find((item: { val: string | number; }) => (item.val === val));
//                   setSelectedSido(selected || { text: "전체", val: '0' });
//                   setSelectedSigun({ text: "전체", val: '0' });
//                 }}
//                 value={selectedSido.val}
//                 selectClass={'w-44'}
//               />
//               <SelectBox
//                 className="flex items-center"
//                 label={'시군구'}
//                 selectArray={filteredSigunData}
//                 onSelectValue={(val) => {
//                   const selected = filteredSigunData.find(item => (item.val === val));
//                   setSelectedSigun(selected || { text: "전체", val: '0' });
//                   setSelectedDong({ text: "전체", val: '0', sggNm: '전체' });
//                 }}
//                 value={selectedSigun.val}
//                 selectClass={'w-32'}
//               />
//               <SelectBox
//                 className="flex items-center mr-8"
//                 label={'행정동'}
//                 selectArray={filteredDong}
//                 onSelectValue={(val) => {
//                   const selected = filteredDong.find(item => (item.val === val));
//                   setSelectedDong(selected || { text: "전체", val: '0', sggNm: '전체' });
//                 }}
//                 value={selectedDong.val}
//                 selectClass={'w-32'}
//               />
//             </>
//           )}
//           {searchType == "지도보기" && (
//             <div className="flex items-center gap-2 w-[800px]">
//               <div className="flex min-w-0"> {/* SearchFormLeft 래퍼 */}
//                 <MapSearchFormLeft
//                   isShowPart={true}
//                   selectSidoData={code.cityCd}
//                   selectSigunData={filteredSigunData}
//                   selectRegionData={code.rvbsnCd}
//                   selectUnitWaterShedData={selectUnitWaterShedData}
//                   selectMiddleRegionData={selectMiddleRegionData}
//                   selectEnvPartData={selectEnvPartData}
//                   setRtnPartValue={setPartValue}
//                   setRtnSidoValue={setSidoValue}
//                   setRtnSigunValue={setSigunValue}
//                   setRtnRegionValue={setRegionValue}
//                   setRtnUnitWaterShedValue={setUntitWaterShedValue}
//                   setRtnMiddleRegionValue={setMiddleRegionValue}
//                   setRtnEnvPartValue={setEnvPartValue}
//                   setRtnEnvPartSidoValue={setSidoValue}
//                   setRtnEnvPartSigunValue={setSigunValue}
//                   setRtnSidoText={setSidoText}
//                   setRtnSigunText={setSigunText}
//                   resetTrigger={resetTrigger}
//                   isAdmin={isAdmin}
//                   children={undefined}
//                 />
//               </div>
//               <Label className="w-auto text-xl text-gray-600 whitespace-nowrap">시설명</Label>
//               <div className="w-44">
//                 <Input className="mr-4" />
//               </div>
//             </div>
//           )}
//         </div>
//         {/* 버튼 부분 */}
//         <div className="flex items-center justify-center gap-4">
//           {showQueryButton && <Button className={btnClass} onClick={queryVal}>조회</Button>}
//           {showInitButton && <Button className={btnClass} onClick={initVal}>초기화</Button>}
//           {showApplyButton && <Button className={btnClass} onClick={applyVal}>적용</Button>}
//         </div>
//       </div>
//     </div>
//   )
// }