import * as React from 'react';
import { View, Text, StyleSheet, ViewStyle, TextStyle, TouchableOpacity } from 'react-native';

// Export all components

interface GameHeaderProps {
  title: string;
  score?: number;
  timeLeft?: number;
  progress?: number;
  subtitle?: string;
  backgroundColor?: string;
  textColor?: string;
  style?: ViewStyle;
}

export const GameHeader: React.FC<GameHeaderProps> = ({
  title,
  score,
  timeLeft,
  progress,
  subtitle,
  backgroundColor = '#007AFF',
  textColor = 'white',
  style
}) => {
  return (
    <View style={[styles.container, { backgroundColor }, style]}>
      <Text style={[styles.title, { color: textColor }]}>{title}</Text>
      
      {subtitle && (
        <Text style={[styles.subtitle, { color: textColor }]}>{subtitle}</Text>
      )}

      {progress !== undefined && (
        <View style={styles.progressContainer}>
          <View style={styles.progressBar}>
            <View 
              style={[
                styles.progressFill, 
                { width: `${Math.min(100, Math.max(0, progress))}%` }
              ]} 
            />
          </View>
        </View>
      )}

      <View style={styles.statsContainer}>
        {score !== undefined && (
          <Text style={[styles.statText, { color: textColor }]}>
            ניקוד: {score}
          </Text>
        )}
        
        {timeLeft !== undefined && (
          <Text style={[styles.statText, { color: textColor }]}>
            זמן: {timeLeft}s
          </Text>
        )}
      </View>
    </View>
  );
};

interface GameButtonProps {
  title: string;
  onPress: () => void;
  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  style?: ViewStyle;
  textStyle?: TextStyle;
}

export const GameButton: React.FC<GameButtonProps> = ({
  title,
  onPress,
  variant = 'primary',
  size = 'medium',
  disabled = false,
  style,
  textStyle
}) => {
  const buttonStyle = [
    styles.button,
    styles[`button${variant.charAt(0).toUpperCase() + variant.slice(1)}` as keyof typeof styles],
    styles[`button${size.charAt(0).toUpperCase() + size.slice(1)}` as keyof typeof styles],
    disabled && styles.buttonDisabled,
    style
  ].filter(Boolean);

  const textStyleCombined = [
    styles.buttonText,
    styles[`buttonText${size.charAt(0).toUpperCase() + size.slice(1)}` as keyof typeof styles],
    disabled && styles.buttonTextDisabled,
    textStyle
  ].filter(Boolean);

  return (
    <TouchableOpacity 
      style={buttonStyle}
      onPress={disabled ? undefined : onPress}
      disabled={disabled}
    >
      <Text style={textStyleCombined}>
        {title}
      </Text>
    </TouchableOpacity>
  );
};

interface ScoreDisplayProps {
  currentScore: number;
  maxScore?: number;
  label?: string;
  showProgress?: boolean;
  size?: 'small' | 'medium' | 'large';
  color?: string;
  style?: ViewStyle;
}

export const ScoreDisplay: React.FC<ScoreDisplayProps> = ({
  currentScore,
  maxScore,
  label = 'ניקוד',
  showProgress = false,
  size = 'medium',
  color = '#007AFF',
  style
}) => {
  const progressPercentage = maxScore ? (currentScore / maxScore) * 100 : 0;

  return (
    <View style={[styles.scoreContainer, style]}>
      <Text style={[styles.scoreLabel, styles[`scoreLabel${size.charAt(0).toUpperCase() + size.slice(1)}` as keyof typeof styles]]}>
        {label}
      </Text>
      
      <Text style={[
        styles.scoreValue, 
        styles[`scoreValue${size.charAt(0).toUpperCase() + size.slice(1)}` as keyof typeof styles],
        { color }
      ]}>
        {currentScore.toLocaleString()}
        {maxScore && ` / ${maxScore.toLocaleString()}`}
      </Text>

      {showProgress && maxScore && (
        <View style={styles.scoreProgressContainer}>
          <View style={styles.scoreProgressBar}>
            <View 
              style={[
                styles.scoreProgressFill, 
                { width: `${Math.min(100, progressPercentage)}%`, backgroundColor: color }
              ]} 
            />
          </View>
          <Text style={styles.scoreProgressText}>
            {Math.round(progressPercentage)}%
          </Text>
        </View>
      )}
    </View>
  );
};

interface TimerProps {
  timeLeft: number;
  totalTime?: number;
  format?: 'seconds' | 'minutes' | 'auto';
  showProgress?: boolean;
  color?: string;
  warningThreshold?: number;
  dangerThreshold?: number;
  style?: ViewStyle;
}

export const Timer: React.FC<TimerProps> = ({
  timeLeft,
  totalTime,
  format = 'auto',
  showProgress = false,
  color = '#333',
  warningThreshold = 10,
  dangerThreshold = 5,
  style
}) => {
  const formatTime = (seconds: number): string => {
    if (format === 'seconds' || (format === 'auto' && seconds < 60)) {
      return `${Math.ceil(seconds)}s`;
    }
    
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = Math.ceil(seconds % 60);
    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
  };

  const getTimerColor = (): string => {
    if (timeLeft <= dangerThreshold) return '#F44336';
    if (timeLeft <= warningThreshold) return '#FF9500';
    return color;
  };

  const progressPercentage = totalTime ? (timeLeft / totalTime) * 100 : 0;

  return (
    <View style={[styles.timerContainer, style]}>
      <Text style={[styles.timerText, { color: getTimerColor() }]}>
        {formatTime(timeLeft)}
      </Text>

      {showProgress && totalTime && (
        <View style={styles.timerProgressContainer}>
          <View style={styles.timerProgressBar}>
            <View 
              style={[
                styles.timerProgressFill, 
                { 
                  width: `${Math.min(100, Math.max(0, progressPercentage))}%`,
                  backgroundColor: getTimerColor()
                }
              ]} 
            />
          </View>
        </View>
      )}
    </View>
  );
};

interface LoadingSpinnerProps {
  size?: 'small' | 'medium' | 'large';
  color?: string;
  text?: string;
  style?: ViewStyle;
}

export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
  size = 'medium',
  color = '#007AFF',
  text,
  style
}) => {
  return (
    <View style={[styles.loadingContainer, style]}>
      <View style={[
        styles.spinner,
        styles[`spinner${size.charAt(0).toUpperCase() + size.slice(1)}` as keyof typeof styles],
        { borderColor: color }
      ]} />
      
      {text && (
        <Text style={[styles.loadingText, { color }]}>{text}</Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  // GameHeader styles
  container: {
    padding: 20,
    paddingTop: 40,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 15,
    opacity: 0.9,
  },
  progressContainer: {
    marginBottom: 15,
  },
  progressBar: {
    height: 8,
    backgroundColor: 'rgba(255,255,255,0.3)',
    borderRadius: 4,
  },
  progressFill: {
    height: '100%',
    backgroundColor: '#4CAF50',
    borderRadius: 4,
  },
  statsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  statText: {
    fontSize: 16,
    fontWeight: '600',
  },

  // GameButton styles
  button: {
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  buttonPrimary: {
    backgroundColor: '#007AFF',
  },
  buttonSecondary: {
    backgroundColor: '#5856D6',
  },
  buttonSuccess: {
    backgroundColor: '#34C759',
  },
  buttonWarning: {
    backgroundColor: '#FF9500',
  },
  buttonDanger: {
    backgroundColor: '#FF3B30',
  },
  buttonDisabled: {
    backgroundColor: '#E0E0E0',
    shadowOpacity: 0,
    elevation: 0,
  },
  buttonSmall: {
    paddingHorizontal: 12,
    paddingVertical: 8,
  },
  buttonMedium: {
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  buttonLarge: {
    paddingHorizontal: 24,
    paddingVertical: 16,
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
  },
  buttonTextSmall: {
    fontSize: 14,
  },
  buttonTextMedium: {
    fontSize: 16,
  },
  buttonTextLarge: {
    fontSize: 18,
  },
  buttonTextDisabled: {
    color: '#999',
  },

  // ScoreDisplay styles
  scoreContainer: {
    alignItems: 'center',
  },
  scoreLabel: {
    color: '#666',
    marginBottom: 4,
  },
  scoreLabelSmall: {
    fontSize: 12,
  },
  scoreLabelMedium: {
    fontSize: 14,
  },
  scoreLabelLarge: {
    fontSize: 16,
  },
  scoreValue: {
    fontWeight: 'bold',
  },
  scoreValueSmall: {
    fontSize: 18,
  },
  scoreValueMedium: {
    fontSize: 24,
  },
  scoreValueLarge: {
    fontSize: 32,
  },
  scoreProgressContainer: {
    alignItems: 'center',
    marginTop: 8,
    width: 120,
  },
  scoreProgressBar: {
    height: 6,
    backgroundColor: '#E0E0E0',
    borderRadius: 3,
    width: '100%',
    marginBottom: 4,
  },
  scoreProgressFill: {
    height: '100%',
    borderRadius: 3,
  },
  scoreProgressText: {
    fontSize: 12,
    color: '#666',
  },

  // Timer styles
  timerContainer: {
    alignItems: 'center',
  },
  timerText: {
    fontSize: 20,
    fontWeight: 'bold',
    fontFamily: 'monospace',
  },
  timerProgressContainer: {
    marginTop: 8,
    width: 60,
  },
  timerProgressBar: {
    height: 4,
    backgroundColor: '#E0E0E0',
    borderRadius: 2,
  },
  timerProgressFill: {
    height: '100%',
    borderRadius: 2,
  },

  // LoadingSpinner styles
  loadingContainer: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  spinner: {
    borderWidth: 3,
    borderTopColor: 'transparent',
    borderRadius: 50,
  },
  spinnerSmall: {
    width: 20,
    height: 20,
  },
  spinnerMedium: {
    width: 40,
    height: 40,
  },
  spinnerLarge: {
    width: 60,
    height: 60,
  },
  loadingText: {
    marginTop: 12,
    fontSize: 16,
  },
});