import React, { useState } from 'react';
import ChatMessage from '../components/ChatMessage';
import Sidebar from '../components/SideBarGPT';

const Chat = () => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  const handleSend = () => {
    if (input.trim()) {
      const newMessage = {
        text: input,
        timestamp: new Date().toLocaleTimeString(),
        isUser: true,
      };
      setMessages([...messages, newMessage]);

      // Simulate bot response
      setTimeout(() => {
        const botMessage = {
          text: 'Onboarding clients is a critical process that sets the tone for your relationship and ensures that the client understands and is comfortable with your services. Here\'s a detailed procedure for onboarding clients, tailored to a technology or software development company:',
          timestamp: new Date().toLocaleTimeString(),
          isUser: false,
        };
        setMessages((prevMessages) => [...prevMessages, botMessage]);
      }, 1000);

      setInput('');
    }
  };

  return (
    <div className="flex">
      <Sidebar />
      <div className="ml-64 flex-1 p-6 bg-gray-100">
        <div className="p-4 bg-white rounded-lg shadow">
          <h2 className="text-2xl font-bold mb-4">Chat</h2>
          <div className="flex flex-col h-96 bg-gray-100 rounded-lg overflow-hidden">
            <div className="flex-1 p-4 overflow-y-auto">
              {messages.map((message, index) => (
                <ChatMessage key={index} message={message} isUser={message.isUser} />
              ))}
            </div>
            <div className="flex p-4 border-t">
              <input
                type="text"
                className="flex-1 p-2 border rounded-lg"
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="Type a message..."
              />
              <button
                onClick={handleSend}
                className="ml-4 px-4 py-2 bg-blue-600 text-white rounded-lg"
              >
                Send
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Chat;