import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { ColorPalette } from '../types';
import { useColors } from '../constants/Colors';
import { SafeImage } from './SafeImage';

interface PlantCardProps {
  plant: {
    name: string;
    botanicalName?: string;
    imageUri: string;
    careInfo: {
      waterIntervalDays: number;
    };
  };
  width: number;
  onPress: () => void;
  t: any;
  isDark: boolean;
  colorPalette: ColorPalette;
}

export const PlantCard: React.FC<PlantCardProps> = ({
  plant,
  width,
  onPress,
  t,
  isDark,
  colorPalette,
}) => {
  const colors = useColors(isDark, colorPalette);
  const isUrgent = plant.careInfo?.waterIntervalDays <= 1;
  const wateringText = plant.careInfo?.waterIntervalDays
    ? (isUrgent
      ? t.waterToday
      : t.inXDays.replace('{0}', plant.careInfo.waterIntervalDays.toString()))
    : t.showDetails; // Default for lexicon entries

  return (
    <TouchableOpacity
      style={[styles.container, { width, shadowColor: colors.overlayStrong }]}
      activeOpacity={0.9}
      onPress={onPress}
    >
      <SafeImage uri={plant.imageUri} style={styles.image} />
      <View style={[styles.gradient, { backgroundColor: colors.overlay }]} />

      {/* Badge */}
      <View
        style={[
          styles.badge,
          isUrgent
            ? { backgroundColor: colors.warning }
            : { backgroundColor: colors.overlayStrong, borderWidth: 1, borderColor: colors.heroButtonBorder },
        ]}
      >
        <Ionicons name="water" size={10} color={colors.iconOnImage} />
        <Text style={[styles.badgeText, { color: colors.iconOnImage }]}>{wateringText}</Text>
      </View>

      {/* Content */}
      <View style={styles.content}>
        <Text style={[styles.name, { color: colors.textOnImage }]} numberOfLines={1}>{plant.name}</Text>
        <Text style={[styles.botanical, { color: colors.heroButton }]} numberOfLines={1}>{plant.botanicalName}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    aspectRatio: 0.8,
    borderRadius: 18,
    overflow: 'hidden',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 6,
    elevation: 4,
  },
  image: { width: '100%', height: '100%', resizeMode: 'cover' },
  gradient: {
    ...StyleSheet.absoluteFillObject,
    opacity: 0.8,
  },
  badge: {
    position: 'absolute',
    top: 10,
    left: 10,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  badgeText: { fontSize: 9, fontWeight: '700' },
  content: { position: 'absolute', bottom: 14, left: 10, right: 10 },
  name: { fontSize: 16, fontWeight: '700' },
  botanical: { fontSize: 11 },
});