ihm_client/src/router.ts

import '../public/style/4nk.css';
import { initHeader } from '../src/components/header/header';
import { initChat } from '../src/pages/chat/chat';
import Database from './services/database.service';
import Services from './services/service';
import { cleanSubscriptions } from './utils/subscription.utils';
import { LoginComponent } from './pages/home/home-component';
import { prepareAndSendPairingTx } from './utils/sp-address.utils';
import ModalService from './services/modal.service';
export { Services };
const routes: { [key: string]: string } = {
  home: '/src/pages/home/home.html',
  process: '/src/pages/process/process.html',
  'process-element': '/src/pages/process-element/process-element.html',
  account: '/src/pages/account/account.html',
  chat: '/src/pages/chat/chat.html',
  signature: '/src/pages/signature/signature.html',
};

export let currentRoute = '';

export async function navigate(path: string) {
  cleanSubscriptions();
  cleanPage();
  path = path.replace(/^\//, '');
  if (path.includes('/')) {
    const parsedPath = path.split('/')[0];
    if (!routes[parsedPath]) {
      path = 'home';
    }
  }

  await handleLocation(path);
}

async function handleLocation(path: string) {
  const parsedPath = path.split('/');
  if (path.includes('/')) {
    path = parsedPath[0];
  }
  currentRoute = path;
  const routeHtml = routes[path] || routes['home'];

  const content = document.getElementById('containerId');
  if (content) {
    if (path === 'home') {
      const login = LoginComponent;
      const container = document.querySelector('#containerId');
      const accountComponent = document.createElement('login-4nk-component');
      accountComponent.setAttribute('style', 'width: 100vw; height: 100vh; position: relative; grid-row: 2;');
      if (container) container.appendChild(accountComponent);
    } else if (path !== 'process') {
      const html = await fetch(routeHtml).then((data) => data.text());
      content.innerHTML = html;
    }

    await new Promise(requestAnimationFrame);
    injectHeader();

    // const modalService = await ModalService.getInstance()
    // modalService.injectValidationModal()
    switch (path) {
      case 'process':
        // const { init } = await import('./pages/process/process');
        const { ProcessListComponent } = await import('./pages/process/process-list-component');

        const container2 = document.querySelector('#containerId');
        const accountComponent = document.createElement('process-list-4nk-component');

        if (!customElements.get('process-list-4nk-component')) {
          customElements.define('process-list-4nk-component', ProcessListComponent);
        }
        accountComponent.setAttribute('style', 'height: 100vh; position: relative; grid-row: 2; grid-column: 4;');
        if (container2) container2.appendChild(accountComponent);
        break;

      case 'process-element':
        if (parsedPath && parsedPath.length) {
          const { initProcessElement } = await import('./pages/process-element/process-element');
          const parseProcess = parsedPath[1].split('_');
          initProcessElement(parseProcess[0], parseProcess[1]);
        }
        break;

      case 'account':
        const { AccountComponent } = await import('./pages/account/account-component');
        const accountContainer = document.querySelector('.parameter-list');
        if (accountContainer) {
          if (!customElements.get('account-component')) {
            customElements.define('account-component', AccountComponent);
          }
          const accountComponent = document.createElement('account-component');
          accountContainer.appendChild(accountComponent);
        }
        break;

      case 'chat':
        const { ChatComponent } = await import('./pages/chat/chat-component');
        const chatContainer = document.querySelector('.group-list');
        if (chatContainer) {
          if (!customElements.get('chat-component')) {
            customElements.define('chat-component', ChatComponent);
          }
          const chatComponent = document.createElement('chat-component');
          chatContainer.appendChild(chatComponent);
        }
        break;

      case 'signature':
        const { SignatureComponent } = await import('./pages/signature/signature-component');
        const container = document.querySelector('.group-list');
        if (container) {
          if (!customElements.get('signature-component')) {
            customElements.define('signature-component', SignatureComponent);
          }
          const signatureComponent = document.createElement('signature-component');
          container.appendChild(signatureComponent);
        }
        break;
    }
  }
}

window.onpopstate = async () => {
  const services = await Services.getInstance();
  if (!services.isPaired()) {
    handleLocation('home');
  } else {
    handleLocation('process');
  }
};

export async function init(): Promise<void> {
  try {
    const services = await Services.getInstance();
    (window as any).myService = services;
    await Database.getInstance();
    setTimeout(async () => {
      let device = await services.getDeviceFromDatabase();
      console.log('🚀 ~ setTimeout ~ device:', device);

      if (!device) {
        device = await services.createNewDevice();
      } else {
        services.restoreDevice(device);
      }
      await services.restoreProcessesFromDB();
      await services.restoreSecretsFromDB();

      if (services.isPaired()) {
        await navigate('chat');
      } else {
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        const pairingAddress = urlParams.get('sp_address');
        if (pairingAddress) {
          setTimeout(async () => {
            try {
              // check if we have a shared secret with that address
              await prepareAndSendPairingTx(pairingAddress);
            } catch (e) {
              console.error('Failed to pair:', e);
            }
          }, 2000);
        }
        await navigate('home');
      }
    }, 200);
  } catch (error) {
    console.error(error);
    await navigate('home');
  }
}

async function cleanPage() {
  const container = document.querySelector('#containerId');
  if (container) container.innerHTML = '';
}

async function injectHeader() {
  const headerContainer = document.getElementById('header-container');
  if (headerContainer) {
    const headerHtml = await fetch('/src/components/header/header.html').then((res) => res.text());
    headerContainer.innerHTML = headerHtml;

    const script = document.createElement('script');
    script.src = '/src/components/header/header.ts';
    script.type = 'module';
    document.head.appendChild(script);
    initHeader();
  }
}

(window as any).navigate = navigate;

document.addEventListener('navigate', ((e: Event) => {
  const event = e as CustomEvent<{page: string, processId?: string}>;
  if (event.detail.page === 'chat') {
    const container = document.querySelector('.container');
    if (container) container.innerHTML = '';
    
    initChat();
    
    const chatElement = document.querySelector('chat-element');
    if (chatElement) {
      chatElement.setAttribute('process-id', event.detail.processId || '');
    }
  }
}));