frontend/src/components/message/MessagingPage.tsx

'use client';

import { useState, useRef, useEffect, useCallback } from 'react';
import Image from 'next/image';
import { useSession } from 'next-auth/react';
import { ChatHeader } from './ChatHeader';
import { MessageInput } from './MessageInput';
import { ChatDropdownMenu, type DropdownMenuItem } from './ChatDropdownMenu';
import { NewConversationModal, type ConnectedContact } from './NewConversationModal';
import { ReportUserModal } from './ReportUserModal';
import { useMessaging } from '@/hooks/useMessaging';
import { connectionRequestsService, type ConnectionRequest } from '@/services/connection-requests.service';
import { uploadService } from '@/services/upload.service';
import type { Conversation, Message, MessageType } from '@/types/messaging';

// Helper to get a valid avatar URL (must start with http://, https://, or /)
function getValidAvatarUrl(avatar: string | null | undefined): string {
  const placeholder = '/assets/icons/user-placeholder-icon.svg';
  if (!avatar) return placeholder;
  // Check if it's a valid URL format
  if (avatar.startsWith('http://') || avatar.startsWith('https://') || avatar.startsWith('/')) {
    return avatar;
  }
  // Invalid URL format (like raw storage key), use placeholder
  return placeholder;
}

// Custom scrollbar styles
const customScrollbarStyles = `
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 41, 61, 0.5);
    border-radius: 10px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 41, 61, 0.7);
  }
`;

// Helper to format date for conversation list
function formatConversationDate(dateString: string | null): string {
  if (!dateString) return '';
  const date = new Date(dateString);
  const now = new Date();
  const diffDays = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24));

  if (diffDays === 0) {
    return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
  } else if (diffDays === 1) {
    return 'Yesterday';
  } else if (diffDays < 7) {
    return date.toLocaleDateString('en-US', { weekday: 'short' });
  } else {
    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
  }
}

// Helper to format message timestamp
function formatMessageTime(dateString: string): string {
  const date = new Date(dateString);
  return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
}

// Helper to get last seen text
function formatLastSeen(lastSeenAt: string | null | undefined, isOnline: boolean): string {
  if (isOnline) return 'Online';
  if (!lastSeenAt) return 'Offline';

  const date = new Date(lastSeenAt);
  const now = new Date();
  const diffHours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60));

  if (diffHours < 1) return 'Last seen recently';
  if (diffHours < 24) return `${diffHours}h ago`;
  const diffDays = Math.floor(diffHours / 24);
  if (diffDays === 1) return 'Last seen yesterday';
  return `Last seen ${diffDays}d ago`;
}

// Avatar component with shimmer loading animation
function AvatarWithPlaceholder({ src, alt, size }: { src: string; alt: string; size: number }) {
  const [loaded, setLoaded] = useState(false);
  const placeholder = '/assets/icons/user-placeholder-icon.svg';
  const isPlaceholder = !src || src === placeholder;

  return (
    <>
      {(!src || !loaded) && (
        <div className="absolute inset-0 rounded-full shimmer-loading" />
      )}
      {src && !isPlaceholder && (
        <img
          ref={(el) => { if (el?.complete && el.naturalWidth > 0) setLoaded(true); }}
          src={src}
          alt={alt}
          className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${loaded ? 'opacity-100' : 'opacity-0'}`}
          onLoad={() => setLoaded(true)}
        />
      )}
      {src && isPlaceholder && (
        <Image
          src={placeholder}
          alt={alt}
          width={size}
          height={size}
          className="absolute inset-0 w-full h-full object-cover"
        />
      )}
    </>
  );
}

// Connected contact with avatar URL (used for both user-side agents and agent-side users)
interface ConnectedAgent {
  agentProfileId: string;
  userId?: string; // The user's ID (for agent-side contacts)
  name: string;
  avatar: string | null;
  avatarUrl: string | null;
  headline: string | null;
  email: string | null;
  city: string | null;
  state: string | null;
}

export function MessagingPage({ initialConversationId }: { initialConversationId?: string | null }) {
  const { data: session } = useSession();
  const {
    conversations,
    currentConversation,
    messages,
    isConnected,
    isLoading,
    isLoadingMessages,
    typingUsers,
    selectConversation,
    sendMessage,
    startTyping,
    stopTyping,
    loadMoreMessages,
    hasMoreMessages,
    startConversation,
    markAllAsRead,
    deleteConversation,
    clearMessages,
    toggleMute,
    toggleFavorite,
  } = useMessaging();

  const [searchQuery, setSearchQuery] = useState('');
  const [isPageMenuOpen, setIsPageMenuOpen] = useState(false);
  const [isAllMuted, setIsAllMuted] = useState(false);
  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
  const [isUploading, setIsUploading] = useState(false);
  const [showScrollButton, setShowScrollButton] = useState(false);
  const [connectedAgents, setConnectedAgents] = useState<ConnectedAgent[]>([]);
  const [isLoadingAgents, setIsLoadingAgents] = useState(false);
  const [isStartingConversation, setIsStartingConversation] = useState<string | null>(null);
  const [isComposeOpen, setIsComposeOpen] = useState(false);
  const [isReportModalOpen, setIsReportModalOpen] = useState(false);
  // Store converted avatar URLs by conversation ID
  const [conversationAvatarUrls, setConversationAvatarUrls] = useState<Record<string, string>>({});
  // Store converted file URLs by message ID (for S3-stored images/files)
  const [messageFileUrls, setMessageFileUrls] = useState<Record<string, string>>({});
  const messagesContainerRef = useRef<HTMLDivElement>(null);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const justSwitchedConversationRef = useRef(false);

  const currentUserId = session?.user?.id;
  const userRole = session?.user?.role;

  // Fetch connected users/agents (accepted connections) based on role
  useEffect(() => {
    const fetchConnectedContacts = async () => {
      if (!session || !userRole) return;

      setIsLoadingAgents(true);
      try {
        // USER sees agents, AGENT sees users
        if (userRole === 'USER') {
          const requests = await connectionRequestsService.getMyRequests('ACCEPTED');

          // Map to connected agents with avatar URLs
          const agents: ConnectedAgent[] = await Promise.all(
            requests.map(async (req) => {
              const agent = req.agentProfile;
              let avatarUrl: string | null = null;

              if (agent?.avatar) {
                try {
                  avatarUrl = await uploadService.getPresignedDownloadUrl(agent.avatar);
                } catch {
                  avatarUrl = null;
                }
              }

              return {
                agentProfileId: req.agentProfileId,
                name: agent ? `${agent.firstName || ''} ${agent.lastName || ''}`.trim() || 'Agent' : 'Agent',
                avatar: agent?.avatar || null,
                avatarUrl,
                headline: agent?.headline || null,
                email: null,
                city: agent?.city || null,
                state: agent?.state || null,
              };
            })
          );

          setConnectedAgents(agents);
        } else {
          // AGENT role — fetch accepted connections (users who connected with this agent)
          const requests = await connectionRequestsService.getReceivedRequests('ACCEPTED');

          const users: ConnectedAgent[] = await Promise.all(
            requests.map(async (req) => {
              const user = req.user;
              const profile = user?.userProfile;
              let avatarUrl: string | null = null;

              const avatarKey = profile?.avatar || user?.avatar;
              if (avatarKey) {
                try {
                  avatarUrl = await uploadService.getPresignedDownloadUrl(avatarKey);
                } catch {
                  avatarUrl = null;
                }
              }

              const fullName = profile
                ? `${profile.firstName || ''} ${profile.lastName || ''}`.trim()
                : '';

              return {
                agentProfileId: req.agentProfileId,
                userId: req.userId,
                name: fullName || user?.email || 'User',
                avatar: avatarKey || null,
                avatarUrl,
                headline: null,
                email: user?.email || null,
                city: null,
                state: null,
              };
            })
          );

          setConnectedAgents(users);
        }
      } catch (error) {
        console.error('Failed to fetch connected contacts:', error);
        setConnectedAgents([]);
      } finally {
        setIsLoadingAgents(false);
      }
    };

    fetchConnectedContacts();
  }, [session, userRole]);

  // Convert conversation avatar storage keys to presigned URLs
  useEffect(() => {
    const convertAvatarUrls = async () => {
      const newAvatarUrls: Record<string, string> = {};

      for (const conversation of conversations) {
        const avatar = conversation.otherParty?.avatar;
        if (!avatar) continue;

        // Skip if already converted or if it's already a valid URL
        if (conversationAvatarUrls[conversation.id]) {
          newAvatarUrls[conversation.id] = conversationAvatarUrls[conversation.id];
          continue;
        }

        // Check if it's already a valid URL format
        if (avatar.startsWith('http://') || avatar.startsWith('https://') || avatar.startsWith('/')) {
          newAvatarUrls[conversation.id] = avatar;
          continue;
        }

        // Convert storage key to presigned URL
        try {
          const presignedUrl = await uploadService.getPresignedDownloadUrl(avatar);
          newAvatarUrls[conversation.id] = presignedUrl;
        } catch {
          // Keep as null/undefined if conversion fails
        }
      }

      if (Object.keys(newAvatarUrls).length > 0) {
        setConversationAvatarUrls(prev => ({ ...prev, ...newAvatarUrls }));
      }
    };

    if (conversations.length > 0) {
      convertAvatarUrls();
    }
  }, [conversations]);

  // Auto-select conversation when navigated with initialConversationId
  const initialConvHandledRef = useRef<string | null>(null);
  useEffect(() => {
    if (
      initialConversationId &&
      initialConvHandledRef.current !== initialConversationId &&
      conversations.length > 0 &&
      !isLoading
    ) {
      initialConvHandledRef.current = initialConversationId;
      selectConversation(initialConversationId);
    }
  }, [initialConversationId, conversations, isLoading, selectConversation]);

  // Convert current conversation avatar when selected
  useEffect(() => {
    const convertCurrentAvatar = async () => {
      if (!currentConversation) return;

      const avatar = currentConversation.otherParty?.avatar;
      if (!avatar) return;

      // Skip if already converted
      if (conversationAvatarUrls[currentConversation.id]) return;

      // Check if it's already a valid URL format
      if (avatar.startsWith('http://') || avatar.startsWith('https://') || avatar.startsWith('/')) {
        setConversationAvatarUrls(prev => ({ ...prev, [currentConversation.id]: avatar }));
        return;
      }

      // Convert storage key to presigned URL
      try {
        const presignedUrl = await uploadService.getPresignedDownloadUrl(avatar);
        setConversationAvatarUrls(prev => ({ ...prev, [currentConversation.id]: presignedUrl }));
      } catch {
        // Keep as null/undefined if conversion fails
      }
    };

    convertCurrentAvatar();
  }, [currentConversation]);

  // Convert S3 keys to presigned download URLs for message attachments
  useEffect(() => {
    const isS3Key = (val: string) => val && !val.startsWith('http://') && !val.startsWith('https://') && !val.startsWith('/') && !val.startsWith('data:');
    const isUrl = (val: string) => val.startsWith('http://') || val.startsWith('https://');

    const convertFileUrls = async () => {
      for (const msg of messages) {
        if (msg.messageType !== 'IMAGE' && msg.messageType !== 'FILE') continue;
        if (messageFileUrls[msg.id]) continue;

        // Determine the source: fileUrl or content (some messages store S3 key in content)
        const source = msg.fileUrl || msg.content;
        if (!source) continue;

        if (isUrl(source)) {
          setMessageFileUrls(prev => ({ ...prev, [msg.id]: source }));
          continue;
        }

        if (isS3Key(source)) {
          try {
            const presignedUrl = await uploadService.getPresignedDownloadUrl(source);
            setMessageFileUrls(prev => ({ ...prev, [msg.id]: presignedUrl }));
          } catch {
            // Keep original if conversion fails
          }
        }
      }
    };

    if (messages.length > 0) {
      convertFileUrls();
    }
  }, [messages]);

  // Clear cached file URLs when switching conversations
  useEffect(() => {
    setMessageFileUrls({});
  }, [currentConversation?.id]);

  // Handle starting a new conversation — role-aware
  const handleStartConversation = useCallback(async (contactId: string) => {
    setIsStartingConversation(contactId);
    try {
      const body = userRole === 'AGENT'
        ? { userId: contactId }
        : { agentProfileId: contactId };
      const conversation = await startConversation(body);
      await selectConversation(conversation.id);
    } catch (error) {
      console.error('Failed to start conversation:', error);
    } finally {
      setIsStartingConversation(null);
    }
  }, [startConversation, selectConversation, userRole]);

  // Handle sending a message
  const handleSendMessage = useCallback(async (content: string) => {
    if (!content.trim()) return;
    await sendMessage(content);
  }, [sendMessage]);

  // Handle sending a GIF
  const handleSendGif = useCallback(async (gifUrl: string) => {
    await sendMessage(gifUrl, 'IMAGE' as MessageType, { fileUrl: gifUrl, mimeType: 'image/gif' });
  }, [sendMessage]);

  // Handle sending a file (image or document)
  const handleSendFile = useCallback(async (file: File, messageType: 'IMAGE' | 'FILE') => {
    setIsUploading(true);
    try {
      const uploaded = await uploadService.uploadMessageFile(file);
      // uploaded.url is the S3 key (not a full URL)
      const content = messageType === 'IMAGE' ? 'Sent an image' : 'Sent a file';
      await sendMessage(
        content,
        messageType as MessageType,
        {
          fileUrl: uploaded.url,
          mimeType: file.type,
          fileName: file.name,
          fileSize: file.size,
        }
      );
    } catch (error) {
      console.error('Failed to upload file:', error);
    } finally {
      setIsUploading(false);
    }
  }, [sendMessage]);

  // Handle typing events
  const handleTypingStart = useCallback(() => {
    startTyping();
  }, [startTyping]);

  const handleTypingStop = useCallback(() => {
    stopTyping();
  }, [stopTyping]);

  // Handle delete conversation with confirmation
  const handleDeleteConversation = useCallback(async () => {
    if (!currentConversation) return;
    setConfirmDeleteId(currentConversation.id);
  }, [currentConversation]);

  const confirmDelete = useCallback(async () => {
    if (!confirmDeleteId) return;
    try {
      await deleteConversation(confirmDeleteId);
    } catch (error) {
      console.error('Failed to delete conversation:', error);
    }
    setConfirmDeleteId(null);
  }, [confirmDeleteId, deleteConversation]);

  // Page header menu items
  const pageMenuItems: DropdownMenuItem[] = [
    {
      label: 'Mark All as Read',
      onClick: () => {
        markAllAsRead().catch(console.error);
      },
    },
    {
      label: isAllMuted ? 'Unmute All Notifications' : 'Mute All Notifications',
      onClick: () => setIsAllMuted((prev) => !prev),
    },
  ];

  // Handle scroll events
  const handleScroll = () => {
    if (messagesContainerRef.current) {
      const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
      // Show button if not at bottom (with 100px threshold)
      setShowScrollButton(scrollHeight - scrollTop - clientHeight > 100);

      // Load more messages when scrolled to top
      if (scrollTop === 0 && hasMoreMessages && !isLoadingMessages) {
        loadMoreMessages();
      }
    }
  };

  const scrollToBottom = () => {
    if (messagesContainerRef.current) {
      messagesContainerRef.current.scrollTo({
        top: messagesContainerRef.current.scrollHeight,
        behavior: 'smooth'
      });
    }
  };

  // Mark that we switched conversations so we scroll after messages load
  useEffect(() => {
    justSwitchedConversationRef.current = true;
  }, [currentConversation?.id]);

  // Scroll to bottom when messages load after opening a chat, or when a new message arrives
  useEffect(() => {
    if (messages.length > 0) {
      // After opening/switching a conversation — scroll once messages are rendered
      if (justSwitchedConversationRef.current) {
        justSwitchedConversationRef.current = false;
        setTimeout(scrollToBottom, 50);
        return;
      }
      // New incoming message — scroll if it's very recent
      const lastMessage = messages[messages.length - 1];
      const isVeryRecent = new Date().getTime() - new Date(lastMessage.createdAt).getTime() < 2000;
      if (isVeryRecent) {
        scrollToBottom();
      }
    }
  }, [messages]);

  // Scroll to bottom when typing indicator appears
  useEffect(() => {
    if (typingUsers.size > 0) {
      scrollToBottom();
    }
  }, [typingUsers]);

  // Filter conversations by search
  const filteredConversations = conversations.filter((conv) =>
    conv.otherParty?.name?.toLowerCase().includes(searchQuery.toLowerCase())
  );

  // Build selected user info for ChatHeader
  const selectedUserInfo = currentConversation ? {
    name: currentConversation.otherParty?.name || 'Unknown',
    role: currentConversation.otherParty?.headline || 'Agent',
    lastSeen: formatLastSeen(currentConversation.otherParty?.lastSeenAt, currentConversation.otherParty?.isOnline),
    avatar: getValidAvatarUrl(conversationAvatarUrls[currentConversation.id]),
    isOnline: currentConversation.otherParty?.isOnline || false,
  } : null;

  // Get typing user names
  const typingUserNames = Array.from(typingUsers)
    .filter(userId => userId !== currentUserId)
    .map(userId => {
      // The other party is typing
      if (currentConversation?.otherParty.userId === userId || currentConversation?.otherParty.id === userId) {
        return currentConversation.otherParty.name.split(' ')[0];
      }
      return 'Someone';
    });

  return (
    <>
      <style>{customScrollbarStyles}</style>

      {/* Delete confirmation dialog */}
      {confirmDeleteId && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white rounded-[15px] p-6 max-w-[400px] w-full mx-4 shadow-xl">
            <h3 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
              Delete Conversation
            </h3>
            <p className="font-serif font-normal text-[14px] text-[#00293D]/70 mb-6">
              Are you sure you want to delete this conversation? This action cannot be undone and all messages will be permanently removed.
            </p>
            <div className="flex items-center justify-end gap-3">
              <button
                onClick={() => setConfirmDeleteId(null)}
                className="px-4 py-2 font-serif font-normal text-[14px] text-[#00293D] rounded-[10px] border border-[#00293d]/10 hover:bg-gray-50 transition-colors cursor-pointer"
              >
                Cancel
              </button>
              <button
                onClick={confirmDelete}
                className="px-4 py-2 font-serif font-normal text-[14px] text-white bg-red-600 rounded-[10px] hover:bg-red-700 transition-colors cursor-pointer"
              >
                Delete
              </button>
            </div>
          </div>
        </div>
      )}

      {/* New conversation modal */}
      <NewConversationModal
        isOpen={isComposeOpen}
        onClose={() => setIsComposeOpen(false)}
        contacts={connectedAgents.map((agent) => ({
          id: userRole === 'AGENT' ? agent.userId! : agent.agentProfileId,
          name: agent.name,
          avatar: agent.avatar,
          avatarUrl: agent.avatarUrl,
          headline: agent.headline,
          email: agent.email,
          city: agent.city,
          state: agent.state,
        }))}
        isLoading={isLoadingAgents}
        onStartConversation={async (contactId) => {
          await handleStartConversation(contactId);
        }}
      />

      {/* Report user modal */}
      {currentConversation && (
        <ReportUserModal
          isOpen={isReportModalOpen}
          onClose={() => setIsReportModalOpen(false)}
          reportedUserId={currentConversation.otherParty?.userId || currentConversation.otherParty?.id || ''}
          reportedUserName={currentConversation.otherParty?.name || 'User'}
          conversationId={currentConversation.id}
        />
      )}

      <div className="border border-[#00293d]/10 rounded-[20px] bg-white overflow-hidden">
        {/* Header */}
        <div className="flex items-center gap-4 p-4 border-b border-[#00293d]/10">
          <h1 className="font-fractul font-bold text-[18px] leading-[22px] text-[#00293D]">
            Messaging
          </h1>

          {/* Connection status indicator */}
          <div className="flex items-center gap-2">
            <span
              className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-gray-400'}`}
              title={isConnected ? 'Connected' : 'Disconnected'}
            />
          </div>

          {/* Search bar */}
          <div className="flex-1 max-w-[600px]">
            <div className="flex items-center gap-2 border border-[#00293d]/10 rounded-[15px] px-4 py-2">
              <Image
                src="/assets/icons/search-icon.svg"
                alt="Search"
                width={20}
                height={20}
              />
              <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="Search Message"
                className="flex-1 font-serif font-normal text-[18px] leading-[24px] text-[#00293D] placeholder-[#00293D]/50 focus:outline-none"
              />
            </div>
          </div>

          {/* Header actions */}
          <div className="flex items-center gap-2 ml-auto">
            <div className="relative">
              <button
                onClick={() => setIsPageMenuOpen((prev) => !prev)}
                className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
              >
                <Image
                  src="/assets/icons/three-dots-horizontal-icon.svg"
                  alt="More options"
                  width={24}
                  height={24}
                />
              </button>
              <ChatDropdownMenu
                items={pageMenuItems}
                isOpen={isPageMenuOpen}
                onClose={() => setIsPageMenuOpen(false)}
              />
            </div>
            <button
              onClick={() => setIsComposeOpen(true)}
              className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
            >
              <Image
                src="/assets/icons/compose-icon.svg"
                alt="Compose"
                width={24}
                height={24}
              />
            </button>
          </div>
        </div>

        {/* Main content */}
        <div className="flex h-[700px]">
          {/* Left sidebar - Conversation list */}
          <div className="w-[380px] border-r border-[#00293d]/10 flex-shrink-0 overflow-hidden flex flex-col">
            {isLoading || isLoadingAgents ? (
              <div className="flex-1 flex items-center justify-center">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#00293d]" />
              </div>
            ) : filteredConversations.length === 0 ? (
              /* Show connected agents when no conversations */
              <div className="flex-1 flex flex-col">
                {/* Header for connected agents */}
                <div className="p-4 border-b border-[#00293d]/10">
                  <p className="font-serif font-normal text-[14px] text-[#00293D]/50 text-center">
                    {searchQuery ? 'No conversations found' : `No conversations yet. Start a conversation with ${userRole === 'AGENT' ? 'a user' : 'an agent'}!`}
                  </p>
                </div>

                {/* List of connected agents */}
                {connectedAgents.length > 0 ? (
                  <div className="flex-1 overflow-y-auto p-2 space-y-2 custom-scrollbar">
                    <p className="px-2 py-1 font-fractul font-medium text-[12px] text-[#00293D]/70 uppercase tracking-wide">
                      {userRole === 'AGENT' ? 'Your Connected Users' : 'Your Connected Agents'}
                    </p>
                    {connectedAgents
                      .filter((agent) =>
                        agent.name.toLowerCase().includes(searchQuery.toLowerCase())
                      )
                      .map((agent) => (
                        <button
                          key={agent.agentProfileId}
                          onClick={() => handleStartConversation(userRole === 'AGENT' ? agent.userId! : agent.agentProfileId)}
                          disabled={isStartingConversation === agent.agentProfileId}
                          className="w-full flex items-center gap-3 p-4 rounded-[15px] cursor-pointer transition-colors hover:bg-[#00293d]/5 disabled:opacity-50"
                          style={{ border: '1px solid rgba(0, 41, 61, 0.1)' }}
                        >
                          {/* Avatar */}
                          <div className="relative flex-shrink-0">
                            <div className="w-[50px] h-[50px] rounded-full overflow-hidden border border-[#00293D]/20 relative">
                              <AvatarWithPlaceholder
                                src={getValidAvatarUrl(agent.avatarUrl)}
                                alt={agent.name}
                                size={50}
                              />
                            </div>
                          </div>

                          {/* Agent Info */}
                          <div className="flex-1 min-w-0 text-left">
                            <p className="font-fractul font-medium text-[14px] leading-[17px] text-[#00293D]">
                              {agent.name}
                            </p>
                            {agent.headline && (
                              <p className="font-serif font-normal text-[12px] leading-[16px] text-[#00293D]/70 truncate">
                                {agent.headline}
                              </p>
                            )}
                            {(agent.city || agent.state) && (
                              <p className="font-serif font-normal text-[12px] leading-[16px] text-[#00293D]/50">
                                {[agent.city, agent.state].filter(Boolean).join(', ')}
                              </p>
                            )}
                          </div>

                          {/* Start conversation indicator */}
                          <div className="flex-shrink-0">
                            {isStartingConversation === agent.agentProfileId ? (
                              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-[#e58625]" />
                            ) : (
                              <div className="w-8 h-8 rounded-full bg-[#e58625]/10 flex items-center justify-center">
                                <Image
                                  src="/assets/icons/message-icon.svg"
                                  alt="Start chat"
                                  width={16}
                                  height={16}
                                  className="opacity-70"
                                />
                              </div>
                            )}
                          </div>
                        </button>
                      ))}
                  </div>
                ) : (
                  <div className="flex-1 flex items-center justify-center text-[#00293D]/50 font-serif p-4 text-center">
                    <p>{userRole === 'AGENT' ? 'No connected users yet.' : 'No connected agents yet. Connect with agents to start messaging!'}</p>
                  </div>
                )}
              </div>
            ) : (
              <div className="flex-1 overflow-y-auto p-2 space-y-2 custom-scrollbar">
                {filteredConversations.map((conversation) => (
                  <div
                    key={conversation.id}
                    onClick={() => selectConversation(conversation.id)}
                    className="relative flex items-start gap-3 p-4 rounded-[15px] cursor-pointer transition-colors hover:bg-[#00293d]/5"
                    style={{ border: '1px solid rgba(0, 41, 61, 0.1)' }}
                  >
                    {/* Active indicator line */}
                    {currentConversation?.id === conversation.id && (
                      <div className="absolute left-0 top-1/2 -translate-y-1/2 w-[4px] h-[70px] bg-[#E58625] rounded-r-[4px]" />
                    )}

                    {/* Avatar with online indicator */}
                    <div className="relative flex-shrink-0">
                      <div className="w-[70px] h-[70px] rounded-full overflow-hidden border border-[#00293D]/20 relative">
                        <AvatarWithPlaceholder
                          src={getValidAvatarUrl(conversationAvatarUrls[conversation.id])}
                          alt={conversation.otherParty?.name || 'User'}
                          size={70}
                        />
                      </div>
                      {conversation.otherParty?.isOnline && (
                        <div className="absolute bottom-1 right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" />
                      )}
                    </div>

                    {/* Content */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        {(userRole === 'AGENT' ? conversation.agentFavorited : conversation.userFavorited) && (
                          <Image src="/assets/icons/star-filled-icon.svg" alt="Starred" width={14} height={14} className="flex-shrink-0" />
                        )}
                        <p className="font-fractul font-medium text-[14px] leading-[17px] text-[#00293D]">
                          {conversation.otherParty?.name || 'Unknown'}
                        </p>
                        {(userRole === 'AGENT' ? conversation.agentMuted : conversation.userMuted) && (
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="flex-shrink-0 text-[#00293D]/40">
                            <path d="M11 5L6 9H2v6h4l5 4V5zM23 9l-6 6M17 9l6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                          </svg>
                        )}
                        {conversation.unreadCount > 0 && (
                          <span className="bg-[#e58625] text-white text-xs font-bold px-2 py-0.5 rounded-full min-w-[20px] text-center">
                            {conversation.unreadCount}
                          </span>
                        )}
                      </div>
                      <p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] line-clamp-2">
                        {conversation.lastMessageText || 'No messages yet'}
                      </p>
                    </div>

                    {/* Date */}
                    <p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] flex-shrink-0">
                      {formatConversationDate(conversation.lastMessageAt)}
                    </p>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Right panel - Chat area */}
          <div className="flex-1 flex flex-col p-4">
            {currentConversation && selectedUserInfo ? (
              <>
                {/* Chat header */}
                <ChatHeader
                  {...selectedUserInfo}
                  isTyping={typingUserNames.length > 0}
                  typingText={typingUserNames.length > 0 ? `${typingUserNames.join(', ')} is typing...` : undefined}
                  isMuted={userRole === 'AGENT' ? (currentConversation?.agentMuted || false) : (currentConversation?.userMuted || false)}
                  isStarred={userRole === 'AGENT' ? (currentConversation?.agentFavorited || false) : (currentConversation?.userFavorited || false)}
                  onClearChat={clearMessages}
                  onDeleteConversation={handleDeleteConversation}
                  onReportUser={() => setIsReportModalOpen(true)}
                  onToggleMute={(muted) => currentConversation && toggleMute(currentConversation.id, muted)}
                  onToggleStar={(starred) => currentConversation && toggleFavorite(currentConversation.id, starred)}
                />

                {/* Messages area wrapper */}
                <div className="flex-1 relative">
                  {isLoadingMessages && messages.length === 0 ? (
                    <div className="absolute inset-0 flex items-center justify-center">
                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#00293d]" />
                    </div>
                  ) : (
                    <div
                      ref={messagesContainerRef}
                      onScroll={handleScroll}
                      className="absolute inset-0 overflow-y-auto py-4 custom-scrollbar"
                    >
                      {/* Load more indicator */}
                      {isLoadingMessages && messages.length > 0 && (
                        <div className="flex justify-center py-2">
                          <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-[#00293d]" />
                        </div>
                      )}

                      <div className="space-y-4 px-2">
                        {messages.map((message) => {
                          const isOwn = message.senderId === currentUserId;
                          return (
                            <div
                              key={message.id}
                              className={`flex ${isOwn ? 'justify-end' : 'justify-start'}`}
                            >
                              <div
                                className={`max-w-[70%] rounded-[15px] ${
                                  message.messageType === 'IMAGE' ? 'p-1' : 'px-4 py-3'
                                } ${
                                  isOwn
                                    ? 'bg-[#e58625] text-[#00293D]'
                                    : 'bg-[#00293d]/10 text-[#00293D]'
                                }`}
                              >
                                {message.messageType === 'IMAGE' ? (
                                  messageFileUrls[message.id] ? (
                                    <>
                                      <img
                                        src={messageFileUrls[message.id]}
                                        alt={message.fileName || 'Image'}
                                        className="rounded-[12px] max-w-full cursor-pointer"
                                        style={{ maxHeight: '250px' }}
                                        onClick={() => window.open(messageFileUrls[message.id], '_blank')}
                                        onError={(e) => {
                                          const target = e.target as HTMLImageElement;
                                          target.style.display = 'none';
                                          const fallback = target.nextElementSibling;
                                          if (fallback) (fallback as HTMLElement).style.display = 'flex';
                                        }}
                                      />
                                      <div className="hidden items-center gap-2 px-3 py-2">
                                        <Image src="/assets/icons/attachment-icon.svg" alt="Image" width={16} height={9} />
                                        <span className="font-serif text-[13px]">{message.fileName || 'Image'}</span>
                                        <button
                                          onClick={() => window.open(messageFileUrls[message.id], '_blank')}
                                          className="font-serif text-[12px] text-[#e58625] underline ml-1"
                                        >
                                          Download
                                        </button>
                                      </div>
                                    </>
                                  ) : (
                                    <div className="w-[200px] h-[150px] rounded-[12px] overflow-hidden">
                                      <div className="w-full h-full shimmer-loading rounded-[12px]" />
                                    </div>
                                  )
                                ) : message.messageType === 'FILE' ? (
                                  <a
                                    href={messageFileUrls[message.id] || '#'}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="flex items-center gap-3 no-underline"
                                  >
                                    <div className={`w-[40px] h-[40px] rounded-[8px] flex items-center justify-center flex-shrink-0 ${isOwn ? 'bg-[#00293D]/10' : 'bg-[#e58625]/10'}`}>
                                      <Image
                                        src="/assets/icons/attachment-icon.svg"
                                        alt="File"
                                        width={20}
                                        height={11}
                                      />
                                    </div>
                                    <div className="min-w-0">
                                      <p className="font-serif font-medium text-[14px] leading-[19px] truncate">
                                        {message.fileName || message.content}
                                      </p>
                                      {message.fileSize && (
                                        <p className={`font-serif font-normal text-[12px] leading-[16px] ${isOwn ? 'text-[#00293D]/70' : 'text-[#00293D]/50'}`}>
                                          {message.fileSize < 1024
                                            ? `${message.fileSize} B`
                                            : message.fileSize < 1024 * 1024
                                              ? `${(message.fileSize / 1024).toFixed(1)} KB`
                                              : `${(message.fileSize / (1024 * 1024)).toFixed(1)} MB`}
                                        </p>
                                      )}
                                    </div>
                                  </a>
                                ) : (
                                  <p className="font-serif font-normal text-[14px] leading-[19px]">
                                    {message.content}
                                  </p>
                                )}
                                <div className={`flex items-center gap-2 mt-1 ${message.messageType === 'IMAGE' ? 'px-2 pb-1' : ''} ${isOwn ? 'justify-end' : 'justify-start'}`}>
                                  <p
                                    className={`font-serif font-normal text-[12px] leading-[16px] ${
                                      isOwn ? 'text-[#00293D]/70' : 'text-[#00293D]/50'
                                    }`}
                                  >
                                    {formatMessageTime(message.createdAt)}
                                  </p>
                                  {isOwn && (
                                    <span className="inline-flex items-center">
                                      {message.status === 'READ' ? (
                                        <Image src="/assets/icons/tick-double-blue.svg" alt="Read" width={16} height={11} />
                                      ) : message.status === 'DELIVERED' ? (
                                        <Image src="/assets/icons/tick-double-gray.svg" alt="Delivered" width={16} height={11} />
                                      ) : (
                                        <Image src="/assets/icons/tick-single-gray.svg" alt="Sent" width={11} height={11} />
                                      )}
                                    </span>
                                  )}
                                </div>
                              </div>
                            </div>
                          );
                        })}

                        {/* Typing indicator in messages */}
                        {typingUserNames.length > 0 && (
                          <div className="flex justify-start">
                            <div className="bg-[#00293d]/10 text-[#00293D] rounded-[15px] px-4 py-3">
                              <div className="flex items-center gap-2">
                                <div className="flex items-center gap-1">
                                  <span className="w-2 h-2 bg-[#00293D]/50 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
                                  <span className="w-2 h-2 bg-[#00293D]/50 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
                                  <span className="w-2 h-2 bg-[#00293D]/50 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
                                </div>
                                <span className="font-serif font-normal text-[12px] leading-[16px] text-[#00293D]/50">
                                  {formatMessageTime(new Date().toISOString())}
                                </span>
                              </div>
                            </div>
                          </div>
                        )}

                        <div ref={messagesEndRef} />
                      </div>
                    </div>
                  )}

                  {/* Scroll to bottom button */}
                  {showScrollButton && (
                    <button
                      onClick={scrollToBottom}
                      className="absolute bottom-4 right-4 w-[50px] h-[50px] bg-[#00293d]/10 rounded-full flex items-center justify-center hover:bg-[#00293d]/20 transition-all cursor-pointer shadow-lg z-10"
                    >
                      <Image
                        src="/assets/icons/arrow-down-icon.svg"
                        alt="Scroll to bottom"
                        width={20}
                        height={20}
                      />
                    </button>
                  )}
                </div>

                {/* Message input */}
                <MessageInput
                  onSend={handleSendMessage}
                  onSendGif={handleSendGif}
                  onSendFile={handleSendFile}
                  onTypingStart={handleTypingStart}
                  onTypingStop={handleTypingStop}
                  isUploading={isUploading}
                />
              </>
            ) : (
              <div className="flex items-center justify-center h-full text-[#00293D]/50 font-serif flex-col gap-4">
                <Image
                  src="/assets/icons/message-icon.svg"
                  alt="Messages"
                  width={64}
                  height={64}
                  className="opacity-30"
                />
                <p>Select a conversation to start messaging</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
}