import React from 'react';

/**
 * Catches render-time crashes so they surface as a readable message instead of a
 * white screen. React unmounts the whole tree when an error escapes, which is
 * indistinguishable from "the deploy didn't work" — this makes the difference
 * visible without opening devtools, which matters most on a hosted build where
 * the stack is minified and nobody is watching the console.
 */
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  static getDerivedStateFromError(error) {
    return { error };
  }

  componentDidCatch(error, info) {
    console.error('Application crashed:', error, info?.componentStack);
  }

  render() {
    if (!this.state.error) {
      return this.props.children;
    }

    return (
      <div className="min-h-screen flex items-center justify-center bg-slate-50 p-6">
        <div className="max-w-lg w-full bg-white border border-slate-200 rounded-lg shadow-sm p-6">
          <h1 className="text-lg font-semibold text-slate-900">Something went wrong</h1>
          <p className="mt-2 text-sm text-slate-600">
            The application failed to render. The details below are also in the browser console.
          </p>
          <pre className="mt-4 p-3 bg-slate-100 rounded text-xs text-slate-800 overflow-auto max-h-64 whitespace-pre-wrap">
            {String(this.state.error?.stack || this.state.error)}
          </pre>
          <button
            type="button"
            onClick={() => window.location.reload()}
            className="mt-4 px-4 py-2 text-sm font-medium text-white bg-slate-900 rounded hover:bg-slate-700"
          >
            Reload
          </button>
        </div>
      </div>
    );
  }
}

export default ErrorBoundary;