client/src/components/cart/cart-sidebar.tsx

import { useLocation } from "wouter";
import { useCart } from "@/hooks/use-cart";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
import { ShoppingCart, Plus, Minus, Trash2, X } from "lucide-react";
import { useToast } from "@/hooks/use-toast";

interface CartSidebarProps {
  isOpen: boolean;
  onClose: () => void;
}

export default function CartSidebar({ isOpen, onClose }: CartSidebarProps) {
  const [, setLocation] = useLocation();
  const { items, itemCount, subtotal, tax, total, updateQuantity, removeItem } = useCart();
  const { toast } = useToast();

  const handleUpdateQuantity = async (id: string, newQuantity: number) => {
    if (newQuantity < 1) return;
    try {
      await updateQuantity(id, newQuantity);
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to update quantity.",
      });
    }
  };

  const handleRemoveItem = async (id: string) => {
    try {
      await removeItem(id);
      toast({
        title: "Item removed",
        description: "Item has been removed from your cart.",
      });
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to remove item.",
      });
    }
  };

  const handleCheckout = () => {
    onClose();
    setLocation('/checkout');
  };

  return (
    <Sheet open={isOpen} onOpenChange={onClose}>
      
      <SheetContent side="right" className="w-96 flex flex-col">
        <SheetHeader>
          <SheetTitle className="flex items-center justify-between" data-testid="cart-title">
            Shopping Cart
            <Button
              variant="ghost"
              size="icon"
              onClick={onClose}
              data-testid="cart-close"
            >
              <X className="h-4 w-4" />
            </Button>
          </SheetTitle>
        </SheetHeader>

        {/* Cart Items */}
        <div className="flex-1 overflow-y-auto py-4" data-testid="cart-items">
          {items.length === 0 ? (
            <div className="text-center py-12">
              <ShoppingCart className="h-12 w-12 text-gray-400 mx-auto mb-4" />
              <p className="text-gray-500" data-testid="empty-cart">Your cart is empty</p>
            </div>
          ) : (
            <div className="space-y-4">
              {items.map((item) => (
                <div 
                  key={item.id} 
                  className="flex items-center space-x-4 p-3 border border-gray-200 rounded-lg"
                  data-testid={`cart-item-${item.id}`}
                >
                  {/* Product Image */}
                  <div className="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                    {item.product?.images && item.product.images.length > 0 ? (
                      <img
                        src={item.product.images[0]}
                        alt={item.product.title}
                        className="w-full h-full object-cover"
                        data-testid={`cart-item-image-${item.id}`}
                      />
                    ) : (
                      <div className="w-full h-full bg-gray-200 flex items-center justify-center">
                        <span className="text-xs text-gray-400">No Image</span>
                      </div>
                    )}
                  </div>

                  <div className="flex-1">
                    <h3 className="font-medium text-gray-900 text-sm line-clamp-2" data-testid={`cart-item-title-${item.id}`}>
                      {item.product?.title || 'Unknown Product'}
                    </h3>
                    <p className="text-xs text-gray-500" data-testid={`cart-item-seller-${item.id}`}>
                      {item.product?.store?.name || item.product?.seller?.username || 'Unknown Seller'}
                    </p>
                    
                    <div className="flex items-center justify-between mt-1">
                      <span className="font-semibold text-blue-600" data-testid={`cart-item-price-${item.id}`}>
                        ₹{item.product ? parseFloat(item.product.price).toFixed(2) : '0.00'}
                      </span>
                      
                      <div className="flex items-center space-x-2">
                        <Button
                          size="icon"
                          variant="outline"
                          className="h-6 w-6"
                          onClick={() => handleUpdateQuantity(item.id, item.quantity - 1)}
                          disabled={item.quantity <= 1}
                          data-testid={`cart-decrease-${item.id}`}
                        >
                          <Minus className="h-3 w-3" />
                        </Button>
                        
                        <span className="text-sm w-8 text-center" data-testid={`cart-quantity-${item.id}`}>
                          {item.quantity}
                        </span>
                        
                        <Button
                          size="icon"
                          variant="outline"
                          className="h-6 w-6"
                          onClick={() => handleUpdateQuantity(item.id, item.quantity + 1)}
                          data-testid={`cart-increase-${item.id}`}
                        >
                          <Plus className="h-3 w-3" />
                        </Button>
                      </div>
                    </div>
                  </div>

                  <Button
                    size="icon"
                    variant="ghost"
                    className="text-red-500 hover:text-red-700 h-8 w-8"
                    onClick={() => handleRemoveItem(item.id)}
                    data-testid={`cart-remove-${item.id}`}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Cart Summary */}
        {items.length > 0 && (
          <div className="border-t pt-4">
            <div className="space-y-2 mb-4" data-testid="cart-summary">
              <div className="flex justify-between text-sm">
                <span className="text-gray-600">Subtotal:</span>
                <span className="text-gray-900" data-testid="cart-subtotal">
                  ₹{subtotal.toFixed(2)}
                </span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-gray-600">Shipping:</span>
                <span className="text-green-600" data-testid="cart-shipping">Free</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-gray-600">Tax:</span>
                <span className="text-gray-900" data-testid="cart-tax">
                  ₹{tax.toFixed(2)}
                </span>
              </div>
              <Separator />
              <div className="flex justify-between font-semibold">
                <span className="text-gray-900">Total:</span>
                <span className="text-gray-900" data-testid="cart-total">
                  ₹{total.toFixed(2)}
                </span>
              </div>
            </div>

            <div className="space-y-2">
              <Button
                className="w-full bg-blue-600 hover:bg-blue-700"
                onClick={handleCheckout}
                data-testid="checkout-button"
              >
                Proceed to Checkout
              </Button>
              <Button
                variant="outline"
                className="w-full"
                onClick={onClose}
                data-testid="continue-shopping"
              >
                Continue Shopping
              </Button>
            </div>
          </div>
        )}
      </SheetContent>
    </Sheet>
  );
}