import './styles/tokens.css';
import './styles/layout.css';

import { registerSW } from 'virtual:pwa-register';
import { el } from './lib/dom.js';
import { initRouter } from './router.js';
import { Nav } from './components/Nav.js';
import { settings, applyTheme } from './store/settings.js';

applyTheme();
settings.subscribe(() => applyTheme());
window
  .matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', () => applyTheme());

const app = document.getElementById('app');
app.replaceChildren();

const viewHost = el('main', { id: 'view', class: 'view-host' });
app.append(Nav(), viewHost);

initRouter(viewHost);

// --- Service worker: prompt to refresh rather than silently swapping ------
const updateSW = registerSW({
  onNeedRefresh() {
    showToast('A new version is available.', 'Reload', () => updateSW(true));
  },
  onOfflineReady() {
    showToast('Ready to use offline.', 'Dismiss');
  },
});

function showToast(message, actionLabel, onAction) {
  const toast = el(
    'div',
    { class: 'toast', role: 'status' },
    el('span', {}, message),
    el(
      'button',
      {
        class: 'toast__action',
        type: 'button',
        onclick: () => {
          toast.remove();
          onAction?.();
        },
      },
      actionLabel,
    ),
  );
  document.body.append(toast);
  if (!onAction) setTimeout(() => toast.remove(), 5000);
}