skeleton/src/App.tsx

import { useState, useEffect, useCallback } from 'react'
import './App.css'

import MessageConsole from './components/MessageConsole'
import ControlPanel from './components/ControlPanel'
import ProfileModal from './components/ProfileModal'
import AuthModal from './sdk/AuthModal';
import MessageBus from './sdk/MessageBus';
import EventBus from './sdk/EventBus';
import UserStore from './sdk/UserStrore';
import Iframe from './sdk/Iframe'
import BlockchainViewer from './components/ProcessesViewer';
import FolderModal from './components/FolderModal';
import type { ProfileData } from './sdk/models/ProfileData'
import type { FolderData } from './sdk/models/FolderData'

const iframeUrl = 'https://dev3.4nkweb.com'

function App() {
  const [receivedMessages, setReceivedMessages] = useState<{ timestamp: string; data: any }[]>([])
  const [isConnected, setIsConnected] = useState(false)
  const [showProfileModal, setShowProfileModal] = useState(false)
  const [showAuthModal, setShowAuthModal] = useState(false)
  const [showFolderModal, setShowFolderModal] = useState(false)
  const [processes, setProcesses] = useState<any>(null)
  const [myProcesses, setMyProcesses] = useState<string[]>([])
  const [userPairingId, setUserPairingId] = useState<string | null>(null)

  useEffect(() => {
    setIsConnected(UserStore.getInstance().isConnected());
  });

  useEffect(() => {
    setUserPairingId(UserStore.getInstance().getUserPairingId());
  });

  useEffect(() => {
    if (isConnected) {
      const messageBus = MessageBus.getInstance(iframeUrl);
      messageBus.isReady().then(() => {
        messageBus.getProcesses().then((processes: any) => {
          setProcesses(processes);
        });
      });
    }
  }, [isConnected, iframeUrl]);

  useEffect(() => {
    if (isConnected && processes !== null) {
      const messageBus = MessageBus.getInstance(iframeUrl);
      messageBus.isReady().then(() => {
        messageBus.getMyProcesses().then((res: string[]) => {
          setMyProcesses(res);
        })
      });
    }
  }, [isConnected, processes]);

  useEffect(() => {
    if (isConnected && userPairingId === null) {
      const messageBus = MessageBus.getInstance(iframeUrl);
      messageBus.isReady().then(() => {
        messageBus.getUserPairingId().then((userPairingId: string) => {
          UserStore.getInstance().pair(userPairingId);
          setUserPairingId(UserStore.getInstance().getUserPairingId());
        })
      });
    }
  }, [isConnected, userPairingId]);

  // Gestionnaire pour afficher la modale de connexion
  const handleLogin = useCallback(() => {
    // Afficher la modale de connexion
    setShowAuthModal(true);
  }, []);

  // Gestionnaire pour la déconnexion
  const handleLogout = useCallback(() => {
    // Déconnecter l'utilisateur
    UserStore.getInstance().disconnect();
    setIsConnected(false);

    // Émettre un événement pour vider aussi les messages locaux dans MessageConsole
    EventBus.getInstance().emit('CLEAR_CONSOLE');

    // Vider les processes
    setProcesses(null);
  }, []);

  // Gestionnaire pour ouvrir la modale de profil
  const handleOpenProfileModal = useCallback(() => {
    setShowProfileModal(true);
  }, []);

  // Gestionnaire pour ouvrir la modale de création de dossier
  const handleOpenFolderModal = useCallback(() => {
    setShowFolderModal(true);
  }, []);

  // Gestionnaire pour fermer la modale de création de dossier
  const handleCloseFolderModal = useCallback(() => {
    setShowFolderModal(false);
  }, []);

  // Gestionnaire pour fermer la modale de création de profil
  const handleCloseProfileModal = useCallback(() => {
    setShowProfileModal(false);
  }, []);

  // Gestionnaire pour soumettre les données du profil
  const handleProfileSubmit = useCallback((profileData: ProfileData) => {
    // Ajouter le validator fixe aux données du profil
    const completeProfileData = {
      ...profileData,
      validator: '884cb36a346a79af8697559f16940141f068bdf1656f88fa0df0e9ecd7311fb8:0'
    };

    MessageBus.getInstance(iframeUrl).createProfile(completeProfileData).then((_profileData: ProfileData) => {
      MessageBus.getInstance(iframeUrl).getProcesses().then((processes: any) => {
        setProcesses(processes);
      });
    });

    setShowProfileModal(false);
  }, []);

  // Gestionnaire pour soumettre les données du dossier
  const handleFolderSubmit = useCallback((folderData: FolderData) => {
    MessageBus.getInstance(iframeUrl).createFolder(folderData).then((_folderData: FolderData) => {
      MessageBus.getInstance(iframeUrl).getProcesses().then((processes: any) => {
        setProcesses(processes);
      });
    });

    setShowFolderModal(false);
  }, []);

  // Gestionnaire du clic sur le bouton Vider les messages
  const handleClearMessages = useCallback(() => {
    setReceivedMessages([]);
  }, []);

  return (
    <div className="home-container">
      <header className="home-header">
        <h1>[4NK]</h1>
      </header>

      <main className="home-main">
        <div className="welcome-section">
          {/* Panneau de contrôle avec iframe */}
          <ControlPanel
            isConnected={isConnected}
            onLogin={handleLogin}
            onLogout={handleLogout}
            onCreateProfile={handleOpenProfileModal}
            onCreateFolder={handleOpenFolderModal}
            iframeUrl={iframeUrl}
          />

          {/* Structure flexible avec console à gauche et contenu à droite */}
          <div className="app-content-layout">
            {/* Console de messages (largeur fixe à gauche) */}
            <MessageConsole
              messages={receivedMessages}
              onClearMessages={handleClearMessages}
            />

            {/* Espace pour contenu supplémentaire à droite */}
            <div className="content-area">
              {/* Affichage des blocs de la blockchain */}
              <BlockchainViewer processes={processes} />
            </div>
          </div>

          {/* Modales */}
          {showAuthModal && (
            <AuthModal
              isOpen={showAuthModal}
              onConnect={() => {
                setIsConnected(true);
                setShowAuthModal(false);
              }}
              onClose={() => setShowAuthModal(false)}
              iframeUrl={iframeUrl}
            />
          )}
          {showProfileModal && (
            <ProfileModal
              isOpen={showProfileModal}
              onClose={handleCloseProfileModal}
              onSubmit={handleProfileSubmit}
            />
          )}
          {showFolderModal && (
            <FolderModal
              isOpen={showFolderModal}
              onClose={handleCloseFolderModal}
              onSave={handleFolderSubmit}
              onCancel={handleCloseFolderModal}
            />
          )}

          {/* N'afficher l'iframe que si l'utilisateur est connecté */}
          {isConnected && <Iframe iframeUrl={iframeUrl} />}
        </div>
      </main>
    </div>
  )
}

export default App