import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './styles/fonts.css';
import './styles/app.css';
import * as db from './db/db';
import { App } from './ui/App';
import { applyTheme, getSettings } from './ui/hooks';
import { registerSW } from './pwa';
import { startAutoSync } from './sync/sync';

async function boot() {
  const root = createRoot(document.getElementById('root')!);
  try {
    await db.initDB();
    await db.preloadMeta(['syncConfig', 'syncCursor', 'lastSyncAt', 'lastBackupAt', 'healthImports', 'aiConfig']);
  } catch (e: any) {
    document.getElementById('boot')?.remove();
    root.render(
      <main style={{ padding: 24, fontFamily: 'system-ui' }}>
        <h1>Storage unavailable</h1>
        <p>Comeback Coach could not open its on-device database ({String(e?.message ?? e)}).</p>
        <p>If you are in a private browsing window, open the app in a normal window or from the Home Screen icon.</p>
      </main>,
    );
    return;
  }
  applyTheme(getSettings().theme);
  void db.requestPersistence();
  root.render(
    <StrictMode>
      <App />
    </StrictMode>,
  );
  document.getElementById('boot')?.remove();
  void registerSW();
  startAutoSync();
}

void boot();