import QSelectBox from '@/components/common/select/QSelectBox'
import { useMessage } from '@/hooks/useMessage'
import { canvasState } from '@/store/canvasAtom'
import { pcsCheckState } from '@/store/circuitTrestleAtom'
import { selectedModuleState } from '@/store/selectedModuleOptions'
import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { useMasterController } from '@/hooks/common/useMasterController'
import { v4 as uuidv4 } from 'uuid'
import { globalLocaleStore } from '@/store/localeAtom'
import { POLYGON_TYPE } from '@/common/common'
import { useSwal } from '@/hooks/useSwal'
import { circuitNumDisplaySelector } from '@/store/settingAtom'
import { fontSelector } from '@/store/fontAtom'

export default function StepUp(props) {
  const {
    models,
    allocationType,
    stepUpListData,
    setStepUpListData,
    seletedMainOption,
    setSeletedMainOption,
    seletedSubOption,
    setSeletedSubOption,
    selectedMaker,
    selectedModels,
    setSelectedModels,
    getSelectedPcsItemList,
    getModuleList,
    setModuleStatisticsData,
  } = props
  const { getMessage } = useMessage()
  const { swalFire } = useSwal()
  const globalLocale = useRecoilValue(globalLocaleStore)
  const [moduleTab, setModuleTab] = useState(1)
  const [moduleTabs, setModuleTabs] = useState({})
  const [arrayLength, setArrayLength] = useState(3) //module-table-inner의 반복 개수
  const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
  const { getPcsVoltageStepUpList, getPcsAutoRecommendList, getPcsVoltageChk, getPcsConnOptionItemList } = useMasterController()
  const [originPcsVoltageStepUpList, setOriginPcsVoltageStepUpList] = useState([])
  const canvas = useRecoilValue(canvasState)
  const selectedModules = useRecoilValue(selectedModuleState)
  const [optCodes, setOptCodes] = useState([])
  const [mainOptions, setMainOptions] = useState([])
  const [subOptions, setSubOptions] = useState([])

  const [selectedRows, setSelectedRows] = useState({})
  const [isManualSelection, setIsManualSelection] = useState({})

  const isDisplayCircuitNumber = useRecoilValue(circuitNumDisplaySelector)
  const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))

  useEffect(() => {
    if (allocationType === 'auto') {
      /** 자동일 때 모듈의 회로 정보 초기화 */
      canvas
        .getObjects()
        .filter((obj) => obj.name === POLYGON_TYPE.MODULE)
        .forEach((module) => {
          module.circuit = null
          module.circuitNumber = null
          module.pcsItemId = null
        })

      canvas.renderAll()

      /** PCS 자동 승압설정 정보 조회 */
      fetchAutoStepUpData()
    } else {
      /** PCS 수동 승압설정 정보 조회 */
      fetchPassiStepUpData()
    }
  }, [])

  /**
   * PCS 자동 승압설정 정보 조회
   */

  const isMultiOptions = () => {
    return selectedModels.some((model) => model.pcsSerParallelYn === 'Y')
  }

  const fetchAutoStepUpData = async () => {
    try {
      const params = {
        ...props.getOptYn() /** 옵션 Y/N */,
        useModuleItemList: props.getUseModuleItemList() /** 사용된 모듈아이템 List */,
        roofSurfaceList: props.getRoofSurfaceList() /** 지붕면 목록 */,
        pcsItemList: props.getSelectedPcsItemList() /** PCS 아이템 목록 */,
      }
      /** 회로 구성 가능 여부 체크 통과 시 승압설정 정보 조회 */
      getPcsVoltageStepUpList(params).then((res) => {
        if (res?.result.resultCode === 'S' && res?.data) {
          const dataArray = Array.isArray(res.data) ? res.data : [res.data]
          const stepUpListData = formatStepUpListData(dataArray)

          /** PCS 승압설정 정보 SET */
          setStepUpListData(stepUpListData)
          if (originPcsVoltageStepUpList.length === 0) {
            setOriginPcsVoltageStepUpList(stepUpListData)
          }

          /** PCS 옵션 조회 */
          // const formattedOptCodes = formatOptionCodes(res.data.optionList)
          // setOptCodes(formattedOptCodes)
          // setSeletedOption(formattedOptCodes[0])

          /** 캔버스에 회로 정보 적용 */
          // 병설일때 pcs 있으면 setSubOpsions, 없으면 setMainOptions
          let mChk = 0
          stepUpListData[0].pcsItemList.forEach((pcsItem, index) => {
            const optionList = formatOptionCodes(pcsItem.optionList)
            if (isMultiOptions()) {
              if (index === 0) {
                setMainOptions(optionList)
                setSeletedMainOption(optionList[0])
              } else {
                setSubOptions(optionList)
                setSeletedSubOption(optionList[0])
              }
            } else {
              if (index === 0) {
                setMainOptions(optionList)
                setSeletedMainOption(optionList[0])
              }
            }
            const serQtyList = pcsItem.serQtyList ?? []
            const selectedSerQty = serQtyList.find((serQty) => serQty.selected)
            if (selectedSerQty) {
              selectedSerQty.roofSurfaceList.forEach((roofSurface) => {
                const targetSurface = canvas.getObjects().filter((obj) => obj.id === roofSurface.roofSurfaceId)[0]
                if (!targetSurface) return
                const moduleIds = targetSurface.modules.map((module) => module.id)

                /** 기존 모듈 텍스트 삭제 */
                ;[...canvas.getObjects().filter((obj) => moduleIds.includes(obj.parentId))]
                  .forEach((text) => canvas.remove(text))

                /** 새로운 모듈 회로 정보 추가 */
                roofSurface.moduleList.forEach((module) => {
                  const targetModule = canvas.getObjects().find((obj) => obj.id === module.uniqueId)
                  if (targetModule && module.circuit !== '' && module.circuit) {
                    const moduleCircuitText = new fabric.Text(module.circuit, {
                      left: targetModule.left + targetModule.width / 2,
                      top: targetModule.top + targetModule.height / 2,
                      fontFamily: circuitNumberText.fontFamily.value,
                      fontWeight: circuitNumberText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
                      fontStyle: circuitNumberText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
                      fontSize: circuitNumberText.fontSize.value,
                      fill: circuitNumberText.fontColor.value,
                      width: targetModule.width,
                      height: targetModule.height,
                      textAlign: 'center',
                      originX: 'center',
                      originY: 'center',
                      name: 'circuitNumber',
                      parentId: targetModule.id,
                      circuitInfo: module.pcsItemId,
                      selectable: false,
                      visible: isDisplayCircuitNumber,
                    })
                    targetModule.circuit = moduleCircuitText
                    targetModule.pcsItemId = module.pcsItemId
                    targetModule.circuitNumber = module.circuit
                    canvas.add(moduleCircuitText)
                  } else {
                    mChk++
                  }
                })
              })
            }
          })

          canvas.renderAll()
          setModuleStatisticsData()

          if (mChk > 0) {
            swalFire({ text: getMessage('modal.circuit.trestle.setting.step.up.allocation.module.over.count') })
          }
        } else {
          swalFire({ text: getMessage('common.message.send.error') })
        }
      })
    } catch (error) {
      console.error('Error fetching step up data:', error)
    }
  }

  /**
   * PCS 수동 승압설정 정보 조회
   */
  const fetchPassiStepUpData = async () => {
    try {
      /** 모듈 데이터 가져오기 */
      const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)

      /** PCS별 회로 정보를 저장할 객체 */
      const pcsSummary = {}

      /** 각 모듈을 순회하며 PCS별 회로 정보 수집 */
      modules.forEach((module) => {
        if (!module.circuit || !module.pcsItemId) return

        if (!pcsSummary[module.circuit.circuitInfo.id]) {
          pcsSummary[module.circuit.circuitInfo.id] = {
            circuits: {},
            totalModules: 0,
          }
        }

        const circuitNumber = module.circuitNumber
        if (!pcsSummary[module.circuit.circuitInfo.id].circuits[circuitNumber]) {
          pcsSummary[module.circuit.circuitInfo.id].circuits[circuitNumber] = 0
        }
        pcsSummary[module.circuit.circuitInfo.id].circuits[circuitNumber]++
        pcsSummary[module.circuit.circuitInfo.id].totalModules++
      })

      const params = {
        useModuleItemList: props.getUseModuleItemList(),
        pcsItemList: getSelectedPcsItemList(),
      }
      /** PCS 접속함 및 옵션 목록 조회 */
      getPcsConnOptionItemList(params).then((res) => {
        if (res?.result.code === 200 && res?.data) {
          /** PCS 아이템 리스트에 serQtyList 추가 */
          const pcsItemListWithSerQty = res.data.pcsItemList.map((pcsItem, index) => {
            const pcsData = pcsSummary[selectedModels[index].id] || { circuits: {}, totalModules: 0 }
            const circuitCounts = Object.values(pcsData.circuits)
            const optionList = formatOptionCodes(pcsItem.optionList)
            if (isMultiOptions()) {
              if (index === 0) {
                setMainOptions(optionList)
                setSeletedMainOption(optionList[0])
              } else {
                setSubOptions(optionList)
                setSeletedSubOption(optionList[0])
              }
            } else {
              if (index === 0) {
                setMainOptions(optionList)
                setSeletedMainOption(optionList[0])
              }
            }
            return {
              ...pcsItem,
              serQtyList: [
                {
                  /** 한 회로당 최대 모듈 수 */
                  serQty: circuitCounts.length > 0 ? Math.max(...circuitCounts) : 0,
                  /** 회로 개수 */
                  paralQty: Object.keys(pcsData.circuits).length || 0,
                  rmdYn: 'Y',
                  usePossYn: 'Y',
                  roofSurfaceList: props.getRoofSurfaceList(),
                },
              ],
            }
          })

          /** res.data with modified pcsItemList */
          res.data.pcsItemList = pcsItemListWithSerQty

          const dataArray = Array.isArray(res.data) ? res.data : [res.data]
          const stepUpListData = formatStepUpListData(dataArray)

          /** PCS 승압설정 정보 SET */
          setStepUpListData(stepUpListData)

          /** PCS 옵션 조회 */
          // const formattedOptCodes = formatOptionCodes(res.data.optionList)
          // setOptCodes(formattedOptCodes)
          // setSeletedOption(formattedOptCodes[0])
        }
      })
    } catch (error) {
      console.error('Error fetching step up data:', error)
    }
  }

  /**
   * PCS 옵션 조회
   */
  const formatOptionCodes = (optionList = []) => {
    return optionList?.map((opt) => ({
      code: opt.pcsOptCd ?? '',
      name: opt.pcsOptNm ?? '',
      nameJp: opt.pcsOptNmJp ?? '',
    }))
  }

  /**
   * PCS 승압설정 정보 포맷 후 추천 값 저장
   */
  const formatStepUpListData = (dataArray = []) => {
    const formattedData = dataArray?.map((stepUps) => ({
      ...stepUps,
      optionList: formatOptionList(stepUps.optionList),
      pcsItemList: formatPcsItemList(stepUps.pcsItemList),
      selectedPcsItem: formatPcsItemList(stepUps.pcsItemList),
    }))

    return formattedData
  }

  /**
   * PCS 옵션 포맷
   */
  const formatOptionList = (optionList = []) => {
    return optionList?.map((option) => ({
      pcsOptCd: option.pcsOptCd ?? '',
      pcsOptNm: option.pcsOptNm ?? '',
      pcsOptNmJp: option.pcsOptNmJp ?? '',
    }))
  }

  /**
   * PCS 아이템 포맷
   */
  const formatPcsItemList = (pcsItemList = []) => {
    return pcsItemList?.map((item, index) => ({
      goodsNo: item.goodsNo ? item.goodsNo : '',
      itemId: item.itemId ? item.itemId : '',
      itemNm: item.itemNm ? item.itemNm : '',
      pcsMkrCd: item.pcsMkrCd ? item.pcsMkrCd : '',
      pcsSerCd: item.pcsSerCd ? item.pcsSerCd : '',
      uniqueIndex: `${item.itemId}_${index}`, // 고유 식별자 추가(동일한 PCS를 구분)
      connList: formatConnList(item.connList),
      serQtyList: formatSerQtyList(item.serQtyList),
      optionList: item.optionList ?? [],
    }))
  }

  /**
   * PCS 연결 포맷
   */
  const formatConnList = (connList = []) => {
    if (!connList) return [] // null인 경우 빈 배열 반환

    return connList?.map((conn) => ({
      connAllowCur: conn.connAllowCur ?? 0,
      connMaxParalCnt: conn.connMaxParalCnt ?? 0,
      goodsNo: conn.goodsNo ?? '',
      itemId: conn.itemId ?? '',
      itemNm: conn.itemNm ?? '',
      vstuParalCnt: conn.vstuParalCnt ?? 0,
      moduleTpCd: conn.moduleTpCd,
    }))
  }

  /**
   * PCS 시리즈 포맷
   */
  const formatSerQtyList = (serQtyList = []) => {
    return serQtyList?.map((qty) => ({
      code: uuidv4(),
      serQty: qty.serQty ?? 0,
      paralQty: qty.paralQty ?? 0,
      rmdYn: qty.rmdYn ?? 'N',
      usePossYn: qty.usePossYn ?? 'Y',
      roofSurfaceList: formatRoofSurfaceList(qty.roofSurfaceList),
      selected: qty.rmdYn === 'Y',
    }))
  }

  /**
   * PCS RoofSurface 포맷
   */
  const formatRoofSurfaceList = (roofSurfaceList = []) => {
    return roofSurfaceList?.map((rsf) => ({
      moduleList: formatModuleList(rsf.moduleList),
      roofSurface: rsf.roofSurface ?? '',
      roofSurfaceId: rsf.roofSurfaceId ?? '',
      roofSurfaceIncl: rsf.roofSurfaceIncl ? +rsf.roofSurfaceIncl : '',
    }))
  }

  /**
   * PCS MatModule 포맷
   */
  const formatModuleList = (moduleList = []) => {
    return moduleList?.map((module) => ({
      circuit: module.circuit ?? '',
      itemId: module.itemId ?? '',
      pcsItemId: module.pcsItemId ?? '',
      uniqueId: module.uniqueId ?? '',
    }))
  }

  /**
   * 각 모듈의 탭을 변경하는 함수
   */
  const handleTabChange = (goodsNo, idx, tabNumber) => {
    setModuleTabs((prev) => ({
      ...prev,
      [`${goodsNo}_${idx}`]: tabNumber,
    }))
  }

  const handleChangeApplyParalQty = (mainIdx, subIdx, applyParalQty) => {
    handleRowClick(mainIdx, subIdx, applyParalQty)
  }

  /**
   * 행 선택 핸들러 함수 추가
   */
  /**
   * 주어진 stepUpListData 를 기준으로 캔버스의 모든 module circuit 텍스트를 다시 그린다.
   * 모든 pcsItem 의 selected serQty 를 순회해 적용한다.
   */
  /**
   * 모듈에 circuit 텍스트를 추가하는 공통 함수
   */
  const addCircuitTextToModule = (module) => {
    const targetModule = canvas.getObjects().find((obj) => obj.id === module.uniqueId)
    if (targetModule && module.circuit !== '' && module.circuit !== null) {
      const moduleCircuitText = new fabric.Text(module.circuit, {
        left: targetModule.left + targetModule.width / 2,
        top: targetModule.top + targetModule.height / 2,
        fontFamily: circuitNumberText.fontFamily.value,
        fontWeight: circuitNumberText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
        fontStyle: circuitNumberText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
        fontSize: circuitNumberText.fontSize.value,
        fill: circuitNumberText.fontColor.value,
        width: targetModule.width,
        height: targetModule.height,
        textAlign: 'center',
        originX: 'center',
        originY: 'center',
        name: 'circuitNumber',
        parentId: targetModule.id,
        circuitInfo: module.pcsItemId,
        visible: isDisplayCircuitNumber,
      })
      targetModule.circuit = moduleCircuitText
      targetModule.pcsItemId = module.pcsItemId
      targetModule.circuitNumber = module.circuit
      canvas.add(moduleCircuitText)
    }
  }

  const applyCircuitsToCanvas = (stepUpListSrc, mainIdx, subIdx) => {
    if (!stepUpListSrc?.[0]?.pcsItemList) return

    if (mainIdx >= 1) {
      /**
       * 우측 PCS (mainIdx >= 1) 클릭 시:
       * 해당 pcsItem 의 selected serQty 를 찾아서 moduleList 의 circuit 만 갱신한다.
       * 좌측 PCS 의 circuit 은 그대로 유지.
       */
      const pcsItem = stepUpListSrc[0].pcsItemList[mainIdx]
      const sel = pcsItem?.serQtyList?.find((sq) => sq.selected)
      if (!sel) return

      // 해당 pcsItem 의 moduleList 에 포함된 모듈의 기존 circuit 텍스트만 제거
      const moduleUniqueIds = new Set()
      sel.roofSurfaceList.forEach((rs) => {
        rs.moduleList.forEach((m) => moduleUniqueIds.add(m.uniqueId))
      })

      // 해당 모듈의 circuit 데이터 초기화 + 기존 텍스트 제거
      const targetModuleObjs = canvas.getObjects().filter(
        (obj) => obj.name === POLYGON_TYPE.MODULE && moduleUniqueIds.has(obj.id),
      )
      targetModuleObjs.forEach((module) => {
        module.circuit = null
        module.circuitNumber = null
        module.pcsItemId = null
      })

      const textsToRemove = [...canvas.getObjects().filter(
        (obj) => obj.name === 'circuitNumber' && moduleUniqueIds.has(obj.parentId),
      )]
      textsToRemove.forEach((text) => canvas.remove(text))

      // 새 circuit 적용
      sel.roofSurfaceList.forEach((roofSurface) => {
        roofSurface.moduleList.forEach((module) => addCircuitTextToModule(module))
      })
    } else {
      /**
       * 좌측 PCS (mainIdx === 0) 클릭 시:
       * 전체 모듈 circuit 초기화 후 모든 pcsItem 의 selected 를 적용
       */
      canvas
        .getObjects()
        .filter((obj) => obj.name === POLYGON_TYPE.MODULE)
        .forEach((module) => {
          module.circuit = null
          module.circuitNumber = null
          module.pcsItemId = null
        })

      const circuitTexts = [...canvas.getObjects().filter((obj) => obj.name === 'circuitNumber')]
      circuitTexts.forEach((text) => canvas.remove(text))

      stepUpListSrc[0].pcsItemList.forEach((pcsItem) => {
        const sel = pcsItem.serQtyList?.find((sq) => sq.selected)
        if (!sel) return
        sel.roofSurfaceList.forEach((roofSurface) => {
          roofSurface.moduleList.forEach((module) => addCircuitTextToModule(module))
        })
      })
    }

    canvas.renderAll()
    setModuleStatisticsData()
  }

  const handleRowClick = (mainIdx, subIdx, applyParalQty = null) => {
    /** 자동 승압 설정인 경우만 실행 */
    if (allocationType !== 'auto') return

    let tempStepUpListData = [...stepUpListData]

    tempStepUpListData[0].pcsItemList[mainIdx].serQtyList.forEach((item, index) => {
      item.selected = index === subIdx
    })
    /** 선택된 행 정보 저장 */
    setStepUpListData(tempStepUpListData)

    /** PCS 2개 이상 또는 첫번째 PCS 선택 시에만 실행 */
    const needsRefetch = tempStepUpListData[0].pcsItemList.length > 1 && mainIdx === 0

    if (needsRefetch) {
      /** 파워컨디셔너 옵션 조회 요청 파라미터 */
      const params = {
        ...props.getOptYn(), // 옵션 Y/N
        useModuleItemList: props.getUseModuleItemList(), // 사용된 모듈아이템 List
        roofSurfaceList: props.getRoofSurfaceList(), // 지붕면 목록
        pcsItemList: props.getSelectedPcsItemList().map((pcsItem, index) => {
          const matchingPcsItem = tempStepUpListData[0].pcsItemList.find((item) => item.uniqueIndex === `${pcsItem.itemId}_${index}`)
          const selectedSerQty = matchingPcsItem?.serQtyList.find((serQty) => serQty.selected)?.serQty || 0
          if (index === 0) {
            return {
              ...pcsItem,
              applySerQty: selectedSerQty,
              applyParalQty: +applyParalQty,
            }
          }
          return {
            ...pcsItem,
            applySerQty: selectedSerQty,
          }
        }),
      }

      /** PCS가 1개 이고 2번째 또는 3번째 PCS serQty가 0인 경우는 추천 API 실행하지 않음 */
      const skipApi = !(params.pcsItemList.length !== 1 && (params.pcsItemList[1]?.applySerQty !== 0 || params.pcsItemList[2]?.applySerQty) !== 0)

      if (!skipApi) {
        /**
         * PCS 승압설정 정보 조회. 캔버스 갱신은 응답을 받은 뒤에 수행해야
         * "한박자 늦게" 반영되는 stale state 문제가 발생하지 않는다.
         */
        getPcsVoltageStepUpList(params).then((res) => {
          if (res?.result.resultCode === 'S' && res?.data) {
            const dataArray = Array.isArray(res.data) ? res.data : [res.data]
            const newStepUpListData = formatStepUpListData(dataArray)
            setStepUpListData(newStepUpListData)
            applyCircuitsToCanvas(newStepUpListData, mainIdx, subIdx)
          } else {
            swalFire({ text: getMessage('common.message.send.error') })
            applyCircuitsToCanvas(tempStepUpListData, mainIdx, subIdx)
          }
        })
        return
      }
    }

    /** API 재조회가 없는 경로: 현재 tempStepUpListData 로 즉시 캔버스 갱신 */
    applyCircuitsToCanvas(tempStepUpListData, mainIdx, subIdx)
  }

  /**
   * 현재 선택된 값들을 가져오는 함수 추가
   */
  const getCurrentSelections = () => {
    const selectedValues = stepUpListData[0].pcsItemList.forEach((item) => {
      item.serQtyList.filter((serQty) => serQty.selected)
      return item.serQtyList.map((serQty) => {
        return {
          pcsMkrCd: serQty.pcsMkrCd,
          pcsSerCd: serQty.pcsSerCd,
          pcsItemId: serQty.itemId,
          pcsOptCd: seletedOption,
          paralQty: serQty.paralQty,
          // 접속함 중복 체크: (itemId, moduleTpCd) 조합 기준으로 dedupe
          connections: item.connList?.length
            ? [
                ...new Map(
                  item.connList.map((conn) => [
                    `${conn.itemId}_${conn.moduleTpCd}`,
                    {
                      connItemId: conn.itemId,
                      connMaxParalCnt: conn.connMaxParalCnt,
                      moduleTpCd: conn.moduleTpCd,
                    },
                  ]),
                ).values(),
              ]
            : [],
        }
      })
    })

    return selectedValues
  }

  /** props로 getCurrentSelections 함수 전달 */
  useEffect(() => {
    if (props.onInitialize) {
      props.onInitialize(getCurrentSelections)
    }
  }, [])

  /** stepUpListData가 변경될 때마다 업데이트하는 useEffect */
  useEffect(() => {
    if (props.onInitialize) {
      /** onInitialize를 props에서 가져옴 */
      props.onInitialize(() => ({
        ...getCurrentSelections(),
        stepUpListData /** stepUpListData를 포함하여 반환 */,
      }))
    }
  }, [stepUpListData])

  return (
    <>
      <div className="properties-setting-wrap outer">
        <div className="circuit-title-sel">
          <p className="circuit-title">{getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}</p>
          <div className="circuit-sel-wrap">
            <div className="grid-select mr10">
              {mainOptions.length > 0 && (
                <QSelectBox
                  options={mainOptions}
                  value={seletedMainOption}
                  sourceKey="code"
                  targetKey="code"
                  showKey={`${globalLocale === 'ja' ? 'nameJp' : 'name'}`}
                  onChange={(e) => setSeletedMainOption(e)}
                />
              )}
            </div>
            {isMultiOptions() && selectedModels.length === 2 && (
              <div className="grid-select ">
                {subOptions.length > 0 && (
                  <QSelectBox
                    options={subOptions}
                    value={seletedSubOption}
                    sourceKey="code"
                    targetKey="code"
                    showKey={`${globalLocale === 'ja' ? 'nameJp' : 'name'}`}
                    onChange={(e) => setSeletedSubOption(e)}
                  />
                )}
              </div>
            )}
          </div>

          {/* <div className="outline-form">
            <span className="mr10" style={{ width: 'auto' }}>
              {getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
            </span>
            {optCodes.length > 0 && (
              <div className="grid-select mr10">
                <QSelectBox
                  options={optCodes.map((roof) => {
                    return { ...roof, name: globalLocale === 'ko' ? roof.name : roof.nameJp }
                  })}
                  title={globalLocale === 'ko' ? optCodes[0].name : optCodes[0].nameJp}
                  value={seletedOption}
                  sourceKey="code"
                  targetKey="code"
                  showKey="name"
                  onChange={(e) => setSeletedOption(e)}
                />
              </div>
            )}
          </div> */}
        </div>

        <div className="slope-wrap">
          <div className="circuit-overflow">
            {/* 3개일때 className = by-max */}
            {stepUpListData.map((stepUp, index) => (
              <div key={index} className={`module-table-box ${stepUp.pcsItemList.length === 3 ? 'by-max' : ''}`}>
                {stepUp?.pcsItemList.map((pcsItem, idx) => (
                  <div key={idx} className="module-table-inner">
                    <div className="mb-box">
                      <div className="circuit-table-tit">{stepUp.pcsItemList[idx].goodsNo}</div>
                      <div className="roof-module-table overflow-y min">
                        <table>
                          <thead>
                            <tr>
                              <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.serial.amount')}</th>
                              <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.total.amount')}</th>
                            </tr>
                          </thead>
                          <tbody>
                            {pcsItem?.serQtyList?.map((item, serQtyIdx) => {
                              return (
                                <tr
                                  key={`row-${serQtyIdx}`}
                                  className={`${item.selected ? 'on' : ''}`}
                                  style={{ cursor: allocationType === 'auto' ? 'pointer' : 'default' }}
                                  onClick={() => {
                                    if (stepUp?.pcsItemList.length !== 1) {
                                      return
                                    }
                                    handleRowClick(idx, serQtyIdx, item.paralQty)
                                  }}
                                >
                                  <td
                                    className="al-r"
                                    onClick={() => {
                                      handleRowClick(idx, serQtyIdx, item.paralQty)
                                    }}
                                  >
                                    {item.serQty}
                                  </td>
                                  <td className="al-r">
                                    {/* 2025.12.04 select 추가 */}
                                    {idx === 0 ? (
                                      stepUp?.pcsItemList.length !== 1 ? (
                                        <select
                                          className="select-light dark table-select"
                                          defaultValue={item.paralQty}
                                          name=""
                                          id=""
                                          onChange={(e) => {
                                            handleChangeApplyParalQty(idx, serQtyIdx, e.target.value)
                                          }}
                                        >
                                          {item.paralQty === 0 && (
                                            <option key="0" value="0">
                                              0
                                            </option>
                                          )}
                                          {Array.from(
                                            {
                                              length: originPcsVoltageStepUpList[index]
                                                ? originPcsVoltageStepUpList[index]?.pcsItemList[idx].serQtyList[serQtyIdx].paralQty
                                                : item.paralQty,
                                            },
                                            (_, i) => i + 1,
                                          ).map((num) => (
                                            <option key={num} value={num}>
                                              {num}
                                            </option>
                                          ))}
                                        </select>
                                      ) : (
                                        <>{item.paralQty}</>
                                      )
                                    ) : (
                                      <>{item.paralQty}</>
                                    )}
                                  </td>
                                  {/* <td className="al-r">{item.paralQty}</td> */}
                                </tr>
                              )
                            })}
                          </tbody>
                        </table>
                      </div>
                    </div>
                    <div className="module-box-tab mb10">
                      <button
                        className={`module-btn ${(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 1 ? 'act' : ''}`}
                        onClick={() => handleTabChange(stepUp.pcsItemList[idx].goodsNo, idx, 1)}
                      >
                        {getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}
                      </button>
                      <button
                        className={`module-btn ${(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 2 ? 'act' : ''}`}
                        onClick={() => handleTabChange(stepUp.pcsItemList[idx].goodsNo, idx, 2)}
                      >
                        {getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}
                      </button>
                    </div>
                    <div className="circuit-table-flx-wrap">
                      {(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 1 && (
                        <div className="circuit-table-flx-box">
                          <div className="roof-module-table min mb10">
                            <table>
                              <thead>
                                <tr>
                                  <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
                                  <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}</th>
                                  <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr>
                                  <td className="al-c">
                                    {stepUp.pcsItemList[idx].connList?.[0]?.goodsNo ? stepUp.pcsItemList[idx].connList?.[0]?.goodsNo : '-'}
                                  </td>
                                  <td className="al-c">
                                    {stepUp.pcsItemList[idx].connList?.[0]?.connMaxParalCnt
                                      ? (stepUp.pcsItemList[idx].connList?.[0]?.connMaxParalCnt ?? '-')
                                      : '-'}
                                  </td>
                                  <td className="al-c">
                                    {stepUp.pcsItemList[idx].connList?.[0]?.vstuParalCnt ? stepUp.pcsItemList[idx].connList?.[0]?.vstuParalCnt : '-'}
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      )}
                      {(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 2 && (
                        <div className="circuit-table-flx-box">
                          <div className="roof-module-table min mb10">
                            <table>
                              <thead>
                                <tr>
                                  <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
                                  <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr>
                                  <td className="al-c">-</td>
                                  <td className="al-c">-</td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  )
}
