"use client"

import {
    animate,
    clamp,
    motion,
    MotionValue,
    useMotionValue,
    useMotionValueEvent,
    useSpring,
    useTransform,
} from "motion/react"
import { useCallback, useEffect, useRef, useState } from "react"

import { Archive, Clock9, Flag, MailOpen } from "lucide-react"
import type { LucideIcon } from "lucide-react"

const ITEM_HEIGHT = 80
const ITEM_MAX_WIDTH = 384

const SPRING_OPTIONS = {
    stiffness: 900,
    damping: 80,
}

export default function SwipeActions() {
    const [isSwiping, setIsSwiping] = useState(false)

    /*
     * Refs used for swipe related logic and measurements
     *
     * Swipe item:
     *    the draggable item which updates the swipe amount and progress. We also store the width of the swipe item in a ref to avoid re-measuring the width every time during swipes and instead only measure and update the width when the window is resized.
     *
     * Swipe start:
     *    x position of the pointer when the swipe starts to measure the drag/swipe delta
     *
     * Full swipe snap position:
     *    when swipe reaches 80% or more on either side, the primary action snaps to full swipe position and gets committed if the pointer is released.
     */
    const swipeItemRef = useRef<HTMLDivElement>(null)
    const swipeItemWidth = useRef(0)
    const swipeStartX = useRef(0)
    const swipeStartOffset = useRef(0)
    const fullSwipeSnapPosition = useRef<"left" | "right" | null>(null)

    /*
     * Swipe motion values
     *
     * Swipe amount:
     *    px value of the swipe amount. 0 is the center of the swipe item, swiping left results in negative values, swiping right results in positive values.
     *
     * Swipe amount spring:
     *    spring value of the swipe amount
     *
     * Swipe progress:
     *    percentage value of the swipe progress. -1 is full swipe left, 1 is full swipe right, 0 is the center.
     */
    const swipeAmount = useMotionValue(0)
    const swipeAmountSpring = useSpring(swipeAmount, SPRING_OPTIONS)
    const swipeProgress = useTransform(swipeAmount, (value) => {
        const itemWidth = swipeItemWidth.current

        if (!itemWidth) return 0

        return value / itemWidth
    })

    /*
     * Swipe event listeners
     * We attach these 2 event listeners instead of to the swipe item so that they can be detected even when the pointer is outside the swipe item's bounds.
     *
     * Pointer move:
     *    when the pointer is moved, we check the swipe progress and snap to full swipe position if the swipe progress is more than 80% on either side.
     *
     * Pointer up:
     *    when the pointer is released, we check if the swipe is committed or not and snap to the target offset.
     */
    useEffect(() => {
        const handlePointerMove = (info: PointerEvent) => {
            if (isSwiping) {
                const itemWidth = swipeItemWidth.current
                if (!itemWidth) return

                const swipeDelta =
                    info.clientX -
                    swipeStartX.current +
                    swipeStartOffset.current
                const fullSwipeThreshold = itemWidth * 0.8 // 80% of width
                const isSwipingBeyondThreshold =
                    Math.abs(swipeDelta) > fullSwipeThreshold
                const isSwipingLeft = swipeDelta < 0

                // If already snapped to a side
                if (fullSwipeSnapPosition.current) {
                    const isSwipingBackToCenter =
                        Math.abs(swipeDelta) < fullSwipeThreshold
                    if (isSwipingBackToCenter) {
                        // Release snap and follow finger
                        fullSwipeSnapPosition.current = null
                        swipeAmount.set(swipeDelta)
                    } else {
                        // Keep snapped to edge
                        const snapPosition =
                            fullSwipeSnapPosition.current === "left"
                                ? -itemWidth
                                : itemWidth
                        swipeAmount.set(snapPosition)
                    }
                    return
                }

                // Not yet snapped to any side
                if (isSwipingBeyondThreshold) {
                    // Snap to edge
                    const snapDirection = isSwipingLeft ? "left" : "right"
                    const snapPosition = isSwipingLeft ? -itemWidth : itemWidth
                    fullSwipeSnapPosition.current = snapDirection
                    swipeAmount.set(snapPosition)
                } else {
                    // Follow finger within bounds
                    swipeAmount.set(clamp(-itemWidth, itemWidth, swipeDelta))
                }
            }
        }

        const handlePointerUp = () => {
            if (isSwiping) {
                const itemWidth = swipeItemWidth.current
                if (!itemWidth) return

                const currentOffset = swipeAmount.get()

                let targetOffset = 0

                // If swiped more than 25%, snap to center to keep actions visible
                const snapThreshold = itemWidth * 0.25

                if (Math.abs(currentOffset) > snapThreshold) {
                    if (currentOffset > 0) {
                        // Snap to center revealing left actions
                        targetOffset = itemWidth * 0.5
                    } else {
                        // Snap to center revealing right actions
                        targetOffset = itemWidth * -0.5
                    }
                }

                // Dummy action when pointer is released and is full swiped
                const isFullySwiped = fullSwipeSnapPosition.current
                // const fullSwipeDirection =
                //     fullSwipeSnapPosition.current === "left" ? "right" : "left"
                if (isFullySwiped) {
                    animate([
                        [
                            swipeContainerRef.current!,
                            {
                                scaleY: 1.05,
                                scaleX: 0.95,
                                y: -24,
                                pointerEvents: "none",
                            },
                            {
                                duration: 0.1,
                                ease: "easeOut",
                            },
                        ],
                        [
                            swipeContainerRef.current!,
                            {
                                scaleY: 1,
                                scaleX: 1,
                                y: 0,
                                pointerEvents: "auto",
                            },
                            {
                                duration: 0.6,
                                type: "spring",
                            },
                        ],
                    ])

                    // Reset swipe amount to 0
                    targetOffset = 0
                    animate(swipeAmount, targetOffset, {
                        duration: 0.5,
                        delay: 0.3,
                    })
                } else {
                    // If swiping is not committed, snap to target offset, which is half the swipe item's width if swiping is more than 25% or 0 if swiping is less than 25%
                    swipeAmount.set(targetOffset)
                }

                // In any case, reset the swipe state and the fullSwipeSnapPosition
                setIsSwiping(false)
                fullSwipeSnapPosition.current = null
            }
        }

        document.addEventListener("pointermove", handlePointerMove)
        document.addEventListener("pointerup", handlePointerUp)

        return () => {
            document.removeEventListener("pointermove", handlePointerMove)
            document.removeEventListener("pointerup", handlePointerUp)
        }
    }, [swipeAmount, isSwiping, fullSwipeSnapPosition])

    /*
     * Resize listener
     * We measure the swipe item's width and update the swipe amount and progress springs to match the new width.
     */
    useEffect(() => {
        const handleResize = () => {
            const newWidth = swipeItemRef.current?.getBoundingClientRect().width
            if (!newWidth) return

            swipeItemWidth.current = newWidth

            const currentProgress = swipeProgress.get()
            const newOffset = currentProgress * newWidth

            // Jump instead of set to avoid transition and make the update instant
            swipeAmount.jump(newOffset)
            swipeAmountSpring.jump(newOffset)
        }

        // Initial measurement
        handleResize()

        window.addEventListener("resize", handleResize)
        return () => window.removeEventListener("resize", handleResize)
    }, [swipeAmount, swipeAmountSpring, swipeProgress])

    const swipeContainerRef = useRef<HTMLDivElement>(null)

    return (
        <div style={styles.outerContainer}>
            <motion.div
                ref={swipeContainerRef}
                style={styles.swipeContainer}
                onPointerDown={(info) => {
                    setIsSwiping(true)
                    swipeStartX.current = info.clientX
                    swipeStartOffset.current = swipeAmount.get()
                }}
            >
                <motion.div
                    ref={swipeItemRef}
                    style={{ ...styles.swipeItem, x: swipeAmountSpring }}
                >
                    <SwipeItemContent swipeProgress={swipeProgress} />
                </motion.div>

                {/* Actions groups */}
                <ActionsGroup
                    side="left"
                    swipeAmount={swipeAmountSpring}
                    primaryAction={
                        <Action
                            primary
                            swipeProgress={swipeProgress}
                            side="left"
                            bgColor="#ff0088"
                        >
                            <ActionContent icon={MailOpen} label="Action 1" />
                        </Action>
                    }
                    secondaryAction={
                        <Action
                            swipeProgress={swipeProgress}
                            side="left"
                            bgColor="#dd00ee"
                        >
                            <ActionContent icon={Clock9} label="Action 2" />
                        </Action>
                    }
                />

                <ActionsGroup
                    side="right"
                    swipeAmount={swipeAmountSpring}
                    primaryAction={
                        <Action
                            primary
                            swipeProgress={swipeProgress}
                            side="right"
                            bgColor="#9911ff"
                        >
                            <ActionContent icon={Archive} label="Action 3" />
                        </Action>
                    }
                    secondaryAction={
                        <Action
                            swipeProgress={swipeProgress}
                            side="right"
                            bgColor="#0d63f8"
                        >
                            <ActionContent icon={Flag} label="Action 4" />
                        </Action>
                    }
                />
            </motion.div>
        </div>
    )
}

const ActionsGroup = ({
    swipeAmount,
    side,
    primaryAction,
    secondaryAction,
}: {
    swipeAmount: MotionValue<number>
    side: "left" | "right"
    primaryAction: React.ReactNode
    secondaryAction: React.ReactNode
}) => {
    return (
        <motion.div
            style={{
                ...styles.actionsGroup,
                left: side === "right" ? "100%" : undefined,
                right: side === "left" ? "100%" : undefined,
                x: swipeAmount,
            }}
        >
            {secondaryAction}
            {primaryAction}
        </motion.div>
    )
}

const Action = ({
    children,
    primary = false,
    swipeProgress,
    side,
    bgColor = "#0f1115",
}: {
    children: React.ReactNode
    primary?: boolean
    swipeProgress: MotionValue<number>
    side: "left" | "right"
    bgColor?: string
}) => {
    const ref = useRef<HTMLDivElement>(null)

    // Store the width in a ref so you need to calculate with getBoundingClientRect() only when the window is resized, and not during swipes
    const actionWidth = useRef(0)

    /*
     * calculateX measures the x offset of the action 'box' relative to its parent group's left or right (depending on swipe direction). If the action is secondary, the function will simply return 0, so the action will be perfectly aligned with the parent left/right.
     * Instead, if the action is primary, the function will calculate an x offset corresponding exactly to the width of a single action box, adjusted for swipe direction and swipe progress. This calculation is necessary to make sure the primary action is always placed as the 'outer' one on either side.
     */
    const calculateX = useCallback(
        (swipeProgress: number) => {
            const width = actionWidth.current

            if (primary) {
                // Normalize the progress value so it's always positive for our threshold check
                // For right side: -0.8 becomes 0.8
                // For left side: 0.8 stays 0.8
                const absProgress = Math.abs(swipeProgress)

                // When swipe is equal or more than 80% on either side, trigger the "full swipe" action by setting the primary action's x to 0
                if (absProgress >= 0.8) {
                    return 0
                }

                // We multiply by -1 to invert the sign of the returned x value
                // The reason is that swipeProgress is negative when swiping left (which means right actions are being revealed) so the x offset of the primary action should be positive
                // and viceversa
                return ((swipeProgress * width) / 2) * -1
            }

            return 0
        },
        [primary]
    )

    const x = useSpring(0, SPRING_OPTIONS)
    useMotionValueEvent(swipeProgress, "change", (newSwipeProgress) => {
        const updatedX = calculateX(newSwipeProgress)
        x.set(updatedX)
    })

    /*
     * Resize listener
     * We measure the action's width and update the x spring to match the new width.
     */
    useEffect(() => {
        const updateWidth = () => {
            const width = ref.current?.getBoundingClientRect().width
            if (!width) return

            actionWidth.current = width

            const newX = calculateX(swipeProgress.get())
            // Use jump instead of set to avoid spring easing, making the x adjustement during window resize instant.
            x.jump(newX)
        }

        updateWidth()
        window.addEventListener("resize", updateWidth)
        return () => window.removeEventListener("resize", updateWidth)
    }, [actionWidth, swipeProgress, x, calculateX])

    // If the action is secondary, hide it when the swipe reaches the 'full swipe' state (swipeProgress >= 0.8) so that it does not visually overlap with the primary action
    const finalStateOpacity = primary ? 1 : 0
    const _contentOpacity = useTransform(
        swipeProgress,
        [-1, -0.8, -0.5, -0.25, 0.25, 0.5, 0.8, 1],
        [finalStateOpacity, 1, 1, 0, 0, 1, 1, finalStateOpacity]
    )
    const contentOpacity = useSpring(_contentOpacity, SPRING_OPTIONS)

    // Elastic effect for the action content during swipe, transforming the swipe progress into an x offset and a scale
    const _contentX = useTransform(
        swipeProgress,
        [-1, -0.8, -0.5, 0.5, 0.8, 1],
        [0, 16, 0, 0, -16, 0]
    )
    const contentX = useSpring(_contentX, SPRING_OPTIONS)

    const _contentScale = useTransform(
        swipeProgress,
        [-1, -0.8, 0, 0.8, 1],
        [1, 0.8, 1, 0.8, 1]
    )
    const contentScale = useSpring(_contentScale, SPRING_OPTIONS)

    return (
        <motion.div
            ref={ref}
            style={{
                ...styles.action.fullWidthContainer,
                // Align the action to the left or right of the parent group based on the side of the action
                justifyContent: side === "right" ? "flex-start" : "flex-end",
                x,
                backgroundColor: bgColor,
            }}
        >
            <motion.div style={styles.action.centerer}>
                <motion.span
                    style={{
                        ...styles.action.animatedWrapper,
                        x: contentX,
                        opacity: contentOpacity,
                        scale: contentScale,
                        // Using a side dependent transform origin makes the elastic effect more natural
                        transformOrigin: side === "right" ? "right" : "left",
                    }}
                >
                    {children}
                </motion.span>
            </motion.div>
        </motion.div>
    )
}

const ActionContent = ({
    icon,
    label,
}: {
    icon: LucideIcon
    label: string
}) => {
    const Icon = icon
    return (
        <button style={styles.actionContent}>
            <Icon size={24} strokeWidth={1.5} />
            {label}
        </button>
    )
}

const SwipeItemContent = ({
    swipeProgress,
}: {
    swipeProgress: MotionValue<number>
}) => {
    const _opacity = useTransform(swipeProgress, [-0.5, 0, 0.5], [0, 1, 0])
    const opacity = useSpring(_opacity, SPRING_OPTIONS)

    const _x = useTransform(swipeProgress, [-0.5, 0, 0.5], [40, 0, -40])
    const x = useSpring(_x, SPRING_OPTIONS)

    return (
        <motion.div style={{ ...styles.swipeItemContent, opacity, x }}>
            Swipe left or right to reveal actions
        </motion.div>
    )
}

/**
 * ==============   Styles   ================
 */
type Styles = {
    [K: string]: React.CSSProperties | Styles
}
const styles = {
    outerContainer: {
        padding: 16,
        cursor: "default",
    },
    swipeContainer: {
        position: "relative",
        height: ITEM_HEIGHT,
        width: "80dvw",
        maxWidth: ITEM_MAX_WIDTH,
        overflow: "hidden",
        backgroundColor: "black",
        borderRadius: 12,
        border: "1px solid #1d2628",
        zIndex: 0,
        touchAction: "none",
    },
    swipeItem: {
        position: "absolute",
        inset: 0,
        backgroundColor: "#0b1011",
        zIndex: 10,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
    },
    actionsGroup: {
        position: "absolute",
        height: "100%",
        width: "100%",
        userSelect: "none",
        WebkitUserSelect: "none",
        display: "flex",
    },
    action: {
        fullWidthContainer: {
            position: "absolute",
            inset: 0,
            display: "flex",
        },
        centerer: {
            height: "100%",
            width: "25%",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
        },
        animatedWrapper: {
            fontSize: 12,
        },
    },
    actionContent: {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: 4,
        flexDirection: "column",
        color: "var(--text)",
    },
    swipeItemContent: {
        backgroundColor: "transparent",
        userSelect: "none",
        WebkitUserSelect: "none",
        fontSize: 14,
        color: "var(--feint-text)",
        textAlign: "center",
        lineHeight: 1.5,
    },
} as const satisfies Styles

/**
 * ==============   Utils   ================
 */