AeThex-Connect/src/frontend/mockup/MainLayout.jsx

import React, { useState, useCallback } from 'react';
import ServerList from './ServerList';
import ChannelSidebar from './ChannelSidebar';
import ChatArea from './ChatArea';
import MemberSidebar from './MemberSidebar';
import SearchPanel from './SearchPanel';
import ThreadPanel from './ThreadPanel';
import ServerSettingsModal from './ServerSettingsModal';
import UserProfileCard from './UserProfileCard';
import DMsView from './DMsView';
import UserSettingsModal from './UserSettingsModal';
import ContextMenu from './ContextMenu';
import PinnedMessagesPanel from './PinnedMessagesPanel';
import CreateChannelModal from './CreateChannelModal';
import InviteModal from './InviteModal';
import NotificationsPanel from './NotificationsPanel';
import VideoCall from './VideoCall';
import './mockup.css';

export default function MainLayout() {
  // UI State
  const [showSearch, setShowSearch] = useState(false);
  const [showThread, setShowThread] = useState(false);
  const [threadParent, setThreadParent] = useState(null);
  const [showServerSettings, setShowServerSettings] = useState(false);
  const [showUserProfile, setShowUserProfile] = useState(false);
  const [selectedUser, setSelectedUser] = useState(null);
  
  // New feature states
  const [showDMs, setShowDMs] = useState(false);
  const [showUserSettings, setShowUserSettings] = useState(false);
  const [showPinnedMessages, setShowPinnedMessages] = useState(false);
  const [showCreateChannel, setShowCreateChannel] = useState(false);
  const [showInvite, setShowInvite] = useState(false);
  const [showNotifications, setShowNotifications] = useState(false);
  const [showVideoCall, setShowVideoCall] = useState(false);
  
  // Context menu state
  const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0, type: 'message', data: null });

  // Current server/channel context for modals
  const [currentServer, setCurrentServer] = useState({
    id: '1',
    name: 'AeThex Gaming',
    icon: '🎮'
  });

  const handleOpenSearch = () => {
    setShowSearch(true);
    setShowThread(false);
  };

  const handleOpenThread = (message) => {
    setThreadParent(message);
    setShowThread(true);
    setShowSearch(false);
  };

  const handleOpenUserProfile = (user) => {
    setSelectedUser(user);
    setShowUserProfile(true);
  };

  // Context menu handlers
  const handleContextMenu = useCallback((e, type, data) => {
    e.preventDefault();
    setContextMenu({
      visible: true,
      x: e.clientX,
      y: e.clientY,
      type,
      data
    });
  }, []);

  const closeContextMenu = useCallback(() => {
    setContextMenu(prev => ({ ...prev, visible: false }));
  }, []);

  const handleContextMenuAction = useCallback((action) => {
    console.log('Context menu action:', action, contextMenu.data);
    closeContextMenu();
    // Handle actions
    if (action === 'pin') setShowPinnedMessages(true);
    if (action === 'create_thread') handleOpenThread(contextMenu.data);
  }, [contextMenu.data, closeContextMenu]);

  // Video call handlers
  const handleJoinVoice = useCallback(() => {
    setShowVideoCall(true);
  }, []);

  return (
    <div className="connect-container" onClick={closeContextMenu}>
      {showDMs ? (
        <>
          <ServerList 
            onOpenSettings={() => setShowServerSettings(true)} 
            onDMsClick={() => setShowDMs(true)}
            selectedDMs={true}
          />
          <DMsView onClose={() => setShowDMs(false)} />
        </>
      ) : (
        <>
          <ServerList 
            onOpenSettings={() => setShowServerSettings(true)}
            onDMsClick={() => setShowDMs(true)}
          />
          <ChannelSidebar 
            onCreateChannel={() => setShowCreateChannel(true)}
            onSettingsClick={() => setShowUserSettings(true)}
            onJoinVoice={handleJoinVoice}
          />
          <ChatArea 
            onOpenSearch={handleOpenSearch}
            onOpenThread={handleOpenThread}
            onPinnedClick={() => setShowPinnedMessages(true)}
            onNotificationsClick={() => setShowNotifications(true)}
            onContextMenu={handleContextMenu}
          />
          <MemberSidebar onMemberClick={handleOpenUserProfile} />
        </>
      )}
      
      {/* Overlays */}
      {showSearch && (
        <SearchPanel onClose={() => setShowSearch(false)} />
      )}
      
      {showThread && threadParent && (
        <ThreadPanel 
          parentMessage={threadParent}
          onClose={() => setShowThread(false)}
        />
      )}
      
      {showServerSettings && (
        <ServerSettingsModal onClose={() => setShowServerSettings(false)} />
      )}
      
      {showUserProfile && selectedUser && (
        <UserProfileCard 
          user={selectedUser}
          onClose={() => setShowUserProfile(false)}
        />
      )}

      {/* New Modals */}
      {showUserSettings && (
        <UserSettingsModal onClose={() => setShowUserSettings(false)} />
      )}

      {showPinnedMessages && (
        <PinnedMessagesPanel onClose={() => setShowPinnedMessages(false)} />
      )}

      {showCreateChannel && (
        <CreateChannelModal 
          onClose={() => setShowCreateChannel(false)}
          onSubmit={(data) => {
            console.log('Create channel:', data);
            setShowCreateChannel(false);
          }}
        />
      )}

      {showInvite && (
        <InviteModal 
          server={currentServer}
          onClose={() => setShowInvite(false)}
        />
      )}

      {showNotifications && (
        <NotificationsPanel onClose={() => setShowNotifications(false)} />
      )}

      {showVideoCall && (
        <VideoCall 
          channel={{ name: 'General Voice' }}
          onLeave={() => setShowVideoCall(false)}
        />
      )}

      {/* Context Menu */}
      {contextMenu.visible && (
        <ContextMenu
          x={contextMenu.x}
          y={contextMenu.y}
          type={contextMenu.type}
          data={contextMenu.data}
          onAction={handleContextMenuAction}
          onClose={closeContextMenu}
        />
      )}
    </div>
  );
}