import { Component, type ErrorInfo, type ReactNode } from 'react';
import { Button } from '../components/ui';
export class ErrorBoundary extends Component<{ children: ReactNode }, { error?: Error }> {
  state: { error?: Error } = {};
  static getDerivedStateFromError(error: Error) {
    return { error };
  }
  componentDidCatch(error: Error, info: ErrorInfo) {
    console.error('React fatal error', error, info);
  }
  render() {
    return this.state.error ? (
      <main className="grid h-screen place-items-center bg-app text-text-primary">
        <section className="max-w-xl rounded-xl border border-danger-border bg-panel p-6 shadow-xl">
          <h1 className="text-xl font-semibold">界面发生致命错误</h1>
          <pre className="mt-3 whitespace-pre-wrap text-sm text-danger">
            {this.state.error.message}
          </pre>
          <Button variant="danger" className="mt-4" onClick={() => location.reload()}>
            重新加载
          </Button>
        </section>
      </main>
    ) : (
      this.props.children
    );
  }
}