import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ViewStyle,
  Dimensions
} from 'react-native';

const { width: screenWidth } = Dimensions.get('window');

interface ProgressBarProps {
  progress: number; // 0-100
  height?: number;
  backgroundColor?: string;
  fillColor?: string;
  borderRadius?: number;
  showPercentage?: boolean;
  animated?: boolean;
  style?: ViewStyle;
}

/**
 * Progress bar component for games
 */
export const ProgressBar: React.FC<ProgressBarProps> = ({
  progress,
  height = 12,
  backgroundColor = '#E0E0E0',
  fillColor = '#4CAF50',
  borderRadius = 6,
  showPercentage = false,
  animated = true,
  style
}) => {
  const progressWidth = `${Math.min(100, Math.max(0, progress))}%`;

  return (
    <View style={[styles.container, style]}>
      <View 
        style={[
          styles.background,
          {
            height,
            backgroundColor,
            borderRadius,
          }
        ]}
      >
        <View
          style={[
            styles.fill,
            {
              width: progressWidth,
              backgroundColor: fillColor,
              borderRadius,
            }
          ]}
        />
      </View>
      
      {showPercentage && (
        <Text style={styles.percentage}>
          {Math.round(progress)}%
        </Text>
      )}
    </View>
  );
};

interface GameFooterProps {
  leftContent?: React.ReactNode;
  centerContent?: React.ReactNode;
  rightContent?: React.ReactNode;
  backgroundColor?: string;
  style?: ViewStyle;
}

/**
 * Footer component for games with flexible content areas
 */
export const GameFooter: React.FC<GameFooterProps> = ({
  leftContent,
  centerContent,
  rightContent,
  backgroundColor = '#FFFFFF',
  style
}) => {
  return (
    <View style={[styles.footer, { backgroundColor }, style]}>
      <View style={styles.footerSection}>
        {leftContent}
      </View>
      
      <View style={styles.footerSection}>
        {centerContent}
      </View>
      
      <View style={styles.footerSection}>
        {rightContent}
      </View>
    </View>
  );
};

interface LevelIndicatorProps {
  currentLevel: number;
  totalLevels?: number;
  showProgress?: boolean;
  size?: 'small' | 'medium' | 'large';
  color?: string;
  backgroundColor?: string;
  style?: ViewStyle;
}

/**
 * Level indicator component
 */
export const LevelIndicator: React.FC<LevelIndicatorProps> = ({
  currentLevel,
  totalLevels,
  showProgress = false,
  size = 'medium',
  color = '#007AFF',
  backgroundColor = '#F0F0F0',
  style
}) => {
  const sizeConfig = {
    small: { width: 40, height: 40, fontSize: 14 },
    medium: { width: 60, height: 60, fontSize: 18 },
    large: { width: 80, height: 80, fontSize: 24 }
  };

  const config = sizeConfig[size];
  const progress = totalLevels ? (currentLevel / totalLevels) * 100 : 0;

  return (
    <View style={[styles.levelContainer, style]}>
      <View 
        style={[
          styles.levelCircle,
          {
            width: config.width,
            height: config.height,
            backgroundColor,
            borderColor: color,
          }
        ]}
      >
        <Text 
          style={[
            styles.levelText,
            {
              fontSize: config.fontSize,
              color,
            }
          ]}
        >
          {currentLevel}
        </Text>
      </View>
      
      {totalLevels && (
        <Text style={styles.levelTotal}>
          / {totalLevels}
        </Text>
      )}
      
      {showProgress && totalLevels && (
        <ProgressBar
          progress={progress}
          height={6}
          fillColor={color}
          style={styles.levelProgress}
        />
      )}
    </View>
  );
};

interface AchievementBadgeProps {
  title: string;
  description?: string;
  icon?: string;
  unlocked?: boolean;
  date?: Date;
  size?: 'small' | 'medium' | 'large';
  style?: ViewStyle;
}

/**
 * Achievement badge component
 */
export const AchievementBadge: React.FC<AchievementBadgeProps> = ({
  title,
  description,
  icon = '🏆',
  unlocked = false,
  date,
  size = 'medium',
  style
}) => {
  const sizeConfig = {
    small: { width: 60, height: 60, iconSize: 24, titleSize: 12 },
    medium: { width: 80, height: 80, iconSize: 32, titleSize: 14 },
    large: { width: 100, height: 100, iconSize: 40, titleSize: 16 }
  };

  const config = sizeConfig[size];

  return (
    <View style={[styles.achievementContainer, { width: config.width }, style]}>
      <View 
        style={[
          styles.achievementBadge,
          {
            width: config.width,
            height: config.height,
            opacity: unlocked ? 1 : 0.4,
          }
        ]}
      >
        <Text style={[styles.achievementIcon, { fontSize: config.iconSize }]}>
          {icon}
        </Text>
      </View>
      
      <Text 
        style={[
          styles.achievementTitle,
          { fontSize: config.titleSize }
        ]}
        numberOfLines={2}
      >
        {title}
      </Text>
      
      {description && (
        <Text style={styles.achievementDescription} numberOfLines={2}>
          {description}
        </Text>
      )}
      
      {unlocked && date && (
        <Text style={styles.achievementDate}>
          {date.toLocaleDateString('he-IL')}
        </Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  // ProgressBar styles
  container: {
    width: '100%',
  },
  background: {
    width: '100%',
    overflow: 'hidden',
  },
  fill: {
    height: '100%',
  },
  percentage: {
    textAlign: 'center',
    marginTop: 4,
    fontSize: 12,
    color: '#666',
  },

  // GameFooter styles
  footer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderTopWidth: 1,
    borderTopColor: '#E0E0E0',
  },
  footerSection: {
    flex: 1,
    alignItems: 'center',
  },

  // LevelIndicator styles
  levelContainer: {
    alignItems: 'center',
  },
  levelCircle: {
    borderRadius: 50,
    borderWidth: 3,
    justifyContent: 'center',
    alignItems: 'center',
  },
  levelText: {
    fontWeight: 'bold',
  },
  levelTotal: {
    marginTop: 4,
    fontSize: 14,
    color: '#666',
  },
  levelProgress: {
    marginTop: 8,
    width: 60,
  },

  // AchievementBadge styles
  achievementContainer: {
    alignItems: 'center',
    marginBottom: 16,
  },
  achievementBadge: {
    borderRadius: 50,
    backgroundColor: '#FFD700',
    borderWidth: 3,
    borderColor: '#FFA000',
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    elevation: 4,
  },
  achievementIcon: {
    // fontSize is set dynamically
  },
  achievementTitle: {
    fontWeight: 'bold',
    textAlign: 'center',
    marginTop: 8,
    color: '#333',
  },
  achievementDescription: {
    fontSize: 12,
    color: '#666',
    textAlign: 'center',
    marginTop: 4,
  },
  achievementDate: {
    fontSize: 10,
    color: '#999',
    marginTop: 4,
  },
});