import React from 'react';
import { View, Text, Image, TouchableOpacity, StyleSheet } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import { HouseholdItem } from '../../types';
import { COLORS, CATEGORY_ICONS, CATEGORY_LABELS, CATEGORY_COLORS, CATEGORY_ICON_COLORS } from '../../constants';
import { isExpiringSoon, isExpired, formatDate } from '../../utils';
import { QuantityControl } from '../ui/QuantityControl';

interface Props {
  item: HouseholdItem;
  onPress: () => void;
  onQuantityChange: (qty: number) => void;
}

export function ItemCard({ item, onPress, onQuantityChange }: Props) {
  const expired = isExpired(item.expiryDate);
  const expiringSoon = isExpiringSoon(item.expiryDate);

  return (
    <TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.75}>
      <View
        style={[
          styles.photoContainer,
          !item.photoUrl && { backgroundColor: CATEGORY_COLORS[item.category] ?? COLORS.surface },
        ]}
      >
        {item.photoUrl ? (
          <Image source={{ uri: item.photoUrl }} style={styles.photo} />
        ) : (
          <MaterialIcons
            name={CATEGORY_ICONS[item.category] as any}
            size={28}
            color={CATEGORY_ICON_COLORS[item.category] ?? COLORS.primaryLight}
          />
        )}
      </View>

      <View style={styles.content}>
        <View style={styles.titleRow}>
          <Text style={styles.name} numberOfLines={1}>
            {item.name}
          </Text>
          {item.onShoppingList && (
            <View style={styles.cartBadge}>
              <MaterialIcons name="shopping-cart" size={11} color={COLORS.warning} />
            </View>
          )}
        </View>

        <Text style={styles.meta} numberOfLines={1}>
          {CATEGORY_LABELS[item.category]}
          {item.storageLocation ? ` · ${item.storageLocation}` : ''}
        </Text>

        {(expiringSoon || expired) && item.expiryDate && (
          <View style={[styles.mhdBadge, expired ? styles.mhdExpired : styles.mhdWarn]}>
            <MaterialIcons
              name={expired ? 'error-outline' : 'schedule'}
              size={11}
              color={expired ? '#B71C1C' : '#E65100'}
            />
            <Text style={[styles.mhdText, expired ? styles.mhdTextExpired : styles.mhdTextWarn]}>
              {expired ? 'Abgelaufen' : `MHD ${formatDate(item.expiryDate)}`}
            </Text>
          </View>
        )}

        <QuantityControl
          quantity={item.quantity}
          unit={item.unit}
          minStockThreshold={item.minStockThreshold}
          onChangeQuantity={onQuantityChange}
          compact
        />
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    backgroundColor: COLORS.white,
    borderRadius: 16,
    marginHorizontal: 16,
    marginVertical: 5,
    padding: 14,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.07,
    shadowRadius: 8,
    elevation: 2,
    gap: 12,
    alignItems: 'center',
  },
  photoContainer: {
    width: 72,
    height: 72,
    borderRadius: 12,
    overflow: 'hidden',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: COLORS.surface,
  },
  photo: { width: '100%', height: '100%', resizeMode: 'cover' },
  content: { flex: 1, gap: 4 },
  titleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
  },
  name: {
    fontSize: 16,
    fontWeight: '600',
    color: COLORS.text,
    flex: 1,
  },
  cartBadge: {
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: '#FFF8E1',
    justifyContent: 'center',
    alignItems: 'center',
  },
  meta: { fontSize: 12, color: COLORS.textSecondary },
  mhdBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 3,
    borderRadius: 6,
    paddingHorizontal: 7,
    paddingVertical: 3,
    alignSelf: 'flex-start',
  },
  mhdWarn: { backgroundColor: '#FFF3E0' },
  mhdExpired: { backgroundColor: '#FFEBEE' },
  mhdText: { fontSize: 11, fontWeight: '600' },
  mhdTextWarn: { color: '#E65100' },
  mhdTextExpired: { color: '#B71C1C' },
});
