'use client'

import type { ChatMessage } from '../types'
import { getUserRoleBadge, getUserNameColor } from './UserRoleUtils'
import { renderMessageText } from './RenderMessageText'

interface ScrollDownProps {
    isVisible: boolean
    latestMessage: ChatMessage | null
    onScrollToBottom: () => void
    streamerId?: string
    modUserIds?: ReadonlySet<string>
    superAdminUserIds?: ReadonlySet<string>
    t: (key: string) => string
}

export default function ScrollDown({
    isVisible,
    latestMessage,
    onScrollToBottom,
    streamerId,
    modUserIds,
    superAdminUserIds,
    t,
}: ScrollDownProps) {
    if (!isVisible) return null

    const downArrowSvg = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' fill='none'%3e%3cg clip-path='url(%23a)'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10.5.75 6 5.25 1.5.75'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='%23fff' d='M.5 0h11v6H.5z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e"
    const chevronSvg = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3e%3cg clip-path='url(%23a)'%3e%3cpath stroke='%23525661' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m10 1.25-4.5 4.5L1 1.25'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='%23fff' d='M0 .5h11v6H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e"

    return (
        <div
            className={`pointer-events-none flex flex-col justify-center items-center absolute left-0 right-0 w-full transition-all duration-200 ease-in-out z-[2] ${isVisible ? 'bottom-0 opacity-100 z-[99]' : '-bottom-10 opacity-0'
                }`}
        >
            {/* 向下捲動按鈕 - 只在沒有最新消息時顯示 */}
            {!latestMessage && (
                <button
                    className={`flex items-center justify-center bg-[#0182ff] w-16 h-[30px] mb-3 rounded-[32px] shadow-[0_2px_4px_rgba(0,0,0,0.2)] border-none cursor-pointer font-[0/0_a] ${isVisible ? 'pointer-events-auto' : 'pointer-events-none'
                        }`}
                    type="button"
                    onClick={onScrollToBottom}
                    aria-label={t('room.scrollToChat')}
                    style={{
                        backgroundImage: `url("${downArrowSvg}")`,
                        backgroundPosition: '50% 50%',
                        backgroundRepeat: 'no-repeat',
                        backgroundSize: '100% 100%',
                    }}
                />
            )}

            {/* 最新消息預覽 */}
            {latestMessage && !latestMessage.isSystem && (
                <button
                    className={`flex items-center bg-white dark:bg-[#0c0d0e] w-[calc(100%-24px)] h-[37px] mb-3 px-3 border border-[#d5d7dc] dark:border-[#1a1c21] rounded-[32px] shadow-[0_2px_4px_rgba(0,0,0,0.2)] text-left cursor-pointer relative ${isVisible ? 'pointer-events-auto' : 'pointer-events-none'
                        }`}
                    type="button"
                    onClick={onScrollToBottom}
                    data-user-type={latestMessage.userType || ''}
                >
                    <div className="flex items-start flex-[0_1_auto] w-[calc(100%-20px)] m-0 min-w-0">
                        <div className="flex-[0_0_auto] self-center w-auto inline-flex items-center gap-1 shrink-0 mr-2">
                            {latestMessage.badge && (
                                <span
                                    className={`grade-badge-${latestMessage.badge} h-3.5 align-middle`}
                                    style={{ display: latestMessage.badge ? 'inline-block' : 'none' }}
                                    title={latestMessage.badgeTip || ''}
                                />
                            )}
                            {getUserRoleBadge(latestMessage, streamerId, modUserIds, superAdminUserIds)}
                            <span
                                className={`text-sm font-semibold ${getUserNameColor(latestMessage, streamerId, modUserIds, superAdminUserIds)}`}
                            >
                                {latestMessage.author}
                            </span>
                        </div>
                        <div className="block flex-[0_1_auto] overflow-hidden h-[30px] min-w-0">
                            <div className="block overflow-hidden h-[30px] leading-[29px] text-sm text-gray-900 dark:text-gray-100 m-0">
                                {renderMessageText(latestMessage, undefined, 'desktop', t, undefined, undefined, false, streamerId)}
                            </div>
                        </div>
                    </div>
                    <span
                        className="flex-[0_0_auto] ml-auto shrink-0"
                        style={{
                            backgroundImage: `url("${chevronSvg}")`,
                            backgroundPosition: '50% 50%',
                            backgroundRepeat: 'no-repeat',
                            backgroundSize: '100% 100%',
                            width: '11px',
                            height: '6px',
                        }}
                    />
                </button>
            )}
        </div>
    )
}