import { useState, type KeyboardEvent } from 'react'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Send } from 'lucide-react'
import type { ChatMode } from '@/types/chat'
import { cn } from '@/lib/utils'

interface ChatInputProps {
  onSend: (message: string) => void
  disabled: boolean
  mode: ChatMode
  placeholder?: string
}

const ChatInput = ({ onSend, disabled, mode, placeholder = 'Ask a question...' }: ChatInputProps) => {
  const [message, setMessage] = useState('')

  const handleSend = () => {
    if (message.trim() && !disabled) {
      onSend(message)
      setMessage('')
    }
  }

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

  const modeFocusColors = {
    general: 'focus-visible:ring-blue-500',
    strategy: 'focus-visible:ring-purple-500',
  }

  const modeButtonColors = {
    general: 'bg-blue-500 hover:bg-blue-600',
    strategy: 'bg-purple-500 hover:bg-purple-600',
  }

  return (
    <div className="flex items-center gap-2">
      <Input
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        onKeyDown={handleKeyDown}
        placeholder={placeholder}
        disabled={disabled}
        className={cn(
          'flex-1 bg-slate-700 border-slate-600 text-white placeholder:text-slate-400',
          modeFocusColors[mode]
        )}
      />
      <Button
        onClick={handleSend}
        disabled={disabled || !message.trim()}
        className={cn('rounded-xl', modeButtonColors[mode])}
      >
        <Send className="h-4 w-4" />
      </Button>
    </div>
  )
}

export default ChatInput