import React from 'react';

interface Props { children: React.ReactNode; }
interface State { hasError: boolean; error: Error | null; }

export class ErrorBoundary extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = { hasError: false, error: null };
    }

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

    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
        console.error('ErrorBoundary caught:', error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            return (
                <div style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    minHeight: '100vh', background: '#0a0f1a', color: '#e2e8f0',
                    fontFamily: '"DM Sans", sans-serif', flexDirection: 'column', gap: 16,
                }}>
                    <div style={{ fontSize: 48 }}>⚠️</div>
                    <h1 style={{ fontSize: 24, fontWeight: 700 }}>Something went wrong</h1>
                    <p style={{ color: '#94a3b8', maxWidth: 400, textAlign: 'center', lineHeight: 1.6 }}>
                        {this.state.error?.message || 'An unexpected error occurred.'}
                    </p>
                    <button
                        onClick={() => { this.setState({ hasError: false, error: null }); window.location.reload(); }}
                        style={{
                            background: '#6366f1', color: '#fff', border: 'none', borderRadius: 8,
                            padding: '10px 24px', fontSize: 14, fontWeight: 600, cursor: 'pointer',
                            marginTop: 8,
                        }}
                    >
                        Reload App
                    </button>
                </div>
            );
        }
        return this.props.children;
    }
}