import '@fontsource-variable/nunito-sans';
import './styles.css';
import { mountAccountMenu } from './account/account-menu';
import { getCurrentUser } from './account/auth';
import { DONATE_URL } from './config';
import { legacyRedirect, startRouter } from './pages/router';
import { mountCardsPage } from './pages/cards-page';
import { mountCommunityPage } from './pages/community-page';
import { mountHomePage } from './pages/home-page';
import { mountResetPage } from './pages/reset-page';
import { mountEditor } from './editor/editor-page';
import { bindEditorToAuth } from './editor/auth-reset';
import { createStore, initialEditorState } from './editor/state';
import { mountDonateBanner } from './shell/donate-banner';
import { mountHeader } from './shell/header';
import { initTheme } from './shell/theme';

// Hell/Dunkel: das Skript in index.html hat es vor dem ersten Paint gesetzt; hier wird nur die Browserleiste angeglichen.
initTheme();

// Alte Editor-Links (`/?karte=<id>`) zeigen jetzt auf `/gestalten?karte=<id>`; der Verlauf bekommt keinen Eintrag dazu.
const legacyTarget = legacyRedirect(new URL(location.href));
if (legacyTarget) history.replaceState(null, '', legacyTarget);

// Der Editor-Zustand lebt außerhalb der Seiten und überlebt Seitenwechsel.
const editorStore = createStore(initialEditorState());
// … und gehört zum angemeldeten Konto: beim Abmelden oder Kontowechsel wird er geleert bzw. entkoppelt.
bindEditorToAuth(editorStore);

// Spenden-Banner (ohne DONATE_URL bleibt der Platz leer) und Kopfzeile mit Navigation, Suche und Knöpfen.
const bannerSlot = document.getElementById('donate-banner');
if (bannerSlot) mountDonateBanner(bannerSlot, DONATE_URL);
const header = document.getElementById('app-header');
if (header) mountHeader(header, { donateUrl: DONATE_URL });

// Konto-Menü im Seitenkopf. Der Anmeldestatus wird einmal beim Start geholt; schlägt das fehl
// (außer 401, das getCurrentUser selbst als „abgemeldet“ meldet), gilt der Nutzer als abgemeldet.
const accountSlot = document.getElementById('account-slot');
if (accountSlot) {
  const menu = mountAccountMenu(accountSlot);
  getCurrentUser()
    .catch((error: unknown) => {
      console.error('Anmeldestatus konnte nicht geprüft werden', error);
    })
    .finally(() => menu.ready());
}

// Der Router setzt `document.title` je Seite (titleFor) und ruft für jede Route die passende Mount-Funktion.
startRouter((route, root) => {
  switch (route.id) {
    case 'gestalten':
      return mountEditor(root, editorStore);
    case 'cards':
      return mountCardsPage(root, editorStore);
    case 'community':
      return mountCommunityPage(root, route.params.id ?? '');
    case 'reset':
      return mountResetPage(root);
    case 'home':
      return mountHomePage(root);
  }
});