import { auth } from './services/auth.js';
import { renderLoginPage } from './pages/LoginPage.js';
import { renderDashboard } from './pages/DashboardPage.js';
import { renderTestPage } from './pages/test.js';
import { createSidebar } from './components/Sidebar.js';
import { getAvailablePages } from './pages/pagesRegistry.js';

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

  function navigate() {
    const hash = window.location.hash || '#login';
    const route = hash.substring(1); // Remove the # symbol

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

    app.innerHTML = '';

    // For authenticated routes, add sidebar and main content wrapper
    if (auth.checkAuth() && hash !== '#login') {
      const layout = document.createElement('div');
      layout.className = 'app-layout';

      // Create sidebar
      const pages = getAvailablePages(true);
      const sidebar = createSidebar(pages, route);
      
      // Create main content area
      const mainContent = document.createElement('main');
      mainContent.className = 'main-content';

      let pageContent;
      switch (hash) {
        case '#dashboard':
          pageContent = renderDashboard();
          break;
        case '#test':
          pageContent = renderTestPage();
          break;
        default:
          // For unregistered routes, redirect to dashboard
          window.location.hash = '#dashboard';
          return;
      }

      mainContent.appendChild(pageContent);
      layout.appendChild(sidebar);
      layout.appendChild(mainContent);
      app.appendChild(layout);
    } else {
      // For login page, no sidebar
      switch (hash) {
        case '#login':
          app.appendChild(renderLoginPage(() => {
            window.location.hash = '#dashboard';
          }));
          break;
        default:
          window.location.hash = '#login';
      }
    }
  }

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