import React, { useState } from 'react';
import { Send, Phone, Video, MoreVertical } from 'lucide-react';
import { Conversation, Message, User } from '../../types';
import { useApp } from '../../context/AppContext';

interface ChatWindowProps {
  conversation: Conversation;
  messages: Message[];
  participants: User[];
}

const ChatWindow: React.FC<ChatWindowProps> = ({ conversation, messages, participants }) => {
  const [newMessage, setNewMessage] = useState('');
  const { sendMessage } = useApp();

  const handleSendMessage = () => {
    if (newMessage.trim()) {
      if (conversation.type === 'direct') {
        const receiverId = conversation.participants.find(id => id !== 1); // Assume current user is ID 1
        sendMessage(newMessage, receiverId);
      } else {
        sendMessage(newMessage, undefined, conversation.id);
      }
      setNewMessage('');
    }
  };

  const formatTime = (timestamp: Date) => {
    return new Date(timestamp).toLocaleTimeString('en-US', { 
      hour: '2-digit', 
      minute: '2-digit' 
    });
  };

  return (
    <div className="flex flex-col h-full bg-white">
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-gray-200 bg-gray-50">
        <div className="flex items-center space-x-3">
          <div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-semibold">
            {conversation.type === 'direct' 
              ? participants[0]?.name.split(' ').map(n => n[0]).join('').slice(0, 2)
              : conversation.name?.split(' ').map(n => n[0]).join('').slice(0, 2)
            }
          </div>
          <div>
            <h3 className="font-semibold text-gray-900">
              {conversation.type === 'direct' ? participants[0]?.name : conversation.name}
            </h3>
            <p className="text-sm text-gray-500">
              {conversation.type === 'direct' ? 'Direct Message' : `${participants.length} members`}
            </p>
          </div>
        </div>
        
        <div className="flex items-center space-x-2">
          <button className="p-2 hover:bg-gray-200 rounded-full transition-colors">
            <Phone className="h-5 w-5 text-gray-600" />
          </button>
          <button className="p-2 hover:bg-gray-200 rounded-full transition-colors">
            <Video className="h-5 w-5 text-gray-600" />
          </button>
          <button className="p-2 hover:bg-gray-200 rounded-full transition-colors">
            <MoreVertical className="h-5 w-5 text-gray-600" />
          </button>
        </div>
      </div>

      {/* Messages */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map((message) => {
          const sender = participants.find(p => p.id === message.senderId);
          const isCurrentUser = message.senderId === 1; // Assume current user is ID 1

          return (
            <div key={message.id} className={`flex ${isCurrentUser ? 'justify-end' : 'justify-start'}`}>
              <div className={`max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${
                isCurrentUser 
                  ? 'bg-blue-600 text-white' 
                  : 'bg-gray-200 text-gray-900'
              }`}>
                {!isCurrentUser && conversation.type === 'group' && (
                  <p className="text-xs font-medium mb-1 text-gray-600">
                    {sender?.name}
                  </p>
                )}
                <p className="text-sm">{message.content}</p>
                <p className={`text-xs mt-1 ${
                  isCurrentUser ? 'text-blue-200' : 'text-gray-500'
                }`}>
                  {formatTime(message.timestamp)}
                </p>
              </div>
            </div>
          );
        })}
      </div>

      {/* Message Input */}
      <div className="border-t border-gray-200 p-4">
        <div className="flex items-center space-x-2">
          <input
            type="text"
            value={newMessage}
            onChange={(e) => setNewMessage(e.target.value)}
            onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
            placeholder="Type a message..."
            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <button
            onClick={handleSendMessage}
            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
          >
            <Send className="h-5 w-5" />
          </button>
        </div>
      </div>
    </div>
  );
};

export default ChatWindow;