export const ProductManager: React.FC<{ sellerId: string }> = ({ sellerId }) => {
  const { products, loading, refetch } = useSellerProducts(sellerId);
  const [editingProduct, setEditingProduct] = useState<Product | null>(null);

  const handleInventoryUpdate = async (productId: string, newStock: number) => {
    await api.patch(`/products/${productId}/inventory`, { stock: newStock });
    refetch();
    toast.success('Inventory updated');
  };

  const handleFlashPrice = async (productId: string, flashPrice: number, duration: number) => {
    await api.post(`/products/${productId}/flash-price`, {
      flashPrice,
      expiresAt: new Date(Date.now() + duration * 60000),
    });
    toast.success(`Flash price set for ${duration} minutes!`);
  };

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">My Products</h2>
        <button 
          onClick={() => setEditingProduct({} as Product)}
          className="px-4 py-2 bg-green-500 text-white rounded-lg"
        >
          + Add Product
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {products.map(product => (
          <div key={product.id} className="border rounded-lg p-4 hover:shadow-md transition">
            <img src={product.images[0]} className="w-full h-48 object-cover rounded-lg mb-3" />
            
            <div className="flex justify-between items-start">
              <div>
                <h3 className="font-semibold">{product.name}</h3>
                <p className="text-sm text-gray-500">{product.category}</p>
              </div>
              <Badge color={product.stock > 10 ? 'green' : product.stock > 0 ? 'yellow' : 'red'}>
                {product.stock} in stock
              </Badge>
            </div>

            <div className="mt-3 flex justify-between items-center">
              <div>
                <span className="text-lg font-bold">${product.price}</span>
                {product.flashPrice && (
                  <span className="ml-2 text-sm text-red-500 line-through">
                    ${product.flashPrice}
                  </span>
                )}
              </div>
              
              <div className="flex gap-2">
                <button
                  onClick={() => setEditingProduct(product)}
                  className="p-2 text-gray-600 hover:bg-gray-100 rounded"
                >
                  <Edit size={16} />
                </button>
                <button
                  onClick={() => handleFlashPrice(product.id, product.price * 0.8, 30)}
                  className="p-2 text-red-500 hover:bg-red-50 rounded"
                  title="Set 20% off flash price (30 min)"
                >
                  <Zap size={16} />
                </button>
              </div>
            </div>

            {/* Live Inventory Slider */}
            <div className="mt-3">
              <label className="text-xs text-gray-500">Quick Stock Update</label>
              <input
                type="range"
                min="0"
                max={product.maxStock}
                value={product.stock}
                onChange={(e) => handleInventoryUpdate(product.id, parseInt(e.target.value))}
                className="w-full"
              />
            </div>
          </div>
        ))}
      </div>

      {editingProduct && (
        <ProductEditModal
          product={editingProduct}
          onClose={() => setEditingProduct(null)}
          onSave={refetch}
          categories={PRODUCT_CATEGORIES}
        />
      )}
    </div>
  );
}