import { auth } from './services/auth.js';
import { renderLoginPage } from './pages/LoginPage.js';
import { getPageByHash } from './pages/pagesRegistry.js';
import { renderSidebar } from './components/Sidebar.js';

export function initRouter() {
  const app = document.querySelector('#app');

  function navigate() {
    const hash = window.location.hash || '#login';

    if (!auth.checkAuth() && hash !== '#login') {
      window.location.hash = '#login';
      return;
    }

    app.innerHTML = '';

    switch (hash) {
      case '#login':
        app.appendChild(renderLoginPage(() => {
          window.location.hash = '#dashboard';
        }));
        break;
      default: {
        // Dynamic page rendering with sidebar
        const page = getPageByHash(hash);
        if (!page) {
          window.location.hash = '#dashboard';
          return;
        }
        const layout = document.createElement('div');
        layout.className = 'app-layout';
        const sidebar = renderSidebar();
        const main = document.createElement('main');
        main.appendChild(page.render());
        layout.appendChild(sidebar);
        layout.appendChild(main);
        app.appendChild(layout);
        break;
      }
    }
  }

  window.addEventListener('hashchange', navigate);
  navigate();
}