import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { AlertCircle } from 'lucide-react';

function DetailedErrorFallback({ error, resetErrorBoundary }) {
    return (
        <div className="min-h-screen bg-gray-50 p-8">
            <Alert variant="destructive" className="mx-auto max-w-4xl">
                <AlertCircle className="h-5 w-5" />
                <AlertTitle className="mb-2 text-xl font-bold">Runtime Error</AlertTitle>
                <AlertDescription>
                    <div className="mt-4 space-y-4">
                        {/* Error Message */}
                        <div>
                            <h3 className="text-sm font-medium text-gray-500">Error Message:</h3>
                            <p className="mt-1 font-medium text-red-600">{error.message}</p>
                        </div>

                        {/* Component Stack */}
                        <div>
                            <h3 className="text-sm font-medium text-gray-500">Component Stack:</h3>
                            <pre className="mt-1 overflow-auto rounded-md bg-gray-900 p-4 text-sm text-white">
                                {error.componentStack || error.stack}
                            </pre>
                        </div>

                        {/* Additional Error Info */}
                        {error.fileName && (
                            <div>
                                <h3 className="text-sm font-medium text-gray-500">File:</h3>
                                <p className="mt-1 font-mono text-sm">{error.fileName}</p>
                            </div>
                        )}

                        {error.lineNumber && (
                            <div>
                                <h3 className="text-sm font-medium text-gray-500">Line:</h3>
                                <p className="mt-1 font-mono text-sm">{error.lineNumber}</p>
                            </div>
                        )}

                        {/* Error Properties */}
                        <div>
                            <h3 className="text-sm font-medium text-gray-500">Additional Details:</h3>
                            <pre className="mt-1 overflow-auto rounded-md bg-gray-100 p-4 text-sm">
                                {JSON.stringify(error, Object.getOwnPropertyNames(error), 2)}
                            </pre>
                        </div>

                        {/* Actions */}
                        <div className="mt-6 flex gap-4">
                            <button
                                onClick={resetErrorBoundary}
                                className="rounded bg-red-600 px-4 py-2 text-white transition-colors hover:bg-red-700"
                            >
                                Try Again
                            </button>
                            <button
                                onClick={() => window.location.reload()}
                                className="rounded border border-red-600 px-4 py-2 text-red-600 transition-colors hover:bg-red-50"
                            >
                                Reload Page
                            </button>
                        </div>
                    </div>
                </AlertDescription>
            </Alert>
        </div>
    );
}

export default DetailedErrorFallback;