/**
 * Musterseite: die Oberflaeche der App mit Beispieldaten, ohne Server.
 *
 * WOFUER
 * ------
 * Die App braucht sonst einen gespeicherten Zugang, um ueberhaupt etwas
 * anzuzeigen - und damit war jede OPTISCHE Pruefung an ein Zugangstoken
 * gebunden. Genau daran ist in diesem Projekt wiederholt die Verifikation
 * haengengeblieben, obwohl fast jeder gefundene Fehler (CSS-Spezifitaet,
 * Flex-Basis in Spalten, unsichtbare Rahmen) nur am gerenderten Bild
 * sichtbar war und von tsc und den Tests nicht gefunden werden konnte.
 *
 * Diese Seite mountet dieselben Bildschirme mit demselben Stylesheet, aber
 * mit `beispielApi()` aus den Tests. Kein Netz, kein Token, keine echten
 * Daten - und trotzdem echtes CSS.
 *
 * NICHT TEIL DER APP
 * ------------------
 * Gebaut wird sie ueber `vite.muster.config.ts` nach `dist-muster/`. Der
 * normale `npm run build` fasst sie nicht an, sie liegt also auch nicht in
 * der .ipa.
 *
 * Aufruf: `?seite=einst` (Vorgabe), jeder Name aus navigation.ts TITEL.
 * Dazu `?seite=einrichtung` fuer den Willkommensbildschirm - der ist keine
 * Route (er steht VOR der Anmeldung) und braucht deshalb einen eigenen Zweig.
 */

import { StrictMode, useState } from "react"
import { createRoot } from "react-dom/client"

import "@audi-dash/ui/styles.css"
import "../src/stile/grundlage.css"
import "../src/stile/audi-schrift.css"
import "../src/stile/rahmen.css"
import "../src/stile/screens.css"

import { DatenAnbieter } from "../src/daten/DatenKontext"
import { Shell } from "../src/Shell"
import type { SeitenName } from "../src/navigation"
import { TITEL } from "../src/navigation"
import { Bestaetigungsblatt } from "../src/screens/bestaetigung"
import { Einrichtung } from "../src/screens/Einrichtung"
import { SeiteFuer } from "../src/screens/register"
import { beispielApi } from "../src/tests/beispieldaten"

function Muster() {
  const gewaehlt = new URLSearchParams(location.search).get("seite") || "einst"
  const start = gewaehlt as SeitenName
  const [route, setzeRoute] = useState<{ name: SeitenName; id?: string }>({ name: start })
  const geheZu = (name: SeitenName, id?: string) =>
    setzeRoute(id === undefined ? { name } : { name, id })
  // Der Willkommensbildschirm haengt an keinem Zugang und an keiner Route.
  if (gewaehlt === "einrichtung") return <Einrichtung fertig={() => {}} />
  return (
    <DatenAnbieter api={beispielApi()}>
      <Bestaetigungsblatt />
      <Shell route={route} geheZu={geheZu} tabBeschriftung>
        <SeiteFuer
          route={route}
          geheZu={geheZu}
          tabBeschriftung
          setzeTabBeschriftung={() => {}}
          beiAbmeldung={() => {}}
        />
      </Shell>
    </DatenAnbieter>
  )
}

// Zum schnellen Springen zwischen den Seiten, ohne die Adresse zu tippen.
;(window as unknown as { SEITEN: string[] }).SEITEN = Object.keys(TITEL)

const wurzel = document.getElementById("wurzel")
if (!wurzel) throw new Error("Wurzelelement #wurzel fehlt")
createRoot(wurzel).render(
  <StrictMode>
    <Muster />
  </StrictMode>,
)