import { Component, ReactNode } from 'react';

interface State { hasError: boolean; error?: Error }
export class ErrorBoundary extends Component<{ children: ReactNode }, State> {
  state: State = { hasError: false };
  static getDerivedStateFromError(error: Error): State { return { hasError: true, error }; }
  componentDidCatch(error: Error, info: any) { console.error('UI 错误兜底:', error, info); }
  render() {
    if (this.state.hasError) {
      return (
        <div style={{ padding: 24, color: '#f88', background: '#2a1518', height: '100vh', fontFamily: 'Consolas, monospace', fontSize: 13, whiteSpace: 'pre-wrap' }}>
          <h2>界面发生异常</h2>
          <p>错误：{this.state.error?.message}</p>
          <pre>{this.state.error?.stack}</pre>
          <button onClick={() => location.reload()} style={{ marginTop: 12, padding: '6px 16px', cursor: 'pointer' }}>重试</button>
        </div>
      );
    }
    return this.props.children;
  }
}