'use client'

import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { FiHome, FiMic } from 'react-icons/fi'
import { MdSportsEsports } from 'react-icons/md'
import type { RoomStreamCategory } from '@/lib/streams/roomStreamCategory'
import { resolveRoomStreamCategoryLabels } from '@/lib/streams/roomStreamCategory'

type Props = {
    metaLine: string
    expandedMetaLine?: string
    description: string
    category?: RoomStreamCategory | null
    className?: string
}

function CategoryGroupIcon({ groupId }: { groupId: string }) {
    const className = 'w-7 h-7 text-[#606060] dark:text-[#ccc]'
    if (groupId === 'game') return <MdSportsEsports className={className} aria-hidden />
    if (groupId === 'talk') return <FiMic className={className} aria-hidden />
    return <FiHome className={className} aria-hidden />
}

export default function RoomStreamDescription({
    metaLine,
    expandedMetaLine,
    description,
    category = null,
    className = '',
}: Props) {
    const { t } = useTranslation()
    const [expanded, setExpanded] = useState(false)

    const body = useMemo(() => String(description ?? '').trim(), [description])
    const categoryLabels = useMemo(
        () => resolveRoomStreamCategoryLabels(category, t),
        [category, t]
    )
    const hasCategory = Boolean(categoryLabels)
    const hasPreview = body.length > 0
    const canToggle = hasPreview || hasCategory

    const showMoreLabel = t('room.streamDescription.showMore')
    const showLessLabel = t('room.streamDescription.showLess')
    const emptyDescriptionLabel = t('room.streamDescription.noDescription')
    const displayMetaLine =
        expanded && expandedMetaLine ? expandedMetaLine : metaLine
    const showMetaLine = Boolean(displayMetaLine.trim())

    return (
        <div className={className}>
            <div className="relative w-full overflow-hidden rounded-xl bg-[#f2f2f2] text-left dark:bg-white/[0.08]">
                <div className={'px-3 py-2 ' + (expanded && canToggle ? 'pb-3' : canToggle ? 'pb-2' : '')}>
                    {showMetaLine ? (
                        <p className="text-[13px] font-medium leading-5 text-[#0f0f0f] dark:text-[#f1f1f1]">
                            {displayMetaLine}
                        </p>
                    ) : null}

                    {hasPreview ? (
                        <div
                            className={
                                (showMetaLine ? 'relative mt-1 ' : 'relative ') +
                                (expanded ? '' : 'max-h-[2.5rem] overflow-hidden')
                            }
                        >
                            <p className="whitespace-pre-wrap break-words text-[13px] font-normal leading-5 text-[#0f0f0f] dark:text-[#e8e8e8]">
                                {body}
                            </p>
                            {!expanded && canToggle && (
                                <span className="pointer-events-none absolute bottom-0 right-0 bg-gradient-to-l from-[#f2f2f2] via-[#f2f2f2] to-transparent pl-8 pr-0 dark:from-[#272727] dark:via-[#272727] dark:to-transparent">
                                    <button
                                        type="button"
                                        className="pointer-events-auto text-[13px] font-medium leading-5 text-[#0f0f0f]  dark:text-[#f1f1f1]"
                                        onClick={() => setExpanded(true)}
                                    >
                                        {showMoreLabel}
                                    </button>
                                </span>
                            )}
                        </div>
                    ) : (
                        <p
                            className={
                                (showMetaLine ? 'mt-1 ' : '') +
                                'text-[13px] font-normal leading-5 text-[#606060] dark:text-[#aaa]'
                            }
                        >
                            {emptyDescriptionLabel}
                        </p>
                    )}

                    {!hasPreview && !expanded && hasCategory && (
                        <button
                            type="button"
                            className="mt-1 block text-[13px] font-medium text-[#0f0f0f]  dark:text-[#f1f1f1]"
                            onClick={() => setExpanded(true)}
                        >
                            {showMoreLabel}
                        </button>
                    )}

                    {expanded && hasCategory && categoryLabels && (
                        <div className="mt-3 border-t border-[#e0e0e0] pt-3 dark:border-white/10">
                            <div className="mt-2 flex gap-3">
                                <div
                                    className="flex h-[84px] w-[60px] flex-shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[#e0e0e0] dark:bg-white/10"
                                    aria-hidden
                                >
                                    <CategoryGroupIcon groupId={categoryLabels.groupId} />
                                </div>
                                <div className="min-w-0 py-0.5">
                                    <p className="text-sm font-medium leading-snug text-[#0f0f0f] dark:text-[#f1f1f1]">
                                        {categoryLabels.itemLabel}
                                    </p>
                                    <p className="mt-0.5 text-xs text-[#606060] dark:text-[#aaa]">
                                        {categoryLabels.groupLabel}
                                    </p>
                                </div>
                            </div>
                        </div>
                    )}

                    {expanded && canToggle && (
                        <button
                            type="button"
                            className="mt-2 block text-[13px] font-medium text-[#0f0f0f]  dark:text-[#f1f1f1]"
                            onClick={() => setExpanded(false)}
                        >
                            {showLessLabel}
                        </button>
                    )}
                </div>
            </div>
        </div>
    )
}