"use client"

import { usePathname } from "next/navigation"
import {
  startTransition,
  useEffect,
  useOptimistic,
  useRef,
  useState,
} from "react"

import useRouterTransitionStore from "@/stores/router-transition"
import useTrackingStore from "@/stores/tracking"

import { createSDKPageObject } from "@/utils/tracking"

import { TrackingSDKProps } from "@/types/components/tracking"

enum TransitionStatusEnum {
  NotRun = "NotRun",
  Running = "Running",
  Done = "Done",
}

type TransitionStatus = keyof typeof TransitionStatusEnum

export default function RouterTransition({
  pageData,
  userData,
  hotelInfo,
}: TrackingSDKProps) {
  const [loading, setLoading] = useOptimistic(false)
  const [status, setStatus] = useState<TransitionStatus>(
    TransitionStatusEnum.NotRun
  )
  const { getPageLoadTime, hasRun, setHasRun } = useTrackingStore()

  const pathName = usePathname()
  const { isTransitioning, stopRouterTransition } = useRouterTransitionStore()

  const hasRunInitial = useRef<boolean>(false)

  useEffect(() => {
    if (!hasRun && !hasRunInitial.current) {
      const perfObserver = new PerformanceObserver((observedEntries) => {
        const entry = observedEntries.getEntriesByType("navigation")[0]
        if (entry) {
          const trackingData = {
            ...pageData,
            pathName,
            pageLoadTime: entry.duration / 1000,
          }
          const pageObject = createSDKPageObject(trackingData)
          // console.log("TRACKING: Tracking initial pageView", pageObject)
          // console.log("TRACKING: Tracking initial userData", userData)
          // console.log("TRACKING: Tracking initial hotelInfo", hotelInfo)
          window.adobeDataLayer.push({
            event: "pageView",
            pageInfo: pageObject,
            userInfo: userData,
            hotelInfo: hotelInfo,
          })

          perfObserver.disconnect()
        }
      })
      perfObserver.observe({
        type: "navigation",
        buffered: true,
      })
      hasRunInitial.current = true
      setHasRun()
    }
  }, [pathName, hasRun, setHasRun, hotelInfo, userData, pageData])

  useEffect(() => {
    if (isTransitioning && status === TransitionStatusEnum.NotRun) {
      startTransition(() => {
        setStatus(TransitionStatusEnum.Running)
        setLoading(true)
      })
    } else if (
      !loading &&
      isTransitioning &&
      status === TransitionStatusEnum.Running
    ) {
      setStatus(TransitionStatusEnum.Done)
      stopRouterTransition()
    } else if (
      !loading &&
      !isTransitioning &&
      status === TransitionStatusEnum.Done
    ) {
      if (window.adobeDataLayer && hasRun && !hasRunInitial.current) {
        const trackingData = {
          ...pageData,
          pathName,
          pageLoadTime: getPageLoadTime(),
        }
        const pageObject = createSDKPageObject(trackingData)
        // console.log(
        //   "TRACKING: Tracking RouterTransition pageViewEnd",
        //   pageObject
        // )
        // console.log("TRACKING: Tracking RouterTransition userData", userData)
        // console.log("TRACKING: Tracking RouterTransition hotelInfo", hotelInfo)
        window.adobeDataLayer.push({
          event: "pageViewEnd",
          pageInfo: pageObject,
          userInfo: userData,
          hotelInfo: hotelInfo,
        })
      }
    }
  }, [
    isTransitioning,
    loading,
    status,
    setLoading,
    stopRouterTransition,
    pageData,
    pathName,
    userData,
    hotelInfo,
    getPageLoadTime,
    hasRun,
  ])

  return null
}