'use client'

import { useEffect, useMemo, useState } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { useTranslation } from 'react-i18next'
import RoomVideoPlayer from '@/app/room/_components/RoomVideoPlayer'
import type { RoomStream } from '@/app/room/_components/types'
import { useRoomStreamStatus } from '@/contexts/StreamsWsContext'

type Props = {
    roomId: string
    roomUrl: string
    initialStream: RoomStream
    initialIsLiveStream: boolean
    initialPlaybackSrc: string
}

export default function EmbedRoomClient({
    roomId,
    roomUrl,
    initialStream,
    initialIsLiveStream,
    initialPlaybackSrc,
}: Props) {
    const { t } = useTranslation()
    const streamStatus = useRoomStreamStatus(roomId)

    const [isLive, setIsLive] = useState(initialIsLiveStream)
    const [startedAt, setStartedAt] = useState(initialStream.startedAt)
    const [playbackSessionId, setPlaybackSessionId] = useState<string | null>(null)

    useEffect(() => {
        setIsLive(initialIsLiveStream)
    }, [initialIsLiveStream, roomId])

    useEffect(() => {
        if (!streamStatus) return
        setIsLive(Boolean(streamStatus.isLive ?? streamStatus.live))
        if (streamStatus.startedAt != null) {
            setStartedAt(String(streamStatus.startedAt))
        }
        const uid = String(streamStatus.videoUID ?? '').trim().toLowerCase()
        if (uid) setPlaybackSessionId(uid)
    }, [streamStatus])

    const playbackSessionKey = useMemo(() => {
        const uid = (playbackSessionId ?? '').trim().toLowerCase()
        const started = String(startedAt ?? '').trim()
        if (uid && started) return `${uid}:${started}`
        if (uid) return uid
        if (started) return `started:${started}`
        return null
    }, [playbackSessionId, startedAt])

    const stream = useMemo(
        () => ({ ...initialStream, startedAt }),
        [initialStream, startedAt]
    )

    return (
        <div className="flex h-full min-h-0 flex-1 flex-col">
            <div className="relative min-h-0 flex-1">
                <RoomVideoPlayer
                    src={initialPlaybackSrc}
                    isLive={isLive}
                    fillHeight
                    className="h-full w-full"
                    showTheaterToggle={false}
                    showChatReopenButton={false}
                    enableStreamStatsMenu={false}
                    playbackSessionId={playbackSessionKey}
                />
            </div>

            <footer className="flex shrink-0 items-center gap-3 border-t border-white/10 bg-[#0c0d0e] px-3 py-2">
                <Link
                    href={roomUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex min-w-0 flex-1 items-center gap-2 hover:opacity-90"
                >
                    {stream.avatar ? (
                        <Image
                            src={stream.avatar}
                            alt=""
                            width={32}
                            height={32}
                            className="h-8 w-8 shrink-0 rounded-full object-cover"
                            unoptimized
                        />
                    ) : (
                        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white/10 text-xs font-semibold">
                            {(stream.channelName || '?').slice(0, 1)}
                        </span>
                    )}
                    <span className="min-w-0 flex-1">
                        <span className="block truncate text-sm font-semibold text-white">
                            {stream.channelName}
                        </span>
                        <span className="block truncate text-xs text-white/60">{stream.title}</span>
                    </span>
                </Link>
                <Link
                    href={roomUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="shrink-0 rounded-lg bg-[#9147ff] px-3 py-1.5 text-xs font-semibold text-white hover:bg-[#7c3aed] transition-colors"
                >
                    {t('embed.watchOnSite')}
                </Link>
            </footer>
        </div>
    )
}