'use client'

import Image from 'next/image'
import { useCallback, useEffect, useState } from 'react'
import SuitableDetailPopupButton from './SuitableDetailPopupButton'
import { useSuitable } from '@/hooks/useSuitable'
import { usePopupController } from '@/store/popupController'
import { useSuitableStore } from '@/store/useSuitableStore'
import { useSpinnerStore } from '@/store/spinnerStore'
import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'

export default function SuitableDetailPopup() {
  const popupController = usePopupController()
  const { toCodeName, toSuitableDetail, suitableCheckIcon, suitableCheckMemo, selectedSuitables, isSelectedSuitablesLoading } = useSuitable()
  const { setSelectedItemsSearching } = useSuitableStore()

  const [openItems, setOpenItems] = useState<Set<number>>(new Set())

  /* 아이템 열기/닫기 */
  const toggleItemOpen = useCallback((itemId: number) => {
    setOpenItems((prev) => {
      const newOpenItems = new Set(prev)
      newOpenItems.has(itemId) ? newOpenItems.delete(itemId) : newOpenItems.add(itemId)
      return newOpenItems
    })
  }, [])

  /* 데이터 로딩 상태 처리 */
  useEffect(() => {
    useSpinnerStore.getState().setIsShow(isSelectedSuitablesLoading)
  }, [isSelectedSuitablesLoading])

  useEffect(() => {
    setSelectedItemsSearching(true)
  }, [])

  return (
    <div className="modal-popup">
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <div className="modal-header-inner">
              <div className="modal-name-wrap">
                <div className="modal-img">
                  <Image src="/assets/images/layout/modal_header_icon03.svg" width={22} height={22} alt="" />
                </div>
                <div className="modal-name">屋根材適合性詳細 </div>
              </div>
              <button className="modal-close" onClick={() => popupController.setSuitableDetailPopup(false)}></button>
            </div>
          </div>
          <div className="modal-body">
            <div className="compliance-check-pop-wrap">
              {selectedSuitables?.map((item: Suitable) => (
                <div className={`compliance-check-bx ${openItems.has(item.id) ? 'act' : ''}`} key={item.id}>
                  <div className="check-name-wrap">
                    <div className="check-name">{item.productName}</div>
                    <div className="check-name-btn">
                      <button className="bx-btn" onClick={() => toggleItemOpen(item.id)}></button>
                    </div>
                  </div>
                  <div className="compliance-check-pop-contents">
                    <div className="check-pop-data-wrap">
                      <div className="check-pop-data-tit">屋根技研 支持瓦</div>
                      <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.MANU_FT_CD, item.manuFtCd)}</div>
                    </div>
                    <div className="check-pop-data-wrap">
                      <div className="check-pop-data-tit">屋根材</div>
                      <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_MT_CD, item.roofMtCd)}</div>
                    </div>
                    <div className="check-pop-data-wrap">
                      <div className="check-pop-data-tit">金具タイプ</div>
                      <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_SH_CD, item.roofShCd)}</div>
                    </div>
                    <div className="check-pop-data-table-wrap">
                      {toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
                        <div className="check-pop-data-table" key={subItem.id}>
                          <div className="pop-data-table-head">
                            <div className="pop-data-table-head-name">{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</div>
                            <div className="pop-data-table-head-icon">
                              <div className="compliance-icon">
                                <Image src={suitableCheckIcon(subItem.trestleManufacturerProductName)} width={22} height={22} alt="" />
                              </div>
                              {subItem.memo && (
                                <div className="compliance-icon">
                                  <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
                                </div>
                              )}
                            </div>
                          </div>
                          <div className="pop-data-table-body">{suitableCheckMemo(subItem.trestleManufacturerProductName)}</div>
                          {subItem.memo && (
                            <div className="pop-data-table-footer">
                              <div className="pop-data-table-footer-unit">備考</div>
                              <div className="pop-data-table-footer-data">{subItem.memo}</div>
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <SuitableDetailPopupButton />
          </div>
        </div>
      </div>
    </div>
  )
}