Cart.jsx

// // // src/pages/public/Cart.jsx
// import React, { useState, useEffect } from "react";
// import { useNavigate } from "react-router-dom";
// import { cart as cartAPI } from "../../api";
// import "../../styles/cart.css";

// function Cart() {
//   const navigate = useNavigate();
//   const [cartItems, setCartItems] = useState([]);
//   const [loading, setLoading] = useState(true);
//   const [error, setError] = useState("");

//   useEffect(() => {
//     fetchCart();
//   }, []);

//   const fetchCart = async () => {
//     try {
//       console.log("Fetching cart...");
//       const data = await cartAPI.get();
//       console.log("Cart data received:", data);
      
//       const items = Array.isArray(data) ? data : (data.cartItems || []);
//       setCartItems(items);
      
//       if (items.length === 0) {
//         console.log("Cart is empty");
//       }
//     } catch (err) {
//       console.error("Failed to fetch cart:", err);
//       console.error("Error details:", err.response?.data);
      
//       if (err.response?.status === 401 || err.response?.status === 403) {
//         setError("Please log in to view your cart");
//       } else {
//         setError("Failed to load cart items. Please try again later.");
//       }
//     } finally {
//       setLoading(false);
//     }
//   };

//   const handleRemove = async (itemId) => {
//     try {
//       console.log("Removing item:", itemId);
//       await cartAPI.remove(itemId);
//       setCartItems((prev) => prev.filter((item) => item._id !== itemId));
//     } catch (err) {
//       console.error("Failed to remove item:", err);
//       alert("Failed to remove item from cart");
//     }
//   };
// //   <button
// //   className="remove-btn"
// //   onClick={() => handleRemove(item._id, item.productId._id)}
// // >
// //   Remove
// // </button>

//   const handleUpdateQuantity = async (itemId, newQuantity) => {
//     if (newQuantity < 1) {
//       handleRemove(itemId);
//       return;
//     }

//     try {
//       console.log("Updating quantity:", { itemId, newQuantity });
//       await cartAPI.update(itemId, newQuantity);
//       setCartItems((prev) =>
//         prev.map((item) =>
//           item._id === itemId ? { ...item, quantity: newQuantity } : item
//         )
//       );
//     } catch (err) {
//       console.error("Failed to update quantity:", err);
//       alert("Failed to update quantity");
//     }
//   };

//   const totalPrice = cartItems.reduce((total, item) => {
//     const price = item.productId?.price || 0;
//     const quantity = item.quantity || 0;
//     return total + price * quantity;
//   }, 0);

//   if (loading) {
//     return (
//       <div className="cart-page">
//         <div className="loading-container">
//           <p style={{ textAlign: "center", marginTop: "2rem" }}>Loading cart...</p>
//         </div>
//       </div>
//     );
//   }

//   return (
//     <div className="cart-page">
//       <div className="cart-container">
//         <h1 className="cart-title">Your Cart</h1>

//         {error && (
//           <div className="error-message-box" style={{
//             color: "#D8000C",
//             textAlign: "center", 
//             padding: "1rem",
//             backgroundColor: "#FFD2D2",
//             borderRadius: "4px",
//             border: "1px solid #D8000C",
//             margin: "1rem 0"
//           }}>
//             {error}
//           </div>
//         )}

//         {cartItems.length === 0 && !error ? (
//           <div className="cart-empty">
//             <p>🛒 Your cart is empty. Go add some art!</p>
//             <button className="go-shop-btn" onClick={() => navigate("/shop")}>
//               Explore Shop
//             </button>
//           </div>
//         ) : !error && (
//           <div className="cart-items">
//             {cartItems.map((item) => {
//               if (!item.productId) {
//                 console.warn("Cart item missing valid productId:", item);
//                 return (
//                   <div key={item._id || Math.random()} className="cart-item cart-item-error">
//                     <p>Error loading item details.</p>
//                     <button className="remove-btn" onClick={() => handleRemove(item._id)}>Remove</button>
//                   </div>
//                 ); 
//               }
              
//               return (
//                 <div key={item._id} className="cart-item">
//                   <img
//                     src={item.productId?.imageUrl || "https://via.placeholder.com/80"}
//                     alt={item.productId?.title || "Product"}
//                     className="cart-item-image"
//                   />
//                   <div className="cart-item-details">
//                     <h3>{item.productId?.title || "Unknown Product"}</h3>
//                     <p>Price: ₹{Number(item.productId?.price || 0).toFixed(2)}</p>

//                     <div className="quantity-control">
//                       <label>Quantity:</label>
//                       <div className="quantity-selector">
//                         <button
//                           onClick={() =>
//                             handleUpdateQuantity(item._id, item.quantity - 1)
//                           }
//                           aria-label={`Decrease quantity of ${item.productId?.title}`}
//                         >
//                           -
//                         </button>
//                         <span>{item.quantity}</span>
//                         <button
//                           onClick={() =>
//                             handleUpdateQuantity(item._id, item.quantity + 1)
//                           }
//                           aria-label={`Increase quantity of ${item.productId?.title}`}
//                         >
//                           +
//                         </button>
//                       </div>
//                     </div>

//                     <button
//                       className="remove-btn"
//                       onClick={() => handleRemove(item._id)}
//                       aria-label={`Remove ${item.productId?.title} from cart`}
//                     >
//                       Remove
//                     </button>
//                   </div>
//                 </div>
//               );
//             })}
//           </div>
//         )}

//         {cartItems.length > 0 && !error && (
//           <div className="cart-footer">
//             <p className="cart-total">Total: ₹{totalPrice.toFixed(2)}</p>
//             <button
//               className="checkout-btn"
//               onClick={() => navigate("/payment")}
//             >
//               Proceed to Checkout
//             </button>
//           </div>
//         )}
//       </div>
//     </div>
//   );
// }

// export default Cart;
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { cart as cartAPI } from "../../api";
import "../../styles/cart.css";

function Cart() {
  const navigate = useNavigate();
  const [cartItems, setCartItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [actionLoading, setActionLoading] = useState(false);

  useEffect(() => {
    fetchCart();
  }, []);

  const fetchCart = async () => {
    try {
      setLoading(true);
      console.log("Fetching cart...");
      const data = await cartAPI.get();
      console.log("Cart data received:", data);
      
      const items = Array.isArray(data) ? data : (data.cartItems || []);
      setCartItems(items);
      setError("");
      
      if (items.length === 0) {
        console.log("Cart is empty");
      }
    } catch (err) {
      console.error("Failed to fetch cart:", err);
      console.error("Error details:", err.response);
      
      if (err.message?.includes('401') || err.message?.includes('403')) {
        setError("Please log in to view your cart");
      } else {
        setError("Failed to load cart items. Please try again later.");
      }
    } finally {
      setLoading(false);
    }
  };

  const handleRemove = async (itemId) => {
    if (!itemId) {
      console.error("No itemId provided");
      alert("Error: Invalid item ID");
      return;
    }

    if (actionLoading) return;

    try {
      setActionLoading(true);
      console.log("Removing item with ID:", itemId);
      
      // Call the API to remove the item
      const response = await cartAPI.remove(itemId);
      console.log("Remove response:", response);
      
      // Update UI by filtering out the removed item
      setCartItems((prev) => prev.filter((item) => item._id !== itemId));
      console.log("Item removed successfully from UI");
      
    } catch (err) {
      console.error("Failed to remove item:", err);
      console.error("Error message:", err.message);
      console.error("Error response:", err.response);
      
      // Show specific error messages
      if (err.message?.includes('404')) {
        alert("Item not found in cart. Refreshing...");
        fetchCart();
      } else if (err.message?.includes('401') || err.message?.includes('403')) {
        alert("Please log in to remove items");
        navigate('/login');
      } else {
        alert("Failed to remove item from cart. Please try again.");
      }
    } finally {
      setActionLoading(false);
    }
  };

  const handleUpdateQuantity = async (itemId, newQuantity) => {
    if (actionLoading) return;

    if (newQuantity < 1) {
      handleRemove(itemId);
      return;
    }

    try {
      setActionLoading(true);
      console.log("Updating quantity:", { itemId, newQuantity });
      
      await cartAPI.update(itemId, newQuantity);
      
      // Update UI optimistically
      setCartItems((prev) =>
        prev.map((item) =>
          item._id === itemId ? { ...item, quantity: newQuantity } : item
        )
      );
      console.log("Quantity updated successfully");
    } catch (err) {
      console.error("Failed to update quantity:", err);
      
      if (err.message?.includes('404')) {
        alert("Item not found. Refreshing cart...");
        fetchCart();
      } else {
        alert("Failed to update quantity. Please try again.");
      }
    } finally {
      setActionLoading(false);
    }
  };

  const totalPrice = cartItems.reduce((total, item) => {
    const price = item.productId?.price || 0;
    const quantity = item.quantity || 0;
    return total + price * quantity;
  }, 0);

  if (loading) {
    return (
      <div className="cart-page">
        <div className="loading-container">
          <div className="spinner"></div>
          <p style={{ textAlign: "center", marginTop: "2rem" }}>Loading cart...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="cart-page">
      <div className="cart-container">
        <h1 className="cart-title">🛒 Your Cart</h1>

        {error && (
          <div className="error-message-box" style={{
            color: "#D8000C",
            textAlign: "center", 
            padding: "1rem",
            backgroundColor: "#FFD2D2",
            borderRadius: "4px",
            border: "1px solid #D8000C",
            margin: "1rem 0"
          }}>
            {error}
            {error.includes("log in") && (
              <button 
                onClick={() => navigate('/login')}
                style={{
                  marginTop: "0.5rem",
                  marginLeft: "1rem",
                  padding: "0.5rem 1rem",
                  backgroundColor: "#D8000C",
                  color: "white",
                  border: "none",
                  borderRadius: "4px",
                  cursor: "pointer"
                }}
              >
                Go to Login
              </button>
            )}
          </div>
        )}

        {cartItems.length === 0 && !error ? (
          <div className="cart-empty">
            <p>🛒 Your cart is empty. Go add some art!</p>
            <button className="go-shop-btn" onClick={() => navigate("/shop")}>
              Explore Shop
            </button>
          </div>
        ) : !error && (
          <div className="cart-items">
            {cartItems.map((item) => {
              if (!item.productId) {
                console.warn("Cart item missing valid productId:", item);
                return (
                  <div key={item._id || Math.random()} className="cart-item cart-item-error">
                    <p>⚠️ Error loading item details.</p>
                    <button 
                      className="remove-btn" 
                      onClick={() => handleRemove(item._id)}
                      disabled={actionLoading}
                    >
                      Remove
                    </button>
                  </div>
                ); 
              }
              
              return (
                <div key={item._id} className="cart-item">
                  <img
                    src={item.productId?.imageUrl || "https://via.placeholder.com/80"}
                    alt={item.productId?.title || "Product"}
                    className="cart-item-image"
                  />
                  <div className="cart-item-details">
                    <h3>{item.productId?.title || "Unknown Product"}</h3>
                    <p>Price: ₹{Number(item.productId?.price || 0).toFixed(2)}</p>

                    <div className="quantity-control">
                      <label>Quantity:</label>
                      <div className="quantity-selector">
                        <button
                          onClick={() => handleUpdateQuantity(item._id, item.quantity - 1)}
                          disabled={actionLoading}
                          aria-label={`Decrease quantity of ${item.productId?.title}`}
                        >
                          -
                        </button>
                        <span>{item.quantity}</span>
                        <button
                          onClick={() => handleUpdateQuantity(item._id, item.quantity + 1)}
                          disabled={actionLoading}
                          aria-label={`Increase quantity of ${item.productId?.title}`}
                        >
                          +
                        </button>
                      </div>
                    </div>

                    <button
                      className="remove-btn"
                      onClick={() => handleRemove(item._id)}
                      disabled={actionLoading}
                      aria-label={`Remove ${item.productId?.title} from cart`}
                    >
                      {actionLoading ? 'Removing...' : 'Remove'}
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {cartItems.length > 0 && !error && (
          <div className="cart-footer">
            <p className="cart-total">Total: ₹{totalPrice.toFixed(2)}</p>
            <button
              className="checkout-btn"
              onClick={() => navigate("/payment")}
              disabled={actionLoading}
            >
              Proceed to Checkout
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

export default Cart;