import React, { Component, ErrorInfo, ReactNode } from 'react';

interface Props {
    children?: ReactNode;
}

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

class ErrorBoundary extends Component<Props, State> {
    public state: State = {
        hasError: false,
        error: null
    };

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

    public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
        console.error("Uncaught error:", error, errorInfo);
    }

    public render() {
        if (this.state.hasError) {
            return (
                <div className="min-h-screen bg-slate-900 text-white p-10 font-mono">
                    <h1 className="text-3xl text-rose-500 mb-4">Software Crash Detected</h1>
                    <div className="bg-black/30 p-6 rounded-xl border border-rose-500/30">
                        <p className="text-lg font-bold mb-2">{this.state.error?.name}: {this.state.error?.message}</p>
                        <pre className="text-xs text-slate-400 overflow-auto max-h-[500px]">
                            {this.state.error?.stack}
                        </pre>
                    </div>
                    <button
                        onClick={() => window.location.reload()}
                        className="mt-6 px-6 py-3 bg-white/10 hover:bg-white/20 rounded-lg text-sm font-bold transition-all"
                    >
                        Reload Application
                    </button>
                </div>
            );
        }

        return this.props.children;
    }
}

export default ErrorBoundary;