import { createRoot } from 'react-dom/client';
import { App } from './app/App';
import { initPanes, wirePanes } from './app/orchestration/panes';
import {
  initChartTheme,
  initDataInspectorHeight,
  initDataInspectorOpen,
  initPreviewFitMode,
  wireChartTheme,
  wireDataInspectorHeight,
  wireDataInspectorOpen,
  wirePreviewFitMode,
} from './app/orchestration/preferences';
import { initSettings, wireSettings } from './app/orchestration/settings';
import { initSnippetSort, wireSnippetSort } from './app/orchestration/snippet-sort';
import { initPersistentStorage, registerServiceWorker } from './app/orchestration/pwa';
import { initApp } from './app/orchestration/startup';
import { initTheme, wireTheme } from './app/orchestration/theme';
import '../styles/base.css';
// Self-hosted chart-font roster (Theme Builder font control). Separate from the
// UI font in base.css; only its latin subsets are precached (see chart-fonts.css).
import '../styles/chart-fonts.css';

// Hydrate the persisted theme onto <html data-theme> before first paint (no
// FOUC), then keep store ↔ DOM ↔ localStorage in sync. Store stays DOM-free;
// all browser access funnels through the orchestration + adapter.
initTheme();
wireTheme();

// Hydrate + persist the small UI preferences (preview fit mode, chart theme,
// pane widths) the same way. Pane widths hydrate before render so the layout
// opens as left.
initPreviewFitMode();
wirePreviewFitMode();
initChartTheme();
wireChartTheme();
initDataInspectorOpen();
wireDataInspectorOpen();
initDataInspectorHeight();
wireDataInspectorHeight();
initPanes();
wirePanes();

// Hydrate + persist the library sort (spec §02 → Sort) so the list opens ordered
// the way the user left it. Hydrate before render; persist on change.
initSnippetSort();
wireSnippetSort();

// Hydrate + persist the full UserSettings record (editor / performance /
// formatting) before render, so the editor, preview, and library read the user's
// settings from the first paint (spec §07 → Startup load).
initSettings();
wireSettings();

// Load the library from IndexedDB (seeding a sample on first run) and wire
// persistence. Fire-and-forget: the UI renders immediately and fills in when
// hydration resolves.
void initApp();

// PWA: register the service worker (prompt the user to reload on an update) and
// request persistent storage so the local-first workspace isn't evicted (web.dev).
registerServiceWorker();
initPersistentStorage();

createRoot(document.getElementById('app')!).render(<App />);
