import React from "react";

interface ErrorBoundaryProps {
  children: React.ReactNode;
}

interface ErrorBoundaryState {
  error: Error | null;
}

/**
 * App-wide error boundary. The app previously had NONE - so any uncaught render error
 * (e.g. a component that throws on a resize-triggered re-render) would unmount the whole
 * React tree and leave a blank white screen until a hard refresh. This catches that,
 * shows a recoverable message + the error text (so the actual cause is visible instead of
 * a silent blank), and lets the user reload or dismiss.
 */
class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
  state: ErrorBoundaryState = { error: null };

  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { error };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    // Keep the full detail in the console for diagnosis (component stack included).
    console.error("Uncaught error caught by ErrorBoundary:", error, info.componentStack);
  }

  private handleDismiss = () => this.setState({ error: null });

  private handleReload = () => window.location.reload();

  render() {
    const { error } = this.state;

    if (error) {
      return (
        <div className="flex min-h-screen items-center justify-center p-6" data-akashic-portal-frame="">
          <div className="w-full max-w-lg rounded-lg border border-red-200 bg-red-50 p-6 text-center">
            <h2 className="mb-2 text-lg font-semibold text-red-800">
              This screen could not be shown.
            </h2>
            <p className="mb-4 text-sm text-destructive">
              Reload the page, or dismiss this message to try again without ending your session.
            </p>
            <pre className="mb-4 max-h-40 overflow-auto whitespace-pre-wrap rounded bg-white p-3 text-left text-xs text-red-900">
              {error.message || String(error)}
            </pre>
            <div className="flex justify-center gap-2">
              <button type="button" className="btn btn-blue" onClick={this.handleReload}>
                Reload
              </button>
              <button type="button" className="btn" onClick={this.handleDismiss}>
                Dismiss
              </button>
            </div>
          </div>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;