import React from 'react';

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

    static getDerivedStateFromError(error) {
        // Update state so the next render will show the fallback UI.
        return { hasError: true, error };
    }

    componentDidCatch(error, errorInfo) {
        // You can also log the error to an error reporting service here
        console.error("Uncaught error:", error, errorInfo);
        this.setState({ errorInfo });
    }

    render() {
        if (this.state.hasError) {
            // You can render any custom fallback UI
            return (
                <div className="min-h-screen flex items-center justify-center bg-red-50 p-6">
                    <div className="max-w-3xl w-full bg-white rounded-lg shadow-xl border border-red-200 overflow-hidden">
                        
                        {/* Header */}
                        <div className="bg-red-600 px-6 py-4">
                            <h2 className="text-xl font-bold text-white flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
                                Application Error
                            </h2>
                        </div>

                        {/* Content */}
                        <div className="p-6">
                            <p className="text-gray-700 font-medium mb-4">
                                Something went wrong while rendering this component.
                            </p>

                            {/* Actual Error Message */}
                            <div className="bg-red-50 border border-red-100 rounded p-4 mb-4 overflow-auto">
                                <p className="text-red-700 font-mono text-sm break-all">
                                    {this.state.error && this.state.error.toString()}
                                </p>
                            </div>

                            {/* Stack Trace (collapsed details) */}
                            <details className="mb-6 cursor-pointer">
                                <summary className="text-sm text-gray-500 hover:text-gray-700 font-medium select-none">
                                    View Component Stack Trace
                                </summary>
                                <pre className="mt-2 p-4 bg-gray-900 text-green-400 text-xs rounded overflow-auto h-64">
                                    {this.state.errorInfo && this.state.errorInfo.componentStack}
                                </pre>
                            </details>

                            {/* Actions */}
                            <div className="flex gap-4">
                                <button 
                                    onClick={() => window.location.reload()}
                                    className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md font-medium transition-colors"
                                >
                                    Reload Page
                                </button>
                                <button 
                                    onClick={() => window.history.back()}
                                    className="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md font-medium transition-colors"
                                >
                                    Go Back
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }

        return this.props.children;
    }
}