import React, { Component, ReactNode } from 'react';
import { blankScreenPrevention } from '../utils/blankScreenPrevention';

interface Props {
  children: ReactNode;
  fallback?: ReactNode;
}

interface State {
  hasError: boolean;
  error?: Error;
  errorInfo?: React.ErrorInfo;
  retryCount: number;
}

export class BlankScreenErrorBoundary extends Component<Props, State> {
  private maxRetries = 3;
  private retryTimeout?: NodeJS.Timeout;

  constructor(props: Props) {
    super(props);
    this.state = {
      hasError: false,
      retryCount: 0
    };
  }

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

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error('🚨 BlankScreenErrorBoundary caught an error:', error, errorInfo);
    
    this.setState({
      error,
      errorInfo
    });

    // Notify blank screen prevention system
    blankScreenPrevention.getInstance();

    // Save error details for debugging
    try {
      localStorage.setItem('last-react-error', JSON.stringify({
        error: error.message,
        stack: error.stack,
        componentStack: errorInfo.componentStack,
        timestamp: Date.now(),
        userAgent: navigator.userAgent,
        url: window.location.href
      }));
    } catch (e) {
      console.error('Failed to save error details:', e);
    }

    // Attempt automatic recovery for certain types of errors
    if (this.shouldAttemptAutoRecovery(error)) {
      this.attemptAutoRecovery();
    }
  }

  private shouldAttemptAutoRecovery(error: Error): boolean {
    // Don't auto-recover on mobile to avoid issues
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    if (isMobile) {
      return false;
    }

    const errorMessage = error.message.toLowerCase();
    const recoverableErrors = [
      'chunk load failed',
      'loading chunk',
      'network error',
      'failed to fetch',
      'script error'
    ];

    return recoverableErrors.some(pattern => errorMessage.includes(pattern)) &&
           this.state.retryCount < this.maxRetries;
  }

  private attemptAutoRecovery = () => {
    if (this.state.retryCount >= this.maxRetries) {
      console.error('🚨 Max auto-recovery attempts reached');
      return;
    }

    console.log(`🔄 Attempting auto-recovery (${this.state.retryCount + 1}/${this.maxRetries})`);

    // Clear the error state after a delay
    this.retryTimeout = setTimeout(() => {
      this.setState(prevState => ({
        hasError: false,
        error: undefined,
        errorInfo: undefined,
        retryCount: prevState.retryCount + 1
      }));
    }, 2000);
  };

  private handleManualRetry = () => {
    console.log('🔄 Manual retry requested');
    
    // Clear any pending auto-retry
    if (this.retryTimeout) {
      clearTimeout(this.retryTimeout);
    }

    // Reset error state
    this.setState({
      hasError: false,
      error: undefined,
      errorInfo: undefined,
      retryCount: 0
    });
  };

  private handleFullReload = () => {
    console.log('🔄 Full reload requested');
    
    // Save current state before reload
    try {
      localStorage.setItem('error-recovery-reload', JSON.stringify({
        timestamp: Date.now(),
        error: this.state.error?.message,
        retryCount: this.state.retryCount
      }));
    } catch (e) {
      console.error('Failed to save reload state:', e);
    }

    window.location.reload();
  };

  componentWillUnmount() {
    if (this.retryTimeout) {
      clearTimeout(this.retryTimeout);
    }
  }

  render() {
    if (this.state.hasError) {
      // Custom fallback UI
      if (this.props.fallback) {
        return this.props.fallback;
      }

      // Default error UI
      return (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'var(--bg-color, #ffffff)',
          color: 'var(--text-color, #000000)',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '20px',
          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
          textAlign: 'center',
          zIndex: 9999
        }}>
          <div style={{ maxWidth: '400px' }}>
            <h2 style={{ marginBottom: '16px', fontSize: '24px', fontWeight: '600' }}>
              🎵 Something went wrong
            </h2>
            
            <p style={{ marginBottom: '24px', fontSize: '16px', lineHeight: '1.5', opacity: 0.8 }}>
              The music app encountered an error. Don't worry - your music and settings are safe.
            </p>

            {this.state.retryCount < this.maxRetries && (
              <p style={{ marginBottom: '24px', fontSize: '14px', opacity: 0.6 }}>
                Auto-recovery in progress... ({this.state.retryCount + 1}/{this.maxRetries})
              </p>
            )}

            <div style={{ display: 'flex', gap: '12px', justifyContent: 'center', flexWrap: 'wrap' }}>
              <button
                onClick={this.handleManualRetry}
                style={{
                  background: '#007AFF',
                  color: 'white',
                  border: 'none',
                  padding: '12px 24px',
                  borderRadius: '8px',
                  fontSize: '16px',
                  fontWeight: '500',
                  cursor: 'pointer',
                  transition: 'opacity 0.2s'
                }}
                onMouseOver={(e) => e.currentTarget.style.opacity = '0.8'}
                onMouseOut={(e) => e.currentTarget.style.opacity = '1'}
              >
                Try Again
              </button>

              <button
                onClick={this.handleFullReload}
                style={{
                  background: 'transparent',
                  color: 'var(--text-color, #000000)',
                  border: '1px solid var(--border-color, #ccc)',
                  padding: '12px 24px',
                  borderRadius: '8px',
                  fontSize: '16px',
                  fontWeight: '500',
                  cursor: 'pointer',
                  transition: 'opacity 0.2s'
                }}
                onMouseOver={(e) => e.currentTarget.style.opacity = '0.8'}
                onMouseOut={(e) => e.currentTarget.style.opacity = '1'}
              >
                Refresh App
              </button>
            </div>

            {process.env.NODE_ENV === 'development' && this.state.error && (
              <details style={{ marginTop: '24px', textAlign: 'left' }}>
                <summary style={{ cursor: 'pointer', fontSize: '14px', opacity: 0.6 }}>
                  Error Details (Development)
                </summary>
                <pre style={{
                  background: '#f5f5f5',
                  padding: '12px',
                  borderRadius: '4px',
                  fontSize: '12px',
                  overflow: 'auto',
                  marginTop: '8px',
                  maxHeight: '200px'
                }}>
                  {this.state.error.stack}
                </pre>
              </details>
            )}
          </div>
        </div>
      );
    }

    return this.props.children;
  }
}