'use client'

import { useState } from 'react'
import Image from 'next/image'
import { FiUser } from 'react-icons/fi'
import { useTranslation } from 'react-i18next'

interface CommentInputProps {
    onSubmit?: (content: string) => Promise<void>
    placeholder?: string
    disabled?: boolean
    userAvatar?: string | null
    isLoggedIn?: boolean
}

export default function CommentInput({
    onSubmit,
    placeholder,
    disabled = false,
    userAvatar,
    isLoggedIn = false
}: CommentInputProps) {
    const { t } = useTranslation()
    const [commentText, setCommentText] = useState('')
    const [isSubmitting, setIsSubmitting] = useState(false)

    const isDisabled = !isLoggedIn || disabled || isSubmitting
    const displayPlaceholder = !isLoggedIn ? t('catch.comment.loginRequired') : (placeholder || t('catch.postComment'))

    const handleSubmit = async () => {
        if (!commentText.trim() || !onSubmit || isSubmitting || !isLoggedIn) return

        setIsSubmitting(true)
        try {
            await onSubmit(commentText.trim())
            setCommentText('')
        } catch (error) {
            console.error('Failed to submit comment:', error)
        } finally {
            setIsSubmitting(false)
        }
    }

    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key === 'Enter' && !e.shiftKey && isLoggedIn) {
            e.preventDefault()
            handleSubmit()
        }
    }

    return (
        <div className="flex items-center gap-2 md:gap-3">
            <div className="relative w-8 h-8 md:w-9 md:h-9 rounded-full overflow-hidden bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 flex-shrink-0">
                {isLoggedIn && userAvatar ? (
                    <Image
                        src={userAvatar}
                        alt="User avatar"
                        fill
                        className="pointer-events-none"
                        unoptimized
                    />
                ) : (
                    <div className="absolute inset-0 flex items-center justify-center">
                        <FiUser className="w-4 h-4 text-gray-400" />
                    </div>
                )}
            </div>
            <div className="flex-1 min-w-0 flex flex-nowrap items-center gap-1 md:gap-2 overflow-hidden">
                <input
                    type="text"
                    value={commentText}
                    onChange={(e) => {
                        if (isLoggedIn) {
                            setCommentText(e.target.value)
                        }
                    }}
                    onKeyDown={handleKeyDown}
                    placeholder={displayPlaceholder}
                    disabled={isDisabled}
                    className="flex-1 min-w-0 px-0 py-2 md:py-2.5 border-0 border-b-2 border-gray-300 dark:border-gray-600 text-xs md:text-sm text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:border-b-2 focus:border-gray-500 dark:focus:border-gray-400 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-transparent"
                />
                <button
                    onClick={handleSubmit}
                    disabled={!commentText.trim() || isDisabled}
                    className="flex-shrink-0 min-w-[88px] h-[34px] md:h-[42px] px-4 py-2 md:py-2.5 rounded-lg text-xs md:text-sm font-medium border border-[#d5d7dc] dark:border-gray-700 text-gray-900 dark:text-white hover:bg-[rgba(145,150,161,0.1)] active:bg-[rgba(23,25,28,0.3)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                    {isSubmitting ? t('catch.comment.sending') : t('catch.comment.send')}
                </button>
            </div>
        </div>
    )
}