import './style.css';
import 'katex/dist/katex.min.css';
import { createI18n } from './i18n';
import { models } from './models/registry';
import { icon } from './ui/icons';

const i18n = createI18n();
const { t } = i18n;
document.documentElement.lang = i18n.locale;
document.title = t('app.title');

const app = document.querySelector<HTMLDivElement>('#app')!;
app.innerHTML = `
  <a class="skip-link" href="#experiment">${t('app.skip')}</a>
  <header class="site-header">
    <a class="brand" href="#experiment">${icon('orbit')}<span>${t('app.brand')}</span><span class="brand-divider"></span><small>${t('app.tagline')}</small></a>
    <nav aria-label="${t('app.navigation')}">
      <a class="nav-link" href="#experiment">${t('app.experiment')}</a>
      <a class="nav-link" href="#physics">${t('app.principle')}</a>
      <span class="model-number">${t('app.module', { number: i18n.number(1, { minimumIntegerDigits: 2 }) })}</span>
    </nav>
  </header>
  <main id="experiment" tabindex="-1"></main>
  <footer class="site-footer"><span>${icon('orbit')}${t('app.footer')}</span><span>${t('app.footerNote')}</span></footer>`;

const host = app.querySelector<HTMLElement>('main')!;
try {
  const instance = await models[0].mount(host, { i18n });
  if (import.meta.hot) import.meta.hot.dispose(() => instance.dispose());
} catch (error) {
  console.error(error);
  host.innerHTML = `<div class="load-error" role="alert"><p>${t('app.loadError')}</p><button class="button" type="button">${t('app.reload')}</button></div>`;
  host.querySelector('button')?.addEventListener('click', () => window.location.reload());
}