import React, { ReactNode } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { ErrorBoundary } from './ErrorBoundary';
import { debugLogger } from '@/services/DebugLogger';
import { AppColors, Spacing, FontSizes, BorderRadius } from '@/constants/theme';

interface TTSErrorBoundaryProps {
  children: ReactNode;
}

/**
 * TTSErrorBoundary - specialized error boundary for TTS operations
 * Catches crashes during voice synthesis and playback
 */
export function TTSErrorBoundary({ children }: TTSErrorBoundaryProps) {
  const handleError = (error: Error, errorInfo: React.ErrorInfo) => {
    // Additional TTS-specific error handling
    debugLogger.error('TTS', '💥 TTS CRASH CAUGHT BY ERROR BOUNDARY', {
      message: error.message,
      name: error.name,
      stack: error.stack,
      componentStack: errorInfo.componentStack,
    });

    // Check for common TTS errors
    if (error.message.includes('TTSManager')) {
      debugLogger.error('TTS', 'Native module error - TTSManager not initialized or crashed');
    }
    if (error.message.includes('generateAndPlay')) {
      debugLogger.error('TTS', 'Speech generation/playback failed');
    }
    if (error.message.includes('model') || error.message.includes('onnx')) {
      debugLogger.error('TTS', 'TTS model loading error - check if models are bundled');
    }
  };

  const fallbackUI = (
    <View style={styles.container}>
      <View style={styles.errorCard}>
        <Text style={styles.errorIcon}>🔊</Text>
        <Text style={styles.errorTitle}>Voice Playback Error</Text>
        <Text style={styles.errorMessage}>
          The voice synthesis system encountered an error and was reset.
        </Text>
        <Text style={styles.debugHint}>
          Check the Debug tab for detailed error logs
        </Text>
      </View>
    </View>
  );

  return (
    <ErrorBoundary
      category="TTS"
      onError={handleError}
      fallback={fallbackUI}
    >
      {children}
    </ErrorBoundary>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: AppColors.background,
    padding: Spacing.lg,
  },
  errorCard: {
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.lg,
    padding: Spacing.xl,
    maxWidth: 360,
    width: '100%',
    alignItems: 'center',
    borderLeftWidth: 4,
    borderLeftColor: AppColors.error || '#E53935',
  },
  errorIcon: {
    fontSize: 48,
    marginBottom: Spacing.md,
  },
  errorTitle: {
    fontSize: FontSizes.xl,
    fontWeight: '700',
    color: AppColors.textPrimary,
    marginBottom: Spacing.sm,
    textAlign: 'center',
  },
  errorMessage: {
    fontSize: FontSizes.base,
    color: AppColors.textSecondary,
    marginBottom: Spacing.md,
    textAlign: 'center',
    lineHeight: 22,
  },
  debugHint: {
    fontSize: FontSizes.xs,
    color: AppColors.textMuted,
    textAlign: 'center',
    marginTop: Spacing.xs,
  },
});