/**
 * @ai-summary Error boundary component specifically designed for mobile screens
 */

import React from 'react';
import { GlassCard } from '../../shared-minimal/components/mobile/GlassCard';

interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
  errorInfo: React.ErrorInfo | null;
}

interface MobileErrorBoundaryProps {
  children: React.ReactNode;
  screenName: string;
  onRetry?: () => void;
}

export class MobileErrorBoundary extends React.Component<MobileErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: MobileErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
    return { hasError: true, error };
  }

  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    this.setState({
      error,
      errorInfo
    });

    // Enhanced logging for debugging (temporary)
    console.error(`[Mobile Error Boundary] Screen: ${this.props.screenName}`);
    console.error(`[Mobile Error Boundary] Error message:`, error.message);
    console.error(`[Mobile Error Boundary] Error stack:`, error.stack);
    console.error(`[Mobile Error Boundary] Component stack:`, errorInfo.componentStack);
    console.error(`[Mobile Error Boundary] Full error object:`, error);
    console.error(`[Mobile Error Boundary] Full errorInfo object:`, errorInfo);
  }

  handleRetry = () => {
    this.setState({ hasError: false, error: null, errorInfo: null });
    this.props.onRetry?.();
  };

  override render() {
    if (this.state.hasError) {
      return (
        <div className="space-y-4 p-4">
          <GlassCard>
            <div className="text-center py-8">
              <div className="mb-4">
                <div className="mx-auto w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4">
                  <svg
                    className="w-8 h-8 text-red-600"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.082 16.5c-.77.833.192 2.5 1.732 2.5z"
                    />
                  </svg>
                </div>
                <h3 className="text-lg font-semibold text-slate-800 mb-2">
                  Oops! Something went wrong
                </h3>
                <p className="text-slate-600 mb-4">
                  There was an error loading the {this.props.screenName.toLowerCase()} screen.
                </p>
              </div>

              <div className="space-y-3">
                <button
                  onClick={this.handleRetry}
                  className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                >
                  Try Again
                </button>

                <button
                  onClick={() => window.location.reload()}
                  className="w-full px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
                >
                  Refresh App
                </button>
              </div>

              {process.env['NODE_ENV'] === 'development' && this.state.error && (
                <details className="mt-6 text-left">
                  <summary className="text-sm text-slate-500 cursor-pointer">
                    Error Details (Development)
                  </summary>
                  <div className="mt-2 p-3 bg-red-50 rounded text-xs text-red-800 overflow-auto">
                    <div className="font-semibold mb-1">Error:</div>
                    <div className="mb-2">{this.state.error.message}</div>

                    <div className="font-semibold mb-1">Stack Trace:</div>
                    <pre className="whitespace-pre-wrap text-xs">
                      {this.state.error.stack}
                    </pre>

                    {this.state.errorInfo && (
                      <>
                        <div className="font-semibold mb-1 mt-2">Component Stack:</div>
                        <pre className="whitespace-pre-wrap text-xs">
                          {this.state.errorInfo.componentStack}
                        </pre>
                      </>
                    )}
                  </div>
                </details>
              )}
            </div>
          </GlassCard>
        </div>
      );
    }

    return this.props.children;
  }
}