// SafeHover.tsx — a trajectory-based "safe triangle" for hover menus.
// Apply withSafeHover as a Code Override to each nav item that opens a menu.
import { type ComponentType, forwardRef, startTransition, useCallback, useEffect, useRef, useState } from "react"
import { RenderTarget } from "framer"

// Minimum cursor speed (px/ms) required to start or maintain traveling intent.
const SPEED_THRESHOLD_PX_PER_MS = 0.15
// Guard engages only when the current vertical velocity would cross the row bottom within this many ms.
const PROJECTED_EXIT_MS = 500
// Cancel traveling immediately only when movement is this many degrees above horizontal.
const UPWARD_CANCEL_ANGLE_DEGREES = 10
// How long (ms) to keep traveling after speed drops below the threshold.
const DWELL_GRACE_MS = 150

type PointerSample = {
    x: number
    y: number
    t: number
}

export function withSafeHover(Component): ComponentType {
    return forwardRef(function WithSafeHover(props: any, ref) {
        const [blocked, setBlocked] = useState(false)
        const blockedRef = useRef(false)
        const elementRef = useRef<Element | null>(null)
        const historyRef = useRef<PointerSample[]>([])
        const travelingRef = useRef(false)
        const lastFastTimestampRef = useRef(0)
        const prevInsideRef = useRef(false)
        const allowInsideUnblockedRef = useRef(false)
        const enteredDuringTravelRef = useRef(false)

        const isCanvasRenderTarget =
            typeof window !== "undefined" &&
            typeof RenderTarget !== "undefined" &&
            RenderTarget.current() === RenderTarget.canvas

        const setBlockedIfChanged = useCallback((nextBlocked: boolean) => {
            if (blockedRef.current === nextBlocked) return
            blockedRef.current = nextBlocked
            startTransition(() => {
                setBlocked(nextBlocked)
            })
        }, [])

        const setCombinedRef = useCallback(
            (node: any) => {
                if (node && typeof node.getBoundingClientRect === "function") {
                    elementRef.current = node
                } else {
                    elementRef.current = null
                }

                if (typeof ref === "function") {
                    ref(node)
                } else if (ref && typeof ref === "object" && "current" in ref) {
                    ;(ref as { current: any }).current = node
                }
            },
            [ref]
        )

        useEffect(() => {
            if (typeof window === "undefined") return
            if (isCanvasRenderTarget) return

            const upwardCancelTanThreshold = Math.tan((UPWARD_CANCEL_ANGLE_DEGREES * Math.PI) / 180)

            const onPointerMove = (event: PointerEvent) => {
                // Desktop-only: never block for touch or pen input.
                if (event.pointerType !== "mouse") return

                const element = elementRef.current
                if (!element) {
                    setBlockedIfChanged(false)
                    return
                }

                const now = event.timeStamp || performance.now()
                const sample: PointerSample = { x: event.clientX, y: event.clientY, t: now }

                // A rolling ~100ms window of samples smooths out jitter.
                const nextHistory = [...historyRef.current, sample]
                    .filter((point) => now - point.t <= 100)
                    .slice(-5)
                historyRef.current = nextHistory

                let speed = 0
                let dx = 0
                let dy = 0
                let dt = 1
                if (nextHistory.length >= 2) {
                    const first = nextHistory[0]
                    const last = nextHistory[nextHistory.length - 1]
                    dt = Math.max(last.t - first.t, 1)
                    dx = last.x - first.x
                    dy = last.y - first.y
                    speed = Math.hypot(dx, dy) / dt
                }

                const movingClearlyUpward =
                    dy < 0 && Math.abs(dy) > upwardCancelTanThreshold * Math.abs(dx)
                const isFastEnough = speed >= SPEED_THRESHOLD_PX_PER_MS
                const vy = dy / dt

                // Project the path forward: would the cursor cross the bottom
                // of the nav row (this item's bottom edge) within PROJECTED_EXIT_MS?
                const rect = element.getBoundingClientRect()
                const pointerBelowRow = sample.y > rect.bottom
                const projectedExitMs =
                    vy > 0 ? (rect.bottom - sample.y) / vy : Number.POSITIVE_INFINITY
                const projectedToExitSoon = projectedExitMs < PROJECTED_EXIT_MS
                const shouldStartTraveling =
                    isFastEnough && vy > 0 && (projectedToExitSoon || pointerBelowRow)
                const shouldMaintainTraveling =
                    isFastEnough && !movingClearlyUpward && (pointerBelowRow || projectedToExitSoon)

                const wasTraveling = travelingRef.current
                let isTraveling = wasTraveling

                if (!wasTraveling) {
                    isTraveling = shouldStartTraveling
                    if (isTraveling) lastFastTimestampRef.current = now
                } else if (movingClearlyUpward) {
                    isTraveling = false
                } else if (shouldMaintainTraveling) {
                    isTraveling = true
                    lastFastTimestampRef.current = now
                } else if (isFastEnough) {
                    // Fast but flat while still inside the row: a sideways move, cancel.
                    isTraveling = false
                } else {
                    // Coasting: keep the guard alive briefly after deceleration.
                    isTraveling = wasTraveling && now - lastFastTimestampRef.current < DWELL_GRACE_MS
                }

                const isInside =
                    sample.x >= rect.left &&
                    sample.x <= rect.right &&
                    sample.y >= rect.top &&
                    sample.y <= rect.bottom

                // Remember whether this item was the "origin": hovered and
                // unblocked when travel began. The origin is never blocked.
                if (!wasTraveling && isTraveling) {
                    allowInsideUnblockedRef.current = isInside && !blockedRef.current
                    enteredDuringTravelRef.current = false
                }

                if (isTraveling && !prevInsideRef.current && isInside) {
                    enteredDuringTravelRef.current = true
                }

                let shouldBlock = false
                if (isTraveling) {
                    if (!isInside) {
                        shouldBlock = true
                    } else if (enteredDuringTravelRef.current) {
                        shouldBlock = true
                    } else if (allowInsideUnblockedRef.current) {
                        shouldBlock = false
                    }
                }

                if (!isTraveling) {
                    enteredDuringTravelRef.current = false
                    allowInsideUnblockedRef.current = false
                }

                setBlockedIfChanged(shouldBlock)
                travelingRef.current = isTraveling
                prevInsideRef.current = isInside
            }

            window.addEventListener("pointermove", onPointerMove, { passive: true })
            return () => {
                window.removeEventListener("pointermove", onPointerMove)
            }
        }, [isCanvasRenderTarget, setBlockedIfChanged])

        // Stay inert on the Framer canvas.
        if (isCanvasRenderTarget) {
            return <Component ref={setCombinedRef} {...props} />
        }

        return (
            <Component
                ref={setCombinedRef}
                {...props}
                style={{
                    ...props?.style,
                    ...(blocked ? { pointerEvents: "none" } : null),
                }}
            />
        )
    })
}