import React from 'react'

/**
 * Fängt Render-Fehler ab — verhindert „weißen Bildschirm“ ohne Hinweis (z. B. nach Deploy/Chaches).
 */
export default class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { error: null }
  }

  static getDerivedStateFromError(error) {
    return { error }
  }

  componentDidCatch(error, info) {
    console.error('ErrorBoundary:', error, info?.componentStack)
  }

  render() {
    if (this.state.error) {
      const msg = this.state.error?.message || String(this.state.error)
      return (
        <div
          style={{
            minHeight: '100vh',
            padding: '24px',
            fontFamily: 'system-ui, sans-serif',
            background: '#f8fafc',
            color: '#0f172a',
          }}
        >
          <h1 style={{ fontSize: '1.25rem', marginBottom: '12px' }}>Ein Fehler ist aufgetreten</h1>
          <p style={{ marginBottom: '16px', maxWidth: '40rem', lineHeight: 1.5 }}>
            Die Oberfläche konnte nicht geladen werden. Details siehe unten oder in der
            Browser-Konsole (F12). Nach einem Deploy einen <strong>harten Reload</strong> (Cache leeren)
            versuchen.
          </p>
          <pre
            style={{
              padding: '12px',
              background: '#fff',
              border: '1px solid #e2e8f0',
              borderRadius: 8,
              overflow: 'auto',
              fontSize: '0.85rem',
            }}
          >
            {msg}
          </pre>
          <p style={{ marginTop: '20px' }}>
            <button
              type="button"
              style={{
                padding: '10px 16px',
                borderRadius: 8,
                border: '1px solid #cbd5e1',
                background: '#fff',
                cursor: 'pointer',
              }}
              onClick={() => window.location.reload()}
            >
              Seite neu laden
            </button>
          </p>
        </div>
      )
    }
    return this.props.children
  }
}