import React, { Component, type ErrorInfo, type ReactNode } from 'react';
import { Text, View, Pressable, StyleSheet } from 'react-native';

interface Props {
  children: ReactNode;
  /** 降级 UI（可选） */
  fallback?: (error: Error, reset: () => void) => ReactNode;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

/**
 * 全局错误边界：捕获子组件渲染异常，防止白屏崩溃。
 * 提供重试按钮和错误信息展示。
 */
export class ErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false, error: null };

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, info: ErrorInfo): void {
    // 记录错误（可接入 crash 上报）
    console.error('[ErrorBoundary]', error.message, info.componentStack);
  }

  handleReset = () => {
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError && this.state.error) {
      if (this.props.fallback) {
        return this.props.fallback(this.state.error, this.handleReset);
      }
      return (
        <View style={styles.container}>
          <Text style={styles.icon}>⚠️</Text>
          <Text style={styles.title}>{'页面出现问题'}</Text>
          <Text style={styles.message} numberOfLines={4}>
            {this.state.error.message}
          </Text>
          <Pressable style={styles.button} onPress={this.handleReset}>
            <Text style={styles.buttonText}>{'重试'}</Text>
          </Pressable>
        </View>
      );
    }
    return this.props.children;
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24, gap: 12 },
  icon: { fontSize: 48 },
  title: { fontSize: 18, fontWeight: '700', color: '#1f2937' },
  message: { fontSize: 13, color: '#6b7280', textAlign: 'center' },
  button: { marginTop: 8, paddingHorizontal: 24, paddingVertical: 10, backgroundColor: '#1f2937', borderRadius: 8 },
  buttonText: { color: '#fff', fontSize: 15, fontWeight: '600' },
});
