import FeatureClickEventPopup from './featureClickEventPopup';
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { UiModal, UiTable, DatePickerRange } from '@common/business_components/ui';
import { Button, Input, Label } from '@common/components';
import { UiTable2 } from '@common/business_components/ui/table/index-2';
import { UITab2 } from '@common/business_components/ui/tab/index-2';
import { SelectBox2 } from '@common/business_components/ui/select/index-2';
import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox';
import { MsSwagePplCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2, MsSwageMhlCol2, ExclnSewagePumpCol2, stofcbrCol2 } from './components/common/table';
import LoadingOverlay from '@/components/ui/LoadingBar';
//import {  useDcTree, flattenFolders, useSggCd, useCityCd } from './components/searchModalReportApi';
import { useDcTree,flattenFolders, useSggCd, useCityCd, addFileName, getFileDownload } from './components/searchModalReportApi';
import { useCityCdStore, type SelectDataType } from './commonStore';

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

// 탭
const TABS = [
  { val: "basic", text: "기본정보" },
  { val: "operation", text: "운영정보" },
  { val: "report", text: "하수도정비기본계획보고서" },
];
// 기본정보 '구분' 선택 목록
const BASIC_TYPES = [
  { val: "tb_ms_swage_ppl", text: "하수관로" },
  { val: "tb_il_swage_prcs_fclt", text: "하수처리시설" },
  { val: "tb_ms_swage_prcs_zone", text: "하수처리구역" },
  { val: "tb_ms_swage_mhl", text: "하수맨홀" },
  { val: "tb_ms_swage_pmstn", text: "하수펌프장" },
  // { val: "tb_ms_swage_psmtn_1", text: "오수펌프" },
  // { val: "tb_ms_swage_psmtn_2", text: "빗물펌프" },
  { val: "tb_ms_stofcbr", text: "우수토실" },
];
// 운영정보 '구분' 선택 목록
const WORK_TYPES = [
  { val: "maintenance", text: "보수 및 갱신" },
  { val: "cleaning", text: "청소 및 준설" },
  { val: "inspection", text: "점검 및 진단" },
];

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

// 운영정보
const operationTableHeadlist = [
  { id: "no", title: "NO" },
  { id: "manageNumber", title: "관리번호" },
  { id: "diagnosisYear", title: "진단년도" },
  { id: "null1", title: "..." },
  { id: "null2", title: "..." },
  { id: "installationLocation", title: "매설위치" },
];
// 하수도정비 기본계획 보고서
const reportTableHeadlist = [
  { id: "no", title: "NO" },
  { id: "sido", title: "시도" },
  { id: "sigungu", title: "시군구" },
  { id: "approvalYear", title: "승인년도" },
  { id: "plantZoneGugun", title: "구분" },
  { id: "reportGubun", title: "보고서구분" },
  { id: "fileName", title: "파일명" },
  { id: "regDate", title: "등록일자" },
];

// 날짜 조합 함수
const getDateString = (
  year: string,
  month: string,
  day: string,
  defaultDate: string,
) => {
  if (!year && !month && !day) return defaultDate;
  const y = year || defaultDate.slice(0, 4);
  const m = month || defaultDate.slice(4, 6);
  const d = day || defaultDate.slice(6, 8);
  return `${y}${m}${d}`;
};

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

const SearchModal: React.FC<SearchModalProps> = ({
  open,
  onOpenChange,
  onFeatureSelect,
}) => {
  const [activeTab, setActiveTab] = useState(TABS[0]?.val ?? "basic");
  const [workType, setWorkType] = useState(WORK_TYPES[0]?.val ?? "");
  const [showTable, setShowTable] = useState(false);
  const [tableData, setTableData] = useState<any[]>([]);
  const [tableCount, setTableCount] = useState<number>(0);
  const [curPage, setCurPage] = useState(1);
  const [basicType, setBasicType] = useState(BASIC_TYPES[0]?.val ?? "");
  const [ctpvCd, setCtpvCd] = useState('0'); 
  const [sigungu, setSigungu] = useState('0'); 
  //const [swageProcessingZone, set처리구역] = useState("");
  const [gubun, setGubun] = useState(""); // 하수정비기본계획 report
  // 날짜 상태 선언
  const [시작1, set시작1] = useState("");
  const [시작2, set시작2] = useState("");
  const [종료1, set종료1] = useState("");
  const [종료2, set종료2] = useState("");
  const [변수1, set변수1] = useState("");
  const [변수2, set변수2] = useState("");
  const [변수3, set변수3] = useState("");
  const [변수4, set변수4] = useState("");
  // 시작, 종료, 경과년도
  const [yearFilter, setYearFilter] = useState({
    시작: "",
    종료: "",
    // 경과년도: "",
  });

  const [가동개시_시작_월, set가동개시_시작_월] = useState('');
  const [가동개시_종료_월, set가동개시_종료_월] = useState('');
  const [가동개시_시작_일, set가동개시_시작_일] = useState('');
  const [가동개시_종료_일, set가동개시_종료_일] = useState('');
  const [fromDate, setFromDate] = useState(() => { const date = new Date(); date.setDate(date.getDate() - 7); return date })
  const [toDate, setToDate] = useState(new Date())
  const [filteredSiguns, setFilteredSiguns] = useState<SelectDataType[]>([{ val: '0', text: '전체', sido: '0'  }]);

  // 로딩바 
  const [isLoading, setIsLoading] = useState(false);

  const sidos = useCityCd();
  const siguns = useSggCd();
  const reportOriginData = useDcTree(""); //:Folder[]
  
  // 오늘 날짜 구하기
  const today = new Date();
  const todayYear = today.getFullYear().toString();
  const todayMonth = (today.getMonth() + 1).toString().padStart(2, "0");
  const todayDate = today.getDate().toString().padStart(2, "0");

  const isDateInRanges = (date: Date) => {
    const standYear = parseInt(fromDate.getFullYear().toString());
    const dateRanges = [];
    dateRanges.push({
      start: new Date(standYear, 0, 1),
      end: new Date(standYear, 11, 31)
    });

    return dateRanges.some(range => {
      const start = new Date(range.start);
      const end = new Date(range.end);
      return date >= start && date <= end;
    });
  };

  // UiTable2에 넘길 headlist를 BASIC_TYPES 값에 따라 분기 처리
  let dynamicHeadlist = MsSwagePplCol2; // default 값
  if (activeTab === 'operation') dynamicHeadlist = operationTableHeadlist; // 운영정보
  else if (activeTab === 'report') dynamicHeadlist = reportTableHeadlist; // 하수도정비기본계획보고서
  else if (basicType === 'tb_ms_swage_ppl') dynamicHeadlist = MsSwagePplCol2; // 하수관로
  else if (basicType === 'tb_il_swage_prcs_fclt') dynamicHeadlist = SwtrmtFcltCol2; // 하수처리시설
  else if (basicType === 'tb_ms_swage_prcs_zone') dynamicHeadlist = SwtrmtPrcsZoneCol2; // 하수처리구역
  else if (basicType === 'tb_ms_swage_mhl') dynamicHeadlist = MsSwageMhlCol2; // 하수맨홀
  else if (basicType === 'tb_ms_swage_pmstn') dynamicHeadlist = ExclnSewagePumpCol2; // 하수펌프장
  else if (basicType === 'tb_ms_stofcbr') dynamicHeadlist = stofcbrCol2; // 우수토실

  
  // 조회 버튼 클릭 시 1페이지로 이동하도록 수정
  const handleSearch = () => {
    setCurPage(1); // 페이지를 1로 초기화
    fetchFilteredData();
    setShowTable(true);
  };

  // cellClick 함수 타입 지정
  const handleCellClick = (index?: number) => {
    if (typeof index === "number") {
      onFeatureSelect(tableData[index % 10]); // 10은 page size 하드 코딩한 숫자
      onOpenChange(false); // SearchModal 닫기
    }
  };
  // 하수도정비기본계획.table cellClick
  const handleReportCellClick = (index: number) => {
    console.log(index);
    const reportData = tableData[index];
    const fileName = reportData.fileName;
    if (reportData.fileSn !== "") {
      getFileDownload(reportData.fileSn, fileName);
    }
  };

  const handleCtpvCdChange = (val: string|number) => { // 하수도정비기본계획.시도
    const sidoOption = sidos.find((n) => n.val === val);
    setCtpvCd(String(val));
    if (val !== '0') {
      const filterSiguns = siguns.filter(item => item.sido === sidoOption?.text);
      filterSiguns.unshift({ val: '0', text: '전체', sido: '0'  });
      setFilteredSiguns(filterSiguns);
    } 
    setSigungu("0");
    setGubun("");
    setYearFilter({시작: "",종료: "",});
  }

  useEffect(() => {
    // filterParams 초기화
    // setFilterParams({});
    set시작1("");
    set시작2("");
    set종료1("");
    set종료2("");
    set변수1("");
    set변수2("");
    set변수3("");
    set변수4("");
    set가동개시_시작_월("");
    set가동개시_종료_월("");
    set가동개시_시작_일("");
    set가동개시_종료_일("");
    setCtpvCd('0');
    setSigungu('0');
    setYearFilter({
      시작: "",
      종료: "",
      // 경과년도: "",
    });
    setShowTable(false);
    setTableCount(0);
    setTableData([]);
    // queryParams는 fetchFilteredData 내에서 매번 새로 생성되므로 별도 상태 초기화는 필요 없음
  }, [activeTab, basicType, open]);

  // 페이지 변경 시마다 데이터 fetch
  useEffect(() => {
    // showTable이 true일 때만 fetch (최초 렌더 방지)
    if (showTable) {
      fetchFilteredData(); // 실제 API 사용 시
      // fetchDummyData(); // 더미 데이터 사용 시
    }
  }, [curPage]);

  
  // 검색 API 호출 함수
  const fetchFilteredData = async () => {
    setIsLoading(true); // 로딩 시작
    try {
      const queryParams = new URLSearchParams({
        lyrTypeNm: basicType,
        page: `${curPage - 1}`,
        size: '10',
        sort: 'string',
      });

      let cqlFilters: string[] = [];
      if (activeTab === 'basic') {
        if (basicType === 'tb_ms_swage_prcs_zone') cqlFilters = zoneCqlFilters(); // 하수처리구역
        else if (basicType === 'tb_il_swage_prcs_fclt') cqlFilters = facilityCqlFilters(); // 하수처리시설
        else if (basicType === 'tb_ms_swage_ppl') cqlFilters = pplCqlFilters(); // 하수관로
        else if (basicType === 'tb_ms_swage_mhl') cqlFilters = mhCqlFilters(); // 하수맨홀
        else if (basicType === 'tb_ms_swage_pmstn') cqlFilters = psmtnCqlFilters(); // 하수펌프장
        else if (basicType === 'tb_ms_stofcbr') cqlFilters = otflCqlFilters(); // 우수토실
      } else if (activeTab === 'operation') {
        cqlFilters = zoneCqlFilters();
      } else {
        cqlFilters = reportCqlFilters();
      }

      if (cqlFilters.length > 0) queryParams.append('cqlFiter', cqlFilters.join(' and '));

      if (activeTab === 'report') {
        //const reportOriginData = await getDcTree('경기도');
        const reportData = flattenFolders(reportOriginData);
        let filterReportData = reportData;
        if (ctpvCd !== "0") { // 시도검색
          const sidoOption = sidos.find((n) => n.val === ctpvCd);
          filterReportData = filterReportData.filter(item => item.sido === sidoOption?.text);
        } 
        if (sigungu !== "0") { // 시군구검색
          const sigunguOption = filteredSiguns.find((n) => n.val === sigungu);
          filterReportData = filterReportData.filter(item => item.sigungu === sigunguOption?.text);
        }
        if (yearFilter.시작 != "" && yearFilter.종료 == "") //승인년도검색
          filterReportData = filterReportData.filter(item => (item.approvalYear)? item.approvalYear >= yearFilter.시작+"년" : null);
        if (yearFilter.시작 == "" && yearFilter.종료 != "") 
          filterReportData = filterReportData.filter(item => (item.approvalYear)? item.approvalYear <= yearFilter.종료+"년" : null);
        if (yearFilter.시작 != "" && yearFilter.종료 != "") {
          filterReportData = filterReportData.filter(item => {
            return (item.approvalYear)? item.approvalYear >= yearFilter.시작+"년" && item.approvalYear <= yearFilter.종료+"년": null;
          });
        }
        if (gubun !== "") { // 구분검색
          filterReportData = filterReportData.filter(item => (item.plantZoneGugun)? String(item.plantZoneGugun).includes(String(gubun)) : null);
        }
        console.log('report count:', filterReportData.length);
        setTableCount(filterReportData.length || 0);
        filterReportData = filterReportData.slice((curPage-1)*10, curPage*10); // paging
        filterReportData = filterReportData?.map((item, index)=>({...item, no:(curPage-1)*10+index+1}));
        //const fileList = await getDcFile("CLS20250530000041");
        addFileName(filterReportData).then(data => {
          filterReportData = data;
          setTableData(filterReportData || []);
        });
        setTableData(filterReportData || []);
      } else {
        console.log('API URL:', `${API_URL}/v1/fclts?${queryParams.toString()}`);
        const res = await axios.get(`${API_URL}/v1/fclts?${queryParams.toString()}`);
        console.log('필터링된 API 결과(개수):', res.data.count);
        console.log('필터링된 API 결과(데이터):', res.data.data);
        setTableData(res.data.data || []);
        setTableCount(res.data.count || []);
        console.log('tableCount 상태 업데이트 후:', res.data.count); // tableCount 로그 추가
      }

      setShowTable(true);
    } catch (err) {
      console.error('API ERROR:', err);
      setTableData([]);
    } finally {
      setIsLoading(false); // 로딩 종료
    }
  };

  // 하수관로용 CQL 필터 생성
  const pplCqlFilters = () => {
    const cqlFilters: string[] = [];
    // 추후 작성 예정
    if (변수1) cqlFilters.push(`usg_cd='${변수1}'`);
    if (변수2) cqlFilters.push(`mqlt_cd='${변수2}'`);
    if (변수3) cqlFilters.push(`pbadms_emd_cd='${변수3}'`);
    // if (변수4) cqlFilters.push(`경과년도='${변수4}'`);
    // 설치년도 범위
    const startDate = getDateString(
      yearFilter.시작,
      가동개시_시작_월,
      가동개시_시작_일,
      "19000101",
    );
    const endDate = getDateString(
      yearFilter.종료,
      가동개시_종료_월,
      가동개시_종료_일,
      `${todayYear}${todayMonth}${todayDate}`,
    );
    cqlFilters.push(
      `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`,
    );
    // 관경(mm) 범위
    if (시작1 && 종료1) cqlFilters.push(`pdmt BETWEEN ${시작1} AND ${종료1}`);
    else if (시작1) cqlFilters.push(`pdmt >= ${시작1}`);
    else if (종료1) cqlFilters.push(`pdmt <= ${종료1}`);
    // 연장(m) 범위
    if (시작2 && 종료2) cqlFilters.push(`prlg BETWEEN ${시작2} AND ${종료2}`);
    else if (시작2) cqlFilters.push(`prlg >= ${시작2}`);
    else if (종료2) cqlFilters.push(`prlg <= ${종료2}`);

    return cqlFilters;
  };

  // 하수처리시설용 CQL 필터 생성
  const facilityCqlFilters = () => {
    const cqlFilters: string[] = [];
    // 가동개시일자 범위
    const startDate = getDateString(
      yearFilter.시작,
      가동개시_시작_월,
      가동개시_시작_일,
      "19000101",
    );
    const endDate = getDateString(
      yearFilter.종료,
      가동개시_종료_월,
      가동개시_종료_일,
      `${todayYear}${todayMonth}${todayDate}`,
    );
    cqlFilters.push(
      `oprtng_strt_ymd >= '${startDate}' and oprtng_strt_ymd <= '${endDate}'`,
    );
    // 시설용량 범위
    if (시작1 && 종료1)
      cqlFilters.push(`fclt_cpct BETWEEN ${시작1} AND ${종료1}`);
    else if (시작1) cqlFilters.push(`fclt_cpct >= ${시작1}`);
    else if (종료1) cqlFilters.push(`fclt_cpct <= ${종료1}`);
    // 하수처리시설명
    if (변수1) cqlFilters.push(`swtrmt_fclt_nm ILIKE '%${변수1}%'`);
    return cqlFilters;
  };

  // 하수처리구역용 CQL 필터 생성
  const zoneCqlFilters = () => {
    const cqlFilters: string[] = [];
    if (ctpvCd) cqlFilters.push(`ctpv_cd='${ctpvCd}'`);
    if (sigungu) cqlFilters.push(`sgg_cd='${sigungu}'`);
    if (변수1) cqlFilters.push(`swtrmt_zone_nm ILIKE '%${변수1}%'`);
    if (변수2) cqlFilters.push(`swtrmt_fclt_nm ILIKE '%${변수2}%'`);
    return cqlFilters;
  };

  // 하수맨홀용 CQL 필터 생성
  const mhCqlFilters = () => {
    const cqlFilters: string[] = [];
    // // 설치년도 범위
    const startDate = getDateString(
      yearFilter.시작,
      가동개시_시작_월,
      가동개시_시작_일,
      "19000101",
    );
    const endDate = getDateString(
      yearFilter.종료,
      가동개시_종료_월,
      가동개시_종료_일,
      `${todayYear}${todayMonth}${todayDate}`,
    );
    cqlFilters.push(
      `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`,
    );
    // if (변수1) cqlFilters.push(`경과년도='${변수1}'`);
    if (변수2) cqlFilters.push(`usg_cd='${변수2}'`);
    // 구경(mm) 범위
    if (시작1 && 종료1) cqlFilters.push(`swage_mh_diam BETWEEN ${시작1} AND ${종료1}`);
    else if (시작1) cqlFilters.push(`swage_mh_diam >= ${시작1}`);
    else if (종료1) cqlFilters.push(`swage_mh_diam <= ${종료1}`);

    return cqlFilters;
  };

  // 하수펌프장용 CQL 필터 생성
  const psmtnCqlFilters = () => {
    const cqlFilters: string[] = [];
    // 설치년도 범위
    const startDate = getDateString(
      yearFilter.시작,
      가동개시_시작_월,
      가동개시_시작_일,
      "19000101",
    );
    const endDate = getDateString(
      yearFilter.종료,
      가동개시_종료_월,
      가동개시_종료_일,
      `${todayYear}${todayMonth}${todayDate}`,
    );
    cqlFilters.push(
      `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`,
    );
    // if (변수1) cqlFilters.push(`경과년도='${변수1}'`);
    // 일일처리용량 범위
    if (시작1 && 종료1)
      cqlFilters.push(`daily_prcs_cpct BETWEEN ${시작1} AND ${종료1}`);
    else if (시작1) cqlFilters.push(`daily_prcs_cpct >= ${시작1}`);
    else if (종료1) cqlFilters.push(`daily_prcs_cpct <= ${종료1}`);
    // 우수양수능력 범위
    if (시작2 && 종료2)
      cqlFilters.push(`excln_wpmp_ablt BETWEEN ${시작2} AND ${종료2}`);
    else if (시작2) cqlFilters.push(`excln_wpmp_ablt >= ${시작2}`);
    else if (종료2) cqlFilters.push(`excln_wpmp_ablt <= ${종료2}`);

    return cqlFilters;
  };

  // 우수토실용 CQL 필터 생성
  const otflCqlFilters = () => {
    const cqlFilters: string[] = [];
    // 설치년도 범위
    const startDate = getDateString(
      yearFilter.시작,
      가동개시_시작_월,
      가동개시_시작_일,
      "19000101",
    );
    const endDate = getDateString(
      yearFilter.종료,
      가동개시_종료_월,
      가동개시_종료_일,
      `${todayYear}${todayMonth}${todayDate}`,
    );
    cqlFilters.push(
      `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`,
    );
    // if (변수1) cqlFilters.push(`경과년도='${변수1}'`);
    // if (변수2) cqlFilters.push(`하천명 ILIKE '%${변수1}%'`);
    // 계획방류량 범위
    // if (시작1 && 종료1)
    //   cqlFilters.push(`계획방류량 BETWEEN ${시작1} AND ${종료1}`);
    // else if (시작1) cqlFilters.push(`계획방류량 >= ${시작1}`);
    // else if (종료1) cqlFilters.push(`계획방류량 <= ${종료1}`);

    return cqlFilters;
  };

  // 운영정보용 CQL 필터 생성
  const operationCqlFilters = () => {
    const cqlFilters: string[] = [];
    // 설치년도 범위
    const startDate = getDateString(
      yearFilter.시작,
      가동개시_시작_월,
      가동개시_시작_일,
      "19000101",
    );
    const endDate = getDateString(
      yearFilter.종료,
      가동개시_종료_월,
      가동개시_종료_일,
      `${todayYear}${todayMonth}${todayDate}`,
    );
    cqlFilters.push(
      `설치시작년도 >= '${startDate}' and 설치시작년도 <= '${endDate}'`,
    );
    return cqlFilters;
  };

  // 하수도정비기본계획보고서용 CQL 필터 생성
  const reportCqlFilters = () => {
    const cqlFilters: string[] = [];
    // 설치년도 범위
    if (ctpvCd) cqlFilters.push(`ctpv_cd='${ctpvCd}'`);
    if (sigungu) cqlFilters.push(`sgg_cd='${sigungu}'`);
    
    return cqlFilters;
  };

  const renderBody = () => (
    <>
      {/* 탭 영역 */}
      <UITab2
        defaultValue={TABS[0]?.val}
        tabList={TABS.map((tab) => ({
          value: tab.val,
          label: tab.text,
          onClick: () => setActiveTab(tab.val),
        }))}
      >
        {/* 각각의 탭 영역 */}
        {/* 기본정보 탭 */}
        {activeTab === 'basic' && (
          <div className="relative border rounded-lg p-6 mt-4 w-full h-[23vh]">
            {/* 구분 */}
            <div className="mb-3 flex items-center justify-between gap-4">
              <div className="flex items-center">
                <SelectBox2
                  className="w-[150px] mr-3"
                  selectClass="rounded-lg bg-white"
                  label="구분"
                  selectArray={BASIC_TYPES}
                  onSelectValue={(value: string | number) =>
                    setBasicType(String(value))
                  }
                  value={basicType}
                />
              </div>
            </div>
            {/* 분기처리: 하수관로 */}
            {basicType === "tb_ms_swage_ppl" && (
              <div className="mb-6">
                <div className="mb-2 flex items-center">
                  {/* 설치년도 */}
                  <YearRangeSelectBox
                    start={yearFilter.시작}
                    end={yearFilter.종료}
                    onChange={(range) =>
                      setYearFilter({
                        ...yearFilter,
                        시작: range.start,
                        종료: range.end,
                      })
                    }
                    startLabel="설치년도"
                    endLabel=""
                  />

                  {/* 경과년도 */}
                  {/* <div className="flex items-center">
                    <Label className="mr-2 w-auto text-xl text-gray-600">
                      경과년도
                    </Label>
                    <Input
                      className='!text-xl w-[70px] placeholder:text-center mr-8'
                      placeholder="입력"
                      value={yearFilter.경과년도}
                      onChange={(e) => {
                        // 숫자만 입력 허용
                        const val = e.target.value.replace(/[^0-9]/g, "");
                        setYearFilter({ ...yearFilter, 경과년도: val });
                      }}
                    />
                  </div> */}
                  {/* 용도코드 */}
                  <Label className="mr-2 w-auto text-xl text-gray-600">
                    용도코드
                  </Label>
                  <Input
                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={변수1}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set변수1(val);
                    }}
                  />
                  {/* 재질코드 */}
                  <Label className="mr-2 w-auto text-xl text-gray-600">
                    재질코드
                  </Label>
                  <Input
                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={변수2}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set변수2(val);
                    }}
                  />
                </div>
                <div className="flex items-center mb-2">
                  {/* 행정읍면동코드 */}
                  <Label className="mr-2 w-auto text-xl text-gray-600">
                    행정읍면동코드
                  </Label>
                  <Input
                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={변수3}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set변수3(val);
                    }}
                  />
                  {/* 관경 */}
                  <Label className="mr-2 w-auto text-xl text-gray-600">
                    관경(mm)
                  </Label>
                  <Input
                    className="w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={시작1}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set시작1(val);
                    }}
                  />
                  <span className="mx-2 text-xl font-semibold">~</span>
                  <Input
                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={종료1}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set종료1(val);
                    }}
                  />
                  {/* 연장 */}
                  <Label className="mr-2 w-auto text-xl text-gray-600">
                    연장(m)
                  </Label>
                  <Input
                    className="w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={시작2}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set시작2(val);
                    }}
                  />
                  <span className="mx-2 text-xl font-semibold">~</span>
                  <Input
                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={종료2}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set종료2(val);
                    }}
                  />
                </div>
              </div>
            )}
            {/* 분기처리: 하수처리시설 */}
            {basicType === "tb_il_swage_prcs_fclt" && (
              <div className="mb-6">
                {/* 가동개시일자 */}
                <div className="mb-2 flex items-center">
                  <YearRangeSelectBox
                    start={yearFilter.시작}
                    end={yearFilter.종료}
                    onChange={(range) =>
                      setYearFilter({
                        ...yearFilter,
                        시작: range.start,
                        종료: range.end,
                      })
                    }
                    startLabel="가동개시일자"
                    endLabel="      "
                  />
                  {/* 시설용량 */}
                  <Label className="mr-2 w-auto text-xl text-gray-600">
                    시설용량
                  </Label>
                  <Input
                    className="w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={시작1}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set시작1(val);
                    }}
                  />
                  <span className="mx-2 text-xl font-semibold">~</span>
                  <Input
                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={종료1}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set종료1(val);
                    }}
                  />
                  {/* 하수처리시설명 */}
                  <Label className="mr-2 w-auto text-xl text-gray-600">
                    하수처리시설명
                  </Label>
                  <Input
                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={변수1}
                    onChange={(e) => {
                      set변수1(e.target.value);
                    }}
                  />
                </div>
              </div>
            )}
            {/* 분기처리: 하수처리구역 */}
            {basicType === "tb_ms_swage_prcs_zone" && (
              <div className="mb-3">
                <div className="mb-2 flex items-center">
                  <SidoSigunguSelectBox
                    sido={ctpvCd}
                    sigungu={sigungu}
                    onSidoChange={(sidoId) => {
                      setCtpvCd(sidoId);
                      setSigungu(0);
                    }}
                    onSigunguChange={setSigungu}
                  />
                  <Label className="mr-2 w-auto text-xl text-gray-600">
                    하수처리구역명
                  </Label>
                  <Input
                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={변수1}
                    onChange={(e) => {
                      set변수1(e.target.value);
                    }}
                  />
                  <Label className="mr-2 w-auto text-xl text-gray-600">
                    하수처리시설명
                  </Label>
                  <Input
                    className='!text-xl w-[120px] placeholder:text-center mr-8'
                    placeholder="입력"
                    value={변수2}
                    onChange={(e) => {
                      set변수2(e.target.value);
                    }}
                  />
                </div>
              </div>
            )}
            {/* 분기처리: 하수맨홀 */}
            {basicType === "tb_ms_swage_mhl" && (
              <div className="mb-3">
                <div className="mb-2 flex items-center">
                  {/* 설치년도 */}
                  <YearRangeSelectBox
                    start={yearFilter.시작}
                    end={yearFilter.종료}
                    onChange={(range) =>
                      setYearFilter({
                        ...yearFilter,
                        시작: range.start,
                        종료: range.end,
                      })
                    }
                    startLabel="설치년도"
                    endLabel=""
                  />
                  {/* 경과년도 */}
                  {/* <Label className="mr-2 w-auto text-xl text-gray-600">
                    경과년도
                  </Label>
                  <Input
                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={yearFilter.경과년도}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      setYearFilter({ ...yearFilter, 경과년도: val });
                    }}
                  /> */}
                  {/* 용도코드 */}
                  <Label className="mr-2 w-auto text-xl text-gray-600">
                    용도코드
                  </Label>
                  <Input
                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={변수1}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set변수1(val);
                    }}
                  />
                  {/* 하수맨홀 구경 */}
                  <Label className="mr-2 w-auto text-xl text-gray-600">
                    구경(mm)
                  </Label>
                  <Input
                    className="w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={시작1}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set시작1(val);
                    }}
                  />
                  <span className="mx-2 text-xl font-semibold">~</span>
                  <Input
                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={종료1}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set종료1(val);
                    }}
                  />
                </div>
              </div>
            )}
            {/* 분기처리: 하수펌프장 */}
            {basicType === "tb_ms_swage_pmstn" && (
              <div className="mb-3">
                {/* 설치년도 */}
                <div className="flex items-center mb-2">
                  <YearRangeSelectBox
                    start={yearFilter.시작}
                    end={yearFilter.종료}
                    onChange={range => setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })}
                    startLabel="설치년도"
                    endLabel=""
                  />
                  {/* 경과년도 */}
                  {/* <Label className="w-auto text-xl text-gray-600 mr-2">경과년도</Label>
                    <Input
                      className='!text-xl w-[100px] placeholder:text-center mr-8'
                      placeholder="입력"
                      value={yearFilter.경과년도}
                      onChange={(e) => {
                        // 숫자만 입력 허용
                        const val = e.target.value.replace(/[^0-9]/g, '');
                        setYearFilter({ ...yearFilter, 경과년도: val });
                      }}
                    /> */}
                  {/* 일일처리용량 - 오수맨홀 */}
                  <Label className="mr-2 w-auto text-xl text-gray-600">
                    일일처리용량
                  </Label>
                  <Input
                    className="w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={시작1}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set시작1(val);
                    }}
                  />
                  <span className="mx-2 text-xl font-semibold">~</span>
                  <Input
                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={종료1}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set종료1(val);
                    }}
                  />
                  {/* 우수양수능력 - 우수맨홀 */}
                  <Label className="mr-2 w-auto text-xl text-gray-600">
                    우수양수능력
                  </Label>
                  <Input
                    className="w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={시작2}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set시작2(val);
                    }}
                  />
                  <span className="mx-2 text-xl font-semibold">~</span>
                  <Input
                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={종료2}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set종료2(val);
                    }}
                  />
                </div>
              </div>
            )}
            {/* 분기처리: 우수토실? 토구?  */}
            {basicType === "tb_ms_stofcbr" && (
              <div className="mb-3">
                {/* 설치년도 */}
                <div className="flex items-center mb-2">
                  <YearRangeSelectBox
                    start={yearFilter.시작}
                    end={yearFilter.종료}
                    onChange={range => setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })}
                    startLabel="설치년도"
                    endLabel=""
                  />
                  {/* 경과년도 */}
                  {/* <Label className="w-auto text-xl text-gray-600 mr-2">경과년도</Label>
                  <Input
                    className='!text-xl w-[100px] placeholder:text-center mr-8'
                    placeholder="입력"
                    value={yearFilter.경과년도}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, '');
                      setYearFilter({ ...yearFilter, 경과년도: val });
                    }}
                  /> */}
                  {/* 하천명 */}
                  {/* <Label className="mr-2 w-auto text-xl text-gray-600">
                    하천명
                  </Label>
                  <Input
                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={변수1}
                    onChange={(e) => {
                      set변수1(e.target.value);
                    }}
                  /> */}
                  {/* 계획방류량 */}
                  {/* <Label className="mr-2 w-auto text-xl text-gray-600">
                    계획방류량
                  </Label>
                  <Input
                    className="w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={시작1}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set시작1(val);
                    }}
                  />
                  <span className="mx-2 text-xl font-semibold">~</span>
                  <Input
                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
                    placeholder="입력"
                    value={종료1}
                    onChange={(e) => {
                      // 숫자만 입력 허용
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set종료1(val);
                    }}
                  /> */}
                </div>
              </div>
            )}

            {/* 조회 버튼 중앙 정렬 */}
            <div className="absolute bottom-4 right-4 mr-2">
              <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
            </div>
          </div>
        )}
        {/* 운영정보 탭 */}
        {activeTab === 'operation' && (
          <div className="relative flex flex-col border rounded-lg p-6 mt-4 w-full h-[23vh]">
            <div className="flex items-center mb-6">
              <SelectBox2
                className="w-60 mr-8"
                selectClass="rounded-lg bg-white text-xl"
                label="업무구분"
                selectArray={WORK_TYPES.map((w) => ({
                  val: w.val,
                  text: w.text,
                }))}
                onSelectValue={(val) => setWorkType(String(val))}
                value={workType}
              />

              {/* 수행기간 */}
              {/* <YearRangeSelectBox
                start={yearFilter.시작}
                end={yearFilter.종료}
                onChange={(range) =>
                  setYearFilter({
                    ...yearFilter,
                    시작: range.start,
                    종료: range.end,
                  })
                }
                startLabel="수행기간"
                endLabel=""
              /> */}
              <DatePickerRange
                mode="single"   //고정 
                selected={fromDate}   // 처음에 선택할 날짜 - 타입은 date타입
                onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }}   // 선택했을 때 이벤트 (주로 set)
                className="w-full p-1 border rounded bg-white"   // 스타일
                disabled={(date) => !isDateInRanges(date)}     // 선택못하게 하는 날짜 - 없으면 안넣어도 됨
                defaultMonth={fromDate}   // 처음에 시작할 날짜 selected랑 같이 같은 날짜 넣으면 됨
              />
              <span className='text-xl m-4'>~</span>
              <DatePickerRange
                mode="single"   //고정 
                selected={toDate}   // 처음에 선택할 날짜 - 타입은 date타입
                onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }}   // 선택했을 때 이벤트 (주로 set)
                className="w-full p-1 border rounded bg-white"   // 스타일
                disabled={(date) => !isDateInRanges(date)}     // 선택못하게 하는 날짜 - 없으면 안넣어도 됨
                defaultMonth={toDate}   // 처음에 시작할 날짜 selected랑 같이 같은 날짜 넣으면 됨
              />
            </div>
            {/* 조회 버튼 중앙 정렬 */}
            <div className="absolute bottom-4 right-4 mr-2">
              <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
            </div>
          </div>
        )}
        {/* 하수도정비기본계획보고서 탭 */}
        {activeTab === 'report' && (
          <div className="relative flex flex-col border rounded-lg p-6 mt-4 w-full h-[23vh]">
            {/* 시도, 시군구, 하수처리구역 한 줄 */}
            <div className="mb-6 flex items-center">
              <SelectBox2
                  className="w-[150px] mr-8"
                  selectClass="rounded-lg bg-white"
                  label="시도"
                  selectArray={sidos}
                  value={ctpvCd}
                  onSelectValue={handleCtpvCdChange}
                />
                <SelectBox2
                  className="w-48"
                  selectClass="w-48 rounded-lg bg-white truncate"
                  label="시군구"
                  selectArray={filteredSiguns}
                  value={sigungu}
                  onSelectValue={val => setSigungu(String(val))}
                />
            </div>
            <div className="flex justify-between items-center mb-6">
              <div className="flex items-center gap-4">
                <label className="inline-block w-auto whitespace-nowrap text-xl text-gray-600 mr-2">구분</label>
                <Input
                  className='!text-xl w-[100px] placeholder:text-center mr-8'
                  placeholder="입력"
                  value={gubun}
                  onChange={(e) => {
                    // 숫자만 입력 허용
                    const val = e.target.value;
                    setGubun(val);
                  }}
                />
                <YearRangeSelectBox
                  start={yearFilter.시작}
                  end={yearFilter.종료}
                  onChange={range => setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })}
                  startLabel="승인년도"
                  endLabel=""
                />
              </div>
              
              {/* 조회 버튼 중앙 정렬 */}
              <div className="absolute bottom-4 right-4 mr-2">
                <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
              </div>
            </div>
          </div>
        )}
      </UITab2>

      {/* 📋 결과 리스트 */}
      <div className="h-[60vh] w-full space-y-2 overflow-hidden rounded-lg border">
        {/* 테이블 영역 (가로/세로 스크롤 가능) */}
        <div className="flex-1 px-2 pb-2">
          <LoadingOverlay isLoading={isLoading} />
          <UiTable2
            headName={
              (() => {
                const label =
                  activeTab === "basic"
                    ? BASIC_TYPES.find((type) => type.val === basicType)?.text
                    : activeTab === "operation"
                      ? WORK_TYPES.find((type) => type.val === workType)?.text
                      : activeTab === "report"
                        ? "하수도정비기본계획보고서"
                        : TABS.find((tab) => tab.val === activeTab)?.text;
                return (
                  <>
                    {label} 조회 결과 ({tableCount})건
                  </>
                );
              })()
            }
            tableData={tableData}
            headlist={dynamicHeadlist}
            pageSize={tableData.length < 10 ? tableData.length : 10}
            total={tableCount}
            children={undefined}
            cellClick={(activeTab!=='report')?handleCellClick:handleReportCellClick}
            onPageChange={setCurPage}
            resetPageNo={false}
            cur={curPage}
          />
        </div>
      </div>
    </>
  );

  return (
    <UiModal
      open={open}
      onOpenChange={onOpenChange}
      bodyClass={`
        h-[100vh]
        w-[60vw]
        max-w-none
        max-h-none
        overflow-visible
        z-[101]
      `}
      body={renderBody()}
      useDirectRender={true}
    />
  );
};

export default React.memo(SearchModal);