frontend/apps/dm/app/(base-layout)/pages/sdmMng/sdmInfoInsert/modalSimilar/page.tsx

"use client"

import { useDmStore } from '@/app/store';
import type { MoneyDetailType, SimilarCaseType } from '@/app/store/sdmMng';
import { SelectBox, Title, UiTable } from '@common/business_components/ui';
import { HeadMakeColSpan } from '@common/business_components/ui/table/HeadMakeColSpan';
import { Table, TableBody, TableCell, TableHeader, TableRow } from '@common/components/ui/table';
import { useEffect, useMemo, useState } from 'react';

type modalType = {
  sply: number | 0;
  usageCd: string | '';
  money: number | 0;
};

const searchUseTypeList = [
  { text: '공급량', val: 'S' },
  { text: '사용용도', val: 'U' },
];

export default function ModalSimilarPage({ sply = 0, usageCd = '', money = 0 }: modalType) {
  const { Sdm, getSimilarCaseList } = useDmStore((state) => state);
  const [searchUseType, setSearchUseType] = useState<{text: string, value: string}>({text: '공급량', value: 'S'});
  const [moneyDetailList, setMoneyDetailList] = useState<MoneyDetailType[]>([]);
  const {
    upHeadSimilarCaseList,
    similarCaseList,
    upHeadMoneyDetailList,
  } = Sdm;

  const rowSpans = useMemo(() => {
    const spans: { [key: number]: number } = {};
    let currentValue = '';
    let currentSpan = 0;
    let startIndex = 0;

    similarCaseList.forEach((item: SimilarCaseType, index: number) => {
      if (item.ruseBizNm === currentValue
        || item.bizBgngDate === currentValue
        || item.bizEndDate === currentValue
        || item.reqBizReuseFcltCst === currentValue) {
        currentSpan++;
        spans[startIndex] = currentSpan;
      } else {
        currentValue = item.ruseBizNm;
        currentSpan = 1;
        startIndex = index;
        spans[index] = 1;
      }
    });

    return spans;
  }, [similarCaseList]);

  const handleCellClick = (index: number) => {
    setMoneyDetailList([{
      reqBizGrssCst: similarCaseList[index]?.reqBizGrssCst ?? '',
      reqBizReuseFcltCst: similarCaseList[index]?.reqBizReuseFcltCst ?? '',
      reqBizPplCst: similarCaseList[index]?.reqBizPplCst ?? '',
      reqBizArchCst: similarCaseList[index]?.reqBizArchCst ?? '',
      reqBizMchnCst: similarCaseList[index]?.reqBizMchnCst ?? '',
      reqBizMtrngCst: similarCaseList[index]?.reqBizMtrngCst ?? '',
      reqBizGisCst: similarCaseList[index]?.reqBizGisCst ?? '',
      reqBizCctvCst: similarCaseList[index]?.reqBizCctvCst ?? '',
      reqBizCmcnCst: similarCaseList[index]?.reqBizCmcnCst ?? '',
      reqBizWstCst: similarCaseList[index]?.reqBizWstCst ?? '',
      reqBizDesignCst: similarCaseList[index]?.reqBizDesignCst ?? '',
      reqBizSpvsCst: similarCaseList[index]?.reqBizSpvsCst ?? '',
      reqBizSbsdCst: similarCaseList[index]?.reqBizSbsdCst ?? '',
      reqBizEtc: similarCaseList[index]?.reqBizEtc ?? '',
      prcmPlanNlep: similarCaseList[index]?.prcmPlanNlep ?? '',
      prcmPlanLcep: similarCaseList[index]?.prcmPlanLcep ?? '',
      prcmPlanBrdnCst: similarCaseList[index]?.prcmPlanBrdnCst ?? '',
      prcmPlanEcqrRt: similarCaseList[index]?.prcmPlanEcqrRt ?? '',
      prcmPlanGrssCst: similarCaseList[index]?.prcmPlanGrssCst ?? '',
      clclnNlep: similarCaseList[index]?.clclnNlep ?? '',
      clclnLcep: similarCaseList[index]?.clclnLcep ?? '',
      clclnBrdnCst: similarCaseList[index]?.clclnBrdnCst ?? '',
      clclnEcqrRt: similarCaseList[index]?.clclnEcqrRt ?? '',
      clclnGrssCst: similarCaseList[index]?.clclnGrssCst ?? ''
    }]);
  }

  useEffect(() => {
    const type = searchUseType.value;
    getSimilarCaseList(type, type === 'S' ? sply : type === 'U' ? usageCd : money);
  }, [getSimilarCaseList, money, searchUseType, sply, usageCd]);

  return (
    <div className="align-top w-[1360px] overflow-x-auto">
      <Title title="유사사례 조회" />
      <div className="overflow-x-auto h-[450px] w-full mt-8" tabIndex={0} aria-label="유사사례 테이블 영역">
        <div className="w-[150%]">
          <div className="card-header justify-self-start">
            <h3 className="text-2xl font-medium text-label">유사사례</h3>
            <SelectBox
              tabIndex={0}
              aria-label="검색 기준 선택"
              selectArray={searchUseTypeList}
              value={searchUseType.value}
              onSelectValue={(val) => {
                setSearchUseType({text: searchUseTypeList.find(item => item.val === val)?.text ?? '', value: val.toString()});
              }}
              className="w-[140px] ml-20"
              label=""
              selectClass="w-[140px]"
            />
          </div>
          <div className={`card !m-[1.2rem] !p-0r`}>
            <Table variant="secondary">
              <TableHeader className="font-bold">
                <HeadMakeColSpan upHeadList={upHeadSimilarCaseList} />
              </TableHeader>
              <TableBody className='text-center'>
                {similarCaseList.length > 0 ? similarCaseList?.map((el: SimilarCaseType, index) => (
                  <TableRow key={`similar-case-row-${index}-${el.ruseBizNm}-${el.bizBgngDate}`}>
                    {upHeadSimilarCaseList.map((head) => (
                      head.id && head.id.length > 1 && (
                        <TableCell
                          tabIndex={head.id === 'someClickableId' ? 0 : undefined}
                          role="button"
                          aria-label={`유사사례 ${head.id} 클릭 시 상세 정보 표시`}
                          className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : typeof el[head.id as keyof SimilarCaseType] === 'number' ? 'text-right' : 'text-center'} cursor-pointer`}
                          key={`similar-case-cell-${head.id}-${index}-${el.ruseBizNm}`}
                          rowSpan={(head.id === 'businessName' || head.id ==='businessDuration' || head.id === 'money') ? rowSpans[index] : undefined}
                          style={(head.id === 'businessName' || head.id === 'businessDuration' || head.id === 'money') && index > 0 && similarCaseList[index - 1]?.ruseBizNm === el.ruseBizNm ? { display: 'none' } : undefined}
                          onClick={() => handleCellClick(index)}
                          onKeyDown={(e) => {
                            if (e.key === 'Enter' || e.key === ' ') {
                              handleCellClick(index);
                            }
                          }}
                        >
                          {typeof el[head.id as keyof SimilarCaseType] !== 'number' 
                            ? String(el[head.id as keyof SimilarCaseType] ?? '')
                            : String(el[head.id as keyof SimilarCaseType]).includes('.') 
                              ? String(el[head.id as keyof SimilarCaseType]).split('.').map((part, index) => 
                              index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
                            ).join('.')
                          : String(el[head.id as keyof SimilarCaseType] ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
                        </TableCell>
                      )
                    ))}
                  </TableRow>
                )) : <></>}
              </TableBody>
            </Table>
          </div>
        </div>
      </div>
      <div className="overflow-x-auto h-[270px] w-full mt-8">
        <div className="w-[130%]">
          <UiTable
            headName={"사업비 상세정보"}
            tableData={moneyDetailList}
            headlist={upHeadMoneyDetailList}
            pageSize={0}
            total={0}
            cellClick={undefined}
            onPageChange={() => {}}
          />
        </div>
      </div>
    </div>
  )
}