'use client'

import { useCallback, useEffect, useRef, useState } from 'react'
import {
    buildGiftLottieBatchKey,
    createGiftLottieDedupeState,
    shouldEnqueueGiftLottie,
} from './giftLottieDedupe'
import type { GiftMessagePayload } from './types'
import { resolveGiftLottieUrl } from './resolveGiftLottieUrl'

export type GiftLottiePlayItem = {
    id: string
    url: string
}

export function useGiftLottiePlayback() {
    const [queue, setQueue] = useState<GiftLottiePlayItem[]>([])
    const [current, setCurrent] = useState<GiftLottiePlayItem | null>(null)
    const dedupeRef = useRef(createGiftLottieDedupeState())

    const enqueueFromGift = useCallback(
        async (
            gift: GiftMessagePayload,
            messageId: string,
            senderUserId: string | null | undefined
        ) => {
            const batchKey = buildGiftLottieBatchKey(gift, senderUserId)
            if (!shouldEnqueueGiftLottie(dedupeRef.current, messageId, batchKey)) {
                return
            }

            const url = await resolveGiftLottieUrl(gift)
            if (!url) return

            setQueue((prev) => {
                if (prev.some((item) => item.id === messageId)) return prev
                return [...prev, { id: messageId, url }]
            })
        },
        []
    )

    useEffect(() => {
        if (current !== null || queue.length === 0) return
        const [next, ...rest] = queue
        setCurrent(next)
        setQueue(rest)
    }, [current, queue])

    const finishCurrent = useCallback(() => {
        setCurrent(null)
    }, [])

    return {
        current,
        finishCurrent,
        enqueueFromGift,
    }
}