'use client'

import Image from 'next/image'
import Link from 'next/link'
import { TFunction } from 'i18next'
import { FaUser } from 'react-icons/fa'
import StreamSnapshotCover from '@/components/StreamSnapshotCover'

export interface LiveStream {
    id: string
    streamerName: string
    title: string
    category: string
    viewerCount: number
    thumbnail?: string
    src?: string
    isLive?: boolean
    avatar?: string
    startTime?: string
    tags?: string[]
}

interface LiveCardProps {
    stream: LiveStream
    t: TFunction
    badgeLabel?: string
}

export default function LiveCard({ stream, t, badgeLabel }: LiveCardProps) {
    return (
        <Link
            href={`/room/${stream.id}`}
            className="group block bg-transparent rounded-xl cursor-pointer"
        >
            <div className="relative overflow-hidden rounded-2xl bg-gray-200 dark:bg-neutral-900 aspect-video">
                <StreamSnapshotCover
                    thumbnail={stream.thumbnail}
                    src={stream.src}
                    isLive={stream.isLive ?? true}
                    captureWhenVisible
                    alt={stream.title}
                    placeholder={
                        <div className="absolute inset-0 flex items-center justify-center text-gray-500 dark:text-gray-300 text-sm">
                            {t('popularGrid.placeholder')}
                        </div>
                    }
                />
                <div className="absolute top-2 left-2">
                    {badgeLabel ? (
                        <div className="bg-[#0074e5] text-white text-xs px-2 py-0 rounded-full h-[24px] leading-6 z-10">
                            {badgeLabel}
                        </div>
                    ) : (
                        <div className="relative inline-grid [&>*]:col-start-1 [&>*]:row-start-1">
                            <span className="inline-flex w-max items-center gap-1 whitespace-nowrap bg-[rgba(23,25,28,0.8)] text-white text-xs px-2 py-1 rounded-full transition-opacity group-hover:opacity-0">
                                <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-red-500" />
                                {stream.viewerCount.toLocaleString()}
                            </span>
                            <span className="inline-flex w-max items-center gap-2 whitespace-nowrap bg-[rgba(23,25,28,0.8)] text-[#16D29A] border border-[#16D29A] text-xs px-2 py-1 rounded-full opacity-0 transition-opacity group-hover:opacity-100">
                                {t('popularGrid.live')}
                            </span>
                        </div>
                    )}
                </div>
                {stream.startTime && (
                    <span className="absolute bottom-2 right-2 bg-[rgba(23,25,28,0.8)] text-white text-xs px-2 py-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
                        {badgeLabel ? t('popularGrid.uploadTime', { time: stream.startTime }) : t('popularGrid.startTime', { time: stream.startTime })}
                    </span>
                )}
            </div>

            <div className="flex mt-3">
                <div className="flex-shrink-0 w-10 h-10 rounded-full overflow-hidden border border-gray-200 dark:border-gray-700">
                    {String(stream.avatar ?? '').trim() ? (
                        <Image
                            src={stream.avatar!}
                            alt={stream.streamerName}
                            width={40}
                            height={40}
                            className="h-full w-full object-cover pointer-events-none"
                            unoptimized
                        />
                    ) : (
                        <div className="flex h-full w-full items-center justify-center bg-gray-100 dark:bg-white/10">
                            <FaUser className="h-4 w-4 text-gray-400 dark:text-white/50" aria-hidden />
                        </div>
                    )}
                </div>

                <div className="ml-3 flex-1 min-w-0">
                    <div className="flex items-center justify-between">
                        <p className="text-sm font-semibold text-black dark:text-white truncate">
                            {stream.streamerName}
                        </p>
                    </div>

                    <h3 className="mt-1 text-sm text-black dark:text-white leading-snug line-clamp-2">
                        {stream.title}
                    </h3>

                    {stream.category && (
                        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400 truncate">
                            {stream.category}
                        </p>
                    )}

                    {stream.tags && stream.tags.length > 0 && (
                        <div className="mt-2 flex flex-wrap gap-1">
                            {stream.tags.slice(0, 3).map((tag) => (
                                <span
                                    key={tag}
                                    className="text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-neutral-800 text-gray-600 dark:text-gray-300"
                                >
                                    {tag}
                                </span>
                            ))}
                        </div>
                    )}
                </div>
            </div>
        </Link>
    )
}