/**
 * Error Boundary for Chat Widget
 * Catches errors and displays a friendly fallback UI
 */

import { Component, ErrorInfo, ReactNode } from 'react';
import { AlertCircle, RefreshCw } from 'lucide-react';
import { t } from '@/lib/i18n';

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

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

export class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

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

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // Log error to console (removed in production by terser)
    console.error('BoostBot Error:', error, errorInfo);
    
    // TODO: Send to error tracking service when available
    // if (window.boostbot_config?.error_tracking) {
    //   fetch('/wp-json/boostbot/v1/errors', {...})
    // }
  }

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

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

      // Default error UI
      return (
        <div className="flex flex-col items-center justify-center p-6 text-center bg-red-50 rounded-lg m-4">
          <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-3">
            <AlertCircle className="w-6 h-6 text-red-500" />
          </div>
          
          <h3 className="text-sm font-medium text-red-800 mb-1">
            {t('Oops! Something went wrong')}
          </h3>
          
          <p className="text-xs text-red-600 mb-4">
            {t('We apologize for the inconvenience')}
          </p>
          
          <button
            onClick={this.handleRetry}
            className="
              inline-flex items-center gap-2 px-4 py-2
              text-sm font-medium text-white
              bg-red-500 hover:bg-red-600
              rounded-lg transition-colors
            "
          >
            <RefreshCw className="w-4 h-4" />
            {t('Try again')}
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

/**
 * Chat-specific error fallback
 */
export function ChatErrorFallback({ onRetry }: { onRetry?: () => void }) {
  return (
    <div className="flex flex-col items-center justify-center p-6 text-center">
      <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
        <AlertCircle className="w-8 h-8 text-gray-400" />
      </div>
      
      <h3 className="text-base font-medium text-gray-900 mb-2">
        {t('Chat is currently unavailable')}
      </h3>
      
      <p className="text-sm text-gray-500 mb-4">
        {t('Try refreshing the page or come back later')}
      </p>
      
      {onRetry && (
        <button
          onClick={onRetry}
          className="
            inline-flex items-center gap-2 px-4 py-2
            text-sm font-medium
            text-primary-600 hover:text-primary-700
            bg-primary-50 hover:bg-primary-100
            rounded-lg transition-colors
          "
        >
          <RefreshCw className="w-4 h-4" />
          {t('Refresh')}
        </button>
      )}
    </div>
  );
}








