'use client'

import { FiUser, FiSettings, FiX } from 'react-icons/fi'
import { FaWrench } from 'react-icons/fa'
import type { ObsChatEmbedOptions } from '@/lib/embed/obsChatEmbed'

interface ContainerProps {
    variant: 'desktop' | 'mobile'
    theaterMode: boolean
    isPopout?: boolean
    /** OBS 透明聊天疊層：無邊框、可隱藏標題列與輸入框 */
    obsOverlay?: ObsChatEmbedOptions | null
    t: (key: string) => string
    chatCardRef: React.RefObject<HTMLDivElement>
    chatMessagesRef: React.RefObject<HTMLDivElement>
    chatInputBarRef: React.RefObject<HTMLDivElement>
    chatWriteAreaRef: React.RefObject<HTMLDivElement>
    participantsBtnRef: React.RefObject<HTMLButtonElement>
    settingsBtnRef: React.RefObject<HTMLButtonElement>
    adminBtnRef: React.RefObject<HTMLButtonElement>
    participantsOpen: boolean
    settingsOpen: boolean
    adminOpen: boolean
    isSuperAdmin: boolean
    onCloseChat: () => void
    onParticipantsToggle: () => void
    onSettingsToggle: () => void
    onAdminToggle: () => void
    headerActions?: React.ReactNode
    pinnedMessage?: React.ReactNode
    messagesContent: React.ReactNode
    messagesOverlay?: React.ReactNode
    floatingOverlay?: React.ReactNode
    inputContent: React.ReactNode
    participantsPopover?: React.ReactNode
    settingsPanel?: React.ReactNode
    adminPanel?: React.ReactNode
    chatFontSizePx: number
    chatLineHeightPx: number
    tipBelowOnlyClass: string
}

export default function Container({
    variant,
    theaterMode,
    isPopout = false,
    obsOverlay = null,
    t,
    chatCardRef,
    chatMessagesRef,
    chatInputBarRef,
    chatWriteAreaRef,
    participantsBtnRef,
    settingsBtnRef,
    adminBtnRef,
    participantsOpen,
    settingsOpen,
    adminOpen,
    isSuperAdmin,
    onCloseChat,
    onParticipantsToggle,
    onSettingsToggle,
    onAdminToggle,
    headerActions,
    pinnedMessage,
    messagesContent,
    messagesOverlay,
    floatingOverlay,
    inputContent,
    participantsPopover,
    settingsPanel,
    adminPanel,
    chatFontSizePx,
    chatLineHeightPx,
    tipBelowOnlyClass,
}: ContainerProps) {
    const isDesktop = variant === 'desktop'
    const isMobile = variant === 'mobile'
    const isObs = Boolean(obsOverlay)
    const hideHeader = isObs && Boolean(obsOverlay?.hideHeader)
    const hideInput = isObs && Boolean(obsOverlay?.hideInput)

    return (
        <div
            ref={chatCardRef}
            className={`relative overflow-visible flex flex-col ${
                isObs
                    ? 'h-full min-h-0 bg-transparent border-0 shadow-none'
                    : `bg-white dark:bg-[#0c0d0e] ${isDesktop
                          ? `min-h-[520px] ${theaterMode ? '[@media(min-width:965px)]:h-screen [@media(min-width:965px)]:rounded-none border-t-0' : isPopout ? 'h-full border border-gray-200 dark:border-gray-800' : 'h-[calc(100vh-65px-2rem)] rounded-xl border border-gray-200 dark:border-gray-800'}`
                          : `flex-1 min-h-0 ${theaterMode ? 'h-full max-h-none rounded-none p-0' : 'max-h-[60vh]'} ${isPopout ? 'h-full border border-gray-200 dark:border-gray-800' : theaterMode ? '' : 'rounded-xl border border-gray-200 dark:border-gray-800'}`
                      }`
            }`}
        >
            {!hideHeader && (
            <div
                className={`flex items-center justify-between border-b border-gray-200 dark:border-gray-800 ${isMobile && theaterMode ? 'px-2 py-2' : 'px-4 py-3'
                    }`}
            >
                <div className="text-base font-semibold text-gray-900 dark:text-white">
                    {t('room.chat.title')}
                </div>
                <div className="flex items-center gap-1">
                    <div className="relative">
                        <button
                            data-participants-trigger="1"
                            ref={participantsBtnRef}
                            onClick={onParticipantsToggle}
                            tip={t('room.participants.title')}
                            className={`w-9 h-9 rounded-full inline-flex items-center justify-center hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors ${tipBelowOnlyClass}`}
                            aria-label={t('room.participants.title')}
                        >
                            <FiUser className="w-5 h-5 text-gray-600 dark:text-gray-300" />
                        </button>
                        {participantsOpen && participantsPopover}
                    </div>

                    <div className="relative">
                        <button
                            data-settings-trigger="1"
                            ref={settingsBtnRef}
                            onClick={onSettingsToggle}
                            tip={t('room.settings.title')}
                            className={`w-9 h-9 rounded-full inline-flex items-center justify-center hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors ${tipBelowOnlyClass}`}
                            aria-label={t('room.settings.title')}
                        >
                            <FiSettings className="w-5 h-5 text-gray-600 dark:text-gray-300" />
                        </button>
                        {settingsOpen && settingsPanel}
                    </div>

                    {isSuperAdmin && (
                        <div className="relative">
                            <button
                                data-admin-trigger="1"
                                ref={adminBtnRef}
                                onClick={onAdminToggle}
                                tip={t('room.admin.title')}
                                className={`w-9 h-9 rounded-full inline-flex items-center justify-center hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors ${tipBelowOnlyClass}`}
                                aria-label={t('room.admin.title')}
                            >
                                <FaWrench className="w-5 h-5 text-gray-600 dark:text-gray-300" />
                            </button>
                            {adminOpen && adminPanel}
                        </div>
                    )}

                    {isDesktop && (
                        <button
                            className="w-9 h-9 rounded-full inline-flex items-center justify-center hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors"
                            aria-label={t('room.close')}
                            onClick={onCloseChat}
                        >
                            <FiX className="w-5 h-5 text-gray-600 dark:text-gray-300" />
                        </button>
                    )}

                    {headerActions}
                </div>
            </div>
            )}

            <div className="flex-1 min-h-0 relative overflow-visible">
                {pinnedMessage}
                <div
                    ref={chatMessagesRef}
                    className={`h-full overflow-y-auto space-y-3 ${pinnedMessage ? 'pt-20' : ''} ${
                        isObs ? 'px-2 py-2 obs-chat-messages' : isMobile && theaterMode ? 'px-3 py-2' : 'px-4 py-3'
                    }`}
                    style={{ fontSize: `${chatFontSizePx}px`, lineHeight: `${chatLineHeightPx}px` }}
                >
                    {messagesContent}
                </div>
                {messagesOverlay}
                {floatingOverlay}
            </div>

            {!hideInput && (
            <div
                ref={chatInputBarRef}
                className={`border-t border-gray-200 dark:border-gray-800 ${isMobile && theaterMode ? 'px-0 py-2' : 'px-3 py-3'
                    }`}
            >
                {inputContent}
            </div>
            )}
        </div>
    )
}