/**
 * React Error Boundary 컴포넌트
 * 
 * 애플리케이션에서 발생하는 JavaScript 오류를 캐치하고 처리
 */

import React from 'react';

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

    static getDerivedStateFromError(error) {
        // 다음 렌더링에서 폴백 UI가 보이도록 상태를 업데이트합니다.
        return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
        // 에러 로깅
        console.error('ErrorBoundary caught an error:', error, errorInfo);
        
        this.setState({
            error: error,
            errorInfo: errorInfo
        });
    }

    render() {
        if (this.state.hasError) {
            // 폴백 UI를 커스터마이징할 수 있습니다.
            return (
                <div style={{
                    padding: '20px',
                    margin: '20px',
                    border: '1px solid #ff6b6b',
                    borderRadius: '8px',
                    backgroundColor: '#fff5f5',
                    textAlign: 'center'
                }}>
                    <h2 style={{ color: '#d63031', marginBottom: '15px' }}>
                        ⚠️ 오류가 발생했습니다
                    </h2>
                    <p style={{ color: '#636e72', marginBottom: '20px' }}>
                        예상치 못한 오류가 발생했습니다. 페이지를 새로고침하거나 관리자에게 문의해주세요.
                    </p>
                    
                    {process.env.NODE_ENV === 'development' && this.state.error && (
                        <details style={{ 
                            marginTop: '20px', 
                            textAlign: 'left',
                            backgroundColor: '#f8f9fa',
                            padding: '15px',
                            borderRadius: '4px',
                            border: '1px solid #dee2e6'
                        }}>
                            <summary style={{ 
                                cursor: 'pointer', 
                                fontWeight: 'bold',
                                color: '#495057',
                                marginBottom: '10px'
                            }}>
                                개발자 정보 (클릭하여 펼치기)
                            </summary>
                            <div style={{ 
                                fontFamily: 'monospace', 
                                fontSize: '12px',
                                color: '#6c757d',
                                whiteSpace: 'pre-wrap'
                            }}>
                                <strong>Error:</strong> {this.state.error && this.state.error.toString()}
                                <br /><br />
                                <strong>Component Stack:</strong>
                                {this.state.errorInfo.componentStack}
                            </div>
                        </details>
                    )}
                    
                    <div style={{ marginTop: '20px' }}>
                        <button 
                            onClick={() => window.location.reload()}
                            style={{
                                backgroundColor: '#0984e3',
                                color: 'white',
                                border: 'none',
                                padding: '10px 20px',
                                borderRadius: '4px',
                                cursor: 'pointer',
                                marginRight: '10px'
                            }}
                        >
                            🔄 페이지 새로고침
                        </button>
                        <button 
                            onClick={() => window.history.back()}
                            style={{
                                backgroundColor: '#636e72',
                                color: 'white',
                                border: 'none',
                                padding: '10px 20px',
                                borderRadius: '4px',
                                cursor: 'pointer'
                            }}
                        >
                            ← 이전 페이지
                        </button>
                    </div>
                </div>
            );
        }

        return this.props.children;
    }
}

export default ErrorBoundary;
