import React, { memo } from 'react';
import {
  Animated,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import { Feather } from '@expo/vector-icons';

type ProductItem = {
  name: string;
};

type ProposedMedicinesSectionProps = {
  title?: string;
  proposedMeds: string[];
  proposedInput: string;
  onChangeInput: (value: string) => void;
  onFocusInput: () => void;
  showSuggestions: boolean;
  fadeAnim: Animated.Value;
  filteredProducts: readonly ProductItem[] | ProductItem[];
  onAdd: (name: string) => void;
  onRemove: (name: string) => void;
  placeholder?: string;
};

const ProposedMedicinesSection = ({
  title = '💊 Produits présentés',
  proposedMeds,
  proposedInput,
  onChangeInput,
  onFocusInput,
  showSuggestions,
  fadeAnim,
  filteredProducts,
  onAdd,
  onRemove,
  placeholder = 'Rechercher ou ajouter un produit',
}: ProposedMedicinesSectionProps) => {
  return (
    <>
      <Text style={styles.sectionTitle}>{title}</Text>

      <View style={styles.tagContainer}>
        {proposedMeds.map((med) => (
          <TouchableOpacity
            key={med}
            style={styles.tag}
            onPress={() => onRemove(med)}
          >
            <Text style={styles.tagText}>{med}</Text>
            <Feather name="x-circle" color="#D93025" size={16} />
          </TouchableOpacity>
        ))}
      </View>

      <TextInput
        placeholder={placeholder}
        style={styles.input}
        value={proposedInput}
        onChangeText={onChangeInput}
        onFocus={onFocusInput}
      />

      {showSuggestions && (
        <Animated.View style={[styles.suggestions, { opacity: fadeAnim }]}>
          {filteredProducts.map((product) => (
            <TouchableOpacity
              key={product.name}
              style={styles.suggestionItem}
              onPress={() => onAdd(product.name)}
            >
              <Text style={styles.suggestionText}>{product.name}</Text>
            </TouchableOpacity>
          ))}
        </Animated.View>
      )}
    </>
  );
};

export default memo(ProposedMedicinesSection);

const styles = StyleSheet.create({
  sectionTitle: {
    marginTop: 20,
    fontWeight: '700',
    fontSize: 15,
    color: '#202124',
  },
  tagContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: 6,
  },
  tag: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#DADCE0',
    borderRadius: 14,
    paddingHorizontal: 10,
    paddingVertical: 4,
    marginRight: 6,
    marginBottom: 6,
  },
  tagText: {
    color: '#202124',
    marginRight: 6,
    fontWeight: '500',
  },
  input: {
    borderWidth: 1,
    borderColor: '#DADCE0',
    backgroundColor: '#FFFFFF',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 14,
    marginTop: 6,
    color: '#202124',
  },
  suggestions: {
    marginTop: 2,
    backgroundColor: '#fff',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#DADCE0',
    overflow: 'hidden',
  },
  suggestionItem: {
    paddingVertical: 10,
    paddingHorizontal: 12,
  },
  suggestionText: {
    fontWeight: '500',
    color: '#111827',
  },
});