import { useState, useRef, useEffect } from 'react'
import { FaPaperPlane, FaMicrophone, FaStop } from 'react-icons/fa'

const ChatInterface = ({ language }) => {
  const [messages, setMessages] = useState([
    {
      id: 1,
      text: language === 'fa' 
        ? 'سلام! من GhadirSync-AI هستم. چگونه می‌توانم به شما کمک کنم؟' 
        : 'Hello! I am GhadirSync-AI. How can I help you?',
      sender: 'bot'
    }
  ])
  const [input, setInput] = useState('')
  const [isListening, setIsListening] = useState(false)
  const messagesEndRef = useRef(null)

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }

  useEffect(() => {
    scrollToBottom()
  }, [messages])

  const handleSend = () => {
    if (!input.trim()) return

    const userMessage = {
      id: messages.length + 1,
      text: input,
      sender: 'user'
    }

    setMessages([...messages, userMessage])
    setInput('')

    // Simulate bot response
    setTimeout(() => {
      const botMessage = {
        id: messages.length + 2,
        text: language === 'fa' 
          ? 'پیام شما دریافت شد. در حال پردازش درخواست...' 
          : 'Message received. Processing your request...',
        sender: 'bot'
      }
      setMessages(prev => [...prev, botMessage])
    }, 1000)
  }

  const toggleListening = () => {
    setIsListening(!isListening)
    // Here you would integrate with Web Speech API
  }

  return (
    <div className="bg-white rounded-lg shadow-md p-4">
      <div className="h-96 overflow-y-auto mb-4 space-y-4">
        {messages.map((message) => (
          <div 
            key={message.id} 
            className={`flex ${message.sender === 'user' ? 'justify-start' : 'justify-end'}`}
          >
            <div 
              className={`max-w-xs md:max-w-md lg:max-w-lg rounded-lg p-3 ${message.sender === 'user' 
                ? 'bg-blue-100 text-blue-900' 
                : 'bg-gray-200 text-gray-900'}`}
            >
              {message.text}
            </div>
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>

      <div className="flex items-center">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && handleSend()}
          placeholder={language === 'fa' ? 'پیام خود را بنویسید...' : 'Type your message...'}
          className="flex-1 p-2 border rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button
          onClick={toggleListening}
          className={`px-3 py-2 ${isListening ? 'bg-red-500' : 'bg-gray-500'} text-white`}
        >
          {isListening ? <FaStop /> : <FaMicrophone />}
        </button>
        <button
          onClick={handleSend}
          className="px-4 py-2 bg-blue-600 text-white rounded-r hover:bg-blue-700"
        >
          <FaPaperPlane />
        </button>
      </div>
    </div>
  )
}

export default ChatInterface