mission-control-v2/frontend/src/components/AppErrorBoundary.tsx

import React from "react"

// Globale Error Boundary (Review F4): Ein JS-Fehler in einer View riss vorher die komplette
// App in einen weißen Screen. Hier: Fehler anzeigen + Neu-laden-Knopf, Rest bleibt bedienbar
// nach Reload. (GraphView hat zusätzlich seine eigene Boundary für Canvas-Crashes.)
interface State { error: Error | null }

export class AppErrorBoundary extends React.Component<React.PropsWithChildren, State> {
  state: State = { error: null }

  static getDerivedStateFromError(error: Error): State {
    return { error }
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    console.error("Unbehandelter UI-Fehler:", error, info.componentStack)
  }

  render() {
    if (!this.state.error) return this.props.children
    return (
      <div className="min-h-screen flex items-center justify-center bg-neutral-950 text-neutral-200 p-8">
        <div className="max-w-lg space-y-4 text-center">
          <div className="text-2xl">Da ist etwas schiefgelaufen.</div>
          <div className="text-sm text-neutral-400 break-all">
            {this.state.error.message}
          </div>
          <button
            className="px-4 py-2 rounded-lg bg-neutral-800 hover:bg-neutral-700 border border-neutral-700"
            onClick={() => window.location.reload()}
          >
            Neu laden
          </button>
        </div>
      </div>
    )
  }
}