frontend/apps/fo/app/pages/(with-layout)/flowRate/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 FlowRateModal from "./modal/page";
import type { ExcelType } from "@/app/store/flowRate";
import LoadingOverlay from "@common/business_components/ui/loadingBar";

export default function ProcessFacilitySearch() {
  const {Common
    ,FlowRateSearch
    ,FlowRateList
    ,initializeCommonData
    ,searchFlowRateList
  } = useFoStore((state) => state);

  const searchInputRef = useRef<HTMLDivElement & HTMLInputElement>(null);

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

  const {
    flowRateSearchLabelArray
  } = FlowRateSearch;

  // 그리드 관련
  const {
    upHeadList1,
    upHeadList2,
    upHeadList3,
    flowRateList,
    flowRateCount,
    excelList,
    isLoading,
  } = FlowRateList;

  // 입력값 상태 관리
  const [fcltCpct, setFcltCpct] = useState<string>("0");
  const [fcltyName, setFcltyName] = useState<string>("");
  const [operationValue, setOperationValue] = useState<string>("0");
  const [searchYearValue, setSearchYearValue] = useState<string>(selectSearchYear[0]?.val || "0");
  const [widthSize, setWidthSize] = useState<string>("w-[120%]");
  const [upheadList, setUpheadList] = useState<TableUpperProps[]>(upHeadList1);
  const [resetPage, setResetPage] = useState<boolean>(false);
  const prevExcelListRef = useRef<ExcelType[] | null>(null);

  // 모달 상태 추가
  const [selectedRow, setSelectedRow] = useState<number | null>(null);
  const [fcltyNm, setFcltyNm] = useState<string>("");
  const [fcltyCd, setFcltyCd] = useState<string>("");
  
  const searchFlowRate = 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)) {
      searchFlowRateList(pageNo, pageCnt, searchYearValue, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
    } else {
      searchFlowRateList(pageNo, pageCnt, searchYearValue);
    }
  }, [operationValue, fcltyName, searchFlowRateList, searchYearValue, fcltCpct]);

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

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

  // 페이지 네비게이션션
  const handlePageChange = useCallback((page: number) => {
    setResetPage(false);
    searchFlowRate(ref.current, page, 10);
  }, [searchFlowRate]);

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

  // 시도 데이터 초기화
  useEffect(() => {
    if(!isInit) {
      initializeCommonData();
      searchFlowRateList(1, 10, selectSearchYear[0]?.val || "0");
    }
  }, [isInit, initializeCommonData, searchFlowRateList, selectSearchYear]);
  
  useEffect(() => {
    if (excelList && excelList.length > 0) {
      downloadExcel({ data: JSON.parse(JSON.stringify(excelList)), fileName: '시설별 유량현황', sheetNameArray: ['시설별 유량현황'], headerRange: 'A1:O1' });
    } else if (prevExcelListRef.current && prevExcelListRef.current.length > 0) {
      alert('다운받을 데이터가 없습니다.');
    }
    prevExcelListRef.current = excelList;
  }, [excelList]);

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

  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(() => {
    searchFlowRate(ref.current, 1, 10000);
  }, [searchFlowRate]);

  const total = flowRateCount;

  return (
    <MainDiv>
      <Title title="시설별 유량현황" />
      <ContentsDiv>
        <SearchBaseForm
          leftChildren={<>
            <SelectBox className="col-span-3" label={flowRateSearchLabelArray[3] as string} selectArray={selectUpdownData} onSelectValue={(val) => setFcltCpct(val.toString())} value={fcltCpct} selectClass={undefined} />
            <SearchInput className="col-span-3" label={flowRateSearchLabelArray[4] as string} textValue={fcltyName} setText={setFcltyName} />
            <SelectBox className="col-span-3" label={flowRateSearchLabelArray[5] as string} selectArray={selectSearchYear} onSelectValue={(val) => setSearchYearValue(val.toString())} value={searchYearValue} selectClass={undefined} />
            <SelectBox className="col-span-3" label={flowRateSearchLabelArray[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={flowRateList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
            </div>
          </div>
        </ListDiv>
      </ContentsDiv>
      {selectedRow !== null && (
        <UiModal
          body={<FlowRateModal fcltyName={fcltyNm} facilityCd={fcltyCd} searchYear={searchYearValue}></FlowRateModal>} 
          bodyClass="sm:max-w-[90vw] w-[1250px] h-[780px]"
          open={selectedRow !== null}
          onOpenChange={(open: boolean) => !open && closeModal()}
        />
      )}
    </MainDiv>
  );
}