/**
 * Auffangnetz für Abstürze irgendwo im Baum.
 *
 * Ohne diese Grenze unmountet React die gesamte App bei jedem unbehandelten
 * Fehler beim Rendern - #wurzel bleibt leer, und übrig bleibt nur der
 * Seitenhintergrund (im Nacht-Theme praktisch schwarz). Genau das wurde als
 * "schwarze Seite nach Update prüfen" gemeldet: kein hängender Ladezustand,
 * sondern ein stiller Absturz, dessen eigentliche Fehlermeldung nirgends
 * ankam. Ein "zurück und wieder rein" half nur, weil das erneute Öffnen den
 * Baum komplett neu aufbaut und der auslösende Zustand dabei verschwindet.
 *
 * Diese Grenze behebt nicht die eigentliche Ursache - sie sorgt nur dafür,
 * dass ein Absturz ab jetzt sichtbar ist (Fehlertext, Neu-laden-Knopf) statt
 * unsichtbar zu bleiben, und dass der Fehlertext in der Konsole landet, um
 * die eigentliche Ursache beim nächsten Mal fassen zu können.
 */

import { Component, type ReactNode } from "react"

import { ActionButton } from "@audi-dash/ui"

export class ErrorGrenze extends Component<
  { children: ReactNode },
  { fehler: Error | null }
> {
  state: { fehler: Error | null } = { fehler: null }

  static getDerivedStateFromError(fehler: Error) {
    return { fehler }
  }

  componentDidCatch(fehler: Error, info: { componentStack?: string | null }) {
    console.error("ErrorGrenze: unbehandelter Fehler beim Rendern", fehler, info.componentStack)
  }

  render() {
    if (!this.state.fehler) return this.props.children
    return (
      <div className="dm-leer" style={{ minHeight: "100vh", justifyContent: "center" }}>
        <span className="dm-leer__titel">Etwas ist schiefgelaufen</span>
        <p className="dm-leer__text">
          Die Seite konnte nicht dargestellt werden. Ein Neuladen behebt das in der Regel.
        </p>
        <p className="dm-leer__text" style={{ fontFamily: "monospace", fontSize: "12px" }}>
          {this.state.fehler.message}
        </p>
        <ActionButton onClick={() => window.location.reload()}>Neu laden</ActionButton>
      </div>
    )
  }
}
