import { useState, useRef, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import Layout from '../components/layout/Layout';
import { useAuth } from '../contexts/AuthContext';
import { mockEvents } from '../mocks/events';
import { mockEventMessages } from '../mocks/messages';
import { mockUsers } from '../mocks/users';
import { Send, UserPlus } from 'lucide-react';

const EventChatPage = () => {
  const { eventId } = useParams();
  const { user } = useAuth();
  const navigate = useNavigate();
  const [messages, setMessages] = useState(mockEventMessages);
  const [newMessage, setNewMessage] = useState('');
  const [activeUsers, setActiveUsers] = useState(mockUsers.slice(1, 5));
  const messagesEndRef = useRef(null);

  const event = mockEvents.find(e => e.id === parseInt(eventId));

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  const handleSendMessage = (e) => {
    e.preventDefault();
    if (!newMessage.trim()) return;

    const message = {
      id: messages.length + 1,
      room_id: parseInt(eventId),
      user_id: user.id,
      username: user.username,
      avatar: user.avatar,
      content: newMessage,
      type: 'text',
      created_at: new Date().toISOString(),
    };

    setMessages([...messages, message]);
    setNewMessage('');
  };

  const handleMatchWith = (userId) => {
    // Mockup - in the future will be WebSocket request
    alert(`Match request sent to user!`);
    // Simulate acceptance after 1 second
    setTimeout(() => {
      navigate(`/matches/1/chat`);
    }, 1000);
  };

  if (!event) {
    return (
      <Layout>
        <div className="text-center">Event not found</div>
      </Layout>
    );
  }

  return (
    <Layout>
      <div className="max-w-6xl mx-auto">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          {/* Header */}
          <div className="bg-primary-600 text-white p-4">
            <h2 className="text-2xl font-bold">{event.name}</h2>
            <p className="text-primary-100 text-sm">{event.location}</p>
          </div>

          <div className="flex h-[calc(100vh-280px)]">
            {/* Active Users Sidebar */}
            <div className="w-64 border-r bg-gray-50 p-4 overflow-y-auto">
              <h3 className="font-semibold text-gray-900 mb-4">
                Active users ({activeUsers.length})
              </h3>
              <div className="space-y-2">
                {activeUsers.map((activeUser) => (
                  <div
                    key={activeUser.id}
                    className="flex items-center justify-between p-2 hover:bg-gray-100 rounded-lg"
                  >
                    <div className="flex items-center space-x-2">
                      <img
                        src={activeUser.avatar}
                        alt={activeUser.username}
                        className="w-8 h-8 rounded-full"
                      />
                      <div>
                        <p className="text-sm font-medium text-gray-900">
                          {activeUser.username}
                        </p>
                        <p className="text-xs text-gray-500">
                          ⭐ {activeUser.rating}
                        </p>
                      </div>
                    </div>
                    <button
                      onClick={() => handleMatchWith(activeUser.id)}
                      className="p-1 text-primary-600 hover:bg-primary-50 rounded"
                      title="Connect"
                    >
                      <UserPlus className="w-4 h-4" />
                    </button>
                  </div>
                ))}
              </div>
            </div>

            {/* Chat Area */}
            <div className="flex-1 flex flex-col">
              {/* Messages */}
              <div className="flex-1 overflow-y-auto p-4 space-y-4">
                {messages.map((message) => {
                  const isOwnMessage = message.user_id === user.id;
                  return (
                    <div
                      key={message.id}
                      className={`flex ${isOwnMessage ? 'justify-end' : 'justify-start'}`}
                    >
                      <div className={`flex items-start space-x-2 max-w-md ${isOwnMessage ? 'flex-row-reverse space-x-reverse' : ''}`}>
                        <img
                          src={message.avatar}
                          alt={message.username}
                          className="w-8 h-8 rounded-full"
                        />
                        <div>
                          <div className="flex items-baseline space-x-2 mb-1">
                            <span className="text-sm font-medium text-gray-900">
                              {message.username}
                            </span>
                            <span className="text-xs text-gray-500">
                              {new Date(message.created_at).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
                            </span>
                          </div>
                          <div
                            className={`rounded-lg px-4 py-2 ${
                              isOwnMessage
                                ? 'bg-primary-600 text-white'
                                : 'bg-gray-100 text-gray-900'
                            }`}
                          >
                            {message.content}
                          </div>
                        </div>
                      </div>
                    </div>
                  );
                })}
                <div ref={messagesEndRef} />
              </div>

              {/* Message Input */}
              <div className="border-t p-4">
                <form onSubmit={handleSendMessage} className="flex space-x-2">
                  <input
                    type="text"
                    value={newMessage}
                    onChange={(e) => setNewMessage(e.target.value)}
                    placeholder="Write a message..."
                    className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500"
                  />
                  <button
                    type="submit"
                    className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
                  >
                    <Send className="w-5 h-5" />
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default EventChatPage;