import React, { useState, useRef, useEffect } from 'react';
import ResizablePanel from './ResizablePanel';

interface Message {
  type: 'user' | 'ai';
  text: string;
  timestamp: Date;
}

const AIPanel: React.FC = () => {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [inputText, setInputText] = useState('');
  const [messages, setMessages] = useState<Message[]>([
    {
      type: 'ai',
      text: 'Hello! I\'m your AI assistant. How can I help you with the orchestration portal?',
      timestamp: new Date(),
    },
  ]);
  const chatContainerRef = useRef<HTMLDivElement>(null);

  const sendMessage = () => {
    if (!inputText.trim()) return;
    
    setMessages((prev) => [
      ...prev,
      {
        type: 'user',
        text: inputText,
        timestamp: new Date(),
      },
    ]);
    
    setTimeout(() => {
      setMessages((prev) => [
        ...prev,
        {
          type: 'ai',
          text: `I understand you're asking about "${inputText}". This is a placeholder response. In a real implementation, this would connect to an AI service.`,
          timestamp: new Date(),
        },
      ]);
    }, 500);
    
    setInputText('');
  };

  useEffect(() => {
    if (chatContainerRef.current) {
      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
    }
  }, [messages]);

  const formatTime = (date: Date): string => {
    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  };

  return (
    <ResizablePanel
      position="right"
      defaultSize={300}
      minSize={200}
      maxSize={600}
      collapsed={isCollapsed}
      onCollapsedChange={setIsCollapsed}
    >
      <div className="ai-panel">
        <div className="ai-header">
          <h2 className="text-xl font-bold">
            <i className="fas fa-robot mr-2"></i>
            AI Assistant
          </h2>
        </div>
        
        <div className="ai-content">
          <div ref={chatContainerRef} className="ai-chat">
            {messages.map((message, index) => (
              <div key={index} className={`ai-message ${message.type}`}>
                <div className="message-avatar">
                  <i className={message.type === 'user' ? 'fas fa-user' : 'fas fa-robot'}></i>
                </div>
                <div className="message-content">
                  <div className="message-text">{message.text}</div>
                  <div className="message-time">{formatTime(message.timestamp)}</div>
                </div>
              </div>
            ))}
          </div>
          
          <div className="ai-input-area">
            <label htmlFor="ai-input-field" className="sr-only">Ask AI assistant</label>
            <input
              id="ai-input-field"
              name="ai-message"
              value={inputText}
              onChange={(e) => setInputText(e.target.value)}
              onKeyUp={(e) => e.key === 'Enter' && sendMessage()}
              type="text"
              placeholder="Ask AI assistant..."
              className="ai-input"
              aria-label="Ask AI assistant"
            />
            <button 
              onClick={sendMessage} 
              className="ai-send-btn"
              title="Send message"
              aria-label="Send message to AI assistant"
              type="button"
            >
              <span className="sr-only">Send message</span>
              <i className="fas fa-paper-plane" aria-hidden="true"></i>
            </button>
          </div>
        </div>
      </div>
    </ResizablePanel>
  );
};

export default AIPanel;

