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 { 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');
  }
};

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;

    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;