import React, {
    useState,
    useRef,
    useCallback,
    useMemo,
    forwardRef,
    useEffect,
    useId,
} from 'react'
import { ChatInputProps, TopQuery } from './types'
import Block from '../Primitives/Block/Block'
import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
import Button from '../Button/Button'
import { ButtonType, ButtonSize, ButtonSubType } from '../Button/types'
import Text from '../Text/Text'
import { Paperclip } from 'lucide-react'
import { ChatInputTokensType } from './chatInput.tokens'
import { FOUNDATION_THEME } from '../../tokens'
import {
    handleAutoResize,
    isValidMessageLength,
    filterDuplicateFiles,
} from './utils'
import PrimitiveInput from '../Primitives/PrimitiveInput/PrimitiveInput'
import { addSnackbar, SnackbarVariant } from '../Snackbar'
import { BREAKPOINTS } from '../../breakpoints/breakPoints'
import { useBreakpoints } from '../../hooks/useBreakPoints'
import MobileChatInput from './MobileChatInput'
import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
import PrimitiveTextarea from '../Primitives/PrimitiveTextArea'
import AttachmentFile from './AttachmentFile'

export { getDocIcon } from './getDocIcon'

const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
    (
        {
            value = '',
            slot1,
            slot2,
            onChange,
            onAttachFiles,
            onFileRemove,
            onFileClick,
            placeholder = 'Type a message...',
            disabled = false,
            maxLength,
            autoResize = true,
            attachedFiles = [],
            topQueries = [],
            onTopQuerySelect,
            topQueriesMaxHeight = 200,
            attachButtonIcon,
            overflowMenuProps,
            'aria-label': ariaLabel,
            'aria-describedby': ariaDescribedBy,
            ...textAreaProps
        },
        ref
    ) => {
        const tokens = useResponsiveTokens<ChatInputTokensType>('CHAT_INPUT')
        const textareaRef = useRef<HTMLTextAreaElement>(null)
        const fileInputRef = useRef<HTMLInputElement>(null)
        const containerRef = useRef<HTMLDivElement>(null!)
        const [isTextareaFocused, setIsTextareaFocused] = useState(false)
        const [focusedQueryIndex, setFocusedQueryIndex] = useState<number>(-1)

        const generatedId = useId()
        const chatInputId = `chat-input-${generatedId}`
        const topQueriesId = `chat-input-queries-${generatedId}`
        const characterCountId = `chat-input-count-${generatedId}`
        const fileInputLabelId = `chat-input-file-label-${generatedId}`

        const textareaElement =
            (ref as React.RefObject<HTMLTextAreaElement>) || textareaRef

        const { innerWidth } = useBreakpoints()
        const isMobile = innerWidth < BREAKPOINTS.lg

        const handleTextareaChange = useCallback(
            (e: React.ChangeEvent<HTMLTextAreaElement>) => {
                const newValue = e.target.value
                if (!isValidMessageLength(newValue, maxLength)) return

                onChange?.(newValue)
                handleAutoResize(textareaElement.current, autoResize)
            },
            [onChange, maxLength, autoResize, textareaElement]
        )

        const handleAttachClick = useCallback(() => {
            if (disabled) return
            fileInputRef.current?.click()
        }, [disabled])

        const handleFileInputChange = useCallback(
            (e: React.ChangeEvent<HTMLInputElement>) => {
                const files = Array.from(e.target.files || [])
                if (files.length > 0) {
                    // Filter out duplicate files
                    const { newFiles, duplicateFiles } = filterDuplicateFiles(
                        files,
                        attachedFiles
                    )

                    // Show snackbar if duplicates were found
                    if (duplicateFiles.length > 0) {
                        const duplicateCount = duplicateFiles.length
                        const message =
                            duplicateCount === 1
                                ? `File "${duplicateFiles[0]}" is already attached`
                                : `${duplicateCount} duplicate file(s) were not added`

                        addSnackbar({
                            header: 'Duplicate File',
                            description: message,
                            variant: SnackbarVariant.WARNING,
                            duration: 3000,
                        })
                    }

                    // Only call onAttachFiles with non-duplicate files
                    if (newFiles.length > 0) {
                        onAttachFiles?.(newFiles)
                    }
                }
                // Reset the input value to allow selecting the same file again
                e.target.value = ''
            },
            [onAttachFiles, attachedFiles]
        )

        const handleTopQueryClick = useCallback(
            (query: TopQuery) => {
                onTopQuerySelect?.(query)
                setIsTextareaFocused(false)
                setFocusedQueryIndex(-1)
            },
            [onTopQuerySelect]
        )

        const handleTopQueryKeyDown = useCallback(
            (e: React.KeyboardEvent, query: TopQuery) => {
                if (disabled) return

                switch (e.key) {
                    case 'Enter':
                    case ' ':
                        e.preventDefault()
                        handleTopQueryClick(query)
                        break
                    case 'ArrowDown':
                        e.preventDefault()
                        setFocusedQueryIndex((prev) =>
                            prev < topQueries.length - 1 ? prev + 1 : prev
                        )
                        break
                    case 'ArrowUp':
                        e.preventDefault()
                        setFocusedQueryIndex((prev) =>
                            prev > 0 ? prev - 1 : -1
                        )
                        break
                    case 'Escape':
                        e.preventDefault()
                        setIsTextareaFocused(false)
                        setFocusedQueryIndex(-1)
                        textareaElement.current?.focus()
                        break
                    case 'Home':
                        e.preventDefault()
                        setFocusedQueryIndex(0)
                        break
                    case 'End':
                        e.preventDefault()
                        setFocusedQueryIndex(topQueries.length - 1)
                        break
                }
            },
            [disabled, topQueries.length, handleTopQueryClick, textareaElement]
        )

        useEffect(() => {
            if (focusedQueryIndex >= 0 && topQueries.length > 0) {
                const queryElement = document.querySelector(
                    `[data-query-index="${focusedQueryIndex}"]`
                ) as HTMLElement
                queryElement?.focus()
            } else if (topQueries.length === 0) {
                setFocusedQueryIndex(-1)
            }
        }, [focusedQueryIndex, topQueries.length])

        const textareaAriaDescribedBy = useMemo(() => {
            const parts = [
                ariaDescribedBy,
                maxLength && characterCountId,
            ].filter(Boolean)
            return parts.length > 0 ? parts.join(' ') : undefined
        }, [ariaDescribedBy, maxLength, characterCountId])

        const hiddenFileInput = (
            <PrimitiveInput
                ref={fileInputRef}
                type="file"
                multiple
                onChange={handleFileInputChange}
                style={{ display: 'none' }}
                accept="image/*,.pdf,.csv,.txt,.doc,.docx"
                aria-label="Attach files"
                id={fileInputLabelId}
            />
        )

        if (isMobile) {
            return (
                <>
                    {hiddenFileInput}
                    <MobileChatInput
                        value={value}
                        onChange={onChange || (() => {})}
                        slot1={slot1}
                        slot2={slot2}
                        placeholder={placeholder}
                        attachedFiles={attachedFiles}
                        handleAttachClick={handleAttachClick}
                        onFileRemove={onFileRemove}
                        onFileClick={onFileClick}
                        overflowMenuProps={overflowMenuProps}
                        // containerRef={containerRef}
                    />
                </>
            )
        }

        return (
            <Block
                data-chatinput={placeholder || 'Message input'}
                data-status={disabled ? 'disabled' : 'enabled'}
                ref={containerRef}
                display="flex"
                flexDirection="column"
                width="100%"
                backgroundColor={
                    disabled
                        ? tokens.container.backgroundColor.disabled
                        : attachedFiles.length > 0 || slot2
                          ? FOUNDATION_THEME.colors.gray[50]
                          : tokens.container.backgroundColor.default
                }
                border={tokens.container.border.default}
                borderRadius={tokens.container.borderRadius}
                padding={tokens.container.padding}
                gap={tokens.container.gap}
                minHeight={tokens.container.minHeight}
                position="relative"
                transition={tokens.container.transition}
                cursor={disabled ? 'not-allowed' : 'default'}
                boxShadow={tokens.container.boxShadow.default}
            >
                {hiddenFileInput}
                {/* Files container */}
                {attachedFiles.length > 0 && (
                    <AttachmentFile
                        attachedFiles={attachedFiles}
                        onFileRemove={onFileRemove}
                        onFileClick={onFileClick}
                        overflowMenuProps={overflowMenuProps}
                        containerRef={containerRef}
                    />
                )}
                {slot2}
                <Block
                    borderRadius={
                        attachedFiles.length > 0 || slot2
                            ? tokens.attachmentContainer.borderRadius
                            : isTextareaFocused
                              ? tokens.attachmentContainer.borderRadius
                              : 0
                    }
                    overflow="hidden"
                >
                    <Block
                        backgroundColor={
                            attachedFiles.length > 0 || slot2
                                ? tokens.attachmentContainer.backgroundColor
                                : 'transparent'
                        }
                    >
                        <PrimitiveTextarea
                            ref={textareaElement}
                            value={value}
                            onChange={handleTextareaChange}
                            placeholder={placeholder}
                            disabled={disabled}
                            maxLength={maxLength}
                            aria-label={ariaLabel || 'Message input'}
                            aria-describedby={textareaAriaDescribedBy}
                            aria-invalid={
                                maxLength && value.length > maxLength
                                    ? true
                                    : undefined
                            }
                            id={chatInputId}
                            rows={1}
                            backgroundColor={tokens.textarea.backgroundColor}
                            color={tokens.textarea.color}
                            fontSize={tokens.textarea.fontSize}
                            paddingTop={tokens.textarea.paddingTop}
                            paddingRight={tokens.textarea.paddingRight}
                            paddingLeft={tokens.textarea.paddingLeft}
                            border={tokens.textarea.border}
                            borderRadius={tokens.textarea.borderRadius}
                            outline="none"
                            resize={tokens.textarea.resize}
                            fontFamily={tokens.textarea.fontFamily}
                            width="100%"
                            minHeight={tokens.textarea.minHeight}
                            maxHeight={tokens.textarea.maxHeight}
                            overflowY={tokens.textarea.overflowY}
                            cursor={disabled ? 'not-allowed' : 'text'}
                            style={{ lineHeight: tokens.textarea.lineHeight }}
                            onFocus={(e) => {
                                setIsTextareaFocused(true)
                                const container =
                                    e.currentTarget.parentElement!
                                        .parentElement!
                                container.style.outline = tokens.container
                                    .border.focus as string
                                container.style.boxShadow = tokens.container
                                    .boxShadow.focus as string
                            }}
                            onBlur={(e) => {
                                setIsTextareaFocused(false)
                                const container =
                                    e.currentTarget.parentElement!
                                        .parentElement!
                                container.style.boxShadow = 'none'
                                container.style.outline = 'none'
                            }}
                            {...textAreaProps}
                        />

                        <Block
                            data-element="chat-input-actions"
                            display="flex"
                            alignItems="center"
                            justifyContent={tokens.bottomActions.justifyContent}
                            paddingTop={tokens.textarea.paddingTop}
                            paddingRight={tokens.textarea.paddingRight}
                            paddingBottom={tokens.textarea.paddingBottom}
                            paddingLeft={tokens.textarea.paddingLeft}
                            gap={tokens.bottomActions.gap}
                            role="toolbar"
                            aria-label="Chat input actions"
                        >
                            <Button
                                buttonType={ButtonType.SECONDARY}
                                size={ButtonSize.SMALL}
                                subType={ButtonSubType.ICON_ONLY}
                                leadingIcon={
                                    attachButtonIcon || <Paperclip size={14} />
                                }
                                onClick={handleAttachClick}
                                disabled={disabled}
                                aria-label="Attach files"
                                aria-describedby={fileInputLabelId}
                            />

                            {slot1}
                        </Block>
                    </Block>

                    {topQueries &&
                        topQueries.length > 0 &&
                        isTextareaFocused && (
                            <Block
                                paddingTop={
                                    tokens.topQueries.container.paddingTop
                                }
                                display="flex"
                                flexDirection="column"
                                maxHeight={
                                    topQueriesMaxHeight
                                        ? `${topQueriesMaxHeight}px`
                                        : undefined
                                }
                                role="region"
                                aria-label="Suggested queries"
                                id={topQueriesId}
                            >
                                <Block
                                    backgroundColor={
                                        tokens.topQueries.header.backgroundColor
                                    }
                                    flexShrink={
                                        tokens.topQueries.header.flexShrink
                                    }
                                    paddingX={tokens.topQueries.header.paddingX}
                                >
                                    <Text
                                        color={tokens.topQueries.header.color}
                                        fontSize={
                                            tokens.topQueries.header.fontSize
                                        }
                                        fontWeight={
                                            tokens.topQueries.header.fontWeight
                                        }
                                        textTransform={
                                            tokens.topQueries.header
                                                .textTransform
                                        }
                                        id={`${topQueriesId}-label`}
                                        style={{
                                            borderTop:
                                                tokens.topQueries.container
                                                    .borderTop,
                                            paddingTop:
                                                FOUNDATION_THEME.unit[14],
                                            paddingLeft:
                                                tokens.topQueries.header
                                                    .paddingX,
                                            paddingRight:
                                                tokens.topQueries.header
                                                    .paddingX,
                                        }}
                                    >
                                        Top Queries
                                    </Text>
                                </Block>
                                <Block
                                    overflowY={
                                        tokens.topQueries.scrollContainer
                                            .overflowY
                                    }
                                    maxHeight={
                                        topQueriesMaxHeight
                                            ? `${topQueriesMaxHeight - tokens.topQueries.scrollContainer.maxHeightOffset}px`
                                            : undefined
                                    }
                                    role="listbox"
                                    aria-labelledby={`${topQueriesId}-label`}
                                    backgroundColor={
                                        tokens.topQueries.scrollContainer
                                            .backgroundColor
                                    }
                                    style={{
                                        scrollbarColor:
                                            tokens.topQueries.scrollContainer
                                                .scrollbarColor,
                                    }}
                                >
                                    {topQueries.map((query, index) => {
                                        const isFocused =
                                            focusedQueryIndex === index
                                        const itemTokens =
                                            tokens.topQueries.item
                                        return (
                                            <PrimitiveButton
                                                key={query.id}
                                                data-query-index={index}
                                                onClick={(e) => {
                                                    e.preventDefault()
                                                    handleTopQueryClick(query)
                                                }}
                                                onKeyDown={(e) =>
                                                    handleTopQueryKeyDown(
                                                        e,
                                                        query
                                                    )
                                                }
                                                disabled={disabled}
                                                tabIndex={isFocused ? 0 : -1}
                                                role="option"
                                                aria-selected={isFocused}
                                                aria-label={`Query: ${query.text}`}
                                                style={{
                                                    display: 'block',
                                                    width: '100%',
                                                    textAlign: 'left',
                                                    background: disabled
                                                        ? (itemTokens
                                                              .backgroundColor
                                                              .disabled as string)
                                                        : (itemTokens
                                                              .backgroundColor
                                                              .default as string),
                                                    border: itemTokens.border,
                                                    color: disabled
                                                        ? (itemTokens.color
                                                              .disabled as string)
                                                        : (itemTokens.color
                                                              .default as string),
                                                    fontSize:
                                                        itemTokens.fontSize,
                                                    fontWeight:
                                                        itemTokens.fontWeight,
                                                    padding: `${itemTokens.paddingY} ${itemTokens.paddingX}`,
                                                    cursor: disabled
                                                        ? 'not-allowed'
                                                        : itemTokens.cursor,
                                                    transition:
                                                        itemTokens.transition,
                                                    opacity: disabled
                                                        ? itemTokens.opacity
                                                              .disabled
                                                        : itemTokens.opacity
                                                              .default,
                                                }}
                                                onMouseEnter={(e) => {
                                                    if (!disabled) {
                                                        e.currentTarget.style.backgroundColor =
                                                            itemTokens
                                                                .backgroundColor
                                                                .hover as string
                                                        e.currentTarget.style.color =
                                                            itemTokens.color
                                                                .hover as string
                                                    }
                                                }}
                                                onMouseLeave={(e) => {
                                                    e.currentTarget.style.backgroundColor =
                                                        itemTokens
                                                            .backgroundColor
                                                            .default as string
                                                    e.currentTarget.style.color =
                                                        itemTokens.color
                                                            .default as string
                                                }}
                                            >
                                                {query.text}
                                            </PrimitiveButton>
                                        )
                                    })}
                                </Block>
                            </Block>
                        )}
                </Block>
            </Block>
        )
    }
)

ChatInput.displayName = 'ChatInput'

export default ChatInput