/**
 * 공사비 산정표
 */
"use client";

import { useWrStore } from "@/app/store";
import type {
  conCostFeeType,
  ContCostMap,
} from "@/app/store/common/searchCode/type";
import { SelectBox, UiTable } from "@common/business_components/ui";
import ListDiv from "@common/business_components/ui/list_div";
import { Label, } from "@common/components/ui";
import { useEffect, useState } from "react";

export function ConstCostFeeTable() {
  const { coRvw, constCostRes, getConstCostFeeRtn } = useWrStore((state) => state);

  const [constCostData, setConstCostData] = useState<ContCostMap[]>([]);
  const [selectedYear, setSelectedYear] = useState<string>(String(new Date().getFullYear()));

  // 연도 선택을 위한 옵션 생성 (예: 현재 연도부터 10년 전까지)
  const yearOptions = Array.from({ length: 10 }, (_, i) => {
    const year = new Date().getFullYear() - i;
    return { val: String(year), text: String(year) };
  });

  const fetchData = async (constCostRes: conCostFeeType[]) => {
    const tableData = constCostRes?.reduce(
      (acc: ContCostMap[], cur: conCostFeeType) => {
        const key = cur.fctCd;
        let target = acc?.find((item: any) => item.gubun === key);
        if (!target) {
          target = {
            gubun: cur.fctCd,
            "500": 0,
            "1000": 0,
            "2000": 0,
            "3000": 0,
            "5000": 0,
            "10000": 0,
            "20000": 0,
            "30000": 0,
            "50000": 0,
            "100000": 0,
          };
          acc?.push(target);
        }
        target[cur.fctCpc] = Number(cur.stdCost);

        return acc;
      },
      []
    );
    const formattedTableData = tableData?.map((item: ContCostMap) => {
      return {
        ...item,
        gubun: getFctDescription(item.gubun) || item.gubun,
      };
    });

    return formattedTableData;
  };

  const getFctDescription = (fctCd: string) => {
    const fctMap: { [key: string]: string } = {
      "001": "총인처리시설",
      "002": "염소소독",
      "003": "UV소독",
      "004": "전처리시설",
      "005": "RO",
    };

    return fctMap[fctCd];
  }

  useEffect(() => {
    const fetchConstCost = async () => {
      const data = await fetchData(constCostRes);
      setConstCostData(data);
    };
    fetchConstCost();
  }, [constCostRes]);

  useEffect(() => {
    const fetchConstCost = async () => {
      if (selectedYear) {
        const result = await getConstCostFeeRtn(selectedYear);
        if (result && result.length > 0) {
          const data = await fetchData(result);
          setConstCostData(data);
        } else {
          alert(selectedYear+'년 데이터가 없습니다.');
        }
      } 
    }
    fetchConstCost(); 
  }, [selectedYear]);

  return (
    <ListDiv className="min-w-[600px] h-[48vh]  overflow-auto">
      <div className="p-4">
        <h3 className="text-2xl font-medium text-label">
          공사비 산정표 보기
        </h3>
        <hr className="mt-4 mb-4"/>
        <div className="col-span-5 flex items-center justify-between">
          <div className="flex items-center">
            <Label className="mr-1 text-xl text-label">기준년도</Label>
            <SelectBox
              className="h-full w-32 text-2xl"
              label=""
              selectClass={""}
              selectArray={yearOptions}
              value={selectedYear}
              onSelectValue={(val) => setSelectedYear(String(val))
              }
            />
          </div>
          <span className="mr-2 text-xl text-label">단위: 백만원</span>
        </div>
        <UiTable
          headName={""}
          tableData={constCostData || []}
          headlist={coRvw.constCostHeadList}
          pageSize={0}
          total={0}
          cellClick={undefined}
          onPageChange={() => { }}
        />
        <div className="px-3 text-lg leading-relaxed text-foreground">
          시설용량 구간내 공사비는 직선보간법에 의하여 산출
        </div>
      </div>
    </ListDiv>
  );
}