'use client'

import { useEffect, useRef, useState } from 'react'
import Image from 'next/image'
import LivePreviewPlayer from '@/components/LivePreviewPlayer'
import { acquireLivePreviewSlot } from '@/lib/media/livePreviewSlots'

export function hasStreamThumbnailUrl(thumbnail: string | null | undefined): boolean {
    return Boolean(String(thumbnail ?? '').trim())
}

type StreamCoverProps = {
    thumbnail?: string | null
    /** stream_token 或播放 URL */
    src?: string | null
    isLive?: boolean
    alt: string
    className?: string
    imageClassName?: string
    placeholder?: React.ReactNode
    /** false 時不拉即時串流（例如 Banner 非當前 slide） */
    enablePlayback?: boolean
    /** 進入視窗且取得播放名額後才拉流（熱門列表等） */
    lazyPlayback?: boolean
}

/**
 * 直播封面：有 thumbnail_url 則顯示自訂封面；否則以即時串流畫面作為封面。
 */
export default function StreamCover({
    thumbnail,
    src,
    isLive = true,
    alt,
    className = 'absolute inset-0',
    imageClassName = 'object-cover pointer-events-none',
    placeholder,
    enablePlayback = true,
    lazyPlayback = false,
}: StreamCoverProps) {
    const imageAlt = alt?.trim() || 'Live stream cover'
    const rootRef = useRef<HTMLDivElement>(null)
    const [inView, setInView] = useState(!lazyPlayback)
    const [slotReady, setSlotReady] = useState(!lazyPlayback)

    const thumb = String(thumbnail ?? '').trim()
    const playbackSrc = String(src ?? '').trim()

    useEffect(() => {
        if (!lazyPlayback) {
            setInView(true)
            return
        }
        const el = rootRef.current
        if (!el) return
        const observer = new IntersectionObserver(
            ([entry]) => {
                setInView(Boolean(entry?.isIntersecting))
            },
            { rootMargin: '80px', threshold: 0.15 }
        )
        observer.observe(el)
        return () => observer.disconnect()
    }, [lazyPlayback])

    useEffect(() => {
        if (!lazyPlayback || !inView || !enablePlayback || !playbackSrc || !isLive || thumb) {
            if (!lazyPlayback || !inView) setSlotReady(!lazyPlayback)
            return
        }
        let cancelled = false
        let releaseSlot: (() => void) | null = null
        void (async () => {
            releaseSlot = await acquireLivePreviewSlot()
            if (!cancelled) setSlotReady(true)
        })()
        return () => {
            cancelled = true
            releaseSlot?.()
            setSlotReady(false)
        }
    }, [lazyPlayback, inView, enablePlayback, playbackSrc, isLive, thumb])

    const shouldPlay =
        enablePlayback &&
        inView &&
        slotReady &&
        Boolean(playbackSrc) &&
        isLive &&
        !thumb

    if (thumb) {
        return (
            <Image
                src={thumb}
                alt={imageAlt}
                fill
                className={imageClassName}
                unoptimized
            />
        )
    }

    if (!lazyPlayback) {
        if (shouldPlay) {
            return (
                <LivePreviewPlayer
                    src={playbackSrc}
                    isLive
                    className={className}
                />
            )
        }
        return placeholder ?? null
    }

    return (
        <div ref={rootRef} className={className}>
            {shouldPlay ? (
                <LivePreviewPlayer
                    src={playbackSrc}
                    isLive
                    className="absolute inset-0 h-full w-full"
                />
            ) : (
                placeholder ?? null
            )}
        </div>
    )
}