import { useEffect, useState } from 'react'
import { useRecoilState } from 'recoil'
import { v4 as uuidv4 } from 'uuid'
import { canvasState, currentCanvasPlanState, plansState, modifiedPlansState, modifiedPlanFlagState } from '@/store/canvasAtom'
import { useAxios } from '@/hooks/useAxios'
import { useMessage } from '@/hooks/useMessage'
import { useSwal } from '@/hooks/useSwal'
import { SAVE_KEY } from '@/common/common'
import { readImage, removeImage } from '@/lib/fileAction'
import { useCanvas } from '@/hooks/useCanvas'

export function usePlan() {
  const [planNum, setPlanNum] = useState(0)
  const [selectedPlan, setSelectedPlan] = useState(null)
  const [currentCanvasStatus, setCurrentCanvasStatus] = useState(null)

  const [canvas, setCanvas] = useRecoilState(canvasState)

  const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
  const [plans, setPlans] = useRecoilState(plansState) // 전체 plan
  const [modifiedPlans, setModifiedPlans] = useRecoilState(modifiedPlansState) // 변경된 canvas plan
  const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState) // 캔버스 실시간 오브젝트 이벤트 감지 flag

  const { swalFire } = useSwal()
  const { getMessage } = useMessage()
  const { get, promisePost, promisePut, promiseDel } = useAxios()

  /**
   * 마우스 포인터의 가이드라인을 제거합니다.
   */
  const removeMouseLines = () => {
    if (canvas?._objects.length > 0) {
      const mouseLines = canvas?._objects.filter((obj) => obj.name === 'mouseLine')
      mouseLines.forEach((item) => canvas?.remove(item))
    }
    canvas?.renderAll()
  }

  const addCanvas = () => {
    const objs = canvas?.toJSON(SAVE_KEY)

    const str = JSON.stringify(objs)

    // canvas?.clear()
    return str

    // setTimeout(() => {
    //   // 역직렬화하여 캔버스에 객체를 다시 추가합니다.
    //   canvas?.loadFromJSON(JSON.parse(str), function () {
    //     // 모든 객체가 로드되고 캔버스에 추가된 후 호출됩니다.
    //     console.log(canvas?.getObjects().filter((obj) => obj.name === 'roof'))
    //     canvas?.renderAll() // 캔버스를 다시 그립니다.
    //   })
    // }, 1000)
  }

  /**
   * 현재 캔버스에 그려진 데이터를 추출
   */
  const currentCanvasData = (mode = '') => {
    removeMouseLines()
    canvas.discardActiveObject()

    if (mode === 'save') {
      const groups = canvas.getObjects().filter((obj) => obj.type === 'group')

      if (groups.length > 0) {
        groups.forEach((group) => {
          canvas?.remove(group)
          canvas?.renderAll()
          const restore = group._restoreObjectsState() //그룹 좌표 복구

          //그룹시 좌표가 틀어지는 이슈
          restore._objects.forEach((obj) => {
            obj.set({
              ...obj,
              groupYn: true,
              groupName: group.name,
              groupId: group.id,
            })

            //디렉션이 있는 경우에만
            if (group.lineDirection) obj.set({ lineDirection: group.lineDirection })
            //부모객체가 있으면 (면형상 위에 도머등..)
            if (group.parentId) obj.set({ parentId: group.parentId })

            canvas?.add(obj)
            obj.setCoords()
            canvas?.renderAll()
          })
        })
      }
    }

    return addCanvas()
  }

  /**
   * 캔버스에서 발생하는 실시간 오브젝트 이벤트를 감지하여 수정 여부를 확인 후 관리
   */
  const checkCanvasObjectEvent = (planId) => {
    setCurrentCanvasStatus(currentCanvasData())
    if (!modifiedPlans.some((modifiedPlan) => modifiedPlan === planId) && checkModifiedCanvasPlan(planId)) {
      setModifiedPlans((prev) => [...prev, planId])
      setModifiedPlanFlag(false)
    }
  }
  useEffect(() => {
    if (currentCanvasStatus) {
      setCurrentCanvasPlan((prev) => ({ ...prev, canvasStatus: currentCanvasStatus }))
    }
  }, [currentCanvasStatus])

  /**
   * 현재 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
   */
  const checkModifiedCanvasPlan = (planId) => {
    const planData = plans.find((plan) => plan.id === planId)
    if (planData.canvasStatus === '') {
      // 빈 상태로 저장된 캔버스
      return true
    }

    // 각각 object들의 uuid 목록을 추출하여 비교
    const canvasStatus = currentCanvasData()
    const canvasObjsUuids = getObjectUuids(JSON.parse(canvasStatus).objects)
    const dbObjsUuids = getObjectUuids(JSON.parse(planData.canvasStatus).objects)
    return canvasObjsUuids.length !== dbObjsUuids.length || !canvasObjsUuids.every((uuid, index) => uuid === dbObjsUuids[index])
  }
  const getObjectUuids = (objects) => {
    return objects
      .filter((obj) => obj.hasOwnProperty('uuid'))
      .map((obj) => obj.uuid)
      .sort()
  }

  const resetModifiedPlans = () => {
    setModifiedPlans([])
    setModifiedPlanFlag(false)
  }

  /**
   * 캔버스에 저장되지 않은 변경사항이 있을때 저장 여부를 확인 후 저장
   */
  const checkUnsavedCanvasPlan = async () => {
    swalFire({
      text: `Plan ${currentCanvasPlan.ordering} ` + getMessage('plan.message.confirm.save.modified'),
      type: 'confirm',
      confirmFn: async () => {
        await putCanvasStatus(currentCanvasPlan.canvasStatus)
      },
    })
    resetModifiedPlans()
  }

  /**
   * DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화
   */
  const dbToCanvasFormat = (cs) => {
    return cs.replace(/##/g, '"').replace(/∠/g, '∠').replace(/°/g, '°')
  }

  /**
   * canvas의 데이터를 DB에 저장할 수 있도록 포맷화
   */
  const canvasToDbFormat = (cs) => {
    return cs.replace(/"/g, '##')
  }

  /**
   * 페이지 내 캔버스를 저장
   */
  const saveCanvas = async () => {
    const canvasStatus = currentCanvasData('save')
    await putCanvasStatus(canvasStatus)
  }

  /**
   * objectNo에 해당하는 canvas 목록을 조회
   */
  const getCanvasByObjectNo = async (userId, objectNo) => {
    return await get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
      res.map((item, index) => ({
        id: item.id,
        userId: item.userId,
        canvasStatus: dbToCanvasFormat(item.canvasStatus),
        isCurrent: false,
        bgImageName: item.bgImageName,
        mapPositionAddress: item.mapPositionAddress,
        ordering: index + 1,
      })),
    )
  }

  /**
   * 신규 canvas 데이터를 저장
   */
  const postCanvasStatus = async (userId, objectNo, canvasStatus) => {
    const planData = {
      userId: userId,
      imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
      objectNo: objectNo,
      bgImageName: currentCanvasPlan?.bgImageName ?? null,
      mapPositionAddress: currentCanvasPlan?.mapPositionAddress ?? null,
      canvasStatus: canvasToDbFormat(canvasStatus),
    }
    await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
      .then((res) => {
        setPlans([...plans, { id: res.data, objectNo: objectNo, userId: userId, canvasStatus: canvasStatus, ordering: planNum + 1 }])
        handleCurrentPlan(res.data)
        setPlanNum(planNum + 1)
      })
      .catch((error) => {
        swalFire({ text: error.message, icon: 'error' })
      })
  }

  /**
   * id에 해당하는 canvas 데이터를 수정
   */
  const putCanvasStatus = async (canvasStatus) => {
    const planData = {
      id: currentCanvasPlan.id,
      bgImageName: currentCanvasPlan?.bgImageName ?? null,
      mapPositionAddress: currentCanvasPlan?.mapPositionAddress ?? null,
      canvasStatus: canvasToDbFormat(canvasStatus),
    }
    await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
      .then((res) => {
        setPlans((plans) => plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)))
        setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
      })
      .catch((error) => {
        swalFire({ text: error.message, icon: 'error' })
      })
  }

  /**
   * id에 해당하는 canvas 데이터를 삭제
   */
  const delCanvasById = async (id) => {
    return await promiseDel({ url: `/api/canvas-management/canvas-statuses/by-id/${id}` })
  }

  /**
   * objectNo에 해당하는 canvas 데이터들을 삭제
   */
  const delCanvasByObjectNo = async (objectNo) => {
    return await promiseDel({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` })
  }

  /**
   * plan 이동
   * 현재 plan의 작업상태를 확인, 저장 후 이동
   */
  const handleCurrentPlan = async (newCurrentId) => {
    if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
      if (currentCanvasPlan?.id && modifiedPlans.some((modifiedPlan) => modifiedPlan === currentCanvasPlan.id)) {
        await saveCanvas()
      }
      updateCurrentPlan(newCurrentId)
    }
  }

  const updateCurrentPlan = (newCurrentId) => {
    setPlans((plans) =>
      plans.map((plan) => {
        return { ...plan, isCurrent: plan.id === newCurrentId }
      }),
    )
  }
  useEffect(() => {
    setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
    setSelectedPlan(plans.find((plan) => plan.isCurrent))
    // setBgImage()
  }, [plans])

  const setBgImage = () => {
    // readImage(selectedPlan?.id)
  }

  /**
   * 새로운 plan 생성
   * 현재 plan의 데이터가 있을 경우 복제 여부를 확인
   */
  const handleAddPlan = async (userId, objectNo) => {
    JSON.parse(currentCanvasData()).objects.length > 0
      ? swalFire({
          text: `Plan ${currentCanvasPlan.ordering} ` + getMessage('plan.message.confirm.copy'),
          type: 'confirm',
          confirmFn: async () => {
            await postCanvasStatus(userId, objectNo, currentCanvasData())
          },
          denyFn: async () => {
            await postCanvasStatus(userId, objectNo, '')
          },
        })
      : await postCanvasStatus(userId, objectNo, '')
  }

  /**
   * DB에 추가하지 않고 화면 상에서 plan을 추가하는 함수
   */
  const addPlan = (userId, objectNo, canvasStatus) => {
    const id = uuidv4()
    const newPlan = {
      id: id,
      objectNo: objectNo,
      userId: userId,
      canvasStatus: canvasStatus,
      ordering: planNum + 1,
    }
    setPlans([...plans, newPlan])
    handleCurrentPlan(id)
    setPlanNum(planNum + 1)
  }

  /**
   * plan 삭제
   */
  const handleDeletePlan = async (e, id) => {
    e.stopPropagation() // 이벤트 버블링 방지

    await delCanvasById(id)
      .then((res) => {
        setPlans((plans) => plans.filter((plan) => plan.id !== id))
        setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
        removeImage(currentCanvasPlan.id)
        swalFire({ text: getMessage('plan.message.delete') })
      })
      .catch((error) => {
        swalFire({ text: error.message, icon: 'error' })
      })

    // 삭제 후 last 데이터에 포커싱
    const lastPlan = plans.filter((plan) => plan.id !== id).at(-1)
    if (!lastPlan) {
      setPlanNum(0)
      setCurrentCanvasPlan(null)
    } else if (id !== lastPlan.id) {
      updateCurrentPlan(lastPlan.id)
    }
  }

  /**
   * plan 조회
   */
  const loadCanvasPlanData = async (userId, objectNo, pid) => {
    await getCanvasByObjectNo(userId, objectNo).then((res) => {
      // console.log('canvas 목록 ', res)
      if (res.length > 0) {
        setPlans(res)
        updateCurrentPlan(res[pid - 1].id)
        setPlanNum(res.length)
      } else {
        postCanvasStatus(userId, objectNo, '')
      }
    })
  }

  return {
    canvas,
    plans,
    selectedPlan,
    currentCanvasPlan,
    setCurrentCanvasPlan,
    modifiedPlans,
    modifiedPlanFlag,
    setModifiedPlanFlag,
    checkCanvasObjectEvent,
    checkUnsavedCanvasPlan,
    resetModifiedPlans,
    saveCanvas,
    handleCurrentPlan,
    handleAddPlan,
    handleDeletePlan,
    loadCanvasPlanData,
  }
}