'use client';
import React, { useEffect, useState } from 'react';
import { Button, Label } from '@common/components';
import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
import { SelectBox, UiTable } from '@common/business_components/ui';
import LoadingOverlay from '@/components/ui/LoadingBar';

import { addFileName, flattenFolders, getFileDownload, useCityCd, useDcTree, useSggCd, reportGubuns } from './searchModalReportApi';
import { type SelectDataType } from '../commonStore';


// 하수도정비 기본계획 보고서
export const reportTableHeadlist = [
  { id: "no", title: "NO" },
  { id: "sido", title: "시도" },
  { id: "sigungu", title: "시군구" },
  { id: "approvalYear", title: "승인년도" },
  { id: "plantZoneGugun", title: "구분" },
  { id: "reportGubun", title: "보고서구분" },
  { id: "fileName", title: "파일명" },
  { id: "regDate", title: "등록일자" },
];


interface BasicTabProps {
  open?: boolean;
}

const ReportTab: React.FC<BasicTabProps> = ({ open }) => {

  const [isLoading, setIsLoading] = useState(false);
  const [isResetPage, setIsResetPage] = useState<boolean>(false);
  const [isResetSelection, setIsResetSelection] = useState<boolean>(false);
  const [showTable, setShowTable] = useState(false);
  const [tableData, setTableData] = useState<any[]>([]);
  const [tableCount, setTableCount] = useState(0);
  const [curPage, setCurPage] = useState(1);
  const [yearFilter, setYearFilter] = useState({ start: "", end: "" });
  const [ctpvCd, setCtpvCd] = useState('0');           // 하수정비기본계획 report
  const [sigungu, setSigungu] = useState('0');         // 하수정비기본계획 report
  const [filteredSiguns, setFilteredSiguns] = useState<SelectDataType[]>([{ val: '0', text: '전체', sido: '0' }]);
  const [gubun, setGubun] = useState("");              // 하수정비기본계획 report
  const [reportGubun, setReportGubun] = useState("0"); // 하수정비기본계획 report
      

  // 하수정비기본계획 report 
  const sidos = useCityCd();
  const siguns = useSggCd();
  const reportOriginData = useDcTree(""); //:Folder[]

  const dynamicHeadlist: { id: string, title: string }[] = reportTableHeadlist;
 
  useEffect(() => {
    // filterParams 초기화
    setCtpvCd('0');
    setSigungu('0');
    setReportGubun('0');
    setYearFilter({ start: "", end: "" });
    setShowTable(false);
    setTableData([]);
    setTableCount(0);
    setCurPage(1); // 페이지를 1로 초기화
    setIsResetPage(true); // 페이지를 초기화
    setIsResetSelection(true); // 선택 초기화
  }, [open]);

  // 페이지 변경 시마다 데이터 fetch
  useEffect(() => {
    // showTable이 true일 때만 fetch (최초 렌더 방지)
    setIsResetPage(false);
    setIsResetSelection(true); // 선택 초기화
    if (showTable) fetchFilteredData();
  }, [curPage]);
  
  const handleCtpvCdChange = (val: string | number) => { // 하수도정비기본계획.시도
    const sidoOption = sidos.find((n) => n.val === val);
    setCtpvCd(String(val));
    if (val !== '0') {
      const filterSiguns = siguns.filter(item => item.sido === sidoOption?.text);
      filterSiguns.unshift({ val: '0', text: '전체', sido: '0' });
      setFilteredSiguns(filterSiguns);
    }
    setSigungu("0");
    setGubun("");
    setYearFilter({ start: "", end: "", });
  }


  // 조회 버튼 클릭 시 1페이지로 이동 및 데이터 초기화
  const handleSearch = () => {
    setCurPage(1); // 페이지를 1로 초기화
    fetchFilteredData();
    setIsResetPage(true); // 페이지를 초기화
    setIsResetSelection(false); // 선택 초기화
    setShowTable(true);
  };

  // 하수도정비기본계획 테이블 cellClick 핸들러
  const handleReportCellClick = (index: number | undefined ) => {
    console.log(index);
    if (typeof index === "number" && tableData[index]) {
      const reportData = tableData[index];
      const fileName = reportData.fileName;
      const filePath = reportData.filePath;
      if (reportData.fileSn !== "") {
        getFileDownload(reportData.fileSn, fileName, filePath);
      }
    }
  };
  
  // 검색 API 호출 함수
  const fetchFilteredData = async () => {
    setIsLoading(true); // 로딩 시작
    setIsResetSelection(true); // 선택 초기화
    
    try {
      //const reportOriginData = await getDcTree('경기도');
      const reportData = flattenFolders(reportOriginData);
      let filterReportData = reportData;
      if (ctpvCd !== "0") { // 시도검색
        const sidoOption = sidos.find((n) => n.val === ctpvCd);
        filterReportData = filterReportData.filter(item => item.sido === sidoOption?.text);
      }
      if (sigungu !== "0") { // 시군구검색
        const sigunguOption = filteredSiguns.find((n) => n.val === sigungu);
        filterReportData = filterReportData.filter(item => item.sigungu === sigunguOption?.text);
      }
      if (reportGubun !== "0") { // 보고서구분검색
        const reportGubunOption = reportGubuns.find((n) => n.val === reportGubun);
        filterReportData = filterReportData.filter(item => item.reportGubun === reportGubunOption?.text);
      }

      if (yearFilter.start != "" && yearFilter.end == "") //승인년도검색
        filterReportData = filterReportData.filter(item => (item.approvalYear) ? item.approvalYear >= yearFilter.start + "년" : null);
      if (yearFilter.start == "" && yearFilter.end != "")
        filterReportData = filterReportData.filter(item => (item.approvalYear) ? item.approvalYear <= yearFilter.end + "년" : null);
      if (yearFilter.start != "" && yearFilter.end != "") {
        filterReportData = filterReportData.filter(item => {
          return (item.approvalYear) ? item.approvalYear >= yearFilter.start + "년" && item.approvalYear <= yearFilter.end + "년" : null;
        });
      }
      if (gubun !== "") { // 구분검색
        filterReportData = filterReportData.filter(item => (item.plantZoneGugun) ? String(item.plantZoneGugun).includes(String(gubun)) : null);
      }
      console.log('report count:', filterReportData.length);
      setTableCount(filterReportData.length || 0);
      filterReportData = filterReportData.slice((curPage - 1) * 10, curPage * 10); // paging
      filterReportData = filterReportData?.map((item, index) => ({ ...item, no: (curPage - 1) * 10 + index + 1 }));
      //const fileList = await getDcFile("CLS20250530000041");
      addFileName(filterReportData).then(data => {
        filterReportData = data;
        setTableData(filterReportData || []);
      });
      setTableData(filterReportData || []);

      setShowTable(true);
    } catch (err) {
      console.error('API ERROR:', err);
      setTableData([]);
    } finally {
      setIsLoading(false); // 로딩 종료
    }
  };


  return (
    <>
    <div className="relative flex flex-col border rounded-lg p-5 w-full h-[10vh]">
      <div className="flex items-center mb-3">
        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시도</Label>
        <SelectBox className="w-60 mr-8"
          selectClass="rounded-lg bg-white"
          label="" selectArray={sidos}
          value={ctpvCd} onSelectValue={handleCtpvCdChange}
          selectContentClass="z-[101]"
        />
        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시군구</Label>
        <SelectBox className="w-48"
          selectClass="w-48 rounded-lg bg-white truncate"
          label="" selectArray={filteredSiguns}
          value={sigungu} onSelectValue={val => setSigungu(String(val))}
          selectContentClass="z-[101]"
        />
      </div>
      <div className="flex items-center mb-6">
        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">보고서 구분</Label>
        <SelectBox className="w-44 mr-8"
          selectClass="rounded-lg bg-white"
          label="" selectArray={[...reportGubuns]}
          value={reportGubun} onSelectValue={val => setReportGubun(String(val))}
          selectContentClass="z-[101]" labelClass='whitespace-nowrap text-xl text-gray-600 pr-2'
        />
        {/* 승인년도 필터 */}
        <YearRangeSelectBox start={yearFilter.start} end={yearFilter.end}
          onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
          startLabel="승인년도" endLabel=""
        />
        {/* 조회 버튼 */}
        <div className="flex-1 flex justify-end">
          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
        </div>
      </div>
    </div>

    <div className="h-[79vh] w-full overflow-hidden rounded-lg border">
      {/* 테이블2 영역 (가로/세로 스크롤 가능) */}
      <div className="flex-1 px-2 pb-2">
        <LoadingOverlay isLoading={isLoading} />
        <UiTable
          headName={(() => {
            return (<>조회 결과 ({tableCount.toLocaleString('ko-KR')})건</>);
          })()
          }
          tableData={tableData}
          headlist={dynamicHeadlist}
          pageSize={10}
          total={tableCount}
          cellClick={handleReportCellClick}
          onPageChange={setCurPage}
          resetPageNo={isResetPage}
          resetSelection={isResetSelection}
        />
      </div>
    </div>
    </>
  );
};

export default React.memo(ReportTab);