// src/components/ChatArea.js
import React, { useState, useRef, useEffect } from "react";
import ChatWindow from "./ChatWindow";

const ChatArea = ({ chatHistory, onSendMessage, isProcessing }) => {
  const [inputValue, setInputValue] = useState("");
  const inputRef = useRef(null);

  const handleSendMessage = (e) => {
    e.preventDefault();
    if (inputValue.trim() !== "") {
      onSendMessage(inputValue);
      setInputValue("");
    }
  };

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, [isProcessing]);

  return (
    <div className="flex flex-col h-full">
      {/* Chat history display area */}
      <div className="flex-grow overflow-y-auto mb-4">
        <ChatWindow chatHistory={chatHistory} />
      </div>

      {/* Message input and send button area */}
      <form onSubmit={handleSendMessage} className="flex flex-grow items-center space-x-2">
        <input
          ref={inputRef}
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          disabled={isProcessing}
          className="flex-grow p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500"
          placeholder={isProcessing ? "AI is thinking..." : "Type a message..."}
        />
        <button
            type="submit"
            disabled={isProcessing}
            className={`p-3 rounded-lg text-white font-bold transition-colors flex-shrink-0 ${ // Add flex-shrink-0 here
            isProcessing
                ? "bg-gray-400 dark:bg-gray-600 cursor-not-allowed"
                : "bg-indigo-600 hover:bg-indigo-700"
            }`}
        >
          Send
        </button>
      </form>
    </div>
  );
};

export default ChatArea;