spotlightcam/frontend/src/pages/EventChatPage.jsx

import { useState, useRef, useEffect } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import Layout from '../components/layout/Layout';
import { useAuth } from '../contexts/AuthContext';
import { Send, UserPlus, Loader2, LogOut, AlertTriangle, QrCode } from 'lucide-react';
import { connectSocket, disconnectSocket, getSocket } from '../services/socket';
import { eventsAPI } from '../services/api';

const EventChatPage = () => {
  const { slug } = useParams();
  const { user } = useAuth();
  const navigate = useNavigate();
  const [event, setEvent] = useState(null);
  const [isParticipant, setIsParticipant] = useState(false);
  const [loading, setLoading] = useState(true);
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');
  const [activeUsers, setActiveUsers] = useState([]);
  const [isConnected, setIsConnected] = useState(false);
  const [loadingOlder, setLoadingOlder] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [showLeaveModal, setShowLeaveModal] = useState(false);
  const [isLeaving, setIsLeaving] = useState(false);
  const messagesEndRef = useRef(null);
  const messagesContainerRef = useRef(null);

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

  // Fetch event data and check participation
  useEffect(() => {
    const fetchEvent = async () => {
      try {
        setLoading(true);

        // Get all events with participation info
        const allEvents = await eventsAPI.getAll();
        const eventData = allEvents.find(e => e.slug === slug);

        if (eventData) {
          setEvent(eventData);
          setIsParticipant(eventData.isJoined);
        } else {
          setEvent(null);
          setIsParticipant(false);
        }
      } catch (err) {
        console.error('Error loading event:', err);
        setEvent(null);
        setIsParticipant(false);
      } finally {
        setLoading(false);
      }
    };

    fetchEvent();
  }, [slug]);

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

  useEffect(() => {
    if (!event) return;

    // Connect to Socket.IO
    const socket = connectSocket();

    if (!socket) {
      console.error('Failed to connect to socket');
      return;
    }

    // Socket event listeners
    socket.on('connect', () => {
      setIsConnected(true);
      // Join event room
      socket.emit('join_event_room', { slug });
    });

    socket.on('disconnect', () => {
      setIsConnected(false);
    });

    // Receive message history (initial 20 messages)
    socket.on('message_history', (history) => {
      setMessages(history);
      setHasMore(history.length === 20);
    });

    // Receive new messages
    socket.on('event_message', (message) => {
      setMessages((prev) => [...prev, message]);
    });

    // Receive active users list
    socket.on('active_users', (users) => {
      // Filter out duplicates and current user
      const uniqueUsers = users
        .filter((u, index, self) =>
          index === self.findIndex((t) => t.userId === u.userId)
        )
        .filter((u) => u.userId !== user.id);
      setActiveUsers(uniqueUsers);
    });

    // User joined notification
    socket.on('user_joined', (userData) => {
      console.log(`${userData.username} joined the room`);
    });

    // User left notification
    socket.on('user_left', (userData) => {
      console.log(`${userData.username} left the room`);
    });

    // Cleanup
    return () => {
      socket.emit('leave_event_room');
      socket.off('connect');
      socket.off('disconnect');
      socket.off('message_history');
      socket.off('event_message');
      socket.off('active_users');
      socket.off('user_joined');
      socket.off('user_left');
    };
  }, [event, slug, user.id]);

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

    const socket = getSocket();
    if (!socket || !socket.connected) {
      alert('Not connected to chat server');
      return;
    }

    // Send message via Socket.IO
    socket.emit('send_event_message', {
      content: newMessage,
    });

    setNewMessage('');
  };

  const loadOlderMessages = async () => {
    if (loadingOlder || !hasMore || messages.length === 0) return;

    setLoadingOlder(true);
    try {
      const oldestMessageId = messages[0].id;
      const response = await eventsAPI.getMessages(slug, oldestMessageId, 20);

      if (response.data.length > 0) {
        // Save current scroll position
        const container = messagesContainerRef.current;
        const oldScrollHeight = container.scrollHeight;
        const oldScrollTop = container.scrollTop;

        // Prepend older messages
        setMessages((prev) => [...response.data, ...prev]);
        setHasMore(response.hasMore);

        // Restore scroll position (adjust for new content)
        setTimeout(() => {
          const newScrollHeight = container.scrollHeight;
          container.scrollTop = oldScrollTop + (newScrollHeight - oldScrollHeight);
        }, 0);
      } else {
        setHasMore(false);
      }
    } catch (error) {
      console.error('Failed to load older messages:', error);
    } finally {
      setLoadingOlder(false);
    }
  };

  const handleMatchWith = (userId) => {
    // TODO: Implement match request
    alert(`Match request sent to user!`);
    setTimeout(() => {
      navigate(`/matches/1/chat`);
    }, 1000);
  };

  const handleLeaveEvent = async () => {
    try {
      setIsLeaving(true);
      await eventsAPI.leave(slug);

      // Disconnect socket
      const socket = getSocket();
      if (socket) {
        socket.emit('leave_event_room');
      }

      // Redirect to events page
      navigate('/events');
    } catch (error) {
      console.error('Failed to leave event:', error);
      alert('Failed to leave event. Please try again.');
    } finally {
      setIsLeaving(false);
      setShowLeaveModal(false);
    }
  };

  // Infinite scroll - detect scroll to top
  useEffect(() => {
    const container = messagesContainerRef.current;
    if (!container) return;

    const handleScroll = () => {
      if (container.scrollTop < 100 && !loadingOlder && hasMore) {
        loadOlderMessages();
      }
    };

    container.addEventListener('scroll', handleScroll);
    return () => container.removeEventListener('scroll', handleScroll);
  }, [loadingOlder, hasMore, messages]);

  if (loading) {
    return (
      <Layout>
        <div className="max-w-4xl mx-auto flex items-center justify-center min-h-[400px]">
          <div className="flex flex-col items-center gap-3">
            <Loader2 className="w-12 h-12 animate-spin text-primary-600" />
            <p className="text-gray-600">Loading event...</p>
          </div>
        </div>
      </Layout>
    );
  }

  if (!event) {
    return (
      <Layout>
        <div className="max-w-4xl mx-auto">
          <div className="bg-red-50 border border-red-200 rounded-md p-4 text-red-700">
            Event not found
          </div>
        </div>
      </Layout>
    );
  }

  // Check if user is participant
  if (!isParticipant) {
    return (
      <Layout>
        <div className="max-w-4xl mx-auto">
          <div className="bg-white rounded-lg shadow-md p-8">
            <div className="text-center">
              <div className="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <QrCode className="w-8 h-8 text-amber-600" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 mb-2">
                Check-in Required
              </h2>
              <p className="text-gray-600 mb-6">
                You need to check in at the event venue by scanning the QR code to access this chat.
              </p>

              <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
                <p className="text-sm text-amber-800 font-medium mb-1">
                  {event.name}
                </p>
                <p className="text-sm text-amber-700">
                  {event.location}
                </p>
              </div>

              <div className="flex gap-3 justify-center">
                <Link
                  to="/events"
                  className="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
                >
                  Back to Events
                </Link>
                {import.meta.env.DEV && (
                  <Link
                    to={`/events/${slug}/details`}
                    className="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
                  >
                    View QR Code (dev)
                  </Link>
                )}
              </div>
            </div>
          </div>
        </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 className="mt-2">
              <span className={`text-xs px-2 py-1 rounded ${isConnected ? 'bg-green-500' : 'bg-red-500'}`}>
                {isConnected ? '● Connected' : '● Disconnected'}
              </span>
            </div>
          </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>
              {activeUsers.length === 0 && (
                <p className="text-sm text-gray-500">No other users online</p>
              )}
              <div className="space-y-2">
                {activeUsers.map((activeUser) => (
                  <div
                    key={activeUser.userId}
                    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>
                      </div>
                    </div>
                    <button
                      onClick={() => handleMatchWith(activeUser.userId)}
                      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 ref={messagesContainerRef} className="flex-1 overflow-y-auto p-4 space-y-4">
                {/* Loading older messages indicator */}
                {loadingOlder && (
                  <div className="flex justify-center py-2">
                    <Loader2 className="w-5 h-5 animate-spin text-primary-600" />
                  </div>
                )}

                {messages.length === 0 && (
                  <div className="text-center text-gray-500 py-8">
                    No messages yet. Start the conversation!
                  </div>
                )}
                {messages.map((message) => {
                  const isOwnMessage = message.userId === 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.createdAt).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..."
                    disabled={!isConnected}
                    className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50"
                  />
                  <button
                    type="submit"
                    disabled={!isConnected}
                    className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50"
                  >
                    <Send className="w-5 h-5" />
                  </button>
                </form>
              </div>
            </div>
          </div>

          {/* Leave Event Button */}
          <div className="mt-4 flex justify-center">
            <button
              onClick={() => setShowLeaveModal(true)}
              className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium"
            >
              <LogOut size={16} />
              Leave Event
            </button>
          </div>
        </div>

        {/* Leave Confirmation Modal */}
        {showLeaveModal && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
            <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
                  <AlertTriangle className="text-red-600" size={24} />
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-gray-900">Leave Event?</h3>
                  <p className="text-sm text-gray-600">This action cannot be undone</p>
                </div>
              </div>

              <p className="text-gray-700 mb-6">
                Are you sure you want to leave <strong>{event.name}</strong>?
                You will need to scan the QR code again to rejoin.
              </p>

              <div className="flex gap-3">
                <button
                  onClick={() => setShowLeaveModal(false)}
                  disabled={isLeaving}
                  className="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium disabled:opacity-50"
                >
                  Cancel
                </button>
                <button
                  onClick={handleLeaveEvent}
                  disabled={isLeaving}
                  className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium disabled:opacity-50 flex items-center justify-center gap-2"
                >
                  {isLeaving ? (
                    <>
                      <Loader2 className="animate-spin" size={16} />
                      Leaving...
                    </>
                  ) : (
                    <>
                      <LogOut size={16} />
                      Leave Event
                    </>
                  )}
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </Layout>
  );
};

export default EventChatPage;