import { Minus, Plus, Trash2, ShoppingCart } from 'lucide-react';
import { useCartStore } from '@/store/cart';
import type { CartItem } from '@/types';

interface CartPanelProps {
  onCheckout: () => void;
}

export function CartPanel({ onCheckout }: CartPanelProps) {
  const { items, total, itemCount, updateQuantity, removeItem } = useCartStore();

  if (items.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-gray-400">
        <ShoppingCart className="w-16 h-16 mb-4" />
        <p className="text-lg">Carrito vacio</p>
        <p className="text-sm">Selecciona productos para agregar</p>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full">
      {/* Cart items */}
      <div className="flex-1 overflow-y-auto no-scrollbar p-4">
        {items.map((item) => (
          <CartItemRow
            key={item.product.id}
            item={item}
            onUpdateQuantity={(qty) => updateQuantity(item.product.id, qty)}
            onRemove={() => removeItem(item.product.id)}
          />
        ))}
      </div>

      {/* Cart summary */}
      <div className="border-t border-gray-200 p-4 bg-white">
        <div className="flex justify-between text-lg font-bold mb-4">
          <span>Total ({itemCount} productos)</span>
          <span className="text-primary-600">${total.toFixed(2)}</span>
        </div>

        <button
          className="btn-primary w-full btn-lg"
          onClick={onCheckout}
        >
          Cobrar
        </button>
      </div>
    </div>
  );
}

interface CartItemRowProps {
  item: CartItem;
  onUpdateQuantity: (quantity: number) => void;
  onRemove: () => void;
}

function CartItemRow({ item, onUpdateQuantity, onRemove }: CartItemRowProps) {
  return (
    <div className="cart-item">
      <div className="flex-1 min-w-0">
        <p className="font-medium truncate">{item.product.name}</p>
        <p className="text-sm text-gray-500">
          ${item.unitPrice.toFixed(2)} c/u
        </p>
      </div>

      <div className="flex items-center gap-2 ml-4">
        {/* Quantity controls */}
        <button
          className="quantity-btn bg-gray-100 hover:bg-gray-200 text-gray-700"
          onClick={() => onUpdateQuantity(item.quantity - 1)}
        >
          <Minus className="w-4 h-4" />
        </button>

        <span className="w-8 text-center font-medium">{item.quantity}</span>

        <button
          className="quantity-btn bg-primary-100 hover:bg-primary-200 text-primary-700"
          onClick={() => onUpdateQuantity(item.quantity + 1)}
        >
          <Plus className="w-4 h-4" />
        </button>

        {/* Subtotal */}
        <span className="w-20 text-right font-medium">
          ${item.subtotal.toFixed(2)}
        </span>

        {/* Remove button */}
        <button
          className="p-2 text-red-500 hover:bg-red-50 rounded-full"
          onClick={onRemove}
        >
          <Trash2 className="w-4 h-4" />
        </button>
      </div>
    </div>
  );
}
