import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Swipeable } from 'react-native-gesture-handler';
import { MaterialIcons } from '@expo/vector-icons';
import { ShoppingListEntry } from '../../types';
import { COLORS } from '../../constants';

interface Props {
  entry: ShoppingListEntry;
  onCheckOff: () => void;
  onRemove: () => void;
}

export function ShoppingItem({ entry, onCheckOff, onRemove }: Props) {
  const renderRightActions = () => (
    <TouchableOpacity style={styles.deleteAction} onPress={onRemove}>
      <MaterialIcons name="delete-outline" size={22} color={COLORS.white} />
    </TouchableOpacity>
  );

  return (
    <Swipeable renderRightActions={renderRightActions} overshootRight={false} friction={2}>
      <View style={[styles.card, entry.isChecked && styles.cardChecked]}>
        <TouchableOpacity
          style={[styles.checkbox, entry.isChecked && styles.checkboxChecked]}
          onPress={onCheckOff}
          disabled={entry.isChecked}
          accessibilityLabel={`${entry.name} abhaken`}
        >
          {entry.isChecked && <MaterialIcons name="check" size={15} color={COLORS.white} />}
        </TouchableOpacity>

        <View style={styles.info}>
          <Text style={[styles.name, entry.isChecked && styles.nameChecked]} numberOfLines={1}>
            {entry.name}
          </Text>
          <View style={styles.metaRow}>
            <Text style={styles.quantity}>
              {entry.suggestedQuantity} {entry.unit}
            </Text>
            {entry.autoAdded && (
              <View style={styles.autoBadge}>
                <Text style={styles.autoBadgeText}>Auto</Text>
              </View>
            )}
          </View>
        </View>
      </View>
    </Swipeable>
  );
}

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: COLORS.white,
    borderRadius: 14,
    marginHorizontal: 16,
    marginVertical: 4,
    padding: 14,
    gap: 12,
    shadowColor: '#000',
    shadowOpacity: 0.05,
    shadowRadius: 6,
    elevation: 1,
  },
  cardChecked: { opacity: 0.5 },
  checkbox: {
    width: 26,
    height: 26,
    borderRadius: 13,
    borderWidth: 2,
    borderColor: COLORS.primary,
    justifyContent: 'center',
    alignItems: 'center',
  },
  checkboxChecked: {
    backgroundColor: COLORS.primary,
    borderColor: COLORS.primary,
  },
  info: { flex: 1 },
  name: { fontSize: 15, fontWeight: '500', color: COLORS.text },
  nameChecked: { textDecorationLine: 'line-through', color: COLORS.textSecondary },
  metaRow: { flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 2 },
  quantity: { fontSize: 12, color: COLORS.textSecondary },
  autoBadge: {
    backgroundColor: COLORS.surface,
    borderRadius: 4,
    paddingHorizontal: 5,
    paddingVertical: 1,
  },
  autoBadgeText: {
    fontSize: 10,
    color: COLORS.textSecondary,
    fontWeight: '600',
    letterSpacing: 0.3,
  },
  deleteAction: {
    backgroundColor: COLORS.danger,
    justifyContent: 'center',
    alignItems: 'center',
    width: 72,
    borderRadius: 14,
    marginVertical: 4,
    marginRight: 16,
  },
});
