"use client";

import { useWrStore } from "@/app/store";
import type { rateFeeType } from "@/app/store/common/searchCode/type";
import { 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 RateFeeTableModal() {
  const { coRvw, rateFeeRes } = useWrStore((state) => state);
  const [reateFeeTable, setRateFeeTable] = useState<rateFeeType[]>([]);

  const gubunLabelMap: Record<number, string> = {
    50: "5천만원까지",
    100: "1억원까지",
    200: "2억원까지",
    300: "3억원까지",
    500: "5억원까지",
    1000: "10억원까지",
    2000: "20억원까지",
    3000: "30억원까지",
    5000: "50억원까지",
    10000: "100억원까지",
    20000: "200억원까지",
    30000: "300억원까지",
    50000: "500억원까지",
    100000: "1000억원까지",
    200000: "2000억원까지",
    300000: "3000억원까지",
    500000: "5000억원까지",
  };

  const fetchData = async (rateFeeRes: rateFeeType[]) => {
    const data = await rateFeeRes
      ?.filter((item: rateFeeType) => {
        return item.incExpCd !== "SS";
      })
      .reduce((acc: any, cur: rateFeeType) => {
        const key = cur.stdCost;
        let target = acc.find((item: any) => item.stdCost === key);
        if (!target) {
          target = {
            stdCost: cur.stdCost,
            BD: 0,
            SE: 0,
            CE: 0,
          };
          acc.push(target);
        }
        target[cur.incExpCd] = cur.rt;
        return acc;
      }, []);

    const dataGubun = data?.map((item: any) => {
      return {
        ...item,
        gubun: gubunLabelMap[item.stdCost] || item.stdCost,
      };
    });

    return dataGubun?.sort((a: any, b: any) => a.stdCost - b.stdCost);
  };

  useEffect(() => {
    if (rateFeeRes?.length >= 0) {
      fetchData(rateFeeRes).then((data) => {
        setRateFeeTable(data);
      });
    }
  }, [rateFeeRes]);

  return (
    <>
      <ListDiv className="min-w-[600px] h-[calc(100vh-60vh)]  overflow-auto">
        <div className="sticky top-0 z-10 grid grid-cols-6 gap-4 p-4 bg-white">
          <h3 className="col-span-6 text-2xl font-medium text-label">
            요율표 보기
          </h3>
          <hr className="col-span-6 border-gray-300" />

          <div className="col-span-5 flex items-center">
            <Label className="mr-1 text-xl text-gray-600">기준년도</Label>
            <span>{new Date().getFullYear() || ""}</span>
          </div>
          <div className="col-span-6 pr-6">
            <UiTable
              className="min-w-full pr-12"
              key={"rateTable" + reateFeeTable?.length}
              headName={""}
              tableData={reateFeeTable || []}
              headlist={coRvw.rateFeeHeadList}
              onPageChange={() => {}}
              pageSize={0}
              total={0}
              cellClick={undefined}
            />
          </div>
        </div>
      </ListDiv>
    </>
  );
}