import React, { useState, useRef, useEffect } from "react";
import ChatWindow from "./ChatWindow";
import './ChatArea.css';

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

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

  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSendMessage(e);
    }
  };

  // Scroll chat to bottom on new message
  useEffect(() => {
    if (chatScrollRef.current) {
      chatScrollRef.current.scrollTop = chatScrollRef.current.scrollHeight;
    }
  }, [chatHistory]);

  return (
    <div className="flex flex-col chat-area-fixed-height">
      {/* Scrollable ChatWindow */}
      <div ref={chatScrollRef} className="flex-grow overflow-y-auto">
        <ChatWindow chatHistory={chatHistory} />
      </div>

      {/* Sticky Input */}
      <div className="p-2 bg-transparent sticky bottom-0 left-0 z-10">
        <form onSubmit={handleSendMessage} className="flex items-center space-x-2">
          <textarea
            ref={inputRef}
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            onKeyDown={handleKeyDown}
            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..."}
          ></textarea>
          <button
            type="submit"
            disabled={isProcessing}
            className={`p-3 rounded-lg text-white font-bold transition-colors flex-shrink-0 ${
              isProcessing
                ? "bg-gray-400 dark:bg-gray-600 cursor-not-allowed"
                : "bg-indigo-600 hover:bg-indigo-700"
            }`}
          >
            Send
          </button>
        </form>
      </div>
    </div>
  );
};

export default ChatArea;