project_it207_client/components/ProductCard.tsx

import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image, ActivityIndicator, Alert } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { ProductResponse } from '../services/product';
import { useRouter } from 'expo-router';
import { useCart } from '../hooks/useCart';
import { wishlistApi } from '../services/wishlistApi ';

interface ProductCardProps {
  product: ProductResponse;
  onWishlistToggle?: (isAdded: boolean) => void;
}

const ProductCard: React.FC<ProductCardProps> = ({ product, onWishlistToggle }) => {
  const router = useRouter();
  const { addToCart } = useCart();
  const [isAdding, setIsAdding] = useState(false);
  const [isInWishlist, setIsInWishlist] = useState(false);
  const [isLoadingWishlist, setIsLoadingWishlist] = useState(false);

  const handlePress = () => {
    router.push(`/products/${product.productId}`);
  };

  const handleAddToCart = async (e: any) => {
    e.stopPropagation();
    
    if (product.stockQuantity <= 0) {
      return;
    }

    setIsAdding(true);
    try {
      await addToCart(product.productId, 1);
    } finally {
      setIsAdding(false);
    }
  };

  const handleToggleWishlist = async (e: any) => {
    e.stopPropagation();
    setIsLoadingWishlist(true);
    
    try {
      if (isInWishlist) {
        const response = await wishlistApi.removeFromWishlist(product.productId);
        if (response.success) {
          setIsInWishlist(false);
          onWishlistToggle?.(false);
          Alert.alert('Thành công', response.message);
        } else {
          Alert.alert('Lỗi', response.message);
        }
      } else {
        const response = await wishlistApi.addToWishlist(product.productId);
        if (response.success) {
          setIsInWishlist(true);
          onWishlistToggle?.(true);
          Alert.alert('Thành công', response.message);
        } else {
          Alert.alert('Lỗi', response.message);
        }
      }
    } catch (error) {
      Alert.alert('Lỗi', error instanceof Error ? error.message : 'Lỗi không xác định');
    } finally {
      setIsLoadingWishlist(false);
    }
  };

  const formatPrice = (price: number) => {
    return new Intl.NumberFormat('vi-VN', {
      style: 'currency',
      currency: 'VND',
    }).format(price);
  };

  return (
    <TouchableOpacity style={styles.card} onPress={handlePress} activeOpacity={0.7}>
      <View style={styles.imageContainer}>
        <Image
          source={{ uri: product.imageUrl || 'https://via.placeholder.com/150' }}
          style={styles.image}
          resizeMode="cover"
        />
        
        {/* Category Badge */}
        <View style={styles.categoryBadge}>
          <Text style={styles.categoryText}>{product.categoryName}</Text>
        </View>

        {/* Wishlist Button */}
        <TouchableOpacity
          style={[
            styles.wishlistButton,
            isInWishlist && styles.wishlistButtonActive,
          ]}
          onPress={handleToggleWishlist}
          disabled={isLoadingWishlist}
        >
          {isLoadingWishlist ? (
            <ActivityIndicator size="small" color={isInWishlist ? '#ff6b6b' : '#fff'} />
          ) : (
            <Ionicons
              name={isInWishlist ? 'heart' : 'heart-outline'}
              size={20}
              color={isInWishlist ? '#ff6b6b' : '#fff'}
            />
          )}
        </TouchableOpacity>

        {/* Out of Stock Overlay */}
        {product.stockQuantity <= 0 && (
          <View style={styles.outOfStockOverlay}>
            <Text style={styles.outOfStockText}>HẾT HÀNG</Text>
          </View>
        )}
      </View>

      <View style={styles.content}>
        <Text style={styles.productName} numberOfLines={2}>
          {product.productName}
        </Text>
        
        <View style={styles.footer}>
          <View style={styles.priceSection}>
            <Text style={styles.price}>{formatPrice(product.price)}</Text>
            {product.stockQuantity > 0 && (
              <Text style={styles.stockText}>Còn {product.stockQuantity}</Text>
            )}
          </View>

          {/* Add to Cart Button */}
          <TouchableOpacity
            style={[
              styles.addButton,
              product.stockQuantity <= 0 && styles.addButtonDisabled,
            ]}
            onPress={handleAddToCart}
            disabled={product.stockQuantity <= 0 || isAdding}
            activeOpacity={0.7}
          >
            {isAdding ? (
              <ActivityIndicator size="small" color="#fff" />
            ) : (
              <Ionicons 
                name="cart-outline" 
                size={22} 
                color={product.stockQuantity <= 0 ? '#999' : '#fff'} 
              />
            )}
          </TouchableOpacity>
        </View>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    marginHorizontal: 16,
    marginVertical: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
    overflow: 'hidden',
  },
  imageContainer: {
    position: 'relative',
    width: '100%',
    height: 200,
  },
  image: {
    width: '100%',
    height: '100%',
    backgroundColor: '#f0f0f0',
  },
  categoryBadge: {
    position: 'absolute',
    top: 12,
    left: 12,
    backgroundColor: 'rgba(255, 107, 107, 0.95)',
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 6,
  },
  categoryText: {
    fontSize: 12,
    color: '#fff',
    fontWeight: '600',
  },
  wishlistButton: {
    position: 'absolute',
    top: 12,
    right: 12,
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  wishlistButtonActive: {
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
  },
  outOfStockOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  outOfStockText: {
    fontSize: 18,
    fontWeight: '700',
    color: '#fff',
    letterSpacing: 2,
  },
  content: {
    padding: 12,
  },
  productName: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    marginBottom: 8,
    minHeight: 44,
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  priceSection: {
    flex: 1,
  },
  price: {
    fontSize: 18,
    fontWeight: '700',
    color: '#ff6b6b',
    marginBottom: 2,
  },
  stockText: {
    fontSize: 12,
    color: '#4caf50',
    fontWeight: '500',
  },
  addButton: {
    width: 44,
    height: 44,
    backgroundColor: '#ff6b6b',
    borderRadius: 22,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#ff6b6b',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 4,
  },
  addButtonDisabled: {
    backgroundColor: '#ccc',
    shadowOpacity: 0,
  },
});

export default ProductCard;