'use client'

import Image from 'next/image'
import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
import SuitableButton from './SuitableButton'
import SuitableNoData from './SuitableNoData'
import { useSuitable } from '@/hooks/useSuitable'
import { useSuitableStore } from '@/store/useSuitableStore'
import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'

export default function SuitableList() {
  const { toCodeName, toSuitableDetail, toSuitableDetailIds, suitables, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useSuitable()
  const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
  const [openItems, setOpenItems] = useState<Set<number>>(new Set())
  const observerTarget = useRef<HTMLDivElement>(null)

  // 선택된 아이템 확인 - 메인 하위 아이템 indeterminate 확인
  const isMainIndeterminate = useMemo(
    () => (mainId: number, detailCnt: number) => {
      const mainItem = selectedItems.get(mainId)
      if (!mainItem) return false
      return mainItem.size > 0 && mainItem.size < detailCnt
    },
    [selectedItems],
  )

  // 선택된 아이템 확인
  const isItemSelected = useCallback(
    (mainId: number, detailId?: number): boolean => {
      const mainItem = selectedItems.get(mainId)
      if (!mainItem) return false
      if (!detailId) return true
      return mainItem.has(detailId)
    },
    [selectedItems],
  )

  // 아이템 클릭
  const handleItemClick = useCallback(
    (mainId: number, detailId?: number, detailIds?: Set<number>): void => {
      isItemSelected(mainId, detailId) ? removeSelectedItem(mainId, detailId) : addSelectedItem(mainId, detailId, detailIds)
    },
    [isItemSelected, addSelectedItem, removeSelectedItem],
  )

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

  // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
  const suitableCheck = useCallback((value: string) => {
    const iconMap: Record<string, string> = {
      '×': '/assets/images/sub/compliance_x_icon.svg',
      ー: '/assets/images/sub/compliance_quest_icon.svg',
      default: '/assets/images/sub/compliance_check_icon.svg',
    }
    return (
      <div className="compliance-icon">
        <Image src={iconMap[value] || iconMap.default} width={22} height={22} alt="" />
      </div>
    )
  }, [])

  // 아이템 렌더링
  const renderItem = useCallback(
    (item: Suitable) => {
      return (
        <div className={`compliance-check-bx ${openItems.has(item.id) ? 'act' : ''}`} key={item.id}>
          <div className="check-name-wrap">
            <div className={`check-form-box ${isMainIndeterminate(item.id, item.detailCnt) ? 'space' : ''}`}>
              <input
                type="checkbox"
                id={`ch${item.id}`}
                checked={isItemSelected(item.id)}
                onChange={() => handleItemClick(item.id, undefined, toSuitableDetailIds(item.detail))}
              />
              <label htmlFor={`ch${item.id}`}>{item.productName}</label>
            </div>
            <div className="check-name-btn">
              <button className="bx-btn" onClick={() => toggleItemOpen(item.id)}></button>
            </div>
          </div>
          <ul className="reference-list check">
            {toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
              <li className="reference-item" key={subItem.id}>
                <div className="check-item-wrap">
                  <div className="check-form-box light">
                    <input
                      type="checkbox"
                      id={`ch${subItem.id}`}
                      checked={isItemSelected(item.id, subItem.id)}
                      onChange={() => handleItemClick(item.id, subItem.id)}
                    />
                    <label htmlFor={`ch${subItem.id}`}>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</label>
                  </div>
                  <div className="compliance-icon-wrap">
                    {suitableCheck(subItem.trestleManufacturerProductName)}
                    {subItem.memo && (
                      <div className="compliance-icon">
                        <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
                      </div>
                    )}
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      )
    },
    [isItemSelected, openItems, handleItemClick, toggleItemOpen, suitableCheck, toCodeName, toSuitableDetail],
  )

  // 아이템 리스트
  const suitableList = suitables?.pages.flat() ?? []

  // Intersection Observer 설정
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
          fetchNextPage()
        }
      },
      {
        threshold: 0,
        rootMargin: '100px',
      },
    )

    if (observerTarget.current) {
      observer.observe(observerTarget.current)
    }

    return () => observer.disconnect()
  }, [hasNextPage, isFetchingNextPage, fetchNextPage])

  if (isLoading) return <div>Loading...</div>
  if (!suitableList.length) return <SuitableNoData />

  return (
    <>
      {suitableList.map(renderItem)}
      <div ref={observerTarget} className="loading-indicator">
        {isFetchingNextPage && <div className="loading-more">데이터를 불러오는 중...</div>}
      </div>
      <SuitableButton />
    </>
  )
}
