'use client'

import { useRef, useCallback } from 'react'
import { FiGift } from 'react-icons/fi'
import WriteBar from './WriteBar'
import EmojiPanel from './EmojiPanel'
import type { ChatMessage } from '../types'

interface MentionUser {
    userId: string
    name: string
    avatarUrl?: string | null
}

interface InputAreaProps {
    variant: 'desktop' | 'mobile'
    // Refs
    chatWriteAreaRef: React.RefObject<HTMLDivElement>
    emojiBtnRef: React.RefObject<HTMLButtonElement>
    emojiPanelRef: React.RefObject<HTMLDivElement>
    chatCardRef: React.RefObject<HTMLDivElement>
    chatInputBarRef: React.RefObject<HTMLDivElement>
    // States
    draft: string
    setDraft: (v: string) => void
    emojiOpen: boolean
    emojiMode: 'desktop' | 'mobile'
    emojiTab: 'recent' | 'subscription' | 'default'
    setEmojiTab: (tab: 'recent' | 'subscription' | 'default') => void
    emojiDefaultItems: Array<{ id: string; alt: string; code: string; src: string }>
    emojiClosing: boolean
    emojiEntering: boolean
    // Handlers
    onSend: () => void
    onEmojiToggle: () => void
    onEmojiClose: () => void
    onGiftClick: () => void
    // Props
    placeholder: string
    disabled: boolean
    banInfo?: { isPermanent: boolean; expiresAt: number | null; remainingMs: number | null; reason?: string | null } | null
    mentionUsers?: MentionUser[]
    onCommand?: (command: { type: 'user'; args: string[] }) => void
    chatDisabled?: boolean
    isSuperAdmin?: boolean
    // Styles
    tipAboveOnlyClass: string
    // i18n
    t: (key: string) => string
    // Options
    showGiftButton?: boolean
}

export default function InputArea({
    variant,
    chatWriteAreaRef,
    emojiBtnRef,
    emojiPanelRef,
    chatCardRef,
    chatInputBarRef,
    draft,
    setDraft,
    emojiOpen,
    emojiMode,
    emojiTab,
    setEmojiTab,
    emojiDefaultItems,
    emojiClosing,
    emojiEntering,
    onSend,
    onEmojiToggle,
    onEmojiClose,
    onGiftClick,
    placeholder,
    disabled,
    banInfo,
    mentionUsers = [],
    onCommand,
    chatDisabled = false,
    isSuperAdmin = false,
    tipAboveOnlyClass,
    t,
    showGiftButton = true,
}: InputAreaProps) {
    const isDesktop = variant === 'desktop'
    const isMobile = variant === 'mobile'
    const emojiInsertRef = useRef<{ insertEmoji: (code: string) => void } | null>(null)

    const handleEmojiClick = useCallback((emojiCode: string) => {
        if (emojiInsertRef.current) {
            emojiInsertRef.current.insertEmoji(emojiCode)
        }
        if (typeof window !== 'undefined') {
            try {
                const stored = localStorage.getItem('recent_emojis')
                let codes: string[] = stored ? JSON.parse(stored) : []
                codes = codes.filter((code) => code !== emojiCode)
                codes.unshift(emojiCode)
                codes = codes.slice(0, 20)
                localStorage.setItem('recent_emojis', JSON.stringify(codes))
            } catch (error) {
                console.error('Failed to save recent emoji:', error)
            }
        }
    }, [])

    if (isDesktop) {
        return (
            <>
                <div className="flex items-center gap-2">
                    {showGiftButton && (
                        <button
                            type="button"
                            tip={t('room.giftModal.title')}
                            aria-label={t('room.giftModal.title')}
                            onClick={onGiftClick}
                            className={`w-9 h-9 rounded-full inline-flex items-center justify-center hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors ${tipAboveOnlyClass}`}
                        >
                            <FiGift className="w-5 h-5 text-gray-600 dark:text-gray-300" />
                        </button>
                    )}
                    <div className="flex-1 min-w-0">
                        <WriteBar
                            writeAreaRef={chatWriteAreaRef}
                            draft={draft}
                            setDraft={setDraft}
                            placeholder={placeholder}
                            emojiBtnRef={emojiBtnRef}
                            onEmojiToggle={onEmojiToggle}
                            emojiTip={t('room.emoji.title')}
                            tipClassName={tipAboveOnlyClass}
                            onSend={onSend}
                            disabled={disabled}
                            banInfo={banInfo}
                            mentionUsers={mentionUsers}
                            isMobile={false}
                            onCommand={onCommand}
                            chatDisabled={chatDisabled}
                            isSuperAdmin={isSuperAdmin}
                            onEmojiClick={emojiInsertRef}
                            emojiItems={emojiDefaultItems}
                        />
                    </div>
                </div>
                {emojiOpen && emojiMode === 'desktop' && (
                    <EmojiPanel
                        panelRef={emojiPanelRef}
                        anchorRef={emojiBtnRef as React.RefObject<HTMLElement>}
                        boundsRef={chatCardRef as React.RefObject<HTMLElement>}
                        avoidRef={chatInputBarRef as React.RefObject<HTMLElement>}
                        variant="desktop"
                        t={t}
                        emojiTab={emojiTab}
                        setEmojiTab={setEmojiTab}
                        items={emojiDefaultItems}
                        emojiClosing={emojiClosing}
                        emojiEntering={emojiEntering}
                        onClose={onEmojiClose}
                        onEmojiClick={handleEmojiClick}
                    />
                )}
            </>
        )
    }

    // Mobile variant
    return (
        <>
            <div className="relative flex flex-col gap-2">
                {showGiftButton && (
                    <div className="flex items-center justify-start gap-2">
                        <button
                            className={`w-9 h-9 rounded-full inline-flex items-center justify-center hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors ${tipAboveOnlyClass}`}
                            aria-label={t('room.giftModal.title')}
                            type="button"
                            onClick={onGiftClick}
                            tip={t('room.giftModal.title')}
                        >
                            <FiGift className="w-5 h-5 text-gray-600 dark:text-gray-300" />
                        </button>
                    </div>
                )}
                <div className="flex items-center gap-2">
                    <div className="flex-1 min-w-0 px-2">
                        <WriteBar
                            writeAreaRef={chatWriteAreaRef}
                            draft={draft}
                            setDraft={setDraft}
                            placeholder={placeholder}
                            emojiBtnRef={emojiBtnRef}
                            onEmojiToggle={onEmojiToggle}
                            emojiTip={t('room.emoji.title')}
                            banInfo={banInfo}
                            tipClassName={tipAboveOnlyClass}
                            onSend={onSend}
                            disabled={disabled}
                            mentionUsers={mentionUsers}
                            isMobile={true}
                            onCommand={onCommand}
                            chatDisabled={chatDisabled}
                            isSuperAdmin={isSuperAdmin}
                            onEmojiClick={emojiInsertRef}
                            emojiItems={emojiDefaultItems}
                        />
                    </div>
                </div>

                {emojiOpen && emojiMode === 'mobile' && (
                    <EmojiPanel
                        panelRef={emojiPanelRef}
                        anchorRef={emojiBtnRef as React.RefObject<HTMLElement>}
                        boundsRef={chatCardRef as React.RefObject<HTMLElement>}
                        avoidRef={chatInputBarRef as React.RefObject<HTMLElement>}
                        variant="mobile"
                        t={t}
                        emojiTab={emojiTab}
                        setEmojiTab={setEmojiTab}
                        items={emojiDefaultItems}
                        emojiClosing={emojiClosing}
                        emojiEntering={emojiEntering}
                        onClose={onEmojiClose}
                        onEmojiClick={handleEmojiClick}
                    />
                )}
            </div>
        </>
    )
}