import React from 'react';
import { View, Pressable, Image } from 'react-native';
import { Text } from '../ui/Text';
import { Icon } from '../ui/Icon';
import { Deck } from '../../store/deckStore';
import { useThemeColors } from '~/utils/themeUtils';

interface DeckCardProps {
  deck: Deck;
  onPress: () => void;
  showProgress?: boolean;
  isCompact?: boolean;
}

export const DeckCard: React.FC<DeckCardProps> = ({
  deck,
  onPress,
  showProgress = false,
  isCompact = false,
}) => {
  const isFavorite = deck.metadata?.is_favorite || false;
  const colors = useThemeColors();

  if (isCompact) {
    return (
      <Pressable onPress={onPress} style={({ pressed }) => ({
        backgroundColor: colors.surfaceElevated,
        borderRadius: 16,
        borderWidth: 1,
        borderColor: colors.border,
        padding: 16,
        marginBottom: 12,
        opacity: pressed ? 0.95 : 1,
      })}>
        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
          <View style={{ flex: 1 }}>
            <Text style={{ fontWeight: '600', color: colors.foreground, fontSize: 16 }} numberOfLines={1}>
              {deck.title}
            </Text>
            <View style={{ marginTop: 4, flexDirection: 'row', alignItems: 'center' }}>
              <Icon name="card-outline" size={14} color={colors.mutedForeground} library="Ionicons" />
              <Text style={{ marginLeft: 4, color: colors.mutedForeground, fontSize: 12 }}>
                {deck.card_count || 0} Karten
              </Text>
              {deck.is_public && (
                <>
                  <Text style={{ marginHorizontal: 8, color: colors.mutedForeground }}>•</Text>
                  <Icon name="globe-outline" size={14} color={colors.mutedForeground} library="Ionicons" />
                  <Text style={{ marginLeft: 4, color: colors.mutedForeground, fontSize: 12 }}>
                    Öffentlich
                  </Text>
                </>
              )}
            </View>
          </View>
          <Icon name="chevron-forward" size={20} color={colors.mutedForeground} library="Ionicons" />
        </View>
      </Pressable>
    );
  }

  return (
    <View style={{
      backgroundColor: colors.surfaceElevated,
      borderRadius: 16,
      borderWidth: 1,
      borderColor: colors.border,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.15,
      shadowRadius: 12,
      elevation: 6,
      overflow: 'hidden',
    }}>
    <Pressable onPress={onPress} style={({ pressed }) => ({ opacity: pressed ? 0.95 : 1 })}>
      {deck.cover_image_url ? (
        <Image source={{ uri: deck.cover_image_url }} style={{ height: 140, width: '100%', borderTopLeftRadius: 16, borderTopRightRadius: 16 }} resizeMode="cover" />
      ) : (
        <View style={{ 
          height: 140, 
          width: '100%', 
          alignItems: 'center', 
          justifyContent: 'center', 
          backgroundColor: `${colors.primary}15`,
          borderTopLeftRadius: 16,
          borderTopRightRadius: 16,
        }}>
          <Icon name="albums-outline" size={40} color={colors.primary} library="Ionicons" />
        </View>
      )}

      <View style={{ padding: 16 }}>
        <View style={{ flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between' }}>
          <View style={{ flex: 1 }}>
            <Text style={{ fontSize: 17, fontWeight: '600', color: colors.foreground, marginBottom: 4 }} numberOfLines={1}>
              {deck.title}
            </Text>
            {deck.description && (
              <Text style={{ color: colors.mutedForeground, fontSize: 14, lineHeight: 20 }} numberOfLines={2}>
                {deck.description}
              </Text>
            )}
          </View>
          {isFavorite && (
            <Icon
              name="heart"
              size={18}
              color={colors.destructive}
              style={{ marginLeft: 12, marginTop: 2 }}
              library="Ionicons"
            />
          )}
        </View>

        {showProgress && (
          <View style={{ marginTop: 16 }}>
            <View style={{ marginBottom: 6, flexDirection: 'row', justifyContent: 'space-between' }}>
              <Text style={{ fontSize: 12, fontWeight: '500', color: colors.mutedForeground }}>
                Fortschritt
              </Text>
              <Text style={{ fontSize: 12, fontWeight: '500', color: colors.mutedForeground }}>
                0%
              </Text>
            </View>
            <View style={{ height: 6, overflow: 'hidden', borderRadius: 3, backgroundColor: `${colors.muted}60` }}>
              <View style={{ height: '100%', borderRadius: 3, backgroundColor: colors.primary, width: '0%' }} />
            </View>
          </View>
        )}
      </View>
    </Pressable>
    </View>
  );
};