import { state } from './core/state.js';
import { router, navigate, register, init as initRouter } from './core/router.js';
import { initCanvas } from './core/particles.js';
import { api } from './core/api.js';

async function boot() {
  initCanvas();

  // Register routes
  register('/', () => import('./screens/home.js').then(m => m.default));
  register('/login', () => import('./screens/login.js').then(m => m.default));
  register('/play', () => import('./screens/chess-lobby.js').then(m => m.default));
  register('/ludo', () => import('./screens/ludo-lobby.js').then(m => m.default));
  register('/domino', () => import('./screens/domino-lobby.js').then(m => m.default));
  register('/backgammon', () => import('./screens/backgammon-lobby.js').then(m => m.default));
  register('/game', () => import('./screens/game-chess.js').then(m => m.default));
  register('/profile', () => import('./screens/profile.js').then(m => m.default));
  register('/leaderboard', () => import('./screens/leaderboard.js').then(m => m.default));
  register('/friends', () => import('./screens/friends.js').then(m => m.default));
  register('/shop', () => import('./screens/shop.js').then(m => m.default));
  register('/achievements', () => import('./screens/achievements.js').then(m => m.default));
  register('/settings', () => import('./screens/settings.js').then(m => m.default));
  register('/games', () => import('./screens/home.js').then(m => m.default));

  // Auth check
  if (!state.isLoggedIn() && location.pathname !== '/login' && location.pathname !== '/register') {
    navigate('/login', {}, true);
    initRouter(document.getElementById('main'));
    return;
  }

  // Load profile if logged in
  if (state.isLoggedIn()) {
    const data = await api('/api/profile');
    if (data && data.profile) {
      state.set('user', data.profile);
      updateShell(data.profile);
    }
  }

  initRouter(document.getElementById('main'));
  setupNav();
}

function updateShell(profile) {
  const lvl = document.getElementById('hdr-level');
  if (lvl) lvl.textContent = `Lv ${profile.level || 1}`;

  const coins = document.getElementById('hdr-coins');
  if (coins) coins.textContent = (profile.coins || 0).toLocaleString();

  const gems = document.getElementById('hdr-gems');
  if (gems) gems.textContent = profile.gems || 0;
}

function setupNav() {
  const navItems = document.querySelectorAll('.nav-item');
  const updateActive = () => {
    const path = location.pathname;
    navItems.forEach(item => {
      const href = item.getAttribute('href');
      const match = (href === '/' && path === '/') || (href !== '/' && path.startsWith(href));
      item.classList.toggle('active', match);
    });
  };
  updateActive();
  window.addEventListener('popstate', updateActive);

  // Also listen for navigate events
  const orig = history.pushState;
  history.pushState = function() {
    orig.apply(this, arguments);
    updateActive();
  };
}

// Boot when DOM ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', boot);
} else {
  boot();
}

// Export for global access by game engines
window.El3ab = { state, navigate, api };
