frontend/apps/sn/app/(with-base-layout)/ii/irsetting/page.tsx

'use client'
import { postData } from '@/components/lib/api'
import FileUploadForm from '@/components/ui/fileUploadForm'
import FormSection from '@/components/ui/formSection'
import { DateMonthPicker, filePicked } from '@common/business_components/ui'
import ListDiv from '@common/business_components/ui/list_div'
import { Input } from '@common/components/ui'
import { zodResolver } from '@hookform/resolvers/zod'
import { useState } from 'react'
import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { excelToFlowRateData, excelToMatchingResultData, excelToTimePatternData } from '@/components/lib/utils'
import BaseLayout from '../BaseLayout'
import { validateMultipleFiles, FILE_EXTENSIONS, type FileValidationConfig } from '../../fileValidation';
import { validateBasicSelectionsWithAlert } from '../../selectionValidation';
import { tokenManager } from '@/entities/auth/lib/token-manager';
import { AUTH_USER_ID } from "@/shared/config";
import { useQuery } from "@tanstack/react-query";
import { ENDPOINT } from "@common/components/config";
import { getUserInfo } from "@common/components/api";


const formSchema = z.object({
  managenm: z.string(),
  region: z.string(),
  suyeonga: z.number(),
  inputdate: z.coerce.date(),
  rtkSource: z.string(),
  suyeongaPlace: z.string(),
  pattern: z.string()
})

// 각 파일 업로드 폼의 데이터를 저장할 인터페이스 정의
interface UploadedFileInfo {
  file: File | null;
  atflCd: string | null;
  atflId: string | null;
  // 필요하다면 파일 이름 등 추가 정보 저장 가능
  // fileName: string;
}
// 초기 파일 정보 상태
const initialFileInfo: UploadedFileInfo = { file: null, atflCd: null, atflId: null };

interface ApiSelectOption {
  text: string;
  val: string;
}

const IrSetting = () => {
  const [input1, setInput1] = useState('0.8'); // 오수전환율 초기값
  const [input2, setInput2] = useState('');
  const [select1, setSelect1] = useState<string | number>('0');   // 하수처리장코드
  const [formResetKey, setFormResetKey] = useState(0); // FileUploadForm 리셋을 위한 key 상태
  const [isLoadingResult, setIsLoadingResult] = useState<boolean>(false); // 로딩 상태
  const [ctpvCd, setCtpvCd] = useState<number>(0); // 시도 코드 상태
  const [sggCd, setSggCd] = useState<number>(0); // 시군구 코드 상태
  const [sggName, setSggName] = useState<string>(''); // 시군구 이름 상태

  const { data: userInfo } = useQuery({
    queryKey: [ENDPOINT.USER_SERVICE.USERS],
    queryFn: () => getUserInfo(),
    enabled: true,
  });

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      managenm: "",
      region: "",
      suyeonga: 0,
      inputdate: new Date(),
      rtkSource: "",
      suyeongaPlace: "",
      pattern: ""
    }
  })

  const [uploadedFilesData, setUploadedFilesData] = useState<UploadedFileInfo[]>([
    initialFileInfo, // 0: 오수관망도
    initialFileInfo, // 1: 수용가-맨홀 매칭결과
    initialFileInfo, // 2: 오수량 시간패턴
    initialFileInfo  // 3: 유량자료 등록
  ]);

  // selectedDate를 yyyyMM 문자열 형식으로 변경
  const [selectedDate, setSelectedDate] = useState(() => {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    return `${year}${month}`;
  });

  // 폼 초기화 함수
  const resetAllForms = () => {
    form.reset({ // react-hook-form 초기화
      managenm: "",
      region: "",
      suyeonga: 0,
      inputdate: new Date(),
      rtkSource: "",
      suyeongaPlace: "",
      pattern: ""
    });
    setUploadedFilesData([ // 파일 업로드 상태 초기화
      initialFileInfo,
      initialFileInfo,
      initialFileInfo,
      initialFileInfo
    ]);
    // selectedDate를 현재 연월로 초기화
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    setSelectedDate(`${year}${month}`);
    setInput1(''); // 입력 필드 초기화
    setInput2(''); // 입력 필드 초기화
    setSelect1(0);
    setFormResetKey(prevKey => prevKey + 1); // FileUploadForm 재마운트를 위해 key 변경
  };

  // FileUploadForm의 onFileSelect prop으로 전달될 콜백 함수
  const handleFileSelection = (
    index: number, // FileUploadForm의 fileIdx 값
    selectedFile: File | null,
    cd: string | null,
    id: string | null
  ) => {
    setUploadedFilesData(prevData => {
      const newData = [...prevData];
      newData[index] = {
        file: selectedFile,
        atflCd: cd,
        atflId: id,
      };
      return newData;
    });
    console.log(`Page: File data received for form index ${index}`, { fileName: selectedFile?.name, cd, id });
  };


  const registFile = async (analysisData: any) => {
    setIsLoadingResult(true); // 로딩 상태 시작
    console.log("Submitting combined analysis data to backend:", analysisData);
    // 추후 API 엔드포인트에 맞게 URL 수정 필요
    const data = await postData('v1/inftwtAnls', analysisData);
    console.log("Response from backend:", data);
    if (data) {
      setIsLoadingResult(false); // 로딩 상태 시작
      alert("분석 데이터가 성공적으로 제출되었습니다.");
      resetAllForms(); // 성공 시 폼 초기화 함수 호출
    } else {
      setIsLoadingResult(false); // 로딩 상태 시작
      alert("분석 데이터 제출 중 오류가 발생했습니다.");
    }
  };

  // 침입수 분석 실행 버튼 클릭 핸들러 
  const handleAnalysisClick = async () => {
    setIsLoadingResult(true); // 로딩 상태 시작

    // 기본 선택 항목들 검증 (환경청, 시도, 시군구, 하수처리장)
    if (!validateBasicSelectionsWithAlert(select1, {
      requireEnv: true,
      requireSido: true,
      requireSigungu: true,
      requireTreatmentPlant: true
    })) {
      setIsLoadingResult(false);
      return;
    }

    console.log(uploadedFilesData);
    const file1 = uploadedFilesData[0]; // 오수관망도
    const file2 = uploadedFilesData[1]; // 수용가-맨홀 매칭결과
    const file3 = uploadedFilesData[2]; // 오수량 시간패턴
    const file4 = uploadedFilesData[3];      // 유량자료

    console.log("오수관망도 정보:", file1?.file);
    console.log("수용가-맨홀 매칭결과 정보:", file2);
    console.log("오수량 시간패턴 정보:", file3);
    console.log("유량자료 정보:", file4);

    // 모든 필수 파일이 선택되었는지 확인 (UploadedFileInfo 객체와 그 안의 file 객체 모두 확인)
    // 유량자료는 선택값
    if (!file1?.file || !file2?.file || !file3?.file) {
      setIsLoadingResult(false);
      alert('모든 분석용 파일을 선택해주세요.');
      return;
    }

    // 파일 확장자 검증 (분리된 유틸리티 사용)
    const validationConfigs: FileValidationConfig[] = [
      {
        file: file1.file,
        allowedExtensions: FILE_EXTENSIONS.INP,
        fileDescription: '오수관망도'
      },
      {
        file: file2.file,
        allowedExtensions: FILE_EXTENSIONS.EXCEL,
        fileDescription: '수용가-맨홀 매칭결과'
      },
      {
        file: file3.file,
        allowedExtensions: FILE_EXTENSIONS.EXCEL,
        fileDescription: '오수량 시간패턴'
      }
    ];

    // 유량자료 파일이 있는 경우 검증 목록에 추가
    if (file4?.file) {
      validationConfigs.push({
        file: file4.file,
        allowedExtensions: FILE_EXTENSIONS.EXCEL,
        fileDescription: '유량자료'
      });
    }

    // 파일 확장자 검증 실행
    const validationResult = validateMultipleFiles(validationConfigs);
    if (!validationResult.isValid) {
      setIsLoadingResult(false);
      alert(validationResult.errorMessage);
      return;
    }

    // 오수전환율 값 0 ~ 1 사이인지 검증
    if (input1 === '' || input1 === null || input1 === undefined) {
      setIsLoadingResult(false);
      console.error('오수전환율은 0에서 1 사이의 값으로 입력해야 합니다.');
      alert('오수전환율을 입력해주세요.');
      return;
    }

    const numericInput1 = parseFloat(input1);
    if (isNaN(numericInput1) || numericInput1 < 0 || numericInput1 > 1) {
      setIsLoadingResult(false);
      console.error('오수전환율은 0에서 1 사이의 값으로 입력해야 합니다.');
      alert('오수전환율은 0에서 1 사이의 값으로 입력해야 합니다.');
      return;
    }

    type MatchingResult = { anlsSn: number; mhlMngNo: string; rcptrNo: string; };
    type TimePattern = { hrId: number; rt?: number | null | undefined; };
    type FlowRate = { pplMngNo: string; mtrngDt: string; oilq?: number | null | undefined; };

    const filePickers: {
      file: UploadedFileInfo;
      parser: (excelData: any) => MatchingResult[] | TimePattern[] | FlowRate[];
    }[] = [
        { file: file2, parser: excelToMatchingResultData },
        { file: file3, parser: excelToTimePatternData }
      ];

    if (file4?.file) {
      filePickers.push({ file: file4, parser: excelToFlowRateData });
    }

    try {
      const parsedResults = await Promise.all(
        filePickers.map(async ({ file, parser }) => {
          if (!file || !file.file) return null;

          const jsonData = await filePicked(file.file, 0);

          if (jsonData === undefined) {
            console.warn(`Warning: filePicked returned undefined for ${file.file.name}`);
            return {
              fileName: file.file.name,
              atflCd: file.atflCd,
              atflId: file.atflId,
              parsedData: null
            };
          }

          // jsonData를 각 parser 함수로 처리
          const parsedDataBySpecificFunction = parser(jsonData);

          return {
            fileName: file.file.name,
            atflCd: file.atflCd,
            atflId: file.atflId,
            parsedData: parsedDataBySpecificFunction
          };
        })
      );

      // 각 파싱 결과 접근
      const matchingResultData = parsedResults.find(r => r && r.fileName === file2.file?.name)?.parsedData;
      const timePatternData = parsedResults.find(r => r && r.fileName === file3.file?.name)?.parsedData;
      const flowRateData = file4?.file
        ? parsedResults.find(r => r && r.fileName === file4.file?.name)?.parsedData
        : null;

      // 새로운 JSON 데이터 생성
      const combinedAnalysisData = {
        ctpvCd: (ctpvCd ? String(ctpvCd) : null),
        sggCd: (sggCd ? String(sggCd) : null), // 시군구코드 (선택값)
        swageTmplntCd: (select1 && select1 !== '0' && select1 !== 0)
          ? select1.toString().split('.').pop() || null  // '.'으로 split해서 마지막 부분만 사용
          : null,  // 하수처리장코드 (선택값)
        aplcnYm: selectedDate, // 적용연월
        drtwSwtcRt: parseFloat(input1) || null, // 오수전환율 (숫자로 변환)
        anlsInfo: input2, // 분석정보
        rgtr: tokenManager.getToken(AUTH_USER_ID) || null, // 등록자 (사용자 ID)
        rgtrNm: userInfo?.userName, // 등록자 (사용자 ID)
        atflCd: file1?.atflCd, // 첨부파일CD (오수관망도)
        atflId: file1?.atflId, // 첨부파일ID (오수관망도)
        atflInpNm: file1?.file?.name, // 오수관망도 파일명
        atflHrPttnNm: file3?.file?.name, // 오수량 시간패턴 파일명
        atflMpngNm: file2?.file?.name, // 수용가-맨홀 매칭결과 파일명
        atflOilqNm: file4?.file?.name || null, // 유량자료 파일명 (없을 수 있음)
        tbSnRcptrMhlMpng: matchingResultData, // 수용가-맨홀 매칭결과
        tbSnHrPttn: timePatternData, // 오수량 시간패턴
        tbSnOilqData: flowRateData, // 유량자료 (없을 수 있음)
      };

      console.log("통합 분석 데이터 (JSON):", combinedAnalysisData);

      // 수정된 registFile 함수를 호출하여 combinedAnalysisData를 전송합니다.
      await registFile(combinedAnalysisData);
      setIsLoadingResult(false);
    } catch (error) {
      setIsLoadingResult(false);
      console.error("파일 파싱 중 오류 발생:", error);
      alert("파일 처리 중 오류가 발생했습니다.");
      return;
    }
  }

  return (
    <>
      <BaseLayout
        titleName={{ mainTitle: '침입수 분석', firstCardTitle: '침입수 분석 자료 입력' }}
        form={form}
        onSubmitEvent={() => { }}
        graphBtn={false}
        analysisBtn={'침입수분석 실행'}
        selectBox={{ title: '분석 대상지역 선택' }}
        ctpvCd={ctpvCd}
        sggCd={sggCd}
        sggName={sggName}
        selectedSwagePrcsFclt={select1}
        onSwagePrcsFcltChange={setSelect1}
        setCtpvCd={setCtpvCd}
        setSggCd={setSggCd}
        setSggName={setSggName}
        setIsLoading={setIsLoadingResult}
        onAnalysis={handleAnalysisClick}
      >
        {[<div key="irsetting-layout-key" className="grid gap-4">
          <FormSection name='suyeongaPlace' form={form} titleNm='▷ 오수관망도'>
            <FileUploadForm
              key={`file-upload-0-${formResetKey}`} // 폼 초기화를 위한 key
              onFileSelect={(file, cd, id) => handleFileSelection(0, file, cd, id)}
              showButton={false}
              showPreview={true}
              accept={".inp"}
              fileIdx={0} />
          </FormSection>
          <FormSection name='suyeonga' form={form} titleNm='▷ 수용가-맨홀 매칭결과'>
            <FileUploadForm
              key={`file-upload-1-${formResetKey}`} // 폼 초기화를 위한 key
              onFileSelect={(file, cd, id) => handleFileSelection(1, file, cd, id)}
              showButton={false}
              showPreview={true}
              accept={".xls, .xlsx, .xlsm, .xltx"}
              fileIdx={1} />
          </FormSection>
          <FormSection name='pattern' form={form} titleNm='▷ 오수량 시간패턴'>
            <FileUploadForm
              key={`file-upload-2-${formResetKey}`} // 폼 초기화를 위한 key
              onFileSelect={(file, cd, id) => handleFileSelection(2, file, cd, id)}
              showButton={false}
              showPreview={true}
              accept={".xls, .xlsx, .xlsm, .xltx"}
              fileIdx={2} />
          </FormSection>
          <FormSection name='inputdate' form={form} titleNm='▷ 상수사용량 적용월'>
            {/* 연월 선택 라이브러리로 수정 필요 */}
            <DateMonthPicker
              field={{
                value: selectedDate, // yyyyMM 형식
                onChange: (value: string) => {
                  setSelectedDate(value);
                }
              }}
              selectClass="ml-5 w-[225px]"
              startYear={1900}  // 시작 연도 설정
            />
          </FormSection>
          <FormSection name='rtkSource' form={form} titleNm='▷ 오수전환율'>
            <Input
              value={input1}
              onChange={(e) => {
                const newValue = e.target.value;

                if (newValue === "") {
                  setInput1(newValue);
                  return;
                }

                // 숫자와 '.'만 허용하고, '.'은 최대 하나인지 확인
                const isValidChars = /^[0-9]*\.?[0-9]*$/.test(newValue);
                if (!isValidChars) return; // 유효하지 않은 문자 또는 여러 개의 '.' 포함

                // '.' 기호가 포함된 경우, 처음이나 끝에 오면 안 됨
                if (newValue.includes('.') && newValue.startsWith('.')) return; // '.'이 처음에는 올 수 없음

                // 숫자 값으로 변환하여 범위 체크 (0 이상 1 이하)
                const numericValue = parseFloat(newValue);
                if (isNaN(numericValue) || numericValue < 0 || numericValue > 1) return;

                setInput1(newValue);
              }}
              className="ml-5 h-[3.2rem] text-center text-xl w-[225px]"
              placeholder="예: 0.75"
            />
          </FormSection>
          <FormSection name='analysis information' form={form} titleNm='▷ 분석 정보'>
            <Input
              value={input2}
              onChange={(e) => setInput2(e.target.value)}
              className="ml-5 h-[3.2rem] text-center text-xl w-[225px]"
              placeholder='세부 분석정보 입력'
              onKeyDown={(e) => {
                if (e.key === 'Enter') {
                  e.preventDefault(); // Enter 키 기본 동작 방지
                  handleAnalysisClick();
                }
              }}
            />
          </FormSection>
          <ListDiv>
            <div className="card !m-[1.2rem]">
              <FormSection name='region' form={form} titleNm='▷ 유량자료 등록'>
                <FileUploadForm
                  key={`file-upload-3-${formResetKey}`} // 폼 초기화를 위한 key
                  onFileSelect={(file, cd, id) => handleFileSelection(3, file, cd, id)}
                  showButton={false}
                  showPreview={true}
                  accept={".xls, .xlsx, .xlsm, .xltx"}
                  fileIdx={3}
                />
              </FormSection>
            </div>
          </ListDiv>
        </div>]}
      </BaseLayout>
    </>
  )
}

export default IrSetting