Shop.jsx

import React, { useState, useEffect } from "react";
import { products, cart as cartAPI } from "../../api";
import "../../styles/shop.css";

const Shop = () => {
  const [artworks, setArtworks] = useState([]);
  const [cartItems, setCartItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [processingItems, setProcessingItems] = useState({}); // Renamed for clarity

  useEffect(() => {
    // Fetch both products and cart contents when the component loads
    const loadData = async () => {
      setLoading(true);
      try {
        const productsData = await products.getAll();
        const cartData = await cartAPI.get();
        setArtworks(Array.isArray(productsData) ? productsData : []);
        setCartItems(Array.isArray(cartData) ? cartData : (cartData.cartItems || []));
      } catch (err) {
        console.error("Failed to load shop data:", err);
        setError("Failed to load the shop. Please try again later.");
      } finally {
        setLoading(false);
      }
    };
    loadData();
  }, []);

  // 1. This function now just checks if an item is in the cart (true/false)
  const isInCart = (productId) => {
    return cartItems.some((i) => i.productId?._id === productId);
  };

  // 2. The addToCart function remains the same, it adds a quantity of 1
  const addToCart = async (product) => {
    if (processingItems[product._id]) return;

    setProcessingItems(prev => ({ ...prev, [product._id]: true }));
    
    try {
      const updatedCart = await cartAPI.add(product._id, 1);
      setCartItems(Array.isArray(updatedCart) ? updatedCart : (updatedCart.cartItems || []));
    } catch (err) {
      console.error("Failed to add to cart:", err);
      alert("Failed to add to cart. Please make sure you're logged in.");
    } finally {
      setProcessingItems(prev => ({ ...prev, [product._id]: false }));
    }
  };

  // 3. A new function specifically for removing an item from the cart
  const removeFromCart = async (productId) => {
    if (processingItems[productId]) return;

    // Find the cart item's unique ID from its product ID
    const cartItem = cartItems.find(item => item.productId?._id === productId);
    if (!cartItem) return;

    setProcessingItems(prev => ({ ...prev, [productId]: true }));
    
    try {
      const updatedCart = await cartAPI.remove(cartItem._id);
      setCartItems(Array.isArray(updatedCart) ? updatedCart : (updatedCart.cartItems || []));
    } catch (err) {
      console.error("Failed to remove from cart:", err);
      alert("Failed to remove item from cart.");
    } finally {
      setProcessingItems(prev => ({ ...prev, [productId]: false }));
    }
  };

  // 4. The quantity increase/decrease functions are no longer needed and have been removed.

  if (loading) {
    return (
      <div className="shop-container loading-container">
        <div className="spinner"></div> {/* Optional: Add a spinner for better UX */}
        <p>Loading Artworks...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="shop-container error-container">
        <p>{error}</p>
        <button onClick={() => window.location.reload()}>Retry</button>
      </div>
    );
  }

  return (
    <div className="shop-container">
      <h1 className="shop-title">Shop Exclusive Art</h1>
      <p className="shop-subtitle">Discover unique artworks crafted by talented artists ✨</p>

      <div className="art-grid">
        {artworks.length === 0 ? (
          <p className="no-artworks-message">
            No artworks are available at the moment. Please check back soon!
          </p>
        ) : (
          artworks.map((art) => {
            const isProcessing = processingItems[art._id];
            const inCart = isInCart(art._id);

            return (
              <div className="art-card" key={art._id}>
                <img 
                  src={art.imageUrl || 'https://via.placeholder.com/300'} 
                  alt={art.title || 'Artwork'} 
                  className="art-image" 
                  loading="lazy" 
                />
                <div className="art-info">
                  <h3>{art.title || 'Untitled Artwork'}</h3>
                  <p className="description">{art.description || 'No description available.'}</p>
                  <p className="price">₹{art.price?.toLocaleString() || 'Price unavailable'}</p>

                  {/* 5. Simplified button logic */}
                  <div className="cart-controls">
                    {inCart ? (
                      // If the item is in the cart, show a "Remove" button
                      <button
                        className="cart-btn remove"
                        onClick={() => removeFromCart(art._id)}
                        disabled={isProcessing}
                      >
                        {isProcessing ? "Removing..." : "Remove from Cart"}
                      </button>
                    ) : (
                      // Otherwise, show the "Add to Cart" button
                      <button
                        className="cart-btn add"
                        onClick={() => addToCart(art)}
                        disabled={isProcessing}
                      >
                        {isProcessing ? "Adding..." : "🛒 Add to Cart"}
                      </button>
                    )}
                  </div>
                </div>
              </div>
            );
          })
        )}
      </div>
    </div>
  );
};

export default Shop;