import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

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

  componentDidCatch(error, errorInfo) {
    console.error('[MengyaNote] Error Boundary 捕获错误:', error, errorInfo);
    this.setState({
      error,
      errorInfo
    });
  }

  render() {
    if (this.state.hasError) {
      return (
        <div style={{
          padding: '40px',
          textAlign: 'center',
          maxWidth: '600px',
          margin: '100px auto',
          backgroundColor: '#fff3cd',
          border: '1px solid #ffc107',
          borderRadius: '8px'
        }}>
          <h1 style={{ color: '#856404', marginBottom: '20px' }}>⚠️ 应用出现错误</h1>
          <p style={{ color: '#856404', marginBottom: '15px' }}>
            抱歉，应用遇到了一个问题。这可能是由于浏览器权限设置导致的。
          </p>
          
          <div style={{
            backgroundColor: '#f8f9fa',
            padding: '15px',
            borderRadius: '4px',
            marginBottom: '20px',
            textAlign: 'left',
            fontFamily: 'monospace',
            fontSize: '12px',
            overflow: 'auto'
          }}>
            <strong>错误信息:</strong>
            <pre style={{ margin: '10px 0', whiteSpace: 'pre-wrap' }}>
              {this.state.error && this.state.error.toString()}
            </pre>
          </div>

          <div style={{ marginTop: '20px' }}>
            <button
              onClick={() => window.location.reload()}
              style={{
                padding: '10px 20px',
                backgroundColor: '#007bff',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                fontSize: '14px'
              }}
            >
              刷新页面重试
            </button>
          </div>

          <div style={{
            marginTop: '30px',
            padding: '15px',
            backgroundColor: '#e7f3ff',
            border: '1px solid #b3d9ff',
            borderRadius: '4px',
            textAlign: 'left',
            fontSize: '13px'
          }}>
            <strong>💡 可能的解决方案:</strong>
            <ul style={{ marginTop: '10px', paddingLeft: '20px' }}>
              <li>尝试在浏览器设置中允许此网站访问存储</li>
              <li>清除浏览器缓存和Cookie后重试</li>
              <li>尝试使用无痕/隐私模式访问</li>
              <li>更换其他浏览器（推荐 Chrome、Edge、Firefox）</li>
            </ul>
          </div>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;
