import FeatureClickEventPopup from './featureClickEventPopup';
import React, { useState } from 'react';
import axios from 'axios';
import { UiModal, UiTable } 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';



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_mh', text: '하수맨홀' },
  { val: 'tb_ms_swage_psmtn_1', text: '오수펌프' },
  { val: 'tb_ms_swage_psmtn_2', text: '빗물펌프' },
  { val: 'tb_ms_otfl', text: '우수토실' },
];
// 운영정보 '구분' 선택 목록
const WORK_TYPES = [
  { val: 'maintenance', text: '보수 및 갱신' },
  { val: 'cleaning', text: '청소 및 준설' },
  { val: 'inspection', text: '점검 및 진단' },
];

const YEARS = Array.from({ length: 100 }, (_, i) => `${2025 - i}`);
// 테이블 헤더 리스트
// 하수관로
const swagePplTableHeadlist = [
  { id: 'pipeNumber', title: '관로번호' },
  { id: 'gisManageNumber', title: '관리번호(GIS)' },
  { id: 'managingInstitution', title: '관리기관' },
  { id: 'drawingNumber', title: '도엽번호' },
  { id: 'installationLocation', title: '설치위치' },
  { id: 'usage', title: '용도' },
  { id: 'pipeDiameter', title: '관경' },
  { id: 'pipeLength', title: '관로연장' },
  { id: 'pipeType', title: '관종' },
  { id: 'burialDepth', title: '매설심도' },
  { id: 'constructionYear', title: '개보수 년도' },
  { id: 'installationSubject', title: '설치 주체' },
  { id: 'area', title: '구역' },
  { id: 'division', title: '분구' },
  { id: 'alignmentType', title: '지선/간선 구분' },
  { id: 'flowType', title: '흐름 방식' },
  { id: 'boxCount', title: '박스 열수' },
  { id: 'height', title: '높이' },
  { id: 'width', title: '폭' },
  { id: 'startManholeNumber', title: '시점 맨홀번호' },
  { id: 'endManholeNumber', title: '종점 맨홀번호' },
  { id: 'startElevation', title: '시점관저고' },
  { id: 'endElevation', title: '종점관저고' },
]
// 하수처리구역
const swageZoneTableHeadlist = [
  { id: 'ctpvNm', title: '시도명' },
  { id: 'sggNm', title: '시군구명' },
  { id: 'swtrmtZoneNm', title: '하수처리구역명' },
  { id: 'swtrmtFcltCd', title: '하수처리시설번호' },
  { id: 'swtrmtFcltNm', title: '하수처리시설명' },
]
// 하수처리시설
const swageFcltTableHeadlist = [
  { id: 'swtrmtFcltCd', title: '하수처리시설코드' },
  { id: 'swtrmtFcltNm', title: '하수처리시설명' },
  { id: 'fcltCpct', title: '시설용량' },
  { id: 'rgnExpln', title: '지역설명' },
  { id: 'cmcnYmd', title: '준공일자' },
  { id: 'oprtngStrtYmd', title: '가동개시일자' },
  { id: 'clsgYmd', title: '폐쇄일자' },
  { id: 'laeNm', title: '지자체명' },
  { id: 'ctpvNm', title: '시도명' },
  { id: 'sggNm', title: '시군구명' },
  { id: 'sareaNm', title: '권역명' },
  { id: 'lrgeSareaNm', title: '대권역명' },
  { id: 'rvrNm', title: '하천명' },
  { id: 'addr', title: '주소' },
  { id: 'daddr', title: '상세주소' },
  { id: 'rdnmAddr', title: '도로명주소' },
  { id: 'dtlRdnmAddr', title: '상세도로명주소' },
  { id: 'dschgWtstNm', title: '방류수계명' },
  { id: 'pllnArea', title: '부지면적' },
  { id: 'mngRprtvBzentyNm', title: '관리대행업제명' },
  { id: 'swtrmtPpltnCnt', title: '하수처리인구수' },
  { id: 'prcsZoneAreaSum', title: '처리구역면적합계' },
  { id: 'geom', title: 'geometry' },
  { id: 'xcrd', title: 'X좌표' },
  { id: 'ycrd', title: 'Y좌표' },
  { id: 'rprsMsrcCn', title: '대표공법내용' },
  { id: 'sttyCrtrBod', title: '법정기준생물화학적산소요구량' },
  { id: 'sttyCrtrToc', title: '법정기준TOC' },
  { id: 'sttyCrtrSs', title: '법정기준SS' },
  { id: 'sttyCrtrTn', title: '법정기준총질소' },
  { id: 'sttyCrtrTph', title: '법정기준총인' },
  { id: 'sttyCrtrClbclCnt', title: '법정기준대장균수' },
  { id: 'bsnNm', title: '유역명' },
];
// 하수맨홀 (추후 작성 예정)
const swageMhTableHeadlist = [
  { id: 'swtrmtFcltCd', title: '하수처리시설코드' },
];
// 운영정보
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: 'approvalYear', title: '승인년도' },
  { id: 'sido', title: '시도' },
  { id: 'sigungu', title: '시군구' },
  { id: 'treatmentPlant', title: '하수처리장' },
  { id: 'treatmentZone', title: '하수처리구역' },
  { id: 'reportCount', title: '보고서(00건)' },
  { id: 'planMapCount', title: '하수도대장 평면도(00건)' },
  { id: 'regDate', title: '등록일자' },
];

const 처리구역List = [
  { val: '0', text: '선택' },
  { val: 'a', text: 'A' },
  { val: 'b', text: 'B' },
];

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

// 날짜 조합 함수
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}`;
};

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 [시도, set시도] = useState(0);
  const [시군구, set시군구] = useState(0);
  const [처리구역, set처리구역] = useState('');
  // 날짜 상태 선언
  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 [popupFeature, setPopupFeature] = useState<any>(null);

  // 오늘 날짜 구하기
  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');

  // UiTable2에 넘길 headlist를 BASIC_TYPES 값에 따라 분기 처리
  let dynamicHeadlist = swageZoneTableHeadlist; // default 값
  if (activeTab === 'operation') dynamicHeadlist = operationTableHeadlist; // 운영정보
  else if (activeTab === 'report') dynamicHeadlist = reportTableHeadlist; // 하수도정비기본계획보고서
  else if (basicType === 'tb_ms_swage_ppl') dynamicHeadlist = swagePplTableHeadlist; // 하수관로
  else if (basicType === 'tb_il_swage_prcs_fclt') dynamicHeadlist = swageFcltTableHeadlist; // 하수처리시설
  else if (basicType === 'tb_ms_swage_prcs_zone') dynamicHeadlist = swageZoneTableHeadlist; // 하수처리구역
  else if (basicType === 'tb_ms_swage_mh') dynamicHeadlist = swageMhTableHeadlist; // 하수맨홀

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

  // cellClick 함수 타입 지정
  const handleCellClick = (index?: number, headId?: string) => {
    if (typeof index === "number") {
      onFeatureSelect(tableData[index % 10]); // 10은 page size 하드 코딩한 숫자
      onOpenChange(false); // SearchModal 닫기
    }
  };

  // 구분(basicType)이 바뀔 때마다 queryParams, filterParams 초기화
  React.useEffect(() => {
    // filterParams 초기화
    // setFilterParams({});
    set시작1('');
    set시작2('');
    set종료1('');
    set종료2('');
    set변수1('');
    set변수2('');
    set변수3('');
    set변수4('');
    set가동개시_시작_월('');
    set가동개시_종료_월('');
    set가동개시_시작_일('');
    set가동개시_종료_일('');
    set시도(0);
    set시군구(0);
    set처리구역('');
    setYearFilter({
      시작: '',
      종료: '',
      경과년도: ''
    });
    setShowTable(false);
    setTableCount(0);
    setTableData([]);
    // queryParams는 fetchFilteredData 내에서 매번 새로 생성되므로 별도 상태 초기화는 필요 없음
  }, [activeTab, basicType]);

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


  // 하수관로용 CQL 필터 생성
  const pplCqlFilters = () => {
    const cqlFilters: string[] = [];
    // 추후 작성 예정
    if (변수1) cqlFilters.push(`용도코드='${변수1}'`);
    if (변수2) cqlFilters.push(`재질코드='${변수2}'`);
    if (변수3) cqlFilters.push(`행정읍면동코드='${변수3}'`);
    if (변수4) cqlFilters.push(`경과년도='${변수4}'`);
    // 설치년도 범위
    const startDate = getDateString(yearFilter.시작, 가동개시_시작_월, 가동개시_시작_일, '19000101');
    const endDate = getDateString(yearFilter.종료, 가동개시_종료_월, 가동개시_종료_일, `${todayYear}${todayMonth}${todayDate}`);
    cqlFilters.push(`설치시작년도 >= '${startDate}' and 설치시작년도 <= '${endDate}'`);
    // 관경(mm) 범위
    if (시작1 && 종료1) cqlFilters.push(`관경 BETWEEN ${시작1} AND ${종료1}`);
    else if (시작1) cqlFilters.push(`관경 >= ${시작1}`);
    else if (종료1) cqlFilters.push(`관경 <= ${종료1}`);
    // 연장(m) 범위
    if (시작2 && 종료2) cqlFilters.push(`연장 BETWEEN ${시작2} AND ${종료2}`);
    else if (시작2) cqlFilters.push(`연장 >= ${시작2}`);
    else if (종료2) cqlFilters.push(`연장 <= ${종료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 (시도) cqlFilters.push(`ctpv_cd='${시도}'`);
    if (시군구) cqlFilters.push(`sgg_cd='${시군구}'`);
    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(`설치시작년도 >= '${startDate}' and 설치시작년도 <= '${endDate}'`);
    if (변수1) cqlFilters.push(`경과년도='${변수1}'`);
    if (변수2) cqlFilters.push(`용도코드='${변수2}'`);
    // 구경(mm) 범위
    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 psmtnCqlFilters = () => {
    const cqlFilters: string[] = [];
    // 설치년도 범위
    const startDate = getDateString(yearFilter.시작, 가동개시_시작_월, 가동개시_시작_일, '19000101');
    const endDate = getDateString(yearFilter.종료, 가동개시_종료_월, 가동개시_종료_일, `${todayYear}${todayMonth}${todayDate}`);
    cqlFilters.push(`설치시작년도 >= '${startDate}' and 설치시작년도 <= '${endDate}'`);
    if (변수1) cqlFilters.push(`경과년도='${변수1}'`);
    // 일일처리용량 범위
    if (시작1 && 종료1) cqlFilters.push(`일일처리용량 BETWEEN ${시작1} AND ${종료1}`);
    else if (시작1) cqlFilters.push(`일일처리용량 >= ${시작1}`);
    else if (종료1) cqlFilters.push(`일일처리용량 <= ${종료1}`);
    // 우수양수능력 범위
    if (시작2 && 종료2) cqlFilters.push(`우수양수능력 BETWEEN ${시작2} AND ${종료2}`);
    else if (시작2) cqlFilters.push(`우수양수능력 >= ${시작2}`);
    else if (종료2) cqlFilters.push(`우수양수능력 <= ${종료2}`);

    return cqlFilters;
  };
  // 우수토실용 CQL 필터 생성
  const otflCqlFilters = () => {
    const cqlFilters: string[] = [];
    // 설치년도 범위
    const startDate = getDateString(yearFilter.시작, 가동개시_시작_월, 가동개시_시작_일, '19000101');
    const endDate = getDateString(yearFilter.종료, 가동개시_종료_월, 가동개시_종료_일, `${todayYear}${todayMonth}${todayDate}`);
    cqlFilters.push(`설치시작년도 >= '${startDate}' and 설치시작년도 <= '${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 (시도) cqlFilters.push(`ctpv_cd='${시도}'`);
    if (시군구) cqlFilters.push(`sgg_cd='${시군구}'`);
    if (처리구역) cqlFilters.push(`처리구역='${처리구역}'`);
    if (변수1) cqlFilters.push(`처리구역코드='${변수1}'`);
    const startDate = getDateString(yearFilter.시작, 가동개시_시작_월, 가동개시_시작_일, '19000101');
    const endDate = getDateString(yearFilter.종료, 가동개시_종료_월, 가동개시_종료_일, `${todayYear}${todayMonth}${todayDate}`);
    cqlFilters.push(`설치시작년도 >= '${startDate}' and 설치시작년도 <= '${endDate}'`);
    return cqlFilters;
  };


  // 검색 API 호출 함수
  const fetchFilteredData = () => {
    const queryParams = new URLSearchParams({
      lyrTypeNm: basicType,
      page: `${curPage - 1}`,
      size: '10',
      sort: 'string',
    });
    // page와 size 사용해서 api 호출하는 걸로 바꾸기

    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 (activeTab === 'operation') cqlFilters = zoneCqlFilters();
    else cqlFilters = reportCqlFilters();


    // 탭 + 구분 별로 cqlFilter 추가 예정

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

    console.log('API URL:', `${API_URL}/v1/fclts?${queryParams.toString()}`);
    axios.get(`${API_URL}/v1/fclts?${queryParams.toString()}`)
      .then(res => {
        console.log('필터링된 API 결과(개수):', res.data.count);
        console.log('필터링된 API 결과(데이터):', res.data.data);
        setTableData(res.data.data || []);
        setTableCount(res.data.count || []);
        setShowTable(true);
      })
      .catch(err => {
        console.error('API ERROR:', err);
        setTableData([]);
      });
  };


  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="border rounded-lg p-6 mb-4 w-full h-[22vh]">
            {/* 구분 */}
            <div className="flex justify-between items-center mb-3 gap-4">
              <div className="flex items-center">
                <SelectBox2
                  className="w-auto 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="flex items-center mb-2">
                  {/* 설치년도 */}
                  <YearRangeSelectBox
                    start={yearFilter.시작}
                    end={yearFilter.종료}
                    onChange={range => setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })}
                    startLabel="설치년도"
                    endLabel=""
                  />

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

            {/* 조회 버튼 중앙 정렬 */}
            <div className="flex justify-center">
              <Button className="w-40 text-base py-2" onClick={handleSearch}>조회</Button>
            </div>
          </div>
        )}
        {/* 운영정보 탭 */}
        {activeTab === 'operation' && (
          <div className="border rounded-lg p-6 mb-4 w-full h-[22vh]">
            <div className="flex items-center mb-6">
              <SelectBox2
                className="w-auto 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}
              />

              {/* 설치년도 */}
              <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 });
                  }}
                />
              </div>
            </div>
            {/* 조회 버튼 중앙 정렬 */}
            <div className="flex justify-center">
              <Button className="w-40 text-base py-2" onClick={handleSearch}>조회</Button>
            </div>
          </div>
        )}
        {/* 하수도정비기본계획보고서 탭 */}
        {activeTab === 'report' && (
          <div className="border rounded-lg p-6 mb-4 w-full h-[22vh]">
            {/* 시도, 시군구, 하수처리구역 한 줄 */}
            <div className="flex items-center mb-6">
              <SidoSigunguSelectBox
                sido={시도}
                sigungu={시군구}
                onSidoChange={set시도}
                onSigunguChange={set시군구}
              />
              <SelectBox2
                className="w-auto mr-2"
                selectClass="rounded-lg bg-white text-xl"
                label="하수처리구역"
                selectArray={처리구역List.map(opt => ({ val: opt.val, text: opt.text }))}
                onSelectValue={val => set처리구역(String(val))}
                value={처리구역}
              />
              <Input
                className='!text-xl w-[100px] placeholder:text-center mr-8'
                placeholder="입력"
                value={변수1}
                onChange={(e) => {
                  // 숫자만 입력 허용
                  const val = e.target.value.replace(/[^0-9]/g, '');
                  set변수1(val);
                }}
              />
              <YearRangeSelectBox
                start={yearFilter.시작}
                end={yearFilter.종료}
                onChange={range => setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })}
                startLabel="승인년도"
                endLabel=""
              />
            </div>
            {/* 조회 버튼 중앙 정렬 */}
            <div className="flex justify-center">
              <Button className="w-40 text-base py-2" onClick={handleSearch}>조회</Button>
            </div>
          </div>
        )}
      </UITab2>



      {/* 📋 결과 리스트 */}
      < div
        className="border rounded-lg space-y-2 w-full h-[60vh] overflow-auto"
        onWheel={e => {
          // 세로 스크롤이 최상단/최하단에 도달했을 때 가로 스크롤이 막히는 현상을 해결
          const container = e.currentTarget;
          const isShift = e.shiftKey;
          if (!isShift) return;

          // 세로 스크롤 위치
          const atTop = container.scrollTop === 0;
          const atBottom = Math.ceil(container.scrollTop + container.clientHeight) >= container.scrollHeight;

          // 세로 스크롤이 최상단/최하단에 도달한 경우에만 가로 스크롤 수동 처리
          if ((atTop && e.deltaY < 0) || (atBottom && e.deltaY > 0)) {
            container.scrollLeft += e.deltaY;
            e.preventDefault();
          }
        }}
      >
        {/* 선택된 탭의 label */}
        < div className="m-2 text-2xl font-bold mb-2" >
          {TABS.find(tab => tab.val === activeTab)?.text}
          {/* 조회 결과 라벨 및 건수 표시 */}
          {
            (() => {
              // 조회 건수 변수 선언
              const resultCount = tableData.length;
              // 탭별 라벨
              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 (
                <div className="text-lg font-semibold mb-6">
                  ▶ {label} 조회 결과
                  <span className="ml-2 text-base text-gray-500">({tableCount}건)</span>
                </div>
              );
            })()
          }
          <UiTable2
            headName=''
            tableData={tableData}
            headlist={dynamicHeadlist}
            pageSize={tableData.length < 10 ? tableData.length : 10}
            total={tableCount}
            children={undefined}
            cellClick={handleCellClick}
            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()}
      headerTitle="검색"
    // 필요시 footerContent 등 추가
    />
  );
}

export default React.memo(SearchModal);