import React from 'react';
import { View, Pressable } from 'react-native';
import { Icon } from '../ui/Icon';
import { Text } from '../ui/Text';
import { Card } from '../ui/Card';
import { DeckProgress } from '../../store/progressStore';
import { router } from 'expo-router';
import { useThemeColors } from '~/utils/themeUtils';

interface DeckProgressCardProps {
  progress: DeckProgress;
}

export const DeckProgressCard: React.FC<DeckProgressCardProps> = ({ progress }) => {
  const colors = useThemeColors();
  
  const getMasteryColor = (percentage: number) => {
    if (percentage >= 80) return '#16a34a'; // green-600
    if (percentage >= 60) return '#2563eb'; // blue-600
    if (percentage >= 40) return '#ca8a04'; // yellow-600
    if (percentage >= 20) return '#ea580c'; // orange-600
    return colors.mutedForeground;
  };

  const getMasteryIcon = (percentage: number) => {
    if (percentage >= 80) return 'trophy';
    if (percentage >= 60) return 'medal';
    if (percentage >= 40) return 'ribbon';
    if (percentage >= 20) return 'school';
    return 'book';
  };

  return (
    <Pressable
      onPress={() => router.push(`/deck/${progress.deck_id}`)}
      style={({ pressed }) => pressed && { opacity: 0.7 }}>
      <Card padding="md" variant="elevated">
        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
          <View style={{ flex: 1 }}>
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <Text style={{ flex: 1, fontSize: 16, fontWeight: '600', color: colors.foreground }} numberOfLines={1}>
                {progress.deck_name}
              </Text>
              <Icon
                name={getMasteryIcon(progress.completion_percentage)}
                library="Ionicons"
                size={20}
                color={getMasteryColor(progress.completion_percentage)}
              />
            </View>

            {/* Progress Bar */}
            <View style={{ marginTop: 8, height: 8, overflow: 'hidden', borderRadius: 9999, backgroundColor: colors.muted }}>
              <View
                style={{ 
                  height: '100%', 
                  backgroundColor: '#3b82f6',
                  width: `${progress.completion_percentage}%` 
                }}
              />
            </View>

            {/* Stats */}
            <View style={{ marginTop: 8, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <View style={{ height: 8, width: 8, borderRadius: 9999, backgroundColor: '#10b981' }} />
                  <Text style={{ marginLeft: 4, fontSize: 12, color: colors.mutedForeground }}>
                    {progress.mastered_cards} gemeistert
                  </Text>
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <View style={{ height: 8, width: 8, borderRadius: 9999, backgroundColor: '#eab308' }} />
                  <Text style={{ marginLeft: 4, fontSize: 12, color: colors.mutedForeground }}>
                    {progress.learning_cards} lernen
                  </Text>
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <View style={{ height: 8, width: 8, borderRadius: 9999, backgroundColor: colors.muted }} />
                  <Text style={{ marginLeft: 4, fontSize: 12, color: colors.mutedForeground }}>
                    {progress.new_cards} neu
                  </Text>
                </View>
              </View>

              <Text
                style={{ fontSize: 14, fontWeight: 'bold', color: getMasteryColor(progress.completion_percentage) }}>
                {progress.completion_percentage}%
              </Text>
            </View>

            {/* Ease Factor */}
            <View style={{ marginTop: 4, flexDirection: 'row', alignItems: 'center' }}>
              <Icon name="speedometer-outline" library="Ionicons" size={12} color={colors.mutedForeground} />
              <Text style={{ marginLeft: 4, fontSize: 12, color: colors.mutedForeground }}>
                Schwierigkeit: {progress.average_ease_factor.toFixed(1)}
              </Text>
            </View>
          </View>
        </View>
      </Card>
    </Pressable>
  );
};