/**
 * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 하수도정비기본계획보고서 탭 (셀 클릭)
 * 
 * 📄 Report Files Modal
 * Next.js App Router (app/) 기반 보고서 파일 모달 컴포넌트
 *
 * - 하수도정비 기본계획 보고서 파일 목록 표시
 * - 파일명 및 등록일자 정보 테이블 출력
 * - 페이지네이션 및 로딩 오버레이 지원
 * - 파일 클릭 이벤트 처리 및 상세 조회
 * - Zustand를 통한 모달 상태 및 데이터 관리
 * - 모달 열림/닫힘 시 데이터 초기화 기능
 */
'use client'
import React, { useEffect } from 'react';
import LoadingOverlay from '@/components/ui/LoadingBar';
import useReportTab from './useReportTab';
import { useReportTabStore } from '@/store/useReportTabStore';
import { UiTable } from '@common/business_components/ui';
import { UiModal } from "@common/business_components";
import useSearchModalStore from '@/store/useSearchModalStore';

type ModalOpenProp = { clsfSystmSn: string }  // 자료관 기본계획 일련번호
const ReportFilesModal: React.FC<ModalOpenProp> = ({ clsfSystmSn }: ModalOpenProp) => {
  // 하수도정비 기본계획 보고서 파일목록
  const REPORT_FILES_HEADLIST = [
    { id: "no", title: "NO" },
    { id: "fileTitle", title: "파일명" },
    { id: "regDt", title: "등록일자" },
  ];

  const {
    curPage, setCurPage,
    isLoading,
    isResetPage,
    isResetSelection,
    setIsResetPage,
    setIsResetSelection
  } = useSearchModalStore();
  const {
    isOpen: isModalOpen,
    files,
    dcFiles: filesOrigin,
    setIsOpen: setIsModalOpen,
    setFiles,
    fetchDcFiles
  } = useReportTabStore();
  const { getFiles, handleCellClick } = useReportTab();


  useEffect(() => {
    fetchDcFiles(clsfSystmSn);
  }, [clsfSystmSn]);

  useEffect(() => {
    if (isModalOpen === true) {
      getFiles(); // 파일 목록 조회
    } else {
      setFiles([]); // 모달이 닫힐 때 파일 목록 초기화
      setCurPage(1); // 페이지를 1로 초기화
      setIsResetPage(true); // 페이지를 초기화
      setIsResetSelection(true); // 선택 초기화
    }
  }, [filesOrigin, isModalOpen, curPage]);

  const renderBody = () => (
    <>
      <div className="flex-1 px-2 pb-2">
        <LoadingOverlay isLoading={isLoading} />
        <UiTable
          headName={(() => {
            return (<>조회 결과 ({filesOrigin.length.toLocaleString('ko-KR')})건</>);
          })()
          }
          tableData={files}
          headlist={REPORT_FILES_HEADLIST}
          pageSize={10}
          total={filesOrigin.length}
          cellClick={handleCellClick}
          onPageChange={setCurPage}
          resetPageNo={isResetPage}
          resetSelection={isResetSelection}
        />
      </div>
    </>
  );


  return (
    <UiModal
      open={isModalOpen}
      onOpenChange={setIsModalOpen}
      headerTitle=""
      bodyClass={`
          min-h-[50vh] max-h-[90dvh]
          max-w-[750px]
          h-auto w-auto
          overflow-auto
          z-[5000]
          flex items-start
          `}
      body={renderBody()}
      noFooterYn='Y'
    />
  );
};

export default React.memo(ReportFilesModal);