import { __ } from '@wordpress/i18n';
import React from 'react';
import { Alert, Button } from './index.jsx';
export default class AppErrorBoundary extends React.Component {
	constructor( props ) {
		super( props );
		this.state = {
			hasError: false,
			errorMessage: '',
		};
	}
	static getDerivedStateFromError( error ) {
		return {
			hasError: true,
			errorMessage: error?.message || 'Unknown error',
		};
	}
	componentDidCatch( error ) {
		if ( window?.arrayfunnelAdmin ) {
			window.arrayfunnelAdmin.lastError = String( error?.message || '' );
		}
	}
	handleRecover = () => {
		this.setState( {
			hasError: false,
			errorMessage: '',
		} );
		if ( typeof window !== 'undefined' ) {
			window.location.hash = '#/';
		}
	};
	render() {
		if ( ! this.state.hasError ) {
			return this.props.children;
		}
		return (
			<div className="arrayfunnel-card mx-auto mt-16 max-w-xl p-6 text-center">
				<h2 className="mb-2 text-lg font-semibold text-arrayfunnel-text">
					{ __( 'ArrayFunnel page failed to load', 'arrayfunnel' ) }
				</h2>
				<p className="mb-4 text-sm text-arrayfunnel-muted">
					{ __(
						'A rendering error occurred on this admin route. You can return to Home and retry.',
						'arrayfunnel'
					) }
				</p>
				<Alert type="error" className="mb-4 break-words">
					{ this.state.errorMessage }
				</Alert>
				<div className="flex justify-center gap-2">
					<Button variant="danger" onClick={ this.handleRecover }>
						{ __( 'Go to Home', 'arrayfunnel' ) }
					</Button>
					<Button
						variant="secondary"
						onClick={ () => window.location.reload() }
					>
						{ __( 'Reload Page', 'arrayfunnel' ) }
					</Button>
				</div>
			</div>
		);
	}
}