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

/**
 *  처리시설 현황 - 처리구역정보(메인)
 * 
 * - 시설계획 정보를 조회조건대로 추출하여 표로 보여주는 화면.
 */

"use client"
import { useFoStore } from "@/app/store";
import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, 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 ProcessFacilityInfoModal from "./modal/page";
import LoadingOverlay from "@common/business_components/ui/loadingBar";

export default function ProcessArea() {
  const {Common,
    ProcessArea,
    ProcessAreaSearch,
    initializeCommonData,
    searchProcessAreaList
  } = useFoStore((state) => state) || { 
    Common: { isInit: false, selectSidoData: [], selectSigunData: [], selectRegionData: [], selectUnitWaterShedData: [], selectMiddleRegionData: [], selectEnvPartData: [], selectSearchYear: [{ val: "0" }], btnClass: "" },
    ProcessArea: { processAreaList: [], processAreaCount: 0, excelList: [], upHeadList1: [] },
    ProcessAreaSearch: { processFacilityLabelArray: [] },
    initializeCommonData: () => {},
    searchProcessAreaList: () => {}
  };
  
  const {
    isInit,
    selectSidoData,
    selectSigunData,
    selectRegionData,
    selectUnitWaterShedData,
    selectMiddleRegionData,
    selectEnvPartData,
    selectSearchYear,
    btnClass,
  } = Common;
  
  const {
    processFacilityLabelArray,
  } = ProcessAreaSearch;

  const {
    upHeadList1,
    processAreaList,
    processAreaCount,
    excelList,
    isLoading,
  } = ProcessArea;

  const mainList: Record<string, unknown>[] = processAreaList || [];
  // 그리드 관련
  const searchInputRef = useRef<HTMLDivElement & HTMLInputElement>(null);

   // 모달 상태 추가
  const [selectedRow, setSelectedRow] = useState<number | null>(null);
  const [fcltyNm, setFcltyNm] = useState<string>("");
  const [fcltyCd, setFcltyCd] = useState<string>("");
  
  const [resetPage, setResetPage] = useState<boolean>(false);
  const [searchYearValue, setSearchYearValue] = useState<string>(selectSearchYear[0]?.val || "0");

  const ref = useRef<ReturnType>({
    partValue: '',
    sidoValue: '',
    sigunValue: '',
    regionValue: '',
    unitWaterShedValue: '',
    middleRegionValue: '',
    envPartValue: '',
    sidoText: '',
    sigunText: ''
  });

  const searchProcessArea = useCallback(({ sidoText, sigunText}: ReturnType, pageNo: number, pageCnt:number=20) => {
    searchProcessAreaList(pageNo, pageCnt, sidoText, sigunText, searchYearValue);
  }, [searchProcessAreaList, searchYearValue]);

  // 조회
  const chkVal = useCallback(() => {
    setResetPage(true);
  }, []);

  // 초기화
  const resetVal = () => {
    if (searchInputRef.current) {
      const input = searchInputRef.current.querySelector('input');
      if (input) {
        input.value = "";
      }
    }
    setSearchYearValue(selectSearchYear[0]?.val || "0");
    searchProcessAreaList(1, 10, '', '', selectSearchYear[0]?.val || "0");
  }

  // 셀 클릭 시 모달 표시
  const cellClick = (index: number) => {
    if (processAreaList[index]) {
      setFcltyNm(processAreaList[index].swtrmtFcltNm);
      setFcltyCd(processAreaList[index].swtrmtFcltCd);
      setSelectedRow(index); // 클릭한 행의 index 저장
    }
  };

  // 모달 닫기
  const closeModal = () => {
    setSelectedRow(null);
  };

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

  useEffect(() => {
    if (excelList && excelList.length > 0) {
      downloadExcel({ 
        data: excelList as unknown as JSON[], 
        fileName: '처리구역정보', 
        sheetNameArray: ['처리구역정보'], 
        headerRange: 'A1:W1' 
      });
    }
  }, [excelList]);

  const excelDownload = useCallback(() => {
    searchProcessArea(ref.current, 1, 10000);
  }, [searchProcessArea]);

  const handlePageChange = useCallback((pageNo: number) => {
    setResetPage(false);
    searchProcessArea(ref.current, pageNo, 10);
  }, [searchProcessArea]);

  const total = processAreaCount;
  return (
    <MainDiv>
      <Title title="처리구역정보" />
      <ContentsDiv>
        <SearchBaseForm
          leftChildren={<>
            <SelectBox className="col-span-3" label={processFacilityLabelArray[6] as string} selectArray={selectSearchYear} onSelectValue={(val) => setSearchYearValue(val.toString())} value={searchYearValue} 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={true}
        />
        <ListDiv>
          <LoadingOverlay isLoading={isLoading} />
          <div className="h-full w-full overflow-x-scroll">
            <div className="w-[180%]">
              <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"처리구역정보"} tableData={mainList} headlist={upHeadList1} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
            </div>
          </div>
        </ListDiv>
      </ContentsDiv>
      {selectedRow !== null && (
        <UiModal 
          body={<ProcessFacilityInfoModal fcltyName={fcltyNm} facilityCd={fcltyCd}></ProcessFacilityInfoModal>} 
          bodyClass="sm:max-w-[90vw] w-[1200px] h-[900px]"
          open={selectedRow !== null}
          onOpenChange={(open: boolean) => !open && closeModal()}
        />
      )}
    </MainDiv>
  );
}