const response = await fetch('./pages.json')
if (!response.ok) throw new Error('router: failed to load pages.json — run build.sh')
const PAGES = await response.json()

const MODULE_CACHE = new Map()
let activeCSS = null

function currentRoute() {
  const hash = window.location.hash.replace(/^#\//, '') || PAGES[0]?.route || ''
  return hash.split('?')[0]
}

async function render(routeName) {
  const page = PAGES.find(p => p.route === routeName) ?? PAGES[0]
  const main  = document.querySelector('main')
  if (!main || !page) return

  const htmlRes = await fetch(page.html)
  if (!htmlRes.ok) throw new Error(`router: failed to load ${page.html}`)
  main.innerHTML = await htmlRes.text()

  activeCSS?.remove()
  activeCSS = null
  if (page.css) {
    const link  = document.createElement('link')
    link.rel    = 'stylesheet'
    link.href   = page.css
    document.head.appendChild(link)
    activeCSS = link
  }

  if (page.js) {
    if (!MODULE_CACHE.has(page.js)) {
      MODULE_CACHE.set(page.js, await import(`../${page.js}`))
    }
    MODULE_CACHE.get(page.js)?.init?.(main)
  }
}

await render(currentRoute())
window.addEventListener('hashchange', () => render(currentRoute()))