ihm_client/src/router.ts

import '../public/style/4nk.css';
import { initHeader } from '../src/components/header/header';
import Database from './services/database.service';
import Services from './services/service';
import { cleanSubscriptions } from './utils/subscription.utils';

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();
  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) {

  const html = await fetch(routeHtml).then((data) => data.text());
  content.innerHTML = html;
  await new Promise(requestAnimationFrame);
  injectHeader();

  switch (path) {
    case 'home':
      const { initHomePage } = await import('./pages/home/home');
      initHomePage();
      break;

    case 'process':
      const { init } = await import('./pages/process/process');
      init();
      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 { initAccount } = await import('./pages/account/account');
      initAccount();
      break;

    case 'chat':
      const { initChat } = await import('./pages/chat/chat');
      initChat();
      break;

      case 'signature':
        const container = document.querySelector('.container');
        if (container) {
            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');
  }
};

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

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

      if (services.isPaired()) {
        await navigate('process');
      } 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
              const sharedSecret = await services.getSecretForAddress(pairingAddress);
              if (!sharedSecret) {
                await services.connectMember([{sp_addresses: [pairingAddress]}]);
              }
            } catch (e) {
              console.error('Failed to pair:', e);
            }
          }, 2000);
        }
        await navigate('home');
      }
    }, 200);
  } catch (error) {
    console.error(error);
    await navigate('home');
  }
}

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;

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

(async () => {
  await init();
})();

(window as any).navigate = navigate;