import React, { useState, useEffect } from 'react';
import { useAIChat } from '../contexts/AIChatContext';

export const ChatPanel: React.FC = () => {
  const { 
    activeConversation, 
    sendChatMessage, 
    loading 
  } = useAIChat();
  
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  
  // Atualiza mensagens quando conversa muda
  useEffect(() => {
    if (activeConversation) {
      setMessages(activeConversation.messages);
    }
  }, [activeConversation]);
  
  const handleSend = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!message.trim() || loading) return;
    
    const currentMessage = message;
    setMessage(''); // Limpa input imediatamente
    
    try {
      await sendChatMessage(currentMessage);
    } catch (error) {
      console.error('Erro ao enviar mensagem:', error);
      setMessage(currentMessage); // Restaura em caso de erro
    }
  };
  
  return (
    <div className="chat-panel">
      {/* Header */}
      <div className="chat-header">
        <h2>{activeConversation?.agent.name || 'Selecione um agente'}</h2>
        {activeConversation && (
          <span className="badge">
            {activeConversation.agent.type}
          </span>
        )}
      </div>
      
      {/* Mensagens */}
      <div className="messages-container">
        {messages.map((msg) => (
          <div 
            key={msg.id} 
            className={`message ${msg.role}`}
          >
            <div className="message-avatar">
              {msg.role === 'user' ? '👤' : '🤖'}
            </div>
            <div className="message-content">
              <div className="message-text">{msg.content}</div>
              <div className="message-meta">
                <span>{formatTime(msg.timestamp)}</span>
                {msg.confidence && (
                  <span>Confiança: {(msg.confidence * 100).toFixed(0)}%</span>
                )}
                {msg.sending && <span>Enviando...</span>}
              </div>
            </div>
          </div>
        ))}
        
        {loading && (
          <div className="typing-indicator">
            <span></span><span></span><span></span>
          </div>
        )}
      </div>
      
      {/* Input */}
      <form onSubmit={handleSend} className="chat-input">
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="Digite sua mensagem..."
          disabled={!activeConversation || loading}
        />
        <button 
          type="submit" 
          disabled={!message.trim() || loading}
        >
          Enviar
        </button>
      </form>
    </div>
  );
};

// Utilitário de formatação
function formatTime(date: Date): string {
  return new Intl.DateTimeFormat('pt-BR', {
    hour: '2-digit',
    minute: '2-digit'
  }).format(new Date(date));
}