frontend/apps/fo/app/pages/(with-layout)/facilityWaterQlty/page.tsx

"use client"

import { useFoStore } from "@/app/store";
import type { TableUpperProps } from "@/app/store/common";
import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
import ListDiv from "@common/business_components/ui/list_div";
import { useCallback, useEffect, useRef, useState } from "react";
import WaterQualityModal from "./modal/page";
import type { FacilityWaterQltyProps } from "@/app/store/facilityWaterQlty";
import LoadingOverlay from "@common/business_components/ui/loadingBar";

export default function ProcessFacilitySearch() {
  const { Common
    , FacilityWaterQltyMain
    , initializeCommonData
    , searchFacilityWaterQltyList
  } = useFoStore((state) => state) || { FacilityWaterQltyList: { facilityWaterQltyList: [], facilityWaterQltyCount: 0 } };

  const {
    isInit, 
    selectUpdownData,
    selectOperationData,
    selectSidoData,
    selectSigunData,
    selectRegionData,
    selectUnitWaterShedData,
    selectMiddleRegionData,
    selectEnvPartData,
    selectSearchYear,
    btnClass
  } = Common;

  const {
    mainLabelArray,
    upHeadList1,
    upHeadList2,
    upHeadList3,
    facilityWaterQltyList,
    facilityWaterQltyCount,
    excelList,
    isLoading,
  } = FacilityWaterQltyMain;

  const mainList: FacilityWaterQltyProps[] = facilityWaterQltyList || [];
  
  // 그리드 관련
  const [resetPage, setResetPage] = useState<boolean>(false);
  const searchInputRef = useRef<HTMLDivElement & HTMLInputElement>(null);
  const [widthSize, setWidthSize] = useState<string>("w-[120%]");
  const [upheadList, setUpheadList] = useState<TableUpperProps[]>(upHeadList1);
  const [fcltyName, setFcltyName] = useState<string>("");
  const [operationValue, setOperationValue] = useState<string>("0");
  const [searchYearValue, setSearchYearValue] = useState<string>(selectSearchYear[0]?.val || "0");
  const [fcltCpct, setFcltCpct] = useState<string>("0");

  // 모달 상태 추가
  const [selectedRow, setSelectedRow] = useState<number | null>(null);
  const [fcltyNm, setFcltyNm] = useState<string>("");
  const [fcltyCd, setFcltyCd] = useState<string>("");
  const [modalYear, setModalYear] = useState<string>("");

  const searchFcltyQltyList = useCallback(({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt:number=20) => {
    let nameCd, partStr;
    switch (partValue) {
      case 'R':
        if (regionValue !== '0') {
          if(unitWaterShedValue==='0') nameCd = regionValue;
          else if (middleRegionValue==='0') nameCd = unitWaterShedValue;
          else nameCd = middleRegionValue;
        }
        partStr = partValue
        break;
      default:
        if(sidoValue !== '0') nameCd = sidoValue;
        if(sigunValue !== '0') nameCd = sigunValue;
          partStr = envPartValue !== '0' ? envPartValue:partValue;
          break;
    }

    if (partStr.length > 1 || fcltCpct !== '0' || operationValue!== '0' ||nameCd ||(fcltyName.trim() !== "" && fcltyName.trim() !== null)) {
      searchFacilityWaterQltyList(pageNo, pageCnt, searchYearValue, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
    } else {
      searchFacilityWaterQltyList(pageNo, pageCnt, searchYearValue);
    }
  }, [operationValue, fcltyName, searchFacilityWaterQltyList, searchYearValue, fcltCpct]);

  const resetVal = () => {
    setWidthSize("w-[120%]");
    setUpheadList(upHeadList1)
    // 상태값 설정
    setFcltCpct(selectUpdownData[0]?.val || "0");
    setOperationValue(selectOperationData[0]?.val || "0");
    setSearchYearValue(selectSearchYear[0]?.val || "0");
    // SearchInputSelect 초기화
    setFcltyName("");
    if (searchInputRef.current) {
      const input = searchInputRef.current.querySelector('input');
      if (input) {
        input.value = "";
      }
    }
    searchFacilityWaterQltyList(1, 10, selectSearchYear[0]?.val || "0");
  }

  // 셀 클릭 시 모달 표시
  const cellClick = (index: number) => {
    const facility = facilityWaterQltyList[index];
    if (facility) {
      setFcltyNm(facility.bscFctNm);
      setFcltyCd(facility.bscFctCd);
      setModalYear(searchYearValue);
      setSelectedRow(index); // 클릭한 행의 index 저장
    }
  }

  // 모달 닫기
  const closeModal = () => {
    setSelectedRow(null);
  }
  const ref = useRef<ReturnType>({
    partValue: '',
    sidoValue: '',
    sigunValue: '',
    regionValue: '',
    unitWaterShedValue: '',
    middleRegionValue: '',
    envPartValue: '',
    sidoText: '',
    sigunText: ''
  });

  useEffect(() => {
    if (!isInit) {
      initializeCommonData();
      searchFacilityWaterQltyList(1, 10, selectSearchYear[0]?.val || "0");
    }
  }, [isInit, initializeCommonData, searchFacilityWaterQltyList, selectSearchYear]);

  useEffect(() => {
    if (excelList && excelList.length > 0) {
      downloadExcel({ 
        data: excelList as unknown as JSON[], 
        fileName: '시설별 수질현황', 
        sheetNameArray: ['시설별 수질현황'], 
        headerRange: 'A1:T1' 
      });
    }
  }, [excelList]);

  const chkVal = useCallback((returntype:ReturnType) => {
    setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
    setUpheadList(returntype.partValue == 'R' ? upHeadList2 : returntype.partValue == 'G'?upHeadList3:upHeadList1);
    setResetPage(true);
  }, [upHeadList1, upHeadList2, upHeadList3]);

  const excelDownload = useCallback(() => {
    searchFcltyQltyList(ref.current, 1, 10000);
  }, [searchFcltyQltyList]);
  
  const handlePageChange = useCallback((page: number) => {
    setResetPage(false);
    searchFcltyQltyList(ref.current, page, 10);
  }, [searchFcltyQltyList]);

  const total = facilityWaterQltyCount || 1;
  return (
    <MainDiv>
      <Title title="시설별 수질현황" />
      <ContentsDiv>
        <SearchBaseForm
          leftChildren={<>
            <SelectBox className="col-span-3" label={mainLabelArray[3] as string} selectArray={selectUpdownData} onSelectValue={(val) => setFcltCpct(val.toString())} value={fcltCpct} selectClass={undefined} />
            <SearchInput className="col-span-3" label={mainLabelArray[4] as string} textValue={fcltyName} setText={setFcltyName} />
            <SelectBox className="col-span-3" label={mainLabelArray[5] as string} selectArray={selectSearchYear} onSelectValue={(val) => setSearchYearValue(val.toString())} value={searchYearValue} selectClass={undefined} />
            <SelectBox className="col-span-3" label={mainLabelArray[6] as string} selectArray={selectOperationData} onSelectValue={(val) => setOperationValue(val.toString())} value={operationValue} selectClass={undefined} />
          </>}
          rightChildren={undefined}
          selectSidoData={selectSidoData}
          selectSigunData={selectSigunData}
          selectRegionData={selectRegionData}
          selectUnitWaterShedData={selectUnitWaterShedData}
          selectMiddleRegionData={selectMiddleRegionData}
          selectEnvPartData={selectEnvPartData}
          btnClass={btnClass}
          queryClick={chkVal}
          excelClick={excelDownload}
          initClick={resetVal}
          ref={ref} isAdmin={false}        />
        <ListDiv>
          <LoadingOverlay isLoading={isLoading} />
          <div className="h-full w-full overflow-x-scroll">
            <div className={widthSize}>
              <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"시설별 수질현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total<10?facilityWaterQltyList.length:total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
            </div>
          </div>
        </ListDiv>
      </ContentsDiv>
      {selectedRow !== null && (
        <UiModal
          body={<WaterQualityModal fcltyName={fcltyNm} facilityCd={fcltyCd} searchYear={modalYear}></WaterQualityModal>}
          bodyClass="sm:max-w-[90vw] w-[1300px] h-[920px]"
          open={selectedRow !== null}
          onOpenChange={(open) => !open && closeModal()}
          noHeaderYn="Y"
          noFooterYn="Y"
        />
      )}
    </MainDiv>
  );
}